Разработка приложения на Ember.js - создание

Давно интересуюсь js фреймворком ember.js, но все как-то не доходили руки написать о нем. Решил исправить это упущение и написать несколько заметок о нем. Первая из них будет о том, как вообще создать приложение и начать писать код.

Современный мир frontend-разработки крепко связан с Node.js. На нем написано куча утилит и библиотек, которые делают жизнь frontend-разработчика легкой и приятной. Поэтому, для начала советую поставить ноду, если она у вас еще не стоит. Без этого у нас с вами дальше ничего не получится. Кстати, установка свежей версии node.js это тот редкий случай когда сделать это для windows проще чем для linux ;)

Рекомендуемым инструментом для работы с ember на данный момент является Ember CLI. Это очень мощный инструмент, который умеет очень много чего, чуть позже мы это разберем, а для начала установим:

npm install -g ember-cli  

Здесь мы установили утилиту ember-cli с помощью пакетного менеджера ноды в глобальную область видимости. Кроме нее нам еще понадобится bower - менеджер js-библиотек используемых на сайте. Установим и его:

npm install -g bower  

Теперь пришло время создать наше приложение, сделать это с ember-cli проще простого:

ember new my-blog  

Эта простая команда создаст для вас каркас приложения, установит в него необходимые для разработки модули ноды и с помощью bower установит js-либы такие как jQuery и собственно сам фреймворк ember.js.

Сгенерировалось довольно много папок и файлов, походите по ним, посмотрите что в них находится. В целом по названиям можно разобраться. В файле README.md написано что теперь с этим можно сделать. Например, запустить наше приложение:

ember server  

Как видно в выводе этой команды, был запущен некий веб-сервер, который слушает порт 4200. Можете открыть его в браузере и увидеть результат - http://localhost:4200. Результат не поражает воображение, но это уже кое-что.

Ну а теперь немного попрограммируем. Давайте сделаем так, чтобы при открытии урла /hello нам выводилось сообщение "Hello, user!". Для этого в файле router.js добавим новый роут:

Router.map(function() {  
  this.route('hello');
});

И в папке templates создадим файл hello.hbs:

<h3>Hello, user!</h3>  

Теперь откроем эту страничку в браузере и увидим приветствие. Из этого понятно что ember cli следит за файлами в папке приложения и в случае их изменения или добавления новых пересобирает ваше приложение не требуя перезагрузки запущенного сервера. Кроме этого дополнительное удобство, если приложение открыто в браузере, то оно будет автоматически перезагружено. Поэксперементируйте, это очень удобно!