Семь самоуверенных прогнозов фронтенд-разработчиков, вероятно, должны начать изучать ...
Мир JavaScript быстро развивается.
Мир фронтенд-разработки (и веб-разработки) развивается невероятно быстро. Сегодня, если вы не знакомы с элементами Webpack, React Hooks, Jest, Vue и NG, вы начинаете чувствовать, что разрыв увеличивается. Но все меняется.
В то время как количество разработчиков и технических специалистов в джунглях фронтэнда растет из года в год, экосистема стремится к стандартизации. Появление новых технологий и инструментов уже меняет правила игры.
Можно с уверенностью сказать, что общей тенденцией будет стандартизация пользовательского интерфейса, составление компонентов на основе компонентов, которое влияет на все, от стилей до тестирования и даже управления состоянием, а также на лучшую модульность в целом. Это будет включать технологии, построенные на основе веб-компонентов, модулей ES, компонентно-ориентированных инструментов и многое другое.
Это самоуверенное краткое и частичное наблюдение за состоянием фронтенд-разработки на несколько лет вперед. Естественно, он упускает из виду миллион вещей, поэтому, пожалуйста, не стесняйтесь прыгать ниже и добавлять свои идеи.
1. Веб-компоненты Framework Agnostics
Так что, по сути, это будущее. Почему? потому что эти чистые веб-компоненты не зависят от фреймворка и могут работать без фреймворка или с какой-либо структурой - стандартизация. Потому что они свободны от усталости от JS и поддерживаются современными браузерами. Потому что размер их пакетов и потребление будут оптимальными, а рендеринг VDOM просто потрясающий.
Эти компоненты предоставляют Custom Element, Javascript API, который позволяет вам определять новый тип html-тега, HTML-шаблоны для определения макетов и, конечно же, Shadow DOM, который по своей природе зависит от компонента.
Наиболее заметными инструментами, которые следует знать в этой области, являются Lit-html (и Lit-element), StencilJS, SvelteJS. и, конечно же, Bit для многократно используемых модульных компонентов, которые можно напрямую совместно использовать, использовать и разрабатывать где угодно.
Когда вы думаете о будущем разработки пользовательского интерфейса и о том, как принципы модульности, возможности повторного использования, инкапсуляции и стандартизации должны выглядеть в эпоху компонентов, веб-компоненты являются ответом. Узнайте больше ниже.
2. Будущее Framework Wars?
Поэтому мы не будем вдаваться в подробности, «кто лучше и почему», и вы найдете больше ответов на этот вопрос ниже. Вместо этого мы сделаем шаг назад и отметим более широкую картину. Общая «рыночная доля» передовых технологий, связанных с компонентами, растет. Постоянно. Количество новых разработчиков также быстро растет, и есть больше возможностей для использования инструментов.
Итак, какие рамки будут править через 5 лет? никто не знает. Но можно с уверенностью сказать, что это будет лучшая позиция для игры в нативной экосистеме JS, где веб-компоненты управляют домом (каламбур! 😈). React находится в верхней части загрузок NPM. Однако - посмотрите на эти цифры. Кажется, что при реальном использовании Интернета разрыв очень мал.
Шокирует, правда? 😃
С будущей стандартизацией веб-компонентов, не зависящих от фреймворка, можно задаться вопросом, как это может повлиять на войну фреймворков пользовательского интерфейса. И да, React - это не фреймворк… мы знаем.
Погрузитесь в бенчмаркинг фреймворков с реальными данными:
3. Микро-фронтенды
Микро-интерфейсы - это способ разделить монолитную внешнюю кодовую базу на более мелкие и более управляемые части. В результате интерфейсные команды могут пользоваться теми же преимуществами, что и микросервисы: поддерживаемые кодовые базы, автономные команды, независимые выпуски и инкрементные обновления.
Микро-интерфейсы обычно рассматриваются как композиция независимых интерфейсов, которая происходит во время выполнения либо на сервере, либо на стороне клиента.
Хотя интеграция среды выполнения имеет свои преимущества (например, меньшая полезная нагрузка), но она ни в коем случае не является единственным способом достижения композиции независимо доставляемых интерфейсных приложений (цитирую Кэма Джексона).
Используя правильную компонентную модель и правильные инструменты, любая команда может применить модульный подход к созданию веб-приложений и воспользоваться этими преимуществами.
Микро-интерфейсы выходят за рамки простого проектирования программного обеспечения и включают в себя организационный дизайн (Закон Конвея), позволяя небольшим командам самостоятельно владеть и предоставлять функции, чтобы повысить общую продуктивность организации.
Вы можете узнать больше из этих полезных ресурсов:
4. Модули ES и CDN
ES Modules - это стандарт работы с модулями в браузере, стандартизированный ECMAScript. Используя модули ES, вы можете легко инкапсулировать функциональные возможности в модули, которые можно использовать через CDN и т. Д. С выпуском Firefox 60 все основные браузеры будут поддерживать модули ES, и команда Node mteam работает над добавлением поддержки модулей ES в Node. js . Также в ближайшие несколько лет появится интеграция ES модуля для WebAssembly. Только представьте, JS-компоненты изолированы с помощью Bit и потребляются через CDN через bit.dev.
5. Государственное управление
Итак ... что нового в госуправлении? в конце концов, мы все равно прошли через все в глобальном магазине Redux, верно?
Но это может затруднить полное использование модульной и многоразовой природы компонентов. Новый Контекстный API React и Хуки означают, что вам не нужна сторонняя библиотека и вы можете управлять состояниями на уровне функциональных компонентов, улучшая модульность и возможность повторного использования. Итак, забегая вперед, мы могли бы попытаться думать об управлении состоянием больше в терминах инкапсулированных компонентов, а не в терминах глобального хранилища приложений. Просто мысль.
5. Компоненты для укладки как композиция
Итак, последние два года вокруг компонентов стиля было много разговоров. От встроенных модулей CSS или CSS до CSS в JS и стилизованных компонентов и даже промежуточных решений, таких как stylable, вариантов много.
Когда я думаю о стилях в ближайшие несколько лет, мне нравится думать о стилях как о композиции. Это означает, что наша система проектирования компонентов должна включать как логические компоненты, так и компоненты тематики, которые могут быть составлены вместе с помощью таких инструментов, как Bit. Таким образом, вы можете создать дизайн-систему, которая будет развиваться и меняться по мере необходимости и не навязывать громоздкую библиотеку разработчикам, которые не хотят ее применять. Сами инструменты проектирования, такие как Sketch и Figma, используют компоненты для этой цели (объедините их с Bit, и вы получите совершенную систему проектирования компонентов. Это довольно увлекательно.
6. Клиенты GraphQL API для приложений, управляемых данными.
Таким образом, работа с GraphQL открывает перед клиентами захватывающие возможности через компоненты. Используя Apollo, вы можете легко создавать компоненты пользовательского интерфейса, которые извлекают данные через GraphQL. В сочетании с Bit вы можете импортировать и разрабатывать эти компоненты прямо из многообещающих проектов, над которыми вы работаете.
Благодаря интеллектуальному управлению API-интерфейсами мы можем упростить рабочий процесс, связанный с разработкой приложений на основе данных, и ускорить разработку нашей работы. Так что определенно стоит погрузиться в поиски на пару лет вперед.
7. Инструменты проектирования на основе компонентов
По мере того, как компоненты становятся нашей дизайн-системой, разрыв между дизайнером и разработчиками сокращается. Это станет возможным с обеих сторон уравнения, то есть с точки зрения дизайнера и разработчика.
Прочитано:
Sketch уже создал связи зависимости между компонентами дизайна, чтобы вы могли разрабатывать и обновлять проекты модульным способом. Интеграции с компонентами кода уже появляются, и это лишь вопрос времени. Такие инструменты, как Figma, созданы с нуля на основе многоразовых элементов пользовательского интерфейса. Framer Team создает инструмент для дизайнеров, занимающихся программированием, со степенью контроля над преобразованием элементов пользовательского интерфейса в повторно используемые компоненты React. С помощью Bit вы можете превратить разрабатываемые вами компоненты в многократно используемые строительные блоки, которые можно визуально обнаружить, использовать и даже разработать где угодно, преодолевая разрыв со стороны разработчика. Инструмент разработки компонентов Bit + - это мощное будущее. С Bit и веб-компонентами через CDN это означает полноценную композицию.
