Фронтенд інжиніринг у 2017 розвивався неймовірними темпами. Ось список найбільш помітних подій.
React 16 та ліцензія MIT
React продовжує домінувати на фронтенд горизонті, і 2017 подарував нам один з найочікуваніших релізів цієї бібліотеки – версію 16. Вона містить в собі архітектуру fiber, яка дозволяє проводити асинхронний рендеринг користувацького інтерфейсу. Цей реліз також спрощує управління неочікуваними збоями застосунків, забезпечуючи обробку помилок (error boundaries) наряду з багатьма іншими нововведеннями.
Але найважливішим вдосконаленням React виявилися не нові особливості, а перехід на ліцензію з відкритим вихідним кодом. Facebook відмовився від патентної ліцензії BSD, яка змушувала компанії триматися подалі від React, й прийняв зручну для користувачів ліцензію MIT. Jest, Flow, Immutable.js та GraphQL також отримали ліцензію MIT.
Прогресивні веб-застосунки (PWA)
Ми всі вже давно шукали рішення для подолання розриву між вебом та іншими клієнтами. Google очолює рух з покращення веб-застосунків шляхом їх перетворення у прогресивні веб застосунки, і в 2017 відбулося їх швидке прийняття. PWA використовує сучасні браузерні технології для забезпечення відчуття від взаємодії з вебом, яке більше нагадує мобільні застосунки. Це забезпечує покращену продуктивність та автономний доступ, а також такі функції як, наприклад, push-сповіщення, раніше доступні тільки для мобілок. Кістяком PWA є комбінація файлу manifest.json та технології service workers.
Yarn покращила екосистему JS пакетів
NPM не досить сильно виріс з моменту його першопочаткового релізу, проте йому все ще не вистачає деяких важливих функцій, які Yarn розраховує додати. Ключовими внесками Yarn є: кешування пакетів, файл блокування для забезпечення детермінованих збірок, операції розпаралелювання та згладжування залежностей. Ці функції виявилися настільки корисними, що NPM реалізувала їх у версії 5.0. А ще він може похвастатися приголомшливою кількістю зірок GitHub – понад 29,000. Навіть якщо ви не користуєтесь Yarn, слід зазначити, що керування пакетами JavaScript в цілому значно покращилось завдяки його релізу.
CSS Grid Layout
Grids нарешті стали нативними для CSS, і браузери швидко їх приймають. У минулому grid системи в CSS створювались з допомогою таблиць, float, flex та inline-block. Нативний CSS Grid Layout виділяється тим, що ділить сторінку на основні області й створює стовпці та рядки для контенту.
WebAssembly став підтримуватись у всіх основних браузерах
WebAssembly (або wasm) тепер присутній у всіх основних браузерах. wasm – це низькорівневий байт-код формат для написання браузерних скриптів на стороні клієнта. Оскільки він низькорівневий, wasm може похвастатися неймовірною продуктивністю, але також він пропонує JavaScript API, який надає фронтенд розробникам більш просту точку входу. Firefox нещодавно оголосив про включення wasm в усі браузери.
Serverless архітектури
Популярність serverless застосунків помітно виросла у 2017. А все тому, що вони пропонують спосіб підвищувати продуктивність, зменшуючи витрати. Ваш клієнт повністю від'єднаний від сервера, що дозволяє концентруватися на застосунку, а не на інфраструктурі. Загальною реалізацією serverless є використання AWS API Gateway в комбінації з функцією AWS Lambda в якості BaaS (backend as a service – бекенд як послуга), який буде використовуватись вашим клієнтом.
Vue.js стає все популярнішим
Навіть з усіма успіхами React, Vue продовжує зростати у популярності. Цей фреймворк надає компонентну архітектуру і є однією з провідних альтернатив React. Він був прийнятий численними компаніями, включаючи GitLab, яка підбила підсумки минулого року використовуючи Vue.
CSS-in-JS та підготовка до майбутнього CSS холівару
Після стрімкої еволюції JavaScript, свідками якої ми стали, екосистема знову починає стабілізуватися. Неминуче, що ми побачимо такі самі невпинні досягнення також і в CSS, який надолужує сучасні потреби веб-застосунків. У 2017 головним досягненням стало суттєве поліпшення й прийняття CSS-in-JS, де всі стилі створюються за допомогою коду, а не таблиць стилів. Поки що незрозуміло, чи буде це остаточним напрямком, куди рухатиметься фронтенд спільнота, але, все ж таки, це поточний передовий метод, який, здається, вирішує багато проблем, що виникають при створенні компонентних застосунків.
У 2017 році styled-components зайняли лідерську позицію з точки зору популярності; Emotion – одна з найновіших бібліотек серед доступних, проте вона була швидко прийнята. Ще один засіб, який слід розглянути, – glamorous, що огортає бібліотеку glamor.
Новий ступінь розвитку статичних сайтів
У 2017 відбувся часовий парадокс – повернення популярності статичних веб-сайтів. Такі фреймворки, як Gatsby, дозволяють вам створювати статичні сайти, використовуючи React та інші новомодні інструменти. Не кожному сайту необхідно або слід бути складним сучасним веб-застосунком. Створення статичних сайтів пропонує вам переваги рендерингу на стороні сервера й неперевершену швидкість, оскільки ви обслуговуєте попередньо створену розмітку. Якщо ви шукаєте гарний приклад, то офіційна документація React сама була створена з використанням Gatsby.
Розвиток статичних сайтів викликав ще одну тенденцію, відому як JAMStack: «JavaScript, APIs, Markup». JAMStack використовує ті ж самі попередньо створені статичні файли HTML разом з багаторазово використовуваним API та JavaScript для обробки будь-якого динамічного програмування під час циклу запиту/відповіді.
Вибух популярності GraphQL змушує переосмислити конструкцію API
GraphQL швидко набирає обертів, наближуючись до REST, а Самер Буна навіть стверджує, що REST вже мертвий. Замість того, щоб управляти декількома кінцевими точками та отримувати непотрібні дані, GraphQL дозволяє клієнту декларативно визначати потрібні йому дані й витягувати їх лише з однієї кінцевої точки.
Він стає настільки популярним, що GitHub написав нову версію свого API у GraphQL, і багато компаній створюють продукти, як, наприклад, популярний фреймворк Graphcool, щоб зробити його доступним для всіх розробників.
React Router 4
React Router від Райана Флоренса і Майкла Джексона розвинувся від просто роутера для React, до того, щоб дійсно стати React Router – декларативним роутером, створеним засобами простого використання компонентів React. Це перша версія, схвалена командою React. API стабілізувався, і команда React Training заявила, що вони не буде вносити жодних значних змін протягом життєвого циклу проекту.
Вийшов Angular v4, а за ним одразу і v5
Після безславного пропуску версії 3 для підтримки SEMVER, Angular 4 офіційно побачив світ 23 березня. У версії 4 команда Angular прийняла проект спільноти Angular Universal – який надає метод рендерингу застосунків Angular на стороні серверу – як офіційну частину проекту Angular. Пакет Angular Animation був витягнутий з @angular/core для імпортування тільки при необхідності, а ще був зроблений рефакторинг компіляції Ahead Of Time в View Engine для підвищення продуктивності:
Зменшення розміру згенерованого коду для компонентів приблизно на 60% майже в усіх випадках.
У версії 5 були прийняті довгоочікувані додаткові покращення. З Angular v5, завдяки новому пакету @angular/service-worker, стало набагато простіше створювати прогресивні веб-застосунки, ніж у будь-якій минулій версії. Компілятор Angular також був вдосконалений, дозволяючи швидше робити збірку/перезбирання під час розробки, а в Angular Router тепер розкриті всі нові хуки життєвого циклу (lifecycle hooks), включаючи ActivationStart, ActivationEnd, ResolveStart та ResolveEnd.
TypeScript та Flow
TypeScript є культовим для багатьох JavaScript розробників, в той час як Flow пропонує більш гнучкий спосіб вводити типи, обходячись без агресивного рефакторингу. Відсутність типів в JavaScript багато в кого викликало невдоволення. TypeScript створений Microsoft, і є обов'язковим в новій версії Angular. Flow – дітище Facebook.
Що очікувати в 2018
- Битва CSS бушуватиме, поки ми не з'ясуємо кращий спосіб обробки стилів у компонентних застосунках.
- Більше компаній приймають мобільні рішення, які мають єдину кодову базу, як, наприклад, React Native або Flutter.
- Веб стає більш нативним з автономними можливостями й безшовним мобільним досвідом.
- WebAssembly може достигнути великих успіхів, пропонуючи кращий веб досвід.
- GraphQL продовжить змагатися з REST.
- React закріпить свою позицію (так, навіть ще більше), тепер, коли вже нема ніякого страху перед патентною ліцензією.
- Flow і TypeScript ще міцніше зціпляться, даючи JavaScript більше структурованості.
- Вплив контейнеризації стає більш розповсюдженим для фронтенд архітектури.
- Віртуальна реальність просувається вперед, використовуючи бібліотеки, такі як A-Frame, React VR та Google VR.
- Люди створюватимуть дійсно круті застосунки, використовуючи blockchain та web3.js.
Ще немає коментарів