Мир JavaScript движется быстро. Мир FrontEnd и веб-разработки движется еще быстрее. И пока число разработчиков и технических специалистов FrontEnd растет из года в год, сама система стремится к стандартизации. Появление новых технологий и инструментов уже меняет игру. Пусть до 2020 года еще 3.5 месяца, мы решили проанализировать тенденции в джунглях FrontEnd и предположить, что станет популярным в 2020 году.
Идея framework Agnostics
В сфере FrontEnd разработки постепенно формируется мнение, что веб-компоненты не зависят от фреймворка и могут отлично работать без него. Эти компоненты предоставляют Custom Element, API-интерфейс Javascript, который позволяет вам определять новый тип HTML-тегов, шаблоны HTML для определения макетов и, конечно же, Shadow DOM. Известными инструментами, которые нужно знать в этом пространстве, являются Lit-html (и Lit-element ), StencilJS , SvelteJS и, конечно, Bit.
Изоляция и повторное использование компонентов
Говоря о разработке FrontEnd и компонентах пользовательского интерфейса в ближайшем будущем, нельзя игнорировать удивительное обещание и возможности Bit. Благодаря открытому исходному коду он изолирует и превращает ваши компоненты (или любой повторно используемый код JS) в общие строительные блоки, которые вы можете использовать во всех ваших проектах и приложениях. Волшебство: вы также можете использовать Bit для разработки одних и тех же компонентов из разных проектов, получая при этом полный контроль над изменениями исходного кода и всего графа зависимостей. Проще говоря, с помощью Bit вы можете мгновенно использовать компонент из одного проекта в другом проекте, разрабатывать и заменять его обоими, а также синхронизировать изменения. При работе в команде этот рабочий процесс расширяется за счет bit.dev, где вы можете организовать и поделиться кодом своей команды.
ES Модули и CDN
ES Modules - стандарт для работы с модулями в браузере, стандартизированный ECMAScript. Используя их, вы можете легко инкапсулировать функциональность в модули , которые могут потребляться через CDN и т.д. С выпуском Firefox 60, все основные браузеры будут поддерживать модули ES. Кроме того, интеграция модуля ES для WebAssemblyпроизойдет в ближайшие несколько лет.
Компоненты стиля
За последние два года было много разговоров о компонентах стиля. Вариантов предостаточно, от встроенных модулей CSS до CSS в JS и стилевых компонентах. Когда речь заходит о стилизации, в ближайшие несколько лет можно ожидать, что система проектирования компонентов будет включать в себя как логические, так и тематические компоненты. Таким образом, вы можете создать систему проектирования, которая развивается и изменяется по мере необходимости, и не навязывает громоздкую библиотеку разработчикам, которые не желают ее принимать. Сами инструменты проектирования, такие как Sketch или Figma, уже используют для этой цели компоненты.
Клиент API GraphQL для приложений, управляемых данными
Работа с GraphQL открывает интересные возможности для клиентов с помощью компонентов. Используя Apollo, вы можете легко создавать компоненты пользовательского интерфейса, которые извлекают данные через GraphQL. В сочетании с Bit вы можете импортировать и разрабатывать эти компоненты прямо из тех проектов, над которыми вы работаете. Благодаря интеллектуальному управлению API-интерфейсами, вы можете упростить рабочий процесс, связанный с разработкой приложений на основе данных, и ускорить темп работы.
Компонентные инструменты проектирования
Поскольку компоненты становятся частью системы проектирования, разрыв между дизайнером и разработчиками будет сокращен. Создавая эскизы на основе уже созданных зависимых связей между компонентами дизайна, вы получите возможность разрабатывать и обновлять проекты модульным способом. Интеграция в компоненты кода уже прорастает, и это всего лишь вопрос времени. Такие инструменты, как Figma, созданы с нуля на основе многократно используемых элементов пользовательского интерфейса. Framer Team создает инструмент для дизайнеров, которые пишут код, с определенной степенью контроля превращения элементов пользовательского интерфейса в повторно используемые компоненты React.
Заключение
Можно с уверенностью сказать, что общей тенденцией будет стандартизация пользовательского интерфейса, модульность и компоновка на основе компонентов, которые влияют на все - от стилизации до тестирования и даже на управление состоянием, а также на лучшую модульность в целом. Это будет включать в себя технологии, построенные вокруг веб-компонентов, ES-модулей, компонентно-ориентированных инструментов для стилей или управления состоянием и многое другое.
