В этом году я сосредотачиваю свои «прогнозы» на более широких технологических тенденциях, на которых я настоятельно рекомендую вам сосредоточиться, если вы разработчик Javascript для внешнего интерфейса, внутреннего интерфейса или полного стека. Итак, поехали!

Машинопись

Если вы пишете Javascript прямо сейчас и еще не изучили Typescript, это как раз подходящее время (возможно, даже немного раньше). Если вы ждали победителя в дебатах по Typescript, Flow, JSDoc, доказательство того, что Typescript выиграл там на виду. Сейчас большие проекты с открытым исходным кодом написаны на Typescript, и, судя по моему опыту, крупные коммерческие проекты уже находятся в нем или переходят на него. Angular - это Typescript из коробки.

ИМХО, лучший способ войти в Typescript - это взять существующий проект Javascript, с которым вы уже знакомы, может быть, небольшой побочный проект, над которым вы работаете, или доказательство концепции в работе, и перенести его на Typescript. Это позволит вам познакомиться с синтаксисом и инструментами без одновременного решения новых проблем с кодом. Вот как я это делаю в серии Преобразование в машинописный текст. Мы берем довольно простой код Javascript и шаг за шагом переносим его в Typescript.

Большинство моих видеороликов Blue Collar Coder будут на машинописном тексте в 2021 году, и я собираюсь практиковаться, практиковаться, практиковать его в течение всего года.

Серьезно, вы все, если вы уберете одну вещь из прочтения этого, то вот это; выучить Машинопись. Вакансии, которые в 2021 году отметили Typescript как «приятное занятие», потребуют его в 2022 году.

Версия видео

Если вы хотите посмотреть это видео, вы тоже можете это сделать!

Менеджеры микрогосударств

Redux уже терял популярность еще до того, как появились перехватчики React. Слишком много шаблонов. В итоге Redux Sagas сделал код сложным и трудным для понимания. Затем в 2018 году у нас появились зацепки, и глобальное государство превратилось из врага в давно потерянного друга. Было бы неплохо, если бы история на этом закончилась, но реальность такова, что useState и useContext, хотя и прекрасны, имеют проблемы с эффективностью в больших деревьях React, потому что все, начиная с Provider и ниже, должно обновляться при изменении значения.

Это означает, что если у вас есть состояние, которое используется в разных частях дерева React, для этого вам понадобится какое-то решение для управления. Тогда месть Redux? Едва ли. Есть много новых отличных вариантов диспетчера микрогосударств, которые могут дать вам глобальное состояние без каких-либо проблем с Redux. Некоторые примеры включают Valtio, Jotai, Recoil и Zustand (у которого также есть лучшая целевая страница evaaahhh).

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

Дополнительный бонус: XState - действительно интересная альтернативная система управления состоянием, основанная на машинах состояний. Это действительно интересно, если у вас есть проекты с очень специфическими состояниями пользовательского интерфейса или серверов, это тоже работает. У него также есть супер-приятный визуализатор состояния, который сам по себе стоит своих денег.

GraphQL

GraphQL исполнилось пять лет! Ты можешь в это поверить? Теперь вы можете утверждать, что GraphQL уже должен был взять верх. Но через пять лет после внедрения «архитектурного стиля» REST (это не стандарт) мы все еще использовали XML в качестве формата обмена данными вместо JSON.

Экосистема GraphQL пережила отличный год в 2020 году, и в 2021 году он готов стать еще лучше. Некоторые важные моменты включают в себя сервер Hasura, который одним нажатием кнопки может разместить GraphQL API в любой RDMS. Библиотека graphql / nexus, выпущенная в этом году, значительно упрощает сборку кода и выводит привязки типов для Typescript (еще одна причина для изучения Typescript). И генератор кода GraphQL, который может создавать интерфейсы Typescript для серверов, которыми вы не владеете.

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

Канал Blue Collar Coder будет иметь полную серию GraphQL, начиная с начала следующего года, и вы узнаете, что такое GraphQL и как он вписывается во все, через создание вашего первого запроса и вплоть до создание собственного сервера и использование расширенных функций, таких как подписки.

Utility First CSS

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

Чтобы начать работу с Tailwind, я рекомендую видео, которое я только что опубликовал, используя Twin.Macro, который представляет собой очень простой способ настройки CRA (Create React Application) для эффективного использования Tailwind. Это станет отличной отправной точкой для продолжения изучения этого увлекательного подхода к стилю и макету.

Если вы ищете что-то похожее на Tailwind, но более ориентированное на React, попробуйте Chakra-UI. Чтобы добавить поле в верхнюю часть поля в Chakra, все, что вам нужно сделать, это <Box mt={3}>...</Box>, и он добавляет красивый край вверху, поэтому настройка макета так же проста, как добавление свойств.

Модули Ecmascript

Модули Ecmascript пользуются большой популярностью, потому что люди ненавидят node_modules и npm в более широком смысле. Я понял. Каталог node_modules может быть огромным.

Кстати, если вы обнаружите, что ваш диск заполняется из-за этого запуска npx npkill в вашем домашнем каталоге, он найдет все node_modules каталоги и при необходимости удалит их.

Модули Ecmascript на самом деле встроены в браузер и существуют уже некоторое время. Если вы добавите type="module" в свой тег скрипта, вы можете использовать import операторы изначально в коде для добавления модулей Ecmascript. И то же самое работает с Deno, а также поддерживает популярную систему Vite для загрузки приложений Vue.

Это может быть что-то, что мы видим больше в разработке и меньше в производстве, потому что есть проблемы с эффективностью, связанные с количеством HTTP-запросов для импорта кода на страницу. Но, тем не менее, это то, что вы должны попробовать хотя бы один раз в 2021 году. Просто попробуйте. Это действительно просто, и в нем используется 99% того, с чем вы уже знакомы в node.

Микрофронтенды

Я вижу два основных варианта использования Micro-Frontend в 2021 году:

  • Повторное использование между приложениями Micro-Site. Если вы разбили свое монолитное приложение на несколько микросайтов и разочаровываетесь в совместном использовании npm, Micro-Frontends - отличное решение для этого.
  • Виджеты. Микрофронтенды - это в основном виджеты 2000-х годов. Если вы хотите иметь какой-то упакованный код, который ваши клиенты могут использовать для встраивания пользовательского интерфейса на свою страницу с вашими данными, Micro-Frontends - это способ сделать это.

Самый простой способ сделать Micro-Frontends - использовать Module Federation, новую функцию в Webpack 5. С помощью Module Federation вы можете раскрыть код (и его зависимости) из приложения, не удаляя его из приложения или создавая какую-либо оболочку. код. Вы просто открываете его из одного приложения, а затем потребляете в другом, используя операторы import. Это так просто.

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

Мы с Заком Джексоном написали книгу Практическая федерация модулей, которую вы можете прочитать и узнать о том, как использовать эту новую функцию Webpack в своем приложении. А на канале Blue Collar Coder есть целый плейлист, посвященный Module Federation.

Производительность в Интернете

2020 год был огромным годом для электронной коммерции, и, вероятно, он останется таким даже после того, как карантин (скрещенные пальцы) поднимется. Любой, у кого есть опыт электронной коммерции, знает, что дополнительные секунды означают меньшее количество конверсий, а меньшее количество конверсий - меньше продаж. Так что сделать страницу быстрее и при этом поддерживать тот же набор функций - это огромная задача.

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

WebAssembly

WebAssembly превратился из шутки (по крайней мере, для меня) в нечто очень реальное, особенно с выпуском Microsoft's Blazor framework, который упрощает разработку веб-приложений в стиле Vue с использованием C #, но со скомпилированным вывод представляет собой код WebAssembly, а не Javascript. Это удивительный фреймворк, о котором я рассказывал на канале Blue Collar Coder.

Но это не только Microsoft, но и открытый исходный код. Теперь вы можете взять свои навыки Typescript (да, опять же, еще одна причина изучить Typescript) и использовать их с AssemblyScript для создания кода WebAssembly с использованием знакомого синтаксиса. Раньше это было то, что можно было делать только с Rust или Go, теперь это тоже Typescript!

Если вы работаете в сфере B2B, в той компании, которая раньше использовала Macromedia Flex, или в той, которая использует ASP в стеке Microsoft, вы захотите когда-нибудь потратиться на изучение инструментов WebAssembly в этом году.

Единый инструментарий

Экосистема Node великолепна, но потому, что она выросла органически, и это может стать проблемой, когда мы тратим кучу времени, просто заставляя все инструменты сборки работать вместе. И поэтому мы наблюдаем появление таких проектов, как Rome и Deno, которые имеют универсальные инструменты для компиляции, запуска, линтинга и тестирования кода Javascript и Typescript. Deno теперь даже позволяет компилировать код в собственные исполняемые файлы.

Если вы являетесь внутренним разработчиком, я рекомендую вам, по крайней мере, проверить Deno в 2021 году, чтобы узнать, что происходит с модулями Ecmascript и каково это работать без node_modules и скомпилировать в собственный исполняемый файл.

Монорепозиторий

Любите их или ненавидите, монорепозитории никуда не денутся в ближайшее время, и это потому, что природа экосистемы узлов поощряет разработку и использование небольших пакетов, которые работают в сочетании, в отличие от монолитных приложений. А monorepos упрощает разработку набора связанных библиотек.

Рабочие области пряжи значительно упростили монорепозиторий, и теперь npm @ 7 также поддерживает их. Это означает, что поддержка монорепозиториев встроена в наши инструменты управления пакетами. Вы можете наложить слой lerna поверх этого, чтобы добавить поверх него утилиты управления версиями пакетов.

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

Бонус: статическое развертывание

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

С выпуском NextJS 9.3 и его последующих выпусков разработка приложения, которое развертывается статически, стало проще, чем любой другой. Теперь вы можете выбрать страницу за страницей, какие страницы будут отображаться на стороне клиента, на стороне сервера или статически. Они делают это очень просто.

У меня есть видео о Blue Collar Coder, в котором рассказывается об использовании всех трех моделей развертывания в NextJS. Вы можете использовать это как отправную точку для опробования статики, или вы можете взять существующее приложение Create React или NextJS и развернуть его статически, чтобы оценить преимущества производительности и стабильности.

Дополнительный бонус: темный режим и изменение стиля

Одно предсказание, которое, как я знаю, сбудется в 2021 году, - это рост популярности темного режима. Если вы создаете контентный сайт, в 2021 году вам придется разрешить темный режим, если вы еще этого не сделали. Некоторые фреймворки (включая Tailwind 2.0) теперь поддерживают темный режим. Прочтите эту отличную статью об автоматическом обнаружении темного режима и выясните, обрабатывает ли выбранный вами набор инструментов пользовательского интерфейса переключение темного режима автоматически.

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

Пришло время заниматься фронтенд-разработкой, бэкенд-разработкой TS / JS или полным стеком! Кто знает, что принесет 2021 год. Но инвестирование в собственный набор навыков никогда не бывает зря потраченным временем.