Russian (Pусский) translation by Anton L (you can also view the original English article)
Довольно неясная ситуация складывается, когда дело касается выбора нужного JavaScript фреймворка. Эта статья призвана помочь начинающему фронтенд разработчику сориентироваться при выборе подходящего фронтенд фреймворка. Мы разберём основы и синтаксис каждого, упомянутого здесь фреймворка, помимо этого я предоставлю список полезных, обучающих ресурсов.
Что Такое JavaScript Фреймворк?
В мире фронтенд разработки “фреймворк (framework)” может означать JavaScript библиотеку созданную для отображения интерактивных интерфейсов, основанных на вводимых данных. Он нужен для отображения информации в тот момент когда пользователь взаимодействует с интерфейсом. Все эти библиотеки немного друг от друга отличаются, но цель у них всегда одна; показать новую информацию, данные, когда было совершено какое-либо действие.
Давайте подробнее разберём эти мощные фреймворки, которые помогут реализовать поставленную задачу.
Популярные JavaScript Фреймворки
Существует много опций при выборе фреймворка, далее список наиболее популярных на сегодняшний день: Vue, React, Angular и Ember. Каждый из них был выбран согласно росту сообщества, стабильности, активности на Github, временному промежутку при котором технология была доступна разработчикам, а также основываясь на том, используется-ли технология большим количеством компаний и разработчиков.
Vue
Первый Коммит 27-ого Июля, 2013-ого
Размер Файла: 27.5KB минифицированный
Vue - прогрессивный, доступный фреймворк, в то же время многофункциональный и производительный. Если вам знакомы основы старого доброго HTML, CSS, JS вы сможете с легкостью освоить Vue.
“Ядро библиотеки создано только для работы с логикой представления (view), и его легко интегрировать с другими библиотеками и проектами. С другой стороны, Vue отлично подойдёт для создания сложных одностраничных приложений (SPA) когда используется с современными инструментами и библиотеками.” - вступление к документации по VueJS
Ниже мы можем увидеть пример синтаксиса простого “Hello World”:
1 |
<div id="app"> |
2 |
{{ message }}
|
3 |
</div>
|
1 |
var app = new Vue({ |
2 |
el: '#app', |
3 |
data: { |
4 |
message: 'Hello Vue!' |
5 |
}
|
6 |
})
|
Более интересный пример с использованием значений атрибутов (“attribute values”) в разметке:
1 |
<div id="app-2"> |
2 |
<span v-bind:title="message"> |
3 |
Hover your mouse over me for a few seconds |
4 |
to see my dynamically bound title! |
5 |
</span>
|
6 |
</div>
|
Vue.js позволяет вам обрабатывать данные вводимые пользователей, создавать компоненты-шаблоны (component templates), привязывать данные к структуре DOM с условиями и циклами, а также декларативное отображение (“declarative rendering”), с простым синтаксисом, основанное на спецификации веб-компонентов.
Ресурсы для Обучения:
- Изучений Vue 2: Шаг За Шагом на Laracasts
- Создайте Менеджер Закладок с Rails и Vue на Tuts+
- Основы Vue.js от DevMarketer
- Путеводитель по Vue на vuejs.og
React
Первый Коммит 29-ого Мая, 2013-ого
Размер Файла: 7.3KB минифицированный С Дополнениями: 11.3KB минифицированный
Разработчики React заявляют, что данная библиотека предназначена для создания интерфейсов для работы с динамичными данными. Она бала разработана работниками Facebook и является проектом с открытым исходным кодом. Вы можете себя почувствовать неуютно когда я сообщу вам, что нужно писать HTML в JavaScript, но к сожалению так работает React.
Давайте разберём пример синтаксиса прямиком из вступительного туториала документации React. В этом примере показано создание так называемого “Component subclasses”, также имеются и другие типы компонентов. Как вы наверно могли заметить, синтаксис похож на XML:
1 |
class ShoppingList extends React.Component { |
2 |
render() { |
3 |
return ( |
4 |
<div className="shopping-list"> |
5 |
<h1>Shopping List for {this.props.name}</h1> |
6 |
<ul> |
7 |
<li>Instagram</li> |
8 |
<li>WhatsApp</li> |
9 |
<li>Oculus</li> |
10 |
</ul> |
11 |
</div> |
12 |
);
|
13 |
}
|
14 |
}
|
1 |
<ShoppingList name="Mark" /> |
React идёт с дополнительными опциями, называемые аддонами, которые представляют из себя набор полезных модулей. Эти модули включают в себя инструменты для облегчения работы с анимациями и переходами, инструменты для измерения производительности веб-приложения, тестирование и многое другое. Документация React рекомендует использовать React вместе с Babel, позволяющий применять ES6 и JSX в вашем JavaScript коде. Также имеются полезные инструменты для отладки React приложений, в виде расширений для Chrome и Firefox, с котрыми можно проинспектировать древо React компонентов в инструментах разработчика вашего браузера.
Ресурсы для Обучения:
- React для Начинающих видео-туториал от Wes Bos
- Начинаем Работать С React.js на Tuts+
- Туториал: Введение В React
Angular
Первый Коммит 18-ого Сентября, 2014-ого (согласно GitHub)
Первоначальный Релиз (Согласно Википедии) 20-ого Октября, 2010-ого
Размер Файла: Инструмент Командной Строки. Больше не распространяется, как отдельный JS файл.
Angular разработан командой Google. Так как HTML никогда не задумывался, как динамичный язык, Angular расширяет HTML добавляя набор атрибутов, способных динамически видоизменять разметку. В итоге это позволяет делать декларативное привязывание (“declarative bindings”) к событиям, для отображения динамических данных и состояний основанных на взаимодействии пользователя. Вы можете столкнуться со значительными требованиями к данным при построении моделей данных используя RxJS, Immutable.js или любую другую технологию Push-модель. И вы можете расширить язык шаблонов своими компонентами или использовать широкий выбор существующих компонентов.
“Научитесь создавать приложения на Angular и повторно использовать ваш код и возможности для построения приложений для любых конечных целей. Будь-то веб, мобильный веб, нативный веб или десктопные прилоежния.”
Синтаксис Angular не представляет из себя ничего нового, это всё те же HTML атрибуты, а также Mustache-esque плейсхолдеры, за исключением того, что к атрибуту добавляется пространство имён ng-, всё это можно увидеть в примере ниже:
1 |
<input type="text" ng-model="yourName" placeholder="Enter a name here"> |
2 |
<h1>Hello {{yourName}}!</h1> |
Angular также построен из компонентов, являющихся комбинацией HTML шаблонов и классов компонентов, которые контролируют часть экрана.
1 |
// src/app/app.component.ts
|
2 |
|
3 |
import { Component } from '@angular/core'; |
4 |
|
5 |
@Component({ |
6 |
selector: 'my-app', |
7 |
template: `<h1>Hello {{name}}</h1>` |
8 |
})
|
9 |
export class AppComponent { name = 'Angular'; } |
1 |
<!-- index.html -->
|
2 |
<my-app>Loading AppComponent content here ...</my-app> |
Файл с расширением .ts из примера выше написан на TypeScript. Синтаксис этого языка основан на JavaScript. TypeScript - это синтаксический сахар, который компилируется в JavaScript. Для компиляции вам понадобятся инструменты командной строки.
Ресурсы для Обучения:
- Начинаем Работать с Angular 2 на Tuts+
- Современные Веб-приложения с Angular 2 на Tuts+
- Учим Angular на angular.io
- Ресурсы по Angular angular.io
- Angular2 на egghead.io
Ember
Первый Коммит 30-ого Апреля, 2011-ого
Размер Файла: ?
Ember библиотека, похожая на те, которые мы обсуждали ранее, отлично работает с Handelbars. Для тех кто не знаком с Handelbars это язык шаблонов для построения статических страниц, чем-то похожий на Jekyll. Разработчики могут использовать Handelbars для создания разметки и JavaScript для реализации кастомного поведения для компонентов основанных на взаимодействии пользователя.
“Ember - фреймворк для создания одностраничных JavaScript веб-приложений на стороне клиента, который использует паттерн Модель–Представление–Контроллер (Model-View-Controller MVC)”
Ember создан на Node и используется множество Node.js модулей для работы. Также Ember имеет интерфейс командной строки (его можно установить через npm), предоставляющий общую структуру проекта и набор инструментов для разработки включая систему дополнений. Помимо этого с ним идёт сервер для разработки, а также специальные флаги для среды построения проекта, которые могут быть переданы через командную строку.
В синтаксисе Ember нет ничего необычного, он основан на нотации объектов и литералов, с которой мы уже знакомы в JavaScript, прибавьте сюда Handelbars для шаблонов.
1 |
import Ember from 'ember'; |
2 |
|
3 |
export default Ember.Controller.extend({ |
4 |
firstName: 'Trek', |
5 |
lastName: 'Glowacki' |
6 |
});
|
1 |
Hello, <strong>{{firstName}} {{lastName}}</strong> |
Пример выше простой пример синтаксиса и файловой структуры. Данный код экспортирует и расширит Ember контроллер и скомпилирует имена из объекта в вашу разметку.
Ещё стоит упомянуть возможности роутера Ember, с которым вы по умолчанию получите хорошие ссылки в адресной строке, а также работающие кнопки для возврата на предыдущую страницу, для каждого созданного роута, API довольно легко использовать (для тех кто знаком с серверными веб-фреймворками). Ember.js всегда будет бесплатным фреймворком с открытым исходным кодом, согласно их веб-сайту.
Ресурсы для Обучения:
- Основы Фреймворка EmberJS на Tuts+
- Знакомство с EmberJS на Tuts+
- EmberJS Гайды на emberjs.com
Заключение
Выбор фреймворка зависит от персональных предпочтений и уверенности в том, что он подойдёт для продолжительной работы над вашим проектом. Если вы хотите глубже узнать и сравнить фреймворки, на сайте Vue есть подробное сравнение, также включающие информацию о других библиотеках, таких как Knockout, Polymer и Riot. Помимо этого вы можете пройти наш тест, созданный для того, чтобы помочь определиться с выбором.
