Обучайся бесплатно с WAYUP Premiere сегодня вечером

Многое произошло в прошлом году относительно развития средств frontend-разработки. Текущий год признан годом инноваций и действий, прогресса и стремительных изменений. Изначально программное обеспечение поглотило мир, затем интернет (веб) поглотил приложения, а на смену вебу пришел JavaScript. Но в 2018 году этот самый JavaScript был поглощен React (фигурально). Да, именно React выиграл большое сражение среди многих других своих аналогов и вариаций и теперь является весьма интересным и популярным, хотя в конце 2017 года некоторые разработчики отдавали свое предпочтение Angular.

В свою очередь, React продолжает лидировать во время опросов тех же самых разработчиков, прогресс его использования растет очень быстро и интенсивно, можно даже сказать, стремительно и резко, на фоне стагнации использования Angular (2016-2017 гг).

Но все было бы просто и понятно, если бы на рынке не оказалось Vue.js, Next.js, Reason, GraphQL, Storybook, Webpack и других библиотек и фреймворков, которые используются веб-разработчиками в разной степени и количестве. Сотни бесплатных библиотек JS сводят с ума и становится трудно понять, на чем остановиться, чему отдать свое предпочтение. Некоторые превращаются в новые проекты, интегрируются в другие, а  другие развиваются самостоятельно и интенсивно. А если учесть общую синусоиду развития, то «топ» сегодня – уже «аутсайдер» завтра, и наоборот. Громкие имена  jQuery, React, Webpack известны многим, но что происходит на фронте менее известных библиотек?

Мы рассмотрим разные и лучшие, по нашему мнению, библиотеки JS для самых разных целей, которые обычно необходимы при работе над веб-проектами (сайты, интрфейсы, приложения). Мы никому не отдаем предпочтение, но наблюдаем за многообразием в мире, за колебаниями популярности. Текущий год только в разгаре, колебания накаляются, и уже к зиме очень многое может перевернуться «с ног на голову».

Vue и React

Vue.js имеет тонну оценочных звезд и загрузок на GitHub, но заменить полностью Angular и React он не может, да и изучать его некоторые стремятся только после знакомства с первыми двумя. Мало кто еще в 2017 году верил в то, что Vue способен обогнать React по количеству использований и оставить Angular  в тени по количеству рекламы. Но в течение именно 2018-2019 годов мы сможем увидеть, насколько Vue сильно поглотит, как минимум, React. Хотя, давайте одновременно с этим не будем забывать о том, что у React существует большая финансовая поддержка одной из богатейших компаний в мире (Facebook), не говоря уже о талантливых разработчиках, что трудятся над приложением. 

 

Vue, с точки зрения рядовых разработчиков, легок в освоении, имеет отличное управление, встроенную маршрутизацию, что превращает его в полноценный фреймворк для создания приложений.  Сообщество Vue, конечно, не так велико, как у React, но оно растет на основе того, как разработчики прислушиваются к пожеланиям в развитии библиотеки.

В тоже время подвинуть React у Vue пока не получается. Сами пользователи более всего любят и используют именно React. В тоже время Vue способен привлечь новых разработчиков, но переманить и убедить «старичков» в том, что он действительно хорош и его разрабатывает и поддерживает одна большая команда – сложно. Дополнительно на сайте самого Vue есть достаточно объемный материал о сравнении библиотеки с иными на рынке.

Riot.js

Виртуальный рендеринг DOM и пользовательские элементы воплощены были в React. И если нужна мощная библиотека для создания интерфейсов, то именно его и выбирают.

Но альтернативой React может выступить и Riot. Используя библиотеку можно также иметь доступ в виртуализации DOM, но процессом проще управлять с более простым синтаксисом. К сожалению, эта библиотека не такая большая, как React, и она не поддерживается Facebook, поэтому у вас не будет огромного сообщества. Но это здравая альтернатива, и это достойный конкурент для frontend-разработки.

Popmotion.js

Библиотека для работы с анимацией JS – Popmotion – также пользуется большой популярностью на Github. Уникальность библиотеки в легкости, быстроте, в поддержке браузерами, большом количестве настроек. Кроме того, все этапы анимации можно отследить отдельно, проработать каждый кадр. Пример 1 и пример 2.

 

Иными словами, Popmotion.js – это, своего рода, новинка в среде разработчиков, которые уже намучились с Flash в свое время и с попытками использовать его с jQuery. Здесь же все становится проще и легче создавать.

Тестирование скорости работы анимации, созданной с помощью разных инструментов, можно увидеть на codepen.

Create.js

От веб-анимации до цифровых медиа – все это можно создавать только в одном Create.js. И это не одна библиотека, а много разных для разных целей. Например, Easel.js работает с html5 canvas (создание изображений при помощи скриптов), а Tweet.js помогает создавать пользовательские анимации и анимации для интернета. Но при этом каждая библиотека полностью отличается от других своим функционалом и использует функции современных браузеров. Подробнее о возможностях и библиотеках посмотрите на сайте. Скриншот ниже демонстрирует библиотеку в действии. Пользователь всего лишь рисует мышкой, но от того, долго зажата ЛКМ или кратко была она нажата, зависит толщина линии.

Meteor

Любая платформа может быть интегрирована с Meteor и результаты будут фантастическими. Библиотека позволяет создавать приложения с поддержкой JS от чат-каналов до панелей мониторинга или соцсетей. Например, на Meteor  создан социально новостной фреймворк Телескоп, позволяющий создавать сайты новостей/голосований на базе Meteor и React.

 

У «Метеора» много функций; изучать его сложно. Но, вот, если изучить – то многие разработчики получают возможность создать огромный функциональный и разносторонний веб-ресурс на одной только платформе.

Chart.js

Гистограммы, линейные диаграммы, пузырьковые диаграммы и самые разные иные тоже можно легко создать с помощью отдельных и специальных библиотек JS.  В данном случае Chart.js – самая простая из них, но с поддержкой встроенных параметров анимации.  Её легко настраивать, легко использовать и у нее самая объемная, глобальная документация из всех, которые создаются для проектов с открытым исходным кодом (open source project).

WebVR

Похоже, что виртуальная реальность год назад с шумом захватила  мир, и большинство разработчиков взволновались (как и новые стартапы) о том, как же оснастить свои проекты новой технологией, инновационными возможностями и привлечь, тем самым, пользователей. И, разумеется, появление WebVR не заставило себя ждать.

В материалах по веб-дизайну мы рассказывали о конкретной и наглядной реализации виртуальной реальности на сайтах. И тогда же отметили использование данной библиотеки. Сейчас же обратим внимание на то, что WebVR работает с Oculus Rift и Vive и представляет собой также проект с открытым исходным кодом. Подробнее о нем можно почитать либо на официальном сайте, либо на сайте Mozilla.

Three.js

Трехмерная анимация сейчас никого не удивляет. Да, мы смотрим 3D-фильмы, видим видеоигры, но веб-анимация остается сложной и непростой. Она – основная цель развития технологии, в целом. Но благодаря библиотеке Three.js можно уже создавать простенькие трехмерные анимации и внедрять их на сайт.

На сайте приложения можно найти десятки примеров использования. Это и загадочные движущиеся фоны, графика, динамический интерфейс с эффектом трехмерной анимации. Поэтому, если у вас море терпения и желания, то создать красоту и сказочность не составит труда.

Storybook

Storybook потребуется разработчикам для тестирования компонентов UI, определения их и создания. Причем создавать и тестировать компоненты можно изолированно друг о друга. Это похоже даже на "оживший" UI styleguide, который ценится в среде разработчиков.

Возможно, в своей работе вы уже видели, иногда, что собой представляет Storybook, но увидеть его в действии можно в сборнике событий для Airbnb.

Prettier

Prettier – небольшой помощник для работы с кодом. Его цель проста – сделать код более читабельным и понятным, красивым. На Github у него огромное количество звезд  и скачиваний, а используется он в таких проектах по умолчанию как React, Next.js, Webpack. Он не требует установки и начать работать с ним просто и легко.

Parcel и Webpack

Оба JS-приложения заслуживают одинакового внимания и оба являются сборщиками (бандлерами) web-приложений.  Иными словами, все ресурсы некоторого приложения компилируются в один (чаще всего) файл и подготавливаются для запуска в браузере.

Webpack является наиболее мощным и функциональным инструментом, работает с одностраничными приложениями, может разделять код.

Но в противовес ему существует и бандлер Parcel, который также имеет высокую популярность на Github и буквально наступает на пятки Webpack’у. Фишка Parcel – в скорости работы. Она значительно выше, чем у Webpack (раз до 10, если используется кеш). Кроме того Parcel не требует настроек, как таковых, а у Webpack они есть и весьма мудрёные.

В общем и целом, но борьба между Parcel и Webpack аналогична противостоянию Vue и React. И кто, и когда выйдет победителем, а потом сместит другого – остается извечным вопросом. Это похоже на многомиллионные споры: «Что лучше Xbox, PC или PS4».

Gatsby

Говоря о веб-разработке, о работе с сайтами нельзя также оставить в стороне и генератор сайтов Gatsby, имеющий в основе ReactJS. Особенно потому, что даже сайт самого React создан именно с помощью данного инструмента. Особенность Gatsby в том, что используемые технологии позволяют сделать предзагрузку данных страниц сайта и, тем самым, ускорить их просмотр и отображение. У него нет шаблонов, но зато он оперирует компонентам React и Webpack. Поэтому его считают лучшим вариантом для создания реально быстрых проектов, поддерживающий автоматическое обновление и мгновенные переходы с одной страницы на другую.

Заключение

Все библиотеки, инструменты веб-разработки, упомянутые в данном материале, имеют нечто уникальное, что можно предложить сообществу JS. Если лично вам нравится работать с JavaScript, то мы рекомендуем изучить каждую библиотеку подробно, посмотреть внимательно на то, что они могут предложить конкретно для вашего проекта.

Нельзя сказать, что создавать приложения или интерфейсы для сайтов/приложений нужно только в «этом» или «этом» инструменте, подключать только вот «эту» и «эту» библиотеку. Разные цели определяют и разный инструментарий. И, несмотря на возросшую популярность React в 2018 году, никто не стремится отчаянно забывать Vue. Или менять свой стиль работы и переходить сразу на React . Но если вы еще не успели привыкнуть к чему-то конкретно, то попробуйте изучить основные библиотеки JS, некоторые наиболее часто используемые инструменты и подобрать что-то свое, удобное, возможно, простое и легкое.

Как вам материал?