Матеріал, переклад якого ми сьогодні публікуємо, присвячений огляду важливих подій, новин і трендів 2019 року.

Про загрузку популярних фронтенд-фреймворків і бібліотек з npm

Бібліотека React знову забирає пальму першості і продовжує рости, а jQuery, як не дивно, потрапила на друге місце. Недалеко від лідерів пішли Angular і Vue. Обидва ці фреймворка відрізняються потужною базою захоплених своєю справою розробників. Фреймворк Svelte в цьому році користувався чималим увагою громадськості, але його впровадження йде поки не особливо активно.

Завантаження фронтенд-фреймворків і бібліотек з npm 

WebAssembly стає четвертою мовою мережі, приєднуючись до HTML, CSS і JavaScript

Технологія WebAssembly, на початку грудня, виявилася у всіх на слуху. Справа в тому, що вона офіційно була рекомендована для веб-розробки W3C. W3C (World Wide Web Consortium) - це центральна міжнародна організація, що займається стандартизацією веб-технологій.

Технологія WebAssembly, з моменту її появи в 2017 році, привертає до себе загальну увагу. У попередні роки вийшла специфікація WebAssembly 1.0, підтримка цієї технології була інтегрована в усі основні браузери.

Ще одна новина 2019 року, що стосується WebAssembly, пов'язана з формуванням Bytecode Alliance. Мета організацій, що входять до альянсу, полягає в тому, щоб забезпечити майбутнє WebAssembly за межами браузера, спільно працюючи над реалізацією стандартів і пропонуючи нові стандарти.

Рівень використання TypeScript стрімко зростає

2019 можна назвати роком TypeScript. Ця мова не тільки стала стандартом де-факто у вирішенні завдання типізації JS-коду. Багато розробники ще й віддають їй перевагу перед звичайним JavaScript.

У дослідженні StackOverflow, опублікованому на початку цього року, TypeScript, в рейтингу мов, які найбільше люблять розробники, розділила друге місце з Python, поступившись лише Rust. 

TypeScript дає веб-розробникам серйозні зручності завдяки інтеграції з усіма основними редакторами коду. JavaScript-розробники розглядають TypeScript як інструмент, застосування якого призводить до зменшення кількості помилок. TypeScript в їхніх очах - це збірний код, який читається легше JavaScript-коду. 

TypeScript обходить React в NPM

TypeScript 3.0 вийшов в кінці 2018 року. У 2019 він оновився до версії 3.7, до якої увійшли нові можливості стандарту ECMAScript, такі, як опціональні ланцюжки і перевірка значень тільки на nullіundefined. У новій версії TypeScript поліпшений і функціонал, що стосується роботи з типами.

Хуки та React

В кінці 2018 року команда React випустила так звані хуки. В 2019 хуки буквально захопили світ React. Переважна більшість React-розробників використовує їх як основний механізм для управління станом компонентів і для роботи з подіями їх життєвого циклу. 

Хуки дають програмісту спосіб управління станом і життєвим циклом функціональних компонентів з використанням простого і лаконічного синтаксису. Крім того, React дозволяє створювати призначені для користувача хуки, які допомагають розробникам писати код для багаторазового використання, допомагають створювати логіку, яку можна використовувати спільно. При цьому відпадає необхідність у застосуванні компонентів вищого порядку або властивостей рендеринга.

Фреймворк Vue готується до релізу версії 3

Ймовірно, поки Vue не можна назвати найпоширенішим фреймворком, але складно не помітити те, що навколо нього вже склалася своя спільнота. Відомо, що Vue взяв найкраще від React і Angular, але при цьому влаштований простіше, ніж вони. Ще одна важлива перевага Vue полягає в його відкритості, і в тому, що його не контролює якась велика компанія на кшталт Facebook (React - це її дітище) або Google (ця компанія підтримує Angular).

Головна новина в світі Vue - це прийдешній реліз 3.0. Поява альфа-версії очікується в кінці року. 

Проблема, яка турбувала Vue-розробників, полягає в серйозній зміні API фреймворка. Правда, після виникнення подібної негативної реакції, було сказано, що нові API будуть додаватися до старих, і що вони будуть сумісними з Vue 2. В Vue 3, крім спірного функціоналу, очікується поява деяких нових цікавих можливостей і корисних змін:

• API Composition.
• Підтримка технології Time Slicing (експериментальна).
• Підтримка декількох v-model.
• Портали.
• Новий API користувальницьких директив.
• Покращена реактивність.
• Переписана віртуальна DOM.
• Підняття статичних властивостей.
• Підтримка API хуків (експериментальна).
• Оптимізація генерування слотів (поділ рендеринга для батьківських і дочірніх компонентів).
• Покращена підтримка TypeScript.

Помітною подією в світі Vue став вихід в цьому році 4-й версії Vue CLI, де основна увага приділена оновленню базових інструментів.

Виходять 8 і 9 версії Angular, а також - новий движок компіляції/рендеринга Ivy

В 2019 вийшла 8 версія Angular. В цьому ж році побачив світ новий движок компіляції / рендеринга Ivy. Найголовніша сильна сторона Ivy полягає в тому, що завдяки йому зменшуються розміри бандлів. Але, насправді, він приносить в Angular і багато інших корисності. Зараз, до виходу Angular 9, Ivy - це опціональна можливість.

Протягом грудня 2019 року команда Angular готувалася до випуску Angular 9. Схоже, що дана версія фреймворку вийде або в кінці цього року, або на початку наступного. Найголовніше нововведення Angular 9 полягає в тому, що Ivy стане стандартним двигуном рендеринга. 

На доступність (a11y) і на інтернаціоналізацію (i18n) звертають все більше уваги

Веб повинен бути простором, відкритим для всіх людей і придатним для використання всіма. В результаті у фронтенді доступність і інтернаціоналізація стали пріоритетними завданнями. У наші дні, коли технології більш стійкі ніж кілька років тому, ситуація дозволяє розробникам приділяти більше уваги інструментам для локалізації додатків і для підвищення рівня їх доступності. 

Ось що говориться про доступність на MDN: «Доступність - це практика, що дозволяє використовувати ваші сайти як можна більшій кількості людей. Ми традиційно думаємо про це як про доступність для людей з обмеженими можливостями, але насправді, в це число входять і інші групи користувачів, які використовують мобільні пристрої або мають повільне з'єднання з мережею».

А ось що сказано про інтернаціоналізацію на w3.org : «Якщо ви інтернаціоналізіруете проект - це значить, що ви проектуєте або створюєте свої матеріали, додатки, специфікації та інші подібні ресурси так, що це дозволяє їм нормально працювати для користувачів, що належать до будь-якої культури, які проживають в будь-якому регіоні, які розмовляють будь-якою мовою».

Можливості ES2019

ECMAScript (специфікація, на якій заснований JavaScript) слідує щорічному циклу оновлення. У стандарті ES2019 з'явилося чимало нових можливостей:

• Метод Object.fromEntries().
• Метод String.trimStart() і String.trimEnd().
• Покращена підтримка unicode в методі JSON.stringify().
• Метод Array.flat().
• Метод Array.flatMap().
• Покращена робота з try/catch.
• Властивість description об'єктів Symbol.

Хоча в ES2019 з'явилися дуже цікаві нові можливості, в очікуваному стандарті ES2020 можуть з'явитися такі речі, які, ймовірно, стануть найбільш очікуваними з часів ES6 / ES2015:

• Приватні поля класів.
• Опціональні ланцюжки - obj.field?.maybe?.exists.
• Тип даних BigInt.

Зростання популярності Flutter

Flutter вийшов через 2 роки після React Native, але швидко здобув популярність. Цей проект дуже близький до React Native за кількістю зірок на GitHub. А якщо популярність проекту буде продовжувати рости тими ж темпами, то він скоро обжене React Native. Flutter конкурує з React і являє собою ще один відмінний інструмент розробки крос-платформних мобільних додатків.

Node.js Foundation і JS Foundation об'єдналися

Для того щоб підтримати екосистему JavaScript і прискорити зростання мови, Node.js Foundation і JS Foundation об'єдналися, сформувавши OpenJS Foundation. Основна ідея цього кроку полягає в налагодженні співпраці і в розвитку технологій під егідою нейтральної організації, яка зараз об'єднує 31 опенсорсний проект. До складу цих проектів входять Node, jQuery і Webpack. Цю ініціативу можна розглядати як позитивний рух для всієї JS-спільноти. ЇЇ підтримують провідні технологічні компанії, такі, як Google, IBM і Microsoft.

12 версія Node.js, що вийшла в цьому році, за традицією отримає довготривалу підтримку (LTS, long term support) до квітня 2023 року. Node.js 12 пропонує безліч нових можливостей, оновлень безпеки і поліпшень продуктивності. Серед деяких помітних нововведень можна відзначити нативну підтримку конструкцій import/export, підтримку приватних полів класів, сумісність з двигуном V8 версії 7.4, підтримку TLS 1.3 і появу додаткових діагностичних засобів.

Статичні сайти як і раніше актуальні, розробники впроваджують JAMStack

Статичні сайти довели, що вони є складовою частиною інтернету і не збираються здавати позиції. На користь цього твердження свідчить розширення використання фреймворків на зразок Gatsby, швидке зростання хостингів статичних сайтів на кшталт Netlify, незліченна безліч нових компаній, що створюють CMS без користувальницького інтерфейсу.

Статичні сайти комбінують те, що вже було в інтернеті, з новими інструментами і бібліотеками. Так як тепер всі сторінки зберігаються в готовому вигляді, сервер не витрачає ресурси на заповнення їх даними при зверненні до нього клієнта. Сторінки можуть бути доставлені клієнтові миттєво, проекти здатні в повній мірі користуватися перевагами CDN-кешування. 

При створенні статичних сайтів вельми популярний патерн JAMStack(JavaScript, API, Markup). Це - гібридний підхід, що комбінує статичні сайти і односторінкові додатки (SPA, single page application). При використанні такого підходу сторінки віддаються клієнту в статичному вигляді, але, опиняючись на клієнті, вони ведуть себе як SPA, які використовують API і дії користувача для зміни стану інтерфейсу.

PWA ростуть, збільшуються обсяги їх впровадження

Використання статичних сайтів - це один із способів створення надзвичайно швидких веб-проектів. Але вони підходять не для всіх випадків. Ще один цікавий варіант - це прогресивні веб-додатки (PWA, progressive web application). PWA дозволяють кешувати ресурси в браузері для того, щоб прискорити час реакції сторінок на вплив користувача і для забезпечення працездатності проектів без підключення до інтернету. Крім того, вони дозволяють користуватися фоновими робочими процесами, які зближують ці додатки з нативними додатками, реалізуючи, наприклад, функціонал push-повідомлень.

GraphQL продовжує користуватися любов'ю розробників

Технологи GraphQL обіцяють вирішити безліч проблем, супутніх традиційним програмам, заснованим на REST. Розробники дуже скоро буквально закохалися в цю технологію, а тепер це почуття поділяють і технологічні компанії, які почали впроваджувати GraphQL. Наприклад, новітній API GitHub був написаний на GraphQL кілька років тому, в сторону цієї технології рухаються і інші компанії.

В основі GraphQL-додатків лежать дані а не кінцеві точки. Це дозволяє клієнтам запитувати саме ті дані, які їм потрібні і отримувати від сервера відповідні JSON-відповіді. API GraphQL надають розробникові схему, документують всі дані і їх типи, що робить такі API повністю прозорими для програміста.

Так як API GraphQL дають в наше розпорядження повністю типізовану схему, ця технологія, крім того, добре інтегрується з TypeScript-додатками. Інструмент на зразок GraphQL Code Generator може читати запити в коді клієнта, зіставляти їх зі схемою і надавати нам TypeScript-типи, які будуть використовуватися у всьому додатку.

Кількість завантажень GraphQL за минулий рік більш ніж подвоїлася. Розробники Apollo починають позиціонувати свій проект як найбільш широко застосовуваний фреймворк.

Число завантажень GraphQL за рік більш ніж подвоїлася

VS Code лідирує в сфері редакторів коду

Розробники трепетно ставляться до своїх IDE і редакторів коду. Вони готові вступати в суперечки, доводячи безумовні перевага їх інструментів над усіма іншими. Але сучасні фронтенд-розробники, схоже, забули про всі суперечки. Вони, ніби змовившись, обирають VS Code. Це - опенсорсний безкоштовний редактор, який, завдяки можливості використання плагінів, дає розробникам можливість налаштовувати його саме так, як їм того хочеться.

Ось дані по використанню текстових редакторів з State of JS Survey 2019 . 

Webpack 5 входить в стадію бета-версії і наближається до релізу

Webpack став ключовою ланкою практично всіх сучасних ланцюжків інструментів, використовуваних в JavaScript-проектах. Це - найпопулярніший засіб для складання проектів. Webpack продовжує поліпшуватися, як в плані продуктивності, так і в плані зручності роботи з ним з точки зору розробника. У 5 версії Webpack акцент робиться на наступне:

1. Підвищення продуктивності при складанні проектів з використанням постійного кешування.
2. Поліпшення довготривалого кешування з використанням вдосконалених алгоритмів і добре підібраних стандартних параметрів.
3. Переробка внутрішніх механізмів без введення змін, здатних порушити працездатність проектів, що використовують існуючі версії Webpack.

Браузер Microsoft Edge переходить на Chromium

Internet Explorer, перейменований в Edge, завжди давав веб-розробникам приводи для жартів. Цей браузер постійно відставав від конкурентів в плані підтримуваних можливостей, його існування серйозно ускладнювало завдання написання крос-браузерного коду. Великим успіхом для розробників стало те, що Microsoft вирішила скористатися опенсорсним проектом Chromium від Google.

Прогноз на 2020 рік

А тепер давайте подумаємо про те, що чекає фронтенд в 2020 році:

1. Веб-розробники продовжать приділяти підвищену увагу продуктивності. Для досягнення високої швидкості роботи сайтів будуть використовуватися технології поділу коду та PWA.
2. Технологія WebAssembly стане буденною, з'явиться більше прикладів її реального використання.
3. GraphQL обійде REST, знаходячи використання в усе більшій кількості нових проектів і нових компаній.
4. TypeScript стане стандартним вибором для стартапів і нових проектів.
5. Почнуть з'являтися реальні додаток, створені без сервера, засновані на блокчейн-технологіях. Це зробить веб більш відкритим.
6. Flutter може обійти React Native і стати основним інструментом для розробки крос-платформних мобільних додатків.
7. З'явиться більше реальних проектів, заснованих на Svelte.
8. Ми побачимо практичне застосування Deno (середовища виконання TypeScript, розроблене творцем Node.js).
9. Технології AR/VR будуть розвиватися в сфері використання бібліотек на зразок A-Frame, React VR і Google VR . Відбудуться поліпшення і в браузерній підтримці AR / VR. 
10. У фронтенд-розробці більшу вагу здобудуть технології контейнеризації (Docker, Kubernetes).

Оригінал