Ember.js

Разработчик: emberjs.com

Репозиторий: github.com/emberjs/ember.js

Краткое описание:

Ember.js это JavaScript фреймворк для создания динамичных web приложений. Реализует MVC шаблон, предназначен для упрощения создания масштабируемых одностраничных веб-приложений.

Основные особенности:

• Толстые объектные модели
• Вычисляемые свойства
• Декларативная двусторонняя привязка данных
• Автоматически обновляемые шаблоны с Handlebars.js
• Маршрутизатор для управления состоянием приложения
• Включение зависимостей

Принципы

Изначально Ember проектировался с учетом нескольких ключевых идей:

Фокусировка на амбициозных web приложениях

Ember нацелен на полное решение всех задач приложений на стороне клиента, в отличии от многих JavaScript фреймворков, которые реализуют составляющую V в MVC (т.е., Представление из шаблона Модель-Представление-Контроллер).

Больше продуктивности из коробки

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

Стабильность без простоев

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

Предвидение будущих web стандартов

Ember один из первых внедрял много новшеств в сфере Web и JavaScript, таких как промисы, web компоненты, ES6 синтакс. Иегуда Катц, один из основателей Ember, участник группы TC39, ответственной за будущее развитие языка Javascript.

Ember, подобно Ruby on Rails, следует принципам Convention over Configuration (CoC) - Соглашение превыше Конфигурации, и Don't Repeat Yourself (DRY) - Не повторяйся. Он описывается как высоко опциональный, гибкий фреймворк

Архитектура

Routes

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

Models

Каждому маршруту соответствует модель, в которой содержатся данные, соответствующие текущему состоянию приложения. И несмотря на то, что есть возможность использовать jQuery чтобы загружать с сервера JSON-объекты, большинство приложений все-таки использует для этих целей библиотеку с моделью данных, например, Ember Data.

Templates

Шаблоны написаны на языке HTMLBars и описывают пользовательский интерфейс. Шаблоны используются для построения HTML кода приложения и позволяют встраивать в него динамически обновляемые выражения.(HTMLBars является разновидностью Handlebars, который выполняет построение DOM элементов.)

Components

Компонент представляет собой пользовательский HTML-тег. Поведение реализуется с помощью JavaScript, внешний вид - с помощью блоков HTML. Компоненты "содержат" свои данные. Они также могут быть вложенными и могут общаться со своими родительскими компонентами посредством действий (событий). Другие библиотеки компонентов, таких как Polymer также могут быть использованы с Ember.

Services

Сервисы, это просто объекты-одиночки (singleton), которые содержат долгоживущие данные, такие как сессии пользователей.

Жизненный цикл запроса в Ember приложении

Точка входа

Приложение у нас одностраничное, так что точка входа у нас одна — index.html. Все переходы будут делаться с помощью якоря или history api. Все пути будут рабочими, то есть вы можете легко добавить нужную страницу в закладки и контент будет доступен по ней.

Маршрутизатор

Первым делом у нас работает Router. Именно он выбирает что делать дальше в зависимости от адреса и передает управление указанному в нем маршруту.

Маршрут

Route обрабатывает входящие данные, например параметры url, и обращается к модели или моделям. Он является связующим звеном между данными(Model) и их обработчиком (Controller).

Модель

Модели – это наши сущности, например в блоге – пост, пользователь, комментарий. Здесь уже используется не чистый Ember, а его дополнение – Data. Для того чтобы получить указанные объекты есть 2 варианта:

Получить их с помощью API. Получить из локального хранилища, в которые данные были добавлены при прошлом запросе в API.

При работе с хранилищем все просто – данные там лежат уже в виде объектов и при запросе достаются оттуда, а вот для работы с API используются еще 2 сущности: адаптеры и сериализаторы.

Адаптеры задают правила работы с API, например получить все посты – GET /posts, а обновить пост – PUT /posts/1. Сериализаторы разбирают json-ответ сервера и устанавливают формат json-запроса.

Контроллер

Когда мы получили данные, мы можем приступить к их обработке. Именно в контроллере описываются вычисляемые свойства (computed properties). Контроллеры бывают нескольких видов:

Controller – обычный контроллер, например для статичных страниц.

ObjectController – для представления одного объекта.

ArrayController – для представления массива объектов, может иметь еще вложенный ObjectController для каждого объекта(например для вычисляемых свойств каждого объекта).

Представление

После этого необходимо вывести наши данные. Тут нам приходят на помощь шаблоны, представления и компоненты. Давайте сначала поговорим о шаблонах – участках html кода в который вставляются наши данные. Они могут содержать партиалы, компоненты и представления.

Теперь поговорим о представлениях и компонентах. Компоненты являются наследниками представлений, поэтому и то, и второе – это повторяемые участки кода. В связи с скорым переходом к версии 2.0 нам советуют использовать лишь компоненты.

Компоненты – целостные участки кода, отвечающие за одну функцию и которые будут использоваться в разных местах. Возьмем пример из жизни: мне необходимо было чтобы длинный текст автоматически сворачивался и появлялась кнопка «Развернуть». Именно для этого я использовал компоненты.

Партиалы – это те же самые шаблоны, которые вставляются в другие шаблоны, к ним все это относится точно так же.

Действия/события

Действия – то что происходит при определенных событиях(нажатию на элемент, отправку формы). Они описываются в контроллерах, маршрутах, представлениях, компонентах.

Action bubbling

Action bubbling – это передача события вверх по цепочке если не был найден обработчик в маршруте/контроллере.

Установка и запуск

Необходимы node.js и его менеджер пакетов npm.

# Show version
node -v
npm -v

# Install addons global
npm install -g ember-cli bower phantomjs
ember -v

# Create new app
ember new sample_app

# Start application
cd sample_app
ember server

Сахар в коде.

• Emblem
• Stylus
• Coffee

  ember install ember-cli-emblem ember-cli-stylus