Основні тренди front-end розробки 2017 року

Від автора: 2017 рік був відзначений появою нових і розвитком старих трендів, якими збагатилася front end розробка. Нижче наводиться список найбільш помітних подій минулого року.

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

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

Як не дивно, але самим важливим удосконаленням React в минулому році стали не нові функції, а перехід на ліцензію з відкритим вихідним кодом. Facebook відмовився від своєї ліцензії BSD, яка змушувала компанії відмовлятися від React і прийняв зручну для користувача ліцензії MIT. Крім того, Jest, Flow, Immutable.js і GraphQL також отримали ліцензію MIT.

Основна команда проекту та спільнота підтримки включають в себе Домініка Ганнауэя, Дена Абрамова, Софі Альперта, Себастьяна Маркбега, Підлоги О Шэннесси, Ендрю Кларка, Лу Чен , Клемента Хоанга, Пробабли Фларни, Брайана Вона.

Прогресивні веб-додатки

Ми вже давно шукаємо рішення для подолання розриву між Веб та іншими клієнтами. Google просуває ідею поліпшення веб-додатків шляхом перетворення їх у прогресивні веб-додатки (PWA), і в 2017 році відзначається зростання популярності цього рішення. PWA використовує сучасні технології браузера, для надання веб-інтерфейсу, який більше схожий на інтерфейс мобільних додатків. Це дозволяє збільшити продуктивність і забезпечити оффлайн доступ, а також реалізувати функції, раніше доступні тільки для мобільних пристроїв, такі як push-повідомлення. PWA базується на комбінації файлу manifest.json і використання робочих сервісів.

Впровадження Yarn дозволяє оптимізувати роботу пакетів JS

NPM зазнав істотних змін з тих пір, як він був вперше представлений, але нам як і раніше не вистачає деяких важливих функцій, які з’явилися в Yarn. Основними перевагами Yarn є кешування пакетів, файл блокування для забезпечення детермінованих збірок, розпаралелювання операцій і згладжування. Ці функції були настільки успішними, що NPM реалізували їх у версії 5.0. Yarn має більше 1 мільярда завантажень (на даний момент 1,25 мільйона завантажень в місяць) і може похвалитися приголомшливими 28 000+ зірками на GitHub . Навіть якщо ви не використовуєте Yarn, управління пакетами JavaScript в цілому значно покращився завдяки його виходу.

CSS Grid Layout

Сітки, нарешті, отримали нативну підтримку CSS, і браузери активно реалізують її. В минулому система сіток створювалася в CSS за допомогою таблиць, float, flex, і inline-block. Оригінальний CSS Grid Layout характеризується тим, що ділить сторінку на основні галузі та створює стовпці і рядки для контенту. На сайті https://gridbyexample.com/ Рейчел Ендрю ви знайдете відмінні матеріали по даній темі.

WebAssembly тепер підтримується у всіх основних браузерах

WebAssembly (або wasm) тепер надається у всіх основних браузерах. wasm — це низькорівневий формат байт-коду для клієнтських скриптів у браузері. Оскільки він є низькорівневим, він відрізняється неймовірною продуктивністю, а також пропонує JavaScript API, що надає розробникам інтерфейсів більш просту точку входу. Firefox нещодавно оголосив про включення його у всі браузери.

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

Популярність безсерверних додатків росте з неймовірною швидкістю. Вони пропонують досить простий спосіб збільшення продуктивності. Ваш клієнт повністю відключений від сервера. Загальною практикою є використання AWS API Gateway в поєднанні з функцією AWS Lambda як BaaS (backend as a service), який буде використовуватися вашим клієнтом. Ввідну інформацію ви можете знайти в цьому прекрасному керівництві Аднана Рахича.

Vue.js продовжує набирати популярність

Навіть з урахуванням успіху React, Vue (створений Еваном Ю ) продовжує набирати популярність. Фреймворк забезпечує компонентну архітектуру і є однією з основних альтернатив для React. Багато великі компанії планують впроваджувати його, в тому числі GitLab, які реалізували його в минулому році через фреймворк.

CSS-in-JS і підготовка до Священної війни CSS

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

У 2017 році стилізовані компоненти (від Макса Стойберга, Глена Маддерна, Філа Плюхтуна) є лідерами в плані популярності. Emotion (від Кая Хохенберга) — одна з новітніх бібліотек, але вона також швидко набирає популярність. Ще один варіант, який слід розглянути, glamorous (від PayPal, Кента Сі Доддса та інших активних учасників проекту), який призначений для огортання бібліотеки glamor. Для отримання більш докладної інформації про доступні параметри CSS-in-JS ознайомтеся з цією статтею.

Генерація статичних сайтів

У 2017 році ми спостерігали тенденцію повернення до статичних сайтів. Такі системи, як Gatsby, дозволяють створювати статичні сайти з використанням React та інших сучасних інструментів. Не кожен сайт повинен являти собою складне сучасне веб-додаток. Генерація статичних сайтів дає можливість скористатися перевагами рендеринга на стороні сервера і забезпечити значно вищу швидкість, так як ви обслуговуєте попередньо створену розмітку. В якості гарного прикладу можна навести офіційну документацію React, яка була створена з допомогою Gatsby.

Створення статичних сайтів породило ще одну тенденцію, відому як JAMStack : «JavaScript, APIs, Markup». JAMStack використовує ті ж готові статичні HTML-файли, що застосовують багаторазово використовувані API і JavaScript для обробки будь-якого динамічного програмування під час циклу запиту/відповіді. Netlify — відмінний варіант для початку роботи з JAMStack і статичним хостингом. Брайан Дуглас написав чудову статтю, в якій порівнюються додатки JAMStack з додатками з рендерингом на стороні сервера.

GraphQL змушує переосмислити розробку API

Останнім часом GraphQL активно витісняє в багатьох нішах REST, а Самер Буна навіть стверджує, що REST вже мертвий. Замість того, щоб керувати кількома контрольними точками і отримувати непотрібні дані, GraphQL дозволяє клієнту декларативно визначати потрібні йому дані і отримувати їх з однієї контрольної точки.

Ця практика стає настільки поширеною, що GitHub написали на GraphQL нову версію свого API, і багато компаній створюють відповідні продукти, щоб зробити їх доступними для всіх розробників, таких як популярний фреймворк Graphcool від Йоханеса Шиклинга.

React Router 4

React Router від Райана Флоренса і Майкла Джексона еволюціонував з просто маршрутизатора для React в React Router — декларативний маршрутизатор, який включається через просте використання компонентів React. Це перша версія, схвалена командою React. API стабілізувався, і команда React Training заявила, що не очікує якихось серйозних змін протягом всього терміну функціонування проекту.

Вихід Angular v4, а потім швидкий вихід Angular v5

Після пропуску виходу версії 3 для підтримки SEMVER, 23 березня офіційно був представлений Angular 4. У версії 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 представлені всі нові хукки циклу додатки, включаючи ActivationStart, ActivationEnd, ResolveStart і ResolveEnd.

TypeScript і Flow

TypeScript став культовим для багатьох розробників JavaScript. У свою чергу Flow пропонує більше швидкий спосіб введення типів без агресивного рефакторінгу. Багато розробники висловлювали побажання введення типів в JavaScript. TypeScript був створений Microsoft і є обов’язковою вимогою в новій версії Angular. Flow — це дітище Facebook.

gitconnected створює співтовариство розробників

gitconnected запустив створення спільноти розробників програмного забезпечення. Вона пропонує можливість спільної роботи, обміну статтями і створення обговорень з іншими розробниками. Крім того, ви можете легко виводити проекти і портфоліо на персоналізованої сторінці свого профілю. Не пропустіть можливість зв’язатися з іншими людьми, які поділяють ваші інтереси і допомагають один одному вчитися і рости.

Чого очікувати в 2018 році

Якщо я пропустив щось значне, напишіть будь ласка про це в коментарях!