Основные тренды front-end разработки 2017 года

Основные тренды 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, которые реализовали его в прошлом году через фреймворк.

Основные тренды front-end разработки 2017 года

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 году

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

Все больше компаний реализуют мобильные решения, которые имеют единую кодовую базу, такую как React Native или Flutter.

В Веб все чаще используется оффлайн функции и оптимизация опыта мобильных пользователей.

WebAssembly будет и дальше развиваться, предлагая лучший опыт работы в Интернете.

GraphQL продолжает бросать вызов REST.

Реакт укрепляет свои позиции (и даже больее того), теперь все намного проще с лицензией.

Flow и TypeScript занимают более сильные позиции, позволяя улучшить структуру JavaScript.

Влияние контейнеризации становится более выраженным для frontend-архитектур.

Виртуальная реальность продолжает развиваться, используя такие библиотеки, как A-Frame , React VR и Google VR.

Люди создают действительно крутые приложения, использующие blockchain и web3.js (созданные Мареком Котевичем и Фабианом Фогельстеллером).

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

Автор: Trey Huffine

Источник: https://levelup.gitconnected.com/

Редакция: Команда webformyself.

Современные тенденции и подходы в веб-разработке

Узнайте алгоритм быстрого профессионального роста с нуля в сайтостроении

Узнать подробнее
Самые свежие новости IT и веб-разработки на нашем Telegram-канале

Курс по React JS Material UI

Прямо сейчас посмотрите курс по React JS Material UI

Смотреть курс

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree