Разработка приложения на 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 следит за файлами в папке приложения и в случае их изменения или добавления новых пересобирает ваше приложение не требуя перезагрузки запущенного сервера. Кроме этого дополнительное удобство, если приложение открыто в браузере, то оно будет автоматически перезагружено. Поэксперементируйте, это очень удобно!