Начало работы с Ember.js 2.0 с использованием Ember CLI

Когда речь заходит о front-end фреймворках JavaScript, у нас, как разработчиков, есть большой выбор. Один из моих любимых, Ember.js, только что выпустил версию 2.0, что делает это время идеальным для начала его использования. Ember используется многими отличными компаниями, самым заметным приложением среди которых является Apple Music. В этом посте мы настроим среду разработки Ember и создадим небольшое примерное приложение.

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

Команда Ember использует схему семантического версионирования, поэтому технически в Ember 2.0 нет ничего «нового». Все изменения в Ember 2.0 присутствуют в предыдущих релизах 1.13.x. На «Пути к Ember 2.0» было внесено множество изменений для отказа от функциональности 1.x по мере создания новых паттернов. Если разработчик исправлял эти устаревшие функции при каждом выпуске, его приложение будет работать идеально и на версии 2.0. Вот некоторые из важных вещей, которые были частью процесса выпуска 2.0:

Ember CLI — интерфейс командной строки для создания приложений Ember теперь является основной частью платформы. Вот некоторые функции Ember CLI:

— Быстрый конвейер обработки статических файлов (asset pipeline), работающий на базе Broccoli

— Сервер разработки с живой перезагрузкой (live reloading)

— Генераторы, помогающие в процессе разработки путем создания структуры проекта в соответствии с лучшими практиками Ember

Переход к компонентам — Ember 1.x был построен на основе паттерна модель-представление-контроллер (MVC), но в версии 2.0 Ember начал переход от представлений (Views) и контроллеров (Controllers) к компонентам. Эта тенденция сохранится на протяжении всего цикла выпуска версий 2.x, пока маршрутизируемые компоненты (Routable Components) полностью не заменят их.

Новый движок рендеринга — движок рендеринга Glimmer значительно увеличивает скорость рендеринга за счет использования виртуального DOM.

Модули ES6 в ядре — команда Ember всегда стремится внедрять новые стандарты в кодовую базу, и модули ES6 являются одним из последних нововведений, добавленных в проект.

Упрощение многих концепций Ember:

— Новый синтаксис привязки атрибутов с использованием нового шаблонизатора HTMLBars, который является надмножеством шаблонизатора Handlebars из версии 1.x

— HTML-синтаксис (угловые скобки) для компонентов

— Более согласованное определение области видимости (scoping)

— и многое другое…

Мы будем использовать Node.js и npm для установки инструментов, необходимых для разработки на Ember, поэтому убедитесь, что они у вас установлены. Ember требует Git для управления многими из своих зависимостей, поэтому вам также нужно убедиться, что он установлен и настроен. Если вы используете систему Mac или Linux, вам также захочется установить Watchman, поскольку он значительно улучшает производительность отслеживания файлов. Мы также будем использовать Bower, поэтому убедитесь, что он установлен. Убедившись, что все эти предварительные требования выполнены, давайте установим Ember CLI. Откройте любимое приложение терминала и выполните эту команду:

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

На момент написания этого поста она должна вернуть 1.13.8. Предполагалось, что Ember CLI выйдет в версии 2.0 одновременно с Ember.js, но для этого релиза он немного отстает. Мы обойдем различия в версиях при создании нашего приложения.

Давайте используем Ember CLI для создания нашего первого приложения. Выполните следующую команду, чтобы создать новый проект Ember в папке с именем hello-ember:

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

Сначала нам нужно внести одно важное изменение в файл вне этого каталога. Как упоминалось выше, Ember CLI еще не достиг версии 2.0. Это означает, что версии Ember, указанные в приложении, созданном с помощью Ember CLI, также не являются 2.0. Давайте исправим это в bower.json. Внесите следующие выделенные изменения:

Теперь, когда наш проект и его зависимости настроены, давайте запустим проект с помощью сервера разработки Ember CLI:

Загрузите http://localhost:4200 в браузере, и вы должны увидеть заголовок «Welcome to Ember». Давайте посмотрим, откуда берется это приветственное сообщение, и обновим его, чтобы увидеть живую перезагрузку Ember CLI в действии. Откройте app/templates/application.hbs. Вы должны увидеть это:

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

Один из главных принципов Ember заключается в том, что URL-адрес в браузере представляет состояние приложения. Это достигается с помощью маршрутизатора (router). В настоящее время мы находимся в корне приложения, а маршрут, который используется для отображения контента в корне, является индексным маршрутом (index route). Если мы его не укажем, Ember создаст пустой индексный маршрут в памяти, который ничего не заполнит в outlet выше. Давайте используем Ember CLI для определения индексного маршрута, который будет использоваться для настройки модели и шаблона для корня нашего приложения вместо маршрута по умолчанию:

Выполнение этой команды генерирует следующие файлы:

app/routes/index.js — файл, содержащий код, который Ember выполнит при загрузке этого конкретного маршрута.

app/templates/index.hbs — шаблон для индексного маршрута. Он будет отображаться в {{outlet}}, который мы видели в шаблоне application.hbs.

tests/unit/routes/index-test.js — файл тестов для индексного маршрута.

Маршруты отвечают за настройку любых данных, которые Ember будет использовать при рендеринге шаблона для маршрута. Ember использует объекты модели (буква M в MVC) для представления данных маршрута. Это достигается с помощью так называемого хука модели (model hook). Откройте app/routes/index.js и измените его содержимое, добавив функцию model, которая возвращает массив цветов:

Когда маршрут отображает индексный шаблон, у нас будет доступ к этой модели. Мы создадим неупорядоченный список цветов с помощью помощника {{#each}} Handlebars. Откройте /app/templates/index.hbs и замените содержимое этой разметкой:

Помощник проходит по массиву model и отображает тег li для каждой строки. В li мы используем синтаксис привязки HTMLBars для отображения цвета, помещая его в фигурные скобки. Сохраните файл, и ваш браузер должен автоматически обновиться, показав цвета под заголовком «Hello Ember», потому что мы находимся в корне приложения, где отображается индексный шаблон. Попробуйте добавить цвет или изменить существующие цвета в app/routes/index.js и сохраните файл, чтобы увидеть изменения в браузере.

Давайте попробуем создать еще один маршрут, чтобы увидеть, как настраиваются неиндексные маршруты и как ссылаться на разные маршруты. В терминале давайте сгенерируем маршрут users:

Теперь взгляните на app/router.js. Обратите особое внимание на карту маршрутизатора:

Выделенная строка была добавлена в этот файл при генерации маршрута. Аналогичная строка не была добавлена для индексного маршрута, поскольку его не нужно объявлять явно. Давайте настроим хук модели для app/routes/users.js, чтобы он возвращал массив JSON-объектов, представляющих пользователей:

Каждый объект в модели содержит имя пользователя и его ник в Twitter. Давайте изменим шаблон app/templates/users.hbs, чтобы отобразить список наших пользователей и ссылки на их страницы в Twitter:

И снова мы используем помощник {{#each}} для циклического прохода по массиву модели. Разница в этот раз заключается в том, что у нас есть объекты, а не просто строки, поэтому операторы привязки ссылаются на свойства, доступные в этих объектах. Сохраните файл и перейдите по адресу http://localhost:4200/users в браузере, чтобы увидеть результат.

Теперь у нас есть два определенных маршрута, давайте свяжем их вместе. Обновите app/templates/index.hbs, чтобы использовать помощник {{#link-to}} для ссылки на маршрут users:

Параметр помощника {{#link-to}} указывает маршрут, для которого нужно создать ссылку, а текст внутри него — это то, что будет отображаться для ссылки. Сохраните файл и нажмите на ссылку, чтобы перейти к маршруту users. Теперь давайте обновим шаблон users, чтобы он возвращал нас обратно к индексному маршруту:

Вернитесь в браузер и проверьте ссылки. Теперь вы должны иметь возможность переходить туда и обратно между двумя маршрутами.

Мы только что создали приложение, охватывающее основы разработки на Ember.js. Мы настроили несколько маршрутов, сконфигурировали их модели, а затем обновили шаблоны маршрутов для отображения модели и ссылок друг на друга. Теперь, когда вы освоили основы Ember.js, вы можете начать создавать с его помощью потрясающие вещи. Вот что вы можете попробовать сделать самостоятельно:

— Загрузите данные модели из внешнего источника с помощью Ember Data (вы можете узнать больше об этом в моем следующем посте об использовании Ember с Firebase)

— Установите несколько дополнений с помощью Ember CLI

— Создайте несколько компонентов для замены свободных шаблонов в приложении (я показываю, как использовать компоненты в этом посте)

Я буду очень рад увидеть, что вы создадите с помощью Ember 2.0, так что найдите меня в Twitter @brentschooley, чтобы показать это!