Я выбираю тебя! Кто лучший покемон из JavaScript-фреймворков?

Руководство для тренеров JavaScript-фреймворков. Три самых прокачанных покемона – Angulard, Reactle и Vuebasaur – наконец встретились!

Привет вам, начинающие и не очень тренеры JavaScript-фреймворков :)

Если вы подбираете в свою команду новых покемонов и никак не можете сделать выбор, позвольте представить вам три уникальных экземпляра.

Лучшие из лучших в своем деле – Angulard, Reactle и Vuebasaur – три покемона высшей лиги, звезды JavaScript JS! В этом руководстве вы найдете самые полезные сведения об эволюции, навыках и характере этих особей.

Руководство предназначено для тренеров, знающих JavaScript основы и имеющими минимальный опыт работы с любым JS-покемоном фреймворком.

Помните, не тренер выбирает покемона, а покемон выбирает тренера :)

JS-фреймворк, я выбираю тебя!

На плодородной почве фронтенда взросло множество инструментов, библиотек и фреймворков, призванных облегчить жизнь мастерам веба и сделать программирование JavaScript проще и приятнее. Тут и там вы натыкаетесь на диких покемонов, которые так и просятся в вашу команду. Как же выбрать самого сильного?

Reactle

Стабильный JSX-покемон, выведенный в лабораториях Facebook в 2013 году.

Эволюция

За 5 лет React выдержал уже 16 мажорных версий (текущая стабильная версия 16.x вышла в ноябре 2018 года).

Эволюция покемона проходит под девизом "не поломай ничего", поэтому он так любим тренерами JavaScript-фреймворков. Если у вас большой и важный проект, вы точно не хотите, чтобы очередное обновление библиотеки поставило его работу под угрозу. Twitter и Airbnb точно не хотят, и они могут быть спокойны, потому что Reactle  – очень стабильный покемон.

Переход на новую стадию развития может стать еще проще, если вы используете специальные инструменты для миграции вроде  react-codemod.

Способности

Reactle относится к классу интерфейсных покемонов, его основная способность – создание гибкой и расширяемой системы UI-компонентов.

Не следует ждать от покемона из коробки полного фронтенд-набора. Однако недостаток функций он с лихвой компенсирует своими возможностями интеграции. Практически любая задача, которую вы можете придумать, уже решена и оформлена в виде совместимого с React модуля.

Характер

Очень дружелюбный и легкий в общении JavaScript-покемон. Имеет специфическое JSX-произношение, к которому нужно привыкнуть.

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

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

• React Developer и путь его развития в 2019 году
• Псс! Вы знали, что ReasonReact – лучший способ работы с React?
• Структурирование проекта на React – полное руководство

Angulard

Мощный TypeScript-покемон, родившийся в Google в 2010 году.

Эволюция

Первая стадия развития Angulard'а – AngularJS – длилась целых 6 лет. В 2016 он потерял окончание "JS" в имени, стал просто Angular, но приобрел взамен много крутых способностей.

Мажорные обновления фреймворка происходят каждые полгода. В октябре 2018 любители покемонов могли наблюдать переход на седьмую стадию. Еще полгода длится поддержка предыдущей версии. Таким образом, у вас есть достаточно времени для внесения изменений в проекты, если они необходимы.

Способности

Angulard – представитель класса архитектурных покемонов. Он берет на себя весь фронт вашего проекта, объединяет все части в единое целое и умело их координирует. Сильнейшая атака – MVC-удар.

У фреймворка большие возможности прямо из коробки – и это серьезная ответственность для тренера. Покемона нужно хорошо знать, чтобы эффективно управлять его действиями, а сближение с Angular требует времени.

Характер

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

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

• Изучаем Angular: видео, подкасты и полезные ссылки
• Изучаем Angular: текстовые туториалы
• Лучшие ресурсы для изучения Angular с нуля

Vuebasaur

Прогрессивный покемон, выведенный бывшим сотрудником Google в 2014 году.

Эволюция

Vuebasaur приобрел популярность среди тренеров JavaScript-фреймворков сравнительно недавно. В августе 2018 года он перешел на стадию развития 2.17.

API первой и второй версий на 90% одинаковы, а для удобной миграции есть специальный инструмент.

Любители покемонов с нетерпением ждут третьей ступени эволюции. Ожидается, что у Vue появится новая мощная TypeScript-атака.

В разделе FAQ для миграции Vue упоминает, что 90% API одинаковы, если вы переходите от 1.x-2. Существует вспомогательный инструмент миграции, который работает на консоли для оценки состояния вашего приложения.

Способности

Vuebasaur – "прогрессивный" покемон. У него есть мощная атака – постепенное внедрение в любой проект. Нет необходимости перестраивать уже существующее здание с нуля, просто запустите туда Vue, и он сделает отличный ремонт.

Характер

Vue легко поддается дрессировке и настройке. С ним очень просто найти общий язык, им легко управлять. Даже если вы только начинаете изучать JavaScript основы, покемон будет поддерживать вас.

Однако, тренер, помни: Vue не следит за качеством твоей работы и допускает плохой код, не расслабляйся!

• Твиттер на Vue.js: руководство для начинающих
• 5 практических примеров использования Vue.js
• Кофе-брейк: бессерверное приложение для поиска кофеен Starbucks

Популярность среди тренеров JavaScript-фреймворков

Все эти JavaScript фреймворки чрезвычайно популярны среди тренеров. У каждого из них есть собственная армия фанатов. Кого же любят больше всех?

Анализ поисковых запросов

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

Заглянем в Google Trends:

Статистика за 12 месяцев в целом отражает общую картину последнего времени в области JavaScript-фреймворков: повышенный интерес к Vue и стабильное второе место React.

Npm

На npm trends запрос angular vs react vs vue – самый популярный. Тут безоговорочно лидирует React.

Репозитории на GitHub

Официальные репозитории JavaScript-фреймворков активно форкаются, развиваются, пулл-реквестятся и лайкаются.

facebook/react на данный момент набрал:

• 24k форков
• 130k github-звезд

У vuejs/vue:

• 20k форков
• 140k github-звезд

angular/angular сильно отстает:

• 13k форков
• 50k github-звезд

Но не будем забывать, что Angular, каким мы его сейчас знаем, появился только в 2016 году, эволюционировав из AngularJS (у репозитория которого тоже немало звезд и форков). Этот факт вносит смуту во все статистические выкладки, посвященные JavaScript-покемонам.

Вот так выглядит звездная история репозиториев за все время существования:

А это данные, собранные самим Github за 2018 год (количество уникальных участников):

Из этих данных можно сделать вывод, что тренеры стабильно любят React, испытывают большой интерес к Vue и побаиваются Angular.

Знаменитые тренеры

Facebook активно использует своего покемона Reactle во всех проектах – Facebook, Instagram, WhatsApp. Также он неплохо прижился в команде Netflix.

Angulard поддерживается и используется Google. Также на него уверенно полагается платежный гигант PayPal.

Vuebasaur трудится в команде GitLab, а также работает с крупными китайскими компаниями Baidu, Xiaomi. Этот покемон особенно интересен для крупных корпораций, так как он не связан с IT-гигантами вроде Facebook или Google.

Кто лучший JavaScript-покемон?

Любители JS-покемонов обожают сравнивать своих питомцев. Мы все время спорим о том, какой фреймворк/библиотека лучше. Но следовало бы задуматься о другом – какой инструмент лучше в каждом конкретном случае.

• Хороший, спорный, злой Vue.js: опыт перехода с React
• Сравнение Angular и React и их ключевые особенности
• Angular vs. React: что лучше для веб-разработки?

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

С другой стороны, если вы пишете TODO-приложение или простой сайт с минимумом логики, то нет смысла привлекать в команду такого архитектурного гиганта как Angular и долго с ним разбираться. И наоборот, для сложной большой системы, требующей высокой надежности, это отличное решение.

Все JavaScript фреймворки имеют отличную документацию и поддерживаются мощным сообществом. У каждого из них есть свои преимущества и недостатки. Есть и немало общих концепций, сближающих их. Выбирайте инструмент ради задачи, а не ради инструмента.

Советы для молодых тренеров JavaScript-фреймворков

Приоритеты

Что для вас важнее – быстрый выход на рынок с готовым продуктом или его надежность? Низкая кривая обучения или хорошо структурированный проект? Обязательно проведите предварительный анализ приоритетов перед выбором покемона.

Основы

Помните, что все три покемона эволюционировали из простого JS. Прежде чем начинать работать с ними, убедитесь, что вы хорошо разбираетесь в базовых концепциях и понимаете JavaScript основы. Не привязывайтесь к фреймворкам – они временны, привязывайтесь к самому языку.

• 12 JavaScript-трюков, которым не учат новичков
• TOП-12 JavaScript-концепций: от ссылок до асинхронных операций
• Как кодить на JavaScript в 2019? Тренды, тенденции, предсказания

Компоненты

Vue, Angular и React используют компонентный подход – разбивают код на небольшие модули, которые удобно сочетать друг с другом и повторно использовать. Разберитесь в этой методологии, ведь сейчас она на пике популярности.

Компонент обычно получает на вход некоторые данные и на их основе некоторым образом изменяет свое поведение. Это обычно проявляется в пользовательском интерфейсе.

В Angular компоненты называются директивами. Они маркируют DOM-элементы, которые затем отслеживаются фреймворком.

В компонентах React объединяются HTML и JavaScript, то есть представление и поведение компонента неразрывно связано JSX-синтаксисом.

Vue также предпочитает объединять весь код компонента в одном файле, включая его стили. Он позволяет использовать препроцессоры CSS и легко интегрируется с Bootstrap и другими интерфейсными библиотеками.

Как поладить со своим JavaScript-покемоном?

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

А какого JavaScript-покемона выбираете вы?