Сегодня нас будет интересовать сравнение Angular, React и Vue с WebPack. Несмотря на дух «Ориентированных компонентов» трех фреймворков Javascript, философия, архитектура и инструменты для реализации различаются для всех.

Угловой

Немного истории. Angular, разработанный Google, в настоящее время находится в версии 5, которая является продолжением версии 2. На самом деле существует версия 1 Angular, более известная как AngularJS. Однако между AngularJS и Angular существует огромный разрыв.

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

Для информации, чтобы привлечь внимание сообщества к компонентно-ориентированному подходу, команда Angular выпустила в версии 1.5 AngularJS возможность создавать компоненты Javascript. В подходе последний очень похож на директивы с обратными вызовами жизненного цикла, такие как `$ onInit`, `$ onChanges` или `$ onDestroy`, которые являются обратными вызовами жизненного цикла, которые вы найдете в компонентах Angular.

Что касается Angular, то с архитектурной точки зрения, как и в его предшественнике, вы найдете механизм внедрения зависимостей (DI), а также модульный подход, который позволяет загружать модули в вашем приложении. Все будет основано на стандартном Webpack и интенсивном использовании наблюдаемых объектов. Поэтому, если вы хотите чувствовать себя комфортно с Angular, я призываю вас ознакомиться и манипулировать максимальными наблюдаемыми.

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

Создайте новый проект Angular

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

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

  • $ng новый мой-проект-angular
  • $cd мой-проект-угловой
  • $ng подавать

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

  • ng serve — справка

На уровне кода утилита создала каркасный проект с большим количеством файлов, готовых к использованию и необходимых для запуска вашего приложения Angular, таких как конфигурация Angular для той же утилиты, linting, package .json со всеми необходимыми зависимостями и скелетами для всего, что связано с модульными тестами и от начала до конца, а также с файлом .gitignore, чтобы быть готовым сделать ваш знаменитый первоначальный коммит. Таким образом, в сгенерированной папке src вы найдете свой проект Angular в Typescript с точкой входа main.ts и файлом index.html для размещения вашего скрипта, который будет передан Webpack при его обслуживании.

Преимущества Ангуляра

Команда Angular переходит со своей будущей версии 5 на прогрессивные веб-приложения, что само по себе совсем неплохо, если вы не решили пойти по проторенному пути Angular.

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

  • Полная структура
  • Большое сообщество
  • Элегантная архитектура
  • Двигатель DI (внедрение зависимостей)
  • Хорошая документация

Недостатки углового

  • Это тяжело. Angular 2 отображает 766K в сочетании с RX
  • Только TypeScript.
  • Угловой путь, трудно мыслить нестандартно. Как только вы сделаете свое приложение в Angular, вы сделаете его до конца в Angular.

Реагировать

React — это передний (но не только) фреймворк, разработанный Facebook для Facebook, а также для постоянно растущего сообщества с открытым исходным кодом. На самом деле, React был на подъеме задолго до первого альфа-релиза Angular.

В чем его сила: компоненты, по сравнению с Angular, React все-таки меньше упакован и поэтому меньше ограничивает, можно разрабатывать на Javascript (классическом или ES6 с поддержкой babel) или на Typescript, использовать тот модуль загрузчика, который вам нравится или который вам по душе вы привыкли использовать SystemJS, Webpack или сделать свою сборку с помощью других «стандартных» и хорошо зарекомендовавших себя инструментов, таких как Gulp или Grunt.

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

Создайте новый проект React

Сообщество React также предлагает нам утилиту для запуска нового проекта. Эта утилита называется create-react-app. Он доступен на npm, и вы также можете установить его через пряжу. Без лишних слов давайте начнем с команд после установки утилиты.

  • $create-react-app my-project-react
  • $cd мой проект-реакция
  • $yarn start или npm start

Файловая структура уровня, этот генератор мы поставили на место простого проекта с зависимостью от модуля узла с именем react-scripts, который позволит вам запускать/тестировать… проект на сервере разработки webpack в автоперезагрузке: довольно неплохо. НО, вы расскажете мне, где мы настраиваем Webpack и как убедиться, что наш суперпроект также включает в себя супер JSX React…

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

Преимущество Реакта

  • Настоящий набор инструментов, вы принимаете участие, где все в ваших руках
  • Большое сообщество
  • Легкий 144K с надстройками
  • Элегантная архитектура
  • Быстрая интеграция для мобильных устройств через React Native
  • JSX — это синтаксический сахар. Будьте осторожны, чтобы не увеличить количество строк в ваших файлах.
  • Много предложений работы

Недостатки Реакта

  • Стандартная документация довольно легкая, большое спасибо сообществу
  • Изменение лицензии =› MIT… спасибо, кто… спасибо Facebook
  • Нет реального DI двигателя, я признаю, что это в любом случае плюс. Тем не менее, это вполне осуществимо
  • Утилита create-react-app слишком уж ориентирована на нуба, мы хотим облегчить работу, а не скрывать сложности

Вью

Vue, безусловно, рассматривается как аутсайдер по отношению к React и Angular, и ему нечему завидовать своим конкурентам. Vue теперь находится в версии 2, которая отображается с собственной полной документацией и сообществом, которое, безусловно, меньше, чем Angular и React, но с некоторыми надежными ссылками, ориентированными на OSS текущей сети, такими как Laravel и JSFiddle.

При первом чтении документации некоторые и некоторые из вас, имевшие дело с AngularJS, не будут дезориентированы системой $watch и созданием приложения vue через html-атрибуты непосредственно в DOM. Но это еще не все, Vue также предлагает компонентно-ориентированный подход, который, на мой взгляд, напоминает улучшенную и облегченную гибридную версию AngularJS и Angular, и все это на Javascript.

Создайте новый проект Vue

Команда Vue предоставляет нам, как и ее конкурентам, утилиту для создания нового приложения. Для этого вам потребуется глобально установить пакет узла vue-cli. После установки выполните следующие команды:

инициализируйте vue webpack my-project-vue. Не забудьте указать webpack. Вы пройдете небольшой мастер с помощью cli, что позволит вам настроить ваш проект.

  • $ cd my-project-vue
  • $ (yarn или npm) установить
  • $ (yarn или npm) запустить dev

И теперь у вас есть отличный проект Vue.

Что ж, мы должны признать, для тех, кто на стороне Java-сервера, запуск фронтенд-приложения на порту 8080 по умолчанию… Помимо этой маленькой детали, мы получаем проект с несколькими средами и легко настраиваемый, который мы также изменим. 8080 порт в файле config/index.js.

Преимущества Vue

  • Чистый Javascript
  • Тонкий гибрид Javascript между AngularJS и Angular2
  • Сверхлегкий 90K для версии 2.5.0, что составляет всего 12% от Angular.
  • Очень хорошая документация, полная и хорошо сделанная
  • Как React вы берете все или только часть, это не помешает нам запустить ваше приложение с другими библиотеками в поддержке
  • Чистый и легко настраиваемый сгенерированный скелет приложения
  • Настоящий OSS-проект. Нет крупных актеров, которые контролируют (Google или Facebook…)

Недостатки Vue

  • Он многолетний? Мы видели других ср. Прототип против jQuery или Backbone против AngularJS
  • Небольшое сообщество
  • Мало вакансий на рынке

Заключение

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

Все зависит от вопросов, которые возникают перед техническим выбором: адаптировано ли оно к нашим потребностям? Какова кривая обучения? А как насчет сообщества, которое вращается вокруг? Это действительно с открытым исходным кодом?