Продолжаем вместе разбирать, как решается наша задача для начинающих разработчиков. На этот раз поговорим о фреймворках и библиотеках.
17 Января 2019
# training # internship #it
Reading time: 5 min
Напомним, в прошлый раз мы с вами большую часть времени посветили выбору архитектуры для создания нашего приложения. Вместе мы разбирались, в чем отличие подходов MVC и MVVM, что такое MPA и SPA, чем удобны микросервисы, и как правильно все это сочетать.
Посмотреть на тематических котиков и почитать подробности об этом можно здесь.
В результате созерцания котов и чтения теории, мы сошлись на том, что сейчас в ходу микросервисная архитектура + SPA (Single page application). А значит они требуют особого внимания.
Что касается микросервисной архитектуры, то мы рекомендуем ее не только из-за удобства, но и потому, что сегодня это «последняя мода», а за «модой» в программировании следят куда тщательнее, чем на подиумах.
Что же касается SPA, то для упрощения его создания существует немало библиотек и фреймворков, в которых мы сегодня и будем разбираться. А именно, нас интересуют JS-фреймворки и библиотеки и то, как правильно выбрать один из них для работы.
Что это вообще такое?
Фреймворк — это такой программный продукт, у которого есть правила использования (это API, то есть информация о том, как им пользоваться) и он упрощает разработку, избавляя программиста от написания кода для решения рутинных задач (нам не нужно изобретать велосипед, ведь решение многих типовых задач уже давно найдено). Так же фреймворки содержат массу полезного инструментария, применяя который, разработчик занимает свой мозг только конкретной задачей и, по сути, может сконцентрироваться на творческом процессе, избавленный от необходимости писать рутину и постоянно помнить про всевозможные типовые (обычно, мелкие и вылетающие из головы) решения, которые необходимо было бы внедрить в код (например, различные проверки).
Библиотека
В программировании «библиотека» — это сборник подпрограмм или объектов, используемых для разработки ПО. Интересующие нас библиотеки JavaScript — это, в свою очередь, сборники классов и/или функций на этом языке. С ростом популярности JS выросла и потребность в том, чтобы как-то упростить создание динамических элементов пользовательского интерфейса — отсюда как грибы полезли различные библиотеки. Несомненно, пользоваться ими удобно не только потому, что таким образом сокращается количество кода и повышается функциональность, но и из-за дополнительных «плюшек»: кроссбраузерная верстка, свободная от лицензий разработка (по большей части), упрощенное взаимодействие с другими языками.
Фреймворк
Фреймворк — это ПО, которое предназначено для облегчения разработки и объединения разных модулей проекта. Для программиста это своеобразный инструмент, который, как и библиотека, позволяет не писать множество строк кода вручную, а помогает быстро и компактно «собрать» веб-приложение. В чем же отличие от библиотеки? Главное — в том, что библиотеку можно использовать просто как набор подпрограмм, близких по функционалу. Она не влияет на выбор архитектуры и ничем вас не ограничивает в этом плане. Фреймворк же — это «жесткая» конструкция: он диктует правила построения архитектуры, задает некий каркас приложения, который можно будет расширять и изменять только в рамках имеющихся требований.
Фреймворки бывают предназначены для работы на стороне сервера (бэкенд) и работы на стороне клиента (фронтенд). Мы с вами подробно остановимся на клиентских фреймворках, которые работают в браузере и помогают создавать и улучшать пользовательские интерфейсы, в том числе — одностраничные приложения.
Выбор фреймворка/библиотеки
Все они решают одну и ту же задачу для нас — это построение SPA. Все невероятно похожи, но у каждого есть свои особенности, свои плюсы и минусы.
QUOTE
"Люди предпочитают разные языки по тем или иным причинам. Подобно языкам, люди предпочитают разные фреймворки по тем или иным причинам. Не существует такого единственно правильного фреймворка, который удовлетворил бы всех"
— Эван Ю, основатель Vue.js
Но из чего же все-таки исходить при выборе фреймворка?
Для первого раза предпочтителен более популярный вариант. Хорошо, если вы знаете, какой фреймворк удобен для работодателя и сразу начнете работать с ним. Таким образом вы покажете, что готовы работать в команде, учитываете интересы работодателя и финансовую сторону вопроса. Если в компании у каждого разработчика будет свой фреймворк — это отрицательно скажется на производительности и взаимозаменяемости.
Желание «пощеголять» использованием редкого фреймворка на первых порах выйдет вам боком и в том случае, когда вы начнете искать информацию: литература, видео, курсы, форумы — все это более обширно и содержательно для ПО, которое популярно.
А что сегодня популярно?
В JavaScript сегодня лидерами считаются Angular и React. Их популярность «поддерживают» такие гиганты, как Google и Facebook.
Им на пятки наступают более «юные» Ember и Vue, не мейнстримные, но уже полюбившиеся.
Все остальное — это скорее инструменты «для души» и «для себя».
У нас в HWd Tech мы провели «фреймворковый» опрос с формулировкой «Что лучше для новичка?». Результаты получились следующие:
50% голосов получилReact
33% уEmber (в этом ситуация несколько отличается от общемировой)
17% досталисьAngular
А вот «бедняжке» Vue. js голосов внутри компании не досталось, однако мы достоверно знаем, что кое-кто из наших стажеров пользуется именно им.
Давайте повнимательнее присмотримся к четырем самым популярным библиотекам и фреймворкам. Посмотрим более пристально на их особенности.
React
Он же React. js или ReactJS. Это библиотека с открытым исходным кодом, разработанная и поддерживаемая Facebook, Instagram и другими корпорациями. Чаще всего используется в паре с другой библиотекой — Redux.
Великолепной официальной документацией похвастаться не может — скорее, тремя разными «конкурирующими» туториалами для новичков, но существует множество сторонних ресурсов, курсов и видео, где легко найти ответы на все вопросы.
Особенности
Однонаправленная передача данных от родительских компонентов к дочерним. Компоненты получают свойства как множество неизменяемых (англ. Immutable) значений, соответственно не могут напрямую их изменять, а только через callback функции. Этот механизм называется «свойства вниз, события наверх»;
JSX, он же JavaScript XML — это расширение синтаксиса, которое позволяет пользоваться похожим на HTML синтаксисом для описания структуры интерфейса;
Метод жизненного цикла, позволяющие разработчику запускать код на различных этапах жизненного цикла компонента.
Плюсы
Понятно, как компонент будет отрисован при взгляде на исходный код — все читабельно и просто в сопровождении.
Связывание JS и HTML через JSX.
Можно рендерить React на сервере.
Отлично подходит для командной разработки.
Использует Virtual DOM.
Есть свой CLI.
Реактивность и компонентная структура.
Минусы
На начальном этапе возможны сложности с тем, чтобы разобраться — взаимодействие компонентов тут непростое.
React достаточно большой фреймворк и много весит.
В Сети есть жалобы на то, что барахлит кроссбраузерная поддержка.
Ember
Ember. js — это уже не библиотека, а мощный и продуктивный фреймворк, предназначенный для создания SPA. Его «поддерживают» такие корпорации, как TED, Yahoo, Twitch. tv и Groupon. Он построен на архитектуре MVC и, соответственно, диктует правила данного подхода разработчику. Он отлично подходит для базовых проектов. Поставляется с CLI, что ускоряет процесс разработки. В автоматическом режиме помогает создавать маршруты, контроллеры, компоненты и модели с наборами тестов. Самостоятельно устанавливает необходимые пакеты, инструменты сборки, среду тестирования и т. д. Кроме того, Ember отличается очень качественной официальной документацией, содержащей примеры и пояснения.
Особенности
Маршруты являются одним из основополагающих принципов Ember, каждому маршруту объекта соответствует URL, который определяет текущее состояние приложения.
Кроме того, каждому маршруту соответствует модель, в которой содержатся данные, соответствующие текущему состоянию приложения.
Контроллеры используются для придания модели лcогики отображения, нормальной практикой считается обращение к свойствам модели из Ember. Controller.
Шаблоны, написанные на языке HTMLBars используются для построения HTML-кода приложения и позволяют встраивать в него динамически обновляемые выражения.
Плюсы
Интерфейс командной строки (CLI) — ember-cli, управляющей большей частью процесса разработки.
Привязка данных: когда значение переменной меняется, обновляется любая часть приложения, которая следит за этой переменной.
Минусы
Структура Ember не похожа на структуру других популярных фреймворков: собственная объектная модель, стандарт ES2015 здесь почти не внедрен, но эту проблему решает транспайлер Babel.
У этого фреймворка есть свой собственный уровень данных — Ember Data.
Angular
AngularJS — JavaScript-фреймворк с открытым исходным кодом, тоже предназначен для разработки SPA и «подчинен» MVC-шаблону. Официальная документация на этот фреймворк достаточно скромная, зато имеется множество сторонних ресурсов, видео и уроков, где можно искать информацию.
Особенности
В Сети Angular называют лидером по количеству встроенных возможностей. Поскольку изначально он планировался как инструмент для создания больших приложений, разработчики встроили в него огромное количество модулей и инструментов. Фреймворк работает с HTML, содержащим дополнительные пользовательские атрибуты, которые описываются директивами, и связывает ввод или вывод области страницы с моделью, представляющей собой обычные переменные JavaScript. Значения этих переменных задаются вручную или извлекаются из статических или динамических JSON-данных.
Плюсы
Библиотека Rx, которая позволяет обрабатывать асинхронные события.
В четвертой версии Angular уже есть CLI, запускается прямо из командной строки и здорово облегчает работу.
Используется TypeScript вместо JavaScript — типизированный язык. Сегодня большинство программистов склоняется к тому, что типизированные языки менее подвержены ошибкам и позволяют избежать некоторых проблем.
Angular расширяет традиционный HTML, чтобы обеспечить двустороннюю привязку данных для динамического контента, что позволяет автоматически синхронизировать модель и представление. В результате AngularJS уменьшает роль DOM-манипуляций и улучшает тестируемость.
Используя внедрение зависимости, Angular переносит на клиентскую сторону такие классические серверные службы, как видозависимые контроллеры. Следовательно, уменьшается нагрузка на сервер и веб-приложение становится легче.
Двустороннее связывание данных в AngularJS является наиболее примечательной особенностью, и уменьшает количество кода, освобождая сервер от работы с шаблонами.
Минусы
Минус, который для новичков скорее плюс: Angular очень строго «навязывает» свою структуру разработчику. При этом его инструменты понятны и удобны, но если для вас важна гибкость — придется попотеть.
Как мы уже говорили, Angular — фреймворк для больших приложений, а потому может показаться слишком большим и избыточным, возможно, захочется поискать «что полегче».
Не приспособлен обрабатывать манипуляции с DOM с большим количеством данных, так как полагается на «грязные проверки» для управления изменениями DOM. Для большинства сайтов это не будет проблемой, но сложности могут возникнуть с GUI редакторами и видео играми.
Кроме них не признает также высоконагруженные фотогалереи. В этом случае помогут формы с высоким уровнем пользовательского взаимодействия.
Vue
Фреймворк Vue. js легко интегрируется в проекты с использованием других JavaScript-библиотек. Может функционировать как веб-фреймворк для разработки одностраничных приложений в реактивном стиле. Достаточно «юный» Vue. js сегодня активно распространяется, наращивая обороты. Он уже поделил второе место в мире с Angular, но пока отстает от лидера — React.
Особенности
Использование Virtual DOM.
Реактивность и компонентная структура.
Фокус на корневой библиотеке. Все прочие вопросы (например, роутинг и пр.) выносятся в дополнительные библиотеки.
Подробнее почитать про особенности Vue. js можнотут.
Плюсы
Это «легкий» и быстрый фреймворк — весит не более 20 Кб, но отличается хорошей производительностью и гибкостью — легко добавлять нужные плагины, миксины и т. д.
У Vue. js и документация хорошая, и «поддержка со стороны» в виде полезных сайтов и каналов имеется.
HTML, CSS и JavaScript будут жить в одном файле.
Тоже есть свой CLI — vue-cli.
Реализован двухсторонний механизм привязки данных, самостоятельно отслеживаются и обрабатываются все изменения.
Нет нужды в установке сторонних модулей (типа MobX или React Router), у фреймворка есть свой Vue Router и контроллер состояний Vuex.
Поддержка HTML-шаблонов и JSX.
Минусы
Есть неочевидные сложности с архитектурными паттернами — неясно, где следует обрабатывать запросы к API, где должна быть логика аутентификации. Начинающие разработчики могут, не разобравшись, начать размещать логику без состояний во Vuex или даже прямо в компонентах, хотя этого быть не доложно.
Имеющийся у Vue. js CLI сильно ограничен в возможностях по сравнению с Ember или Angular.
Резюме
Если вы уже определились с выбором фреймворка/библиотеки или находитесь в процессе принятия решения, рекомендуем вам задать себе несколько проверочных вопросов:
Легко ли, в целом, достичь необходимого результата?
Понятна ли документация, как часто требуется поддержка извне и насколько легко найти нужную информацию?
Много ли дополнительных материалов вам потребовалось: искали ли вы внешние библиотеки? Было ли это сложно?
Удобен ли для вас интерфейс фреймворка/библиотеки? Приходилось ли подолгу искать нужные кнопки/функции?
Ответы на эти вопросы помогут вам окончательно определиться и решить, правильный выбор вы сделали для себя или стоит поискать еще.
Продолжение следует
Итак, мы продолжаем обсуждать решение нашей задачи. Задавайте вопросы! В дальнейшем мы расскажем о создании ЧПУ, хранении данных, адаптивной верстке, обработке изображений и других нюансах, связанных с карточкой товара. Подпишитесь на наши обновления, чтобы ничего не пропустить.
