Мы не жертвы усталости от javascript - мы дети в кондитерской

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

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

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

Фреймворки

Angular
Angular 2
Aurelia
Ember
Meteor
React
Vue

Угловой

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

Angular по-прежнему является наиболее востребованным навыком со стороны работодателей, за ним следует React. Angular по-прежнему остается одним из выдающихся вариантов новых разработок.

Одна из причин этого в том, что это просто. Существует ценность решения с наименьшим общим знаменателем. Это здравый смысл, общий смысл. Angular использует JavaScript. Простой JavaScript, а не ES6 / ES2015. Не TypeScript. Angular не полагается на зыбучие пески сложных инструментов сборки. В Angular нет никакой загадки, все хорошо известно и решено, проблема решена. Angular также является центральным элементом отличного стека MEAN, полностью полнофункционального решения на основе JavaScript.

Angular предлагает стабильную платформу. Он настолько стабилен и хорошо зарекомендовал себя, что для любого вопроса или требования будут десятки решений, модулей, руководств и ответов на переполнение стека. Количество обучающих и обучающих инструментов намного превосходит любое другое решение.

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

Энтузиасты часто забывают, что новые знания дорого обходятся бизнесу. Angular - это самый доступный и наиболее ценный фреймворк на сегодняшний день.

Угловой 2

По сути, это наследник успехов Angular, а также возможность предоставить более современное, производительное и лучше спроектированное решение.

Эти преимущества начинаются с самого начала. Angular 2 реализует интерфейс командной строки (CLI), который помогает создавать строительные леса для новых проектов и шаблонов во время текущей работы.

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

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

Angular 2 - первая платформа, которая действительно реализует паттерн Observables. Наблюдаемые объекты - это шаг вперед по сравнению с обещаниями. Они особенно хороши для потоковой передачи - данных в реальном времени, обновляемых в реальном времени. Есть отличное видео о том, как и зачем реализовывать паттерн.

Для больших приложений, которым потребуется много функциональных возможностей (таких как маршрутизаторы, управление состоянием, шаблоны, API-соединения и т. Д.), Имеет больше смысла использовать комплексную структуру, чем собирать фрагменты плохо интегрированной функциональности. И Angular 2, несомненно, самая большая рыба в этом пуле, с самой большой поддержкой, самым большим сообществом и самой коммерческой значимостью. Angular 2, несомненно, получит максимальную поддержку инструментов, большую поддержку сообщества и является лучшим вариантом для развития карьеры.

Аурелия

Во многих отношениях Аурелия предлагает лучшее из обоих миров. Архитектурно и синтаксически это мало чем отличается от Angular. Его основной разработчик, Роб Айзенберг, имел твердых последователей с ранним фреймворком Durandal. Кстати, я до сих пор ежедневно работаю с Дюрандалем. Его пригласили поработать над проектом Angular 2, но его пути разошлись из-за некоторых довольно обоснованных разногласий, и вместо этого он решил выпустить Aurelia.

Аурелия действительно современна. До того, как это было круто, Aurelia имела встроенную поддержку ES6, а теперь также поддерживает TypeScript.

Aurelia уникальна тем, что это очень современная структура, соответствующая стандартам. И все же удивительно мало… сюрпризов. Во фреймворке почти нет «магии». Все модули в значительной степени представляют собой стандартный JavaScript, обычно экспортирующий стандартный класс JavaScript и использующий стандартные свойства и методы JavaScript. По сути, вы никогда не видите ссылок на код или уникального кода для Aurelia, ничего не упаковывается, не расширяется или не просматривается. Несмотря на то, что он предоставляет большую полезность в своих привязках и шаблонах, он практически всегда просто не мешает вам.

Аурелия построена по четкой и понятной схеме - все является составной частью. Компоненты могут вкладывать другие компоненты и заменяться или создаваться динамически. Эти компоненты также на 100% соответствуют будущим стандартам веб-компонентов.

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

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

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

Отличие Аурелии заключается в ее способности делать только то, что необходимо, чтобы помочь, а не мешать. Любые свойства, доступные в области JavaScript компонента, доступные в шаблоне. Весь синтаксис написан на чистом JavaScript, и ему очень легко следовать.

Ember

Несмотря на незаслуженную репутацию трудного для изучения, Ember выделяется как самый производительный фреймворк JavaScript. Это происходит разными способами. Для начала есть Ember CLI. В других фреймворках есть инструменты командной строки с разной степенью возможностей, но у Ember до 11. Это комплексная среда разработки, которая обрабатывает строительные леса, генерирует шаблоны, тестирование, управление зависимостями, обслуживание, развертывание и всю цепочку сборки. Этот молниеносный конец помогает обеспечить соблюдение жестких конвенций Ember (в то же время извлекая выгоду из них).

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

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

У Ember есть еще одна функция, которой, как ни странно, не хватает в других фреймворках: абстракции http и богатый модельный слой. Большинство фреймворков просто используют объекты javascript, возвращаемые в результате вызова XHR, в качестве своей модели. Обработка этих вызовов остается на усмотрение разработчика. Обработка эквивалентных призывов к настойчивости тоже. Напротив, Ember использует Ember Data, по сути, API ORM, который абстрагирует весь уровень персистентности. Соглашения обрабатываются в адаптере и сериализаторе, что означает, что вызовы сохраняемости так же просты, как let model = store.find ('post', 123) или model.save () . Стандартные соглашения, такие как REST, работают "из коробки".

Ember также стремительно и поступательно развивается. Он был одним из первых поборников таких технологий, как ES6 и Promises, которые сейчас занимают центральное место как в Ember, так и в самом Javascript. Он также с энтузиазмом продвигается к веб-компонентам, с целью Ember по возможности быстро отказаться от собственной функциональности в пользу встроенных.

Недавние изменения в структуре дали нам Glimmer 2, новый высокопроизводительный движок представления, который можно использовать отдельно от остальной части Ember.

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

Например, для настройки и установки чего-то вроде Bootstrap буквально нужно набрать ember install ember-cli-bootstrap, что приведет к и настройке Bootstrap. Вы можете начать вводить классы и сразу же, без необходимости извлекать CSS, добавлять его в свои определения сборки и т. Д.

Еще более впечатляющий пример: ember install ember-cli-fastboot

Это создает законченное серверное приложение, которое запускается в NodeJS, делая ваш веб-сайт изоморфным (или универсальным) с минимальными усилиями. А затем есть развертывание тлеющих углей…

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

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

Метеор

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

Традиционные стеки разделяют роли, так что внешний интерфейс обрабатывает отображение, а серверный интерфейс API обрабатывает сохранение и получение данных. Это означает, что переход от одного конца к другому в приложении означает переход к другому процессу и, как правило, даже на другом языке. Это фактически удваивает объем знаний, требуемых от разработчика. Или, возможно, удвоит количество необходимых разработчиков.

Meteor - это один язык, от базы данных до браузера пользователя.

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

Однако даже просто использованный в Интернете, Meteor предлагает уникальные функции. В частности, Meteor допускает так называемую «реактивность полного стека», что означает, что изменения базы данных и обновления содержимого могут быть отправлены непосредственно в браузер. Опыт может обновляться в реальном времени. Это не то, что вам нужно реализовать - это то, как работает Meteor.

Meteor также имеет полную библиотеку надстроек, называемых Smart Packages, которые можно легко установить из командной строки. Просто запустите meteor add accounts-ui, чтобы получить доступ к готовой системе управления учетными записями. Существуют тысячи пакетов для упрощения и оптимизации рабочего процесса.

Не нужно беспокоиться о новейших инструментах для глотка или хрюканья. Meteor будет автоматически компилировать код LESS / SASS, преобразование coffeescript, минификацию и т. Д., Используя свою собственную CMS, которая использует лучшие инструменты для работы, но обертывает их в удобной для пользователя форме. Это огромное благо для продуктивности и прекрасный пример того, почему Meteor делает все возможное, чтобы сделать вас более эффективными и продуктивными.

Meteor использует чистую архитектуру MVC, а это значит, что он также предоставляет красивые четкие шаблоны. Структура шаблона является расширением популярной библиотеки шаблонов Handlebars для JavaScript. Это дает ему знакомый и эффективный синтаксис.

Meteor обещает именно то, что предлагает - высокоинтерактивные, высокопроизводительные приложения реального времени, быстро создаваемые на одном согласованном языке.

Реагировать

React стал одной из самых больших встряски JavaScript за последнее десятилетие. Он был создан Facebook как слой привязки представления и представил концепцию Virtual DOM. Vdom - это представление состояния DOM в памяти. Использование этого вместо фактического DOM для сравнения и обновления означало невероятное улучшение производительности. Эта стратегия была принята для каждой новой структуры или привела к созданию новых механизмов рендеринга для некоторых существующих.

React сейчас является основным фреймворком. Не только энтузиасты, но и самые известные стартапы и новаторы используют React в качестве ядра своего внешнего кода. AirBnB, Netflix, Atlassian, Expedia, OkCupid и Tesla Motors. И это не только стартапы, такие известные издатели, как BBC, NBC, IGN и New York Times, и ветераны Интернета, такие как Paypal.

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

React сломал стереотипы во многих отношениях. Его компонентная система возвращает нечто, называемое JSX, конструкцию, подобную XML, которая помещает код макета непосредственно в код JavaScript компонента, элегантно связывая все части компонента в единое целое.

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

Другой - Flux. Flux - это архитектурный шаблон, который осознает неотъемлемые опасности «двусторонней привязки», при которой изменение ввода влияет на модель, а изменение модели влияет на поле ввода (например). Это может привести к проблемам с рассинхронизацией. В простых примерах, используемых в демонстрациях, это не проблема. Но в более крупном приложении с множеством потенциальных взаимодействий вероятность чего-то катастрофического и очень, очень трудного для поиска резко возрастает.

Flux гарантирует, что изменения данных могут передаваться только вниз по цепочке, в то время как запрос передается вверх. Это повлияло на другие фреймворки, такие как Ember и Angular 2, которые часто реализовывали похожие шаблоны под разными именами.

Спрос на разработчиков React зашкаливает. Только Angular 1 пользуется большим спросом, как правило, для устаревших приложений. Мир разработки изменился со времен Angular. Библиотеки меньшего размера, более быстрые и специализированные, объединенные для создания индивидуального решения, становятся все более популярными, чем универсальный подход монолитных фреймворков. React - король в этой сфере.

Vue

С точки зрения популярных фреймворков, Vue, вероятно, является новейшим ребенком в мире, и его профиль не так высок, как у других здесь. Тем не менее, Vue, вероятно, также является самой быстрорастущей новой звездой. Vue занимает ту же нишу, что и React. Это не полноценный фреймворк, а библиотека привязки, часть «Просмотр» приложения MVC или MVVM. Отсюда и название.

В Vue есть что нравится. Он предназначен для использования в качестве прогрессивной основы. Кусочки его можно добавлять понемногу. Первоначально его можно было просто использовать с библиотекой, извлеченной из CDN, и использовать для создания простых компонентов. Со временем могут быть добавлены дополнительные функции, такие как маршрутизатор, управление состоянием и абстракция http, а также реализован комплексный конвейер сборки, чтобы связать все это воедино. Но ничего из этого не нужно делать заранее.

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

Vue тоже работает быстро. Очень быстро. Хотя React был пионером виртуального шаблона DOM, Vue продвинулся дальше всех в оптимизации этого процесса. Сейчас это (и во многих случаях со значительным отрывом) самая быстрая из перечисленных здесь фреймворков.

Успех Vue отчасти объясняется поддержкой фреймворка Laravel, который мудро сделал Vue первоклассным гражданином, предоставив несколько простых оптимизаций, которые упростят запуск Vue в приложении Laravel. Благодаря такой большой поддержке и энтузиазму сообщества Vue - надежный выбор для любого проекта, от простого до очень продвинутого. Он уже превратился из небольшого пограничного фреймворка в заметный и обсуждаемый в таких сообществах, как Reddit.

Признание

Я начал этот пост с повестки дня. Я собирался написать две параллельные статьи: одну о том, почему каждый фреймворк - отстой, а вторую - о том, почему каждый фреймворк является исключительным. Цель заключалась в том, чтобы показать, насколько легко представить любую структуру в позитивном или негативном свете, при этом сохраняя все это полностью разумным и «истинным».

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

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

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

Осмотреться.

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