Раньше UI-разработчикам было достаточно знать HTML, CSS и jQuery для создания интерактивных сайтов, но сегодня этого мало. Экосистема навыков для разработки постоянно меняется: инструменты, библиотеки, фреймворки, etc. Необходимо постоянно развиваться.

Фреймворки

В 2020 году грядет великая битва между ReactJS от Facebook со 140 000 звезд на GitHub и Vue JS со 153 000 звезд. Для примера, у Angular “звездный” показатель остановился на отметке 53 000.

Немного визуализации поисковых запросов в 2019 году:

Как видишь, Angular не может угнаться за конкурентами, а Svelte даже не рассматривается, как соперника.

Исходя из этого, в 2020 году для разработки UI на JavaScript нужно сосредоточиться на React и Vue. Angular – вариант, если ты работаешь над крупными корпоративными проектами.

Статические генераторы сайтов

Статические генераторы сочетают в себе мощь серверного рендеринга (очень важного для SEO и начальной загрузки страницы) и одностраничного приложения.

Многие современные проекты выбирают генераторы, даже если они не нуждаются в серверной обработке, потому что решения, такие как Next или Nuxt, поставляются с удобной markdown-разметкой, интегрированными тестами и кучей различных модулей.

Если ты серьезно задумался на тему front-end разработки, изучи внимательно следующие продукты и попытайся получить максимум практического опыта:

• Next.js (React-based)

• Nuxt.js (Vue-based)

• Gatsby (React-based)

• Gridsome (Vue-based).

JAMstack

Термин JAMstack обозначает JavaScript (запущенный на клиенте, например, React, Vue или VanillaJS), API (серверные процессы доступные по HTTPS через JavaScript) и Markup (шаблонную разметку, предварительно собранную во время развертывания).

Этот способ создания веб-сайтов и приложений применяется для повышения производительности: снижаются затраты на масштабирование, обеспечивается более высокая безопасность, а ты получаешь крутой опыт разработчика.

Есть рекомендации по использованию JAMstack:

Весь проект обслуживается на CDN. Поскольку сервер не нужен, код может находиться на CDN, что позволит улучшить скорость и производительность.

Все живет в Git. Каждый юзер должен иметь возможность клонировать весь проект из Git-а без БД или сложной настройки.

Автоматизированная сборка. Автоматизируй сборку с помощью webhooks или облачных сервисов.

Атомное развертывание. Дабы избежать несогласованного состояния, вследствие повторного деплоя кучи файлов в больших проектах, юзай atomic deploy. Эта штука ожидает, пока все файлы будут загружены прежде чем изменения вступят в силу.

Мгновенное аннулирование кэша. Когда сайт “разрастется”, убедись, что твой CDN умеет обрабатывать очистку кэша, чтобы изменения становились видимыми быстрее.

Вот тебе обучающие ресурсы для изучения JAMstacks:

• JAMstack

• JAMstack WTF

• Все, что ты должен знать о JAMstack

PWA

Прогрессивное веб-приложение (PWA) выбирают все больше и больше компаний в качестве альтернативы “обычным”.

Особенности PWA:

• надежность (мгновенная загрузка, функционирование без интернета);

• скорость (плавная анимация, быстрая реакция на пользователя);

• привлекательность (схожесть с нативным приложением, юзабилити).

Причины создания PWA:

• можно добавить себе на главный экран прямо из браузера;

• нет необходимости в подключении к интернету;

• поддержка push-уведомлений;

• использование функций Google’s Lighthouse.

Заинтересовался этой темой? Держи дополнительные ресурсы:

• Прогрессивные веб-приложения

• Твое первое PWA

GraphQL

В то время как REST давно является стандартом для разработки веб-API, RESTful API все больше теряет свою актуальность, когда речь заходит о “подстраиваемости” под быстро растущие потребности клиентов.

GraphQL был разработан Facebook для решения конкретных проблем, с которыми сталкиваются разработчики при работе с Restful API.

Преимущество использования GraphQL – это использование жесткой типизации. На сервере GraphQL все определяется по схеме schema definition language (SDL). После того, как она была инициализирована, фронтенд- и бекенд-разработчики могут работать независимо друг от друга, потому что они знают о наличии жесткой структуры данных.

Если хочешь узнать больше о GraphQL, ознакомься с этими ресурсами:

• GraphQL

• How to GraphQL

• Начало работы с GraphQL Content API

• GraphQL: язык запросов

Редакторы Кода/IDE

Как и в 2019 году, VS Code будет редактором номер один для большинства UI-инженеров.

Ребята из Microsoft снабдили его кучей плюшек: автодополнение кода, хайлайтинг и прочее. А самое интересное, что он может расширяться почти бесконечно с помощью плагинов из местного marketplace. Именно эта особенность делает VS Code настолько привлекательным. Вот несколько отличных расширений для затравки:

• JavaScript (ES6) code snippets

• Prettier

• npm

• CSS Peek

• Vetur

• ESLint

• Live Sass Compiler

• Debugger for Chrome

• Live Server

• Beautify

Тестирование

Не оттестированный код не должен попасть в продакшн!

В твоих личных проектах ты можешь не делать никаких тестов, но при работе в коммерческих и корпоративных средах это строго обязательно. Поэтому в любой непонятной ситуации интегрируй тесты в рабочий процесс.

Можно различать такие тестовые случаи:

• Модульное тестирование. Изолированное тестирование компонента или функции.

• Интеграционные тесты. Тестирование взаимодействий между компонентами.

• Сквозное тестирование. Тестирование пользовательских потоков в браузере.

Если ты хочешь в перспективе получить должность сеньора или держишь курс на работу в крупной компании – работай над своими навыками тестирования.

Чистый код

Умение писать чистый код является важным скиллом, который пользуется большим спросом и является необходимым для любого разработчика. Чистый код должен быть аккуратным и лаконичным. Все тесты пишутся в чистом стиле, не содержат дубликатов и хранят минимум классов, методов и функций.

Вот некоторые правила написания чистого кода:

• создание очевидных имен для переменных;

• функции должны быть компактными и иметь минимум аргументов;

• комментарии необязательны, ведь код должен быть понятен и без них.

Почитай труды Роберта С. Мартина: он отлично рассказывает о чистом коде и его применении.

Git

Git – самая популярная система контроля версий. Это важно для любого инженера, в том числе front-end.

Материалы для изучения:

• Объяснение основных понятий Git и как использовать GitHub

• Git за полчаса: руководство для начинающих

Коммуникация

Это последний, но не менее важный пункт. Приводим тебе список необходимых навыков общения в современном обществе:

• командная работа

• терпение

• непредвзятость

• способность прийти к альтернативе

Но что же будет действительно востребовано в 2020, как думаешь?