Взгляд на 3 фреймворка: Backbone, AngularJS и React
На прошлой неделе я погрузился в три фреймворка: Backbone, AngularJS и React. Я решил отобразить три изображения на экране и заставить их что-то говорить при нажатии. Звучит достаточно просто, верно? Конечно, но давайте попробуем сделать то же самое во всех трех фреймворках, о которых я упоминал ранее.
Я собираюсь изучить некоторые основные различия и сходства, которые я обнаружил между AngularJS, React и Backbone. Но сначала, что такое фреймворк? Вот описание из Википедии.
«Программная среда в компьютерном программировании — это абстракция, в которой общий код, обеспечивающий общую функциональность, может быть выборочно переопределен или специализирован пользовательским кодом, обеспечивающим конкретную функциональность».
Эти три фреймворка действительно отлично следуют общему шаблону разработки программного обеспечения, называемому MVC. MVC означает: Модель, Представление, Контроллер. Я мог бы долго говорить о MVC и других концепциях, таких как MVW, но давайте пока сосредоточимся на MVC. Фреймворки MVC — это библиотеки, которые помогают нам писать код в архитектуре MVC, и они могут выполнять некоторые действия, такие как автоматические вызовы API.
Краткий обзор MVC:
- Модель. Управляет состоянием программы.
- Представление. Представляет состояние пользователю. Это то, что вы видите, когда заходите на страницу.
- Контроллер: получает входные данные от пользователя. Поэтому, когда вы нажимаете или печатаете что-то, контроллер обрабатывает эту информацию и сообщает другим, что делать.
Посетите эту страницу, чтобы узнать больше о MVC.
Некоторые сведения:
Надеюсь, это дало вам немного лучшее понимание того, как мы будем подходить к этим фреймворкам. Мы собираемся углубиться в эти три фреймворка. Их также часто называют библиотеками. Поговорим о некоторых различиях и сходствах между ними.
Магистраль:
Backbone — это сверхлегкий фреймворк, который позволяет структурировать код Javascript в формате MVC.
Он содержит небольшую библиотеку компонентов, которые вы можете использовать для организации своего кода. Backbone не имеет мнения, что заставит вас подумать о том, как структурировать ваше приложение, прежде чем создавать его. Диаграммы чертежей, как правило, помогают в этом. Другому разработчику будет легче подобрать вашу кодовую базу, и они смогут сразу же взяться за дело.
Что мне нравится в Backbone:
Одна из замечательных особенностей Backbone — это система событий. Я использовал системы событий Backbone для управления взаимодействием данных с каждым компонентом в приложении. Например, я настроил событие для клика под названием «щелчок». Этому событию было поручено переключить видимость сообщения при нажатии на изображение. Все, что мне нужно было сделать, это заставить изображение слушать событие и вуаля! Появится соответствующее сообщение.
AngularJs:
«AngularJS — это структурная структура для динамических веб-приложений».
AngularJS отлично справляется с привязкой данных и управлением DOM. Связывание данных и внедрение зависимостей в AngularJS устраняют большую часть кода, который вам в противном случае пришлось бы писать. Эта структура использует директивы, фабрики и сервисы для обмена информацией между компонентами.
Что мне нравится в AngularJS:
AngularJS можно использовать в традиционных шаблонах MVC, но что мне нравится в нем, так это вариант MVW (независимо). AngularJS может очень легко выполнять двустороннюю привязку данных. В большинстве случаев мне нравится использовать одностороннюю привязку данных, чтобы иметь четкое разделение задач. Когда я рефакторил свое приложение в Angular из Backbone, я заметил значительный объем кода, который мне не нужно было писать. Используя нативные директивы Angular, смешанные с парой моих собственных, было очень легко отрисовать одно и то же работающее приложение.
Реакция:
Реагировать, реагировать, реагировать. О, как я люблю тебя! Из трех, которые мы исследовали до сих пор, это мой любимый. React является декларативным, основанным на компонентах и любит использовать ES6 в качестве стандартного стиля кодирования.
«React позволяет безболезненно создавать интерактивные пользовательские интерфейсы. Создавайте простые представления для каждого состояния в вашем приложении, и React будет эффективно обновлять и отображать только нужные компоненты при изменении ваших данных».
React, на мой взгляд, имеет одни из лучших способов отслеживать состояние в вашем приложении. Есть лучшие способы управления состоянием в React, например, в Redux, но я отвлекся. Как и в двух других фреймворках/библиотеках, о которых я говорил ранее, React использует компоненты. React фокусируется на управлении состоянием и передаче его дочерним элементам через свойства, которые он имеет в родительской области. Ключевой особенностью React является то, что он использует формат кодирования под названием JSX. Мне нравится мощь JSX, которая позволяет мне использовать HTML внутри файлов JS.
Я провел рефакторинг этого графического приложения в React. Это включало необходимость устанавливать состояние каждого отдельного изображения. Я настроил метод так, чтобы при нажатии на изображение оно меняло состояние, чтобы переключать сообщение этого конкретного элемента. Я использовал классы ES6 для создания своих компонентов и использования определенных методов, чтобы они напоминали ту же функциональность двух других фреймворков.
Вывод:
Существует множество фреймворков и библиотек, которые мне не терпится изучить. Хотя я пока не являюсь экспертом ни в одном из этих трех способов, мне нужно попробовать, каково это — создавать одно и то же приложение тремя разными способами. У каждого фреймворка есть свои плюсы и минусы. Разработчики должны понять, что требуется их приложению, и решить, какой фреймворк лучше всего подходит для достижения этой цели. Возможности безграничны! Нет неправильного или правильного способа сделать это. Я говорю, найдите фреймворк, который вам удобен, и придерживайтесь его! Изучение нескольких фреймворков сделает вас более ценным и в целом лучшим инженером.
Чтобы узнать больше об этих платформах, вот несколько ссылок на официальные документы:
Магистраль: http://backbonejs.org/
AngularJS: https://angularjs.org/
Реагировать: https://facebook.github.io/react/
