Самые важные итоги фронтенд-разработки 2017 года

Фронтенд-инжинерия развивалась в лихорадочном темпе на протяжении всего 2017 года. Вот список самых заметных событий этого периода.

React 16 и лицензия MIT

React продолжает доминировать в сфере фронтенда, а 2017 принес один из самых ожидаемых пока релизов — 16 версию. Он включает в себя fiber-архитектуру, которая обеспечивает асинхронную визуализацию пользовательского интерфейса. Этот релиз также сильно упростил управление неожиданными отказами приложений с помощью границ ошибок и многих других функций.

Удивительно, что самым важным улучшением React в прошедшем году были не новые функции, а изменение его лицензии открытого исходного кода. Facebook избавился от своей BSD-лицензии, из-за которой компании отказывались от React, и принял дружественную к пользователю лицензию MIT. Вдобавок, Jest, Flow, Immutable.js и GraphQL также получили лицензию MIT.

Основная команда и главные участники включают Dominic Gannaway, Dan Abramov, Sophie Alpert, Sebastian Markbåge, Paul O’Shannessy, Andrew Clark, Cheng Lou, Clement Hoang, Probably Flarnie, Brian Vaughn.

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

Мы долго искали решение для преодоления пропасти между вебом и другими клиентами. Google оказался на острие движения в сторону улучшения вбе-приложений путем конвертации их в прогрессивные веб-приложения (PWA), и 2017 увидел быстрое их принятие. PWA использует современные браузерные технологии чтобы работа веб-приложения была похожа на работу мобильных приложений. Предлагается лучшая производительность и работа офлайн наряду с функциями, ранее доступными только для мобильных, такими как всплывающие уведомления. PWA опираются на сочетание файла manifest.json и работы service workers.

Yarn улучшает экосистему пакета JS

NPM довольно-таки вырос со времени начального релиза, но в нем по-прежнему нет некоторых критически важных свойств, о добавлении которых позаботился Yarn. Главный вклад Yarn – кэширование пакета, файл блокировки для обеспечения детерминированных сборок, распараллеливание операций и сглаживание зависимостей. Эти свойства были столь успешны, что NPM включил их в выпуск версии 5.0. Yarn имеет более миллиарда скачиваний (в настоящее время 1,25 млн скачиваний в месяц) и по праву может гордиться своими 28 тыс. звездами на GitHub. Даже если вы не используете Yarn, благодаря его выпуску управление пакетами JavaScript в целом заметно улучшилось.

Макет-сетка в CSS (CSS Grid Layout)

Сетка наконец является частью CSS, и браузеры быстро приняли это. В прошлом системы сеток создавались в CSS с помощью таблиц, float, flex и inline-block. Собственный макет сетки в CSS отличается тем, что делит страницу на главные области создает столбцы и строки для контента. Почитайте статью Рэйчел Эндрю https://gridbyexample.com/ , чтобы начать изучение.

WebAssembly поддерживается во всех основных браузерах

WebAssembly (или wasm) сейчас поставляется во все основные браузеры. Wasm это низкоуровневый формат байт-кода для клиентских скриптов в браузере. Поскольку он низкоуровневый, он может похвастаться невероятной производительностью, но акже предлагает JavaScript API, обеспечивающий более легкую точку входа фронтенд-разработчикам. Firefox недавно анонсировал включение его во все браузеры.

Бессерверные архитектуры

Популярность бессерверных архитектур в 2017 году росла в бешеном темпе. Они предлагают способ повысить производительность при снижении стоимости. Ваш клиент полностью развязан с сервером, что позволяет вам фокусироваться на вашем приложении, а не на инфраструктуре. Распространенной практикой является использование AWS API Gateway в сочетании с функцией AWS Lambda в качестве BaaS (бэкенд как сервис), который будет использоваться вашим клиентом. Вы можете начать ознакомление с этого прекрасного вступления от Adnan Rahić.

Продолжает расти популярность Vue.js

Даже с учетом успеха React, популярность Vue (созданного Evan You) продолжает расти. Этот фреймворк обеспечивает компонентно-ориентированную архитектуру и является одной из главных альтернатив React. Его приняли более крупные компании, в том числе GitLab, использовавшие этот фреймворк в прошлом году.

CSS-in-JS и подготовка к грядущему CSS- холивару

После стремительного развития JavaScript, чему мы были свидетелями, экосистема начала стабилизироваться. Неизбежно, что нам также предстоит увидеть столь же неуклонное движение вперед в CSS, поскольку он улавливает современные нужды веб-приложений. В 2017 году главным усовершенствованием стали резкие улучшения и принятие CSS-in-JS, где все стили встроены в код, а не в таблицы стилей. Пока не ясно, станет ли это главным направлением движения фронтенд-сообщества, но в настоящее время это передовой метод, который, по-видимому, решает многие проблемы, возникающие при создании компоненто-ориентированных приложений.

2017 год увидел, как styled-components (от Max Stoiber, Glen Maddern, Phil Plückthun) начинают лидировать среди популярных терминов. Emotion (от Kye Hohenberger) – одна из новейших доступных библиотек, но ее применение быстро растет. Еще одна опция, над которой стоит поразмыслить, это glamorous (от PayPal, Kent C. Dodds и многих увлеченных участников), являющаяся оболочкой для библиотеки glamor. Посмотрите эту статью, где перечислены многие доступные опции CSS-in-JS.

Генерирование статических сайтов

В 2017 году произошел разрыв во времени, в результате чего смогли вернуться статические вебсайты. Фреймворки, такие как Gatsby, дают вам возможность строить статические сайты с использованием React и других современных инструментов. Не каждый сайт должен быть сложным современным веб-приложением. Генерирование статического сайта предлагает вам преимущества визуализации на стороне сервера и непревзойденную скорость, поскольку вы обслуживаете заранее созданную разметку. Если вы в поисках подходящего примера, сам official React docs построен с использованием Gatsby.

Генерирование статических сайтов положило начало новому тренду, известному как JAMStack: “JavaScript, APIs, Markup”. JAMStack использует те же статические заранее созданные HTML-файлы наряду с APIs многократного использования и JavaScript для управления любым динмамическим программированием в ходе цикла запроса/ответа. Netlify – отличный вариант для знакомства с JAMStack и бесплатного статического хостинга. Брайан Дуглас написал прекрасную статью, сравнивающую JAMStack и визуализацию приложений на стороне сервера путем построения клонов Hacker News.

Взрыв GraphQL заставил нас переосмыслить конструкцию API

GraphQL быстро занимает место REST, а Самер Буна даже заявил, что REST уже мертв. Вместо управления несколькими конечными точками и извлечения ненужных данных GraphQL позволяет клиенту декларативно определять нужные ему данные и извлекать их из одной конечной точки.

Это становится настолько распространенным, что GitHub написал новейшую версию своего API на GraphQL, а многие компании создают продукты чтобы сделать его доступным для всех разработчиков, например, популярный фреймворк Graphcool от Johannes Schickling.

React Router 4

React Router от Ryan Florence и Michael Jackson прошел путь от просто роутера для React до React Router – декларативного роутера, включаемого при использовании компонентов React. Это первая версия, подтвержденная командой React. Этот API стабилизировался, и команда React Training заявила, что в нем не предвидится никаких кардинальных изменений.

Angular выпустил 4-ю версию, за которой сразу последовала 5-я

После бесславного пропуска третьей версии для обслуживания SEMVER, 23 марта был официально выпущен Angular 4. В четвертой версии команда Angular приняла проект сообщества Angular Universal  в качестве официальной части проекта Angular. Также был выделен из @angular/core пакет Angular Animation для импорта только по необходимости, а компиляция Ahead Of Time внутри View Engine была реорганизована ради производительности, «уменьшения размера генерируемого кода для ваших компонентов почти на 60% в большинстве случаев».

Пятая версия увидела принятие долгожданных дополнительных улучшений. Создание прогрессивного веб-приложения с Angular 5 намного проще, чем с предыдущими версиями, благодаря новому пакету @angular/service-worker. Также был улучшен компилятор Angular, делающий возможной более быструю сборку/перестройку в ходе разработки, а Angular Router теперь демонстрирует все новые хуки жизненного цикла, включая ActivationStart, ActivationEnd, ResolveStart и ResolveEnd.

TypeScript and Flow

TypeScript стал культовым для многих JavaScript-разработчиков, в то время как Flow предлагает более гибкий способ внедрения типов без агрессивного рефакторинга. На недостаток типов в JavaScript жаловались многие. TypeScript был создан Microsoft и является обязательным требованием в новой версии Angular. Flow – детище Facebook.

Gitconnected создает сообщество разработчиков

Gitconnected начал создавать сообщество разработчиков и инженеров ПО. Он предлагает возможность сотрудничать, делиться статьями и создавать обсуждения с другими разработчиками. Кроме того, вы можете показывать ваши проекты и портфолио на своей странице-профайле. Не упустите возможность контактировать с другими людьми, разделяющими ваши интересы, и помогать друг другу учиться и расти.

Чего ждать в 2018

• Разгорится CSS-битва, поскольку мы будем определять лучший способ управлять стилями в компоненто-ориентированных приложениях.
• Все больше компаний будет применять мобильные решения с унифицированной базой кода, такие как React Native или Flutter.
• Веб становится более простым с офлайн-возможностями и плавностью мобильных приложений.
• WebAssembly может далеко пойти, предлагая лучший опыт с веб.
• GraphQL продолжит бросать вызов REST.
• React усилит свои позиции (да, еще больше), поскольку теперь опасений по поводу лицензии больше нет.
• Flow и TypeScript укрепятся, давая JavaScript больше структуры.
• Влияние контейнеризации станет более распространенным во фронтенд-архитектуре.
• Виртуальная реальность будет делать шаги к использованию таких библиотек как A-Frame, React VR и Google VR.
• Люди будут создавать по-настоящему классные приложения с использованием блокчейнаи web3.js (авторы – Marek Kotewicz и Fabian Vogelsteller).

Если что-то пропущено, не стесняйтесь добавлять в комментариях!

***
Подписывайтесь на наш канал в Telegram!
[customscript]techrocks_custom_after_post_html[/customscript]
[customscript]techrocks_custom_script[/customscript]