Разработка веб-клиента с использованием Ember.js и мобильных служб Windows Azure. Часть 1

Недавно я читал об основах JavaScript для создания одностраничных приложений и хотел попробовать свои силы в этом. Мне также было интересно, насколько хорошо Windows Azure Mobile Services будет работать с этими платформами. В то время как есть несколько доступных фреймворков, таких как AngularJS , Durandal и Batman.js , я остановился на Ember . Не по каким-то конкретным техническим или политическим причинам, а в основном потому, что мне больше всего понравилось работать с ним.

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

Одностраничные приложения и Ember.js

Одностраничные приложения обычно имеют HTML-страницу, которая действует как контейнер для JavaScript, являющегося мозгом приложения. Этот JavaScript отвечает за генерацию информации, отображаемой в браузере на основе шаблонов, и управляет маршрутизацией вас между «страницами» (на самом деле это просто загрузка различных шаблонов) и взаимодействует с источниками данных, такими как удаленный API REST, для извлечения данных, используемых шаблонами.

Ember.js предоставляет подход модель-представление-контроллер (MVC) для разработки одностраничного приложения, в котором модель и контроллер реализованы в JavaScript, а представление реализовано в Handlebars , языке шаблонов.

Среда разработки

Я использовал Yeoman для создания и поддержки моего проекта. Yeoman — это набор инструментов, который обеспечивает поддержку (через инструмент ‘yo’) сборки, предварительного просмотра и тестирования с помощью Grunt и управления зависимостями с помощью Bower . Это немного излишне для этого проекта, и были некоторые грубые края, но в целом это было ценно, и я, вероятно, буду использовать его снова в будущем.

Вот шаги для настройки Yeoman и связанных инструментов:

1. Установка Node.js . Обратите внимание, что у вас должна быть последняя версия Node, по крайней мере v0.8. Я использовал v0.10.4.

2. Установите Ruby. Есть много способов получить это для каждой платформы, включая сборку из исходного кода. Для этого проекта я использовал RubyInstaller для Ruby 1.9.3-p392 и соответствующую установку DevKit (TDM-32-452.)

3. После установки Node и Ruby выполните следующие команды, чтобы установить Yeoman, Grunt, Bower, генератор скаффолдинга для приложений Ember и гем Compass (требуется для CSS):

   npm install -g yo grunt-cli bower generator-ember
   
   
   gem install compass 

   Возможно, вам придется использовать sudo, если вы работаете на Mac или Unix. Вы также можете пойти выпить кофе или что-нибудь еще, пока они установлены.

4. Установите Git, так как он используется Bower. Вы можете получить это из разных мест в зависимости от вашей ОС. Я использовал версию, установленную с GitHub для Mac и GitHub для Windows .

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

Чтобы создать базовое приложение на основе Ember с помощью Yeoman, выполните следующие действия из командной строки, bash или терминала:

1. Создайте новый каталог, замените в нем каталоги, инициализируйте Git-репозиторий, а затем используйте команду ‘yo ember’:

   mkdir emberapp
   
   
   cd emberapp
   
   
   git init
   
   
   yo ember

2. Если вы получили ошибки в этой последней команде, вы можете обновить свою версию Node.js до v0.8 или выше.

3. Одна из задач Grunt, созданная по умолчанию, — это сервер разработки, который можно использовать для тестирования приложения. Запустите сервер, используя следующую команду:

   grunt server 

   Это должно запустить браузер по умолчанию и отобразить страницу, похожую на следующую:

   

Одна из приятных сторон задачи grunt server заключается в том, что она отслеживает изменения в приложении в режиме реального времени. Например, если вы откроете файл emberapp / app / index.html и измените заголовок с «Ember Starter Kit» на «My Ember Starter Kit», после сохранения файла окно браузера должно обновиться, чтобы отразить изменение заголовка.

Понимание макета приложения

На данный момент у вас есть куча файлов и папок в вашем каталоге emberapp и, возможно, вам интересно, где именно находится ваше приложение. Это в папке приложения . Здесь вы найдете:

• Index.html — веб-страница, которая содержит ваше приложение. Если вы посмотрите на этот файл, он довольно пустой, кроме загрузки файлов JavaScript. Обратите внимание, что он загружает scripts / app.js. Это точка входа для вашего приложения.

• Шаблоны — шаблоны руля, которые используются для визуализации различных «страниц» в приложении. В настоящее время здесь должно быть только два файла; application.hbs, который является основной частью вашего приложения, и index.hbs, который содержит представление для ‘/’ или индексного маршрута приложения.

• Стили — таблицы стилей CSS, используемые приложением

• Скрипты — JavaScript, который управляет приложением

• Изображения — любые изображения, используемые приложением

• Компоненты — это где Bower устанавливает компоненты, используемые приложением

Добавление компонентов

В то время как Grunt предоставляет полезные задачи, такие как сервер, используемый выше, Bower обеспечивает управление компонентами. К сожалению, не все, что я буду использовать, доступно через Bower, но давайте добавим что-то, что — Twitter Bootstrap. В частности, Sass-Bootstrap. Если вы не знакомы с Sass, это расширение CSS, и инструменты и задачи, которые мы установили через Yeoman, понимают, как с ним работать, и скомпилировали его в базовый CSS. Но это хороший пример использования Bower для установки компонента.

Используйте следующую команду для установки Sass-Bootstrap:

bower install sass-bootstrap --save

После завершения команды у вас должна появиться новая папка emberapp / app / components / sass-bootstrap и запись в файле emberapp / bower.json, в которой указана установленная версия Sass-Bootstrap. Подобно тому, как файл package.json, который описывает модули Node.js, необходимые для вашего приложения, файл bower.json описывает компоненты Bower, необходимые для вашего приложения. Сама папка компонентов исключена из вашего репозитория Git, как и папка node_modules.

Чтобы изменить приложение для использования стилей из Sass-Bootstrap, выполните следующие действия:

1. Отредактируйте emberapp / app / index.html и замените содержимое следующим:

   <!doctype html>
   <html>
       <head>
           <meta charset="utf-8">
           <meta name="viewport" content="width=device-width, initial-scale=1.0">
           <title>Ember Starter Kit</title>
   
   
           <link rel="stylesheet" href="styles/main.css">
   
   </head>
       <body>
   
   
           <!-- build:js scripts/components.js -->
           <script src="components/jquery/jquery.js"></script>
           <script src="components/handlebars/handlebars.runtime.js"></script>
           <script src="components/ember/ember.js"></script>
           <!-- endbuild -->
   
           <!-- build:js scripts/main.js -->
           <script src="scripts/app.js"></script>
           <!-- endbuild -->
   
           <!-- build:js(.tmp) scripts/templates.js -->
           <script src="scripts/compiled-templates.js"></script>
           <!-- endbuild -->
           <!-- build:js scripts/plugins.js -->
           <script src="components/sass-bootstrap/js/bootstrap-affix.js"></script>
           <script src="components/sass-bootstrap/js/bootstrap-alert.js"></script>
           <script src="components/sass-bootstrap/js/bootstrap-dropdown.js"></script>
           <script src="components/sass-bootstrap/js/bootstrap-tooltip.js"></script>
           <script src="components/sass-bootstrap/js/bootstrap-modal.js"></script>
           <script src="components/sass-bootstrap/js/bootstrap-transition.js"></script>
           <script src="components/sass-bootstrap/js/bootstrap-button.js"></script>
           <script src="components/sass-bootstrap/js/bootstrap-popover.js"></script>
           <script src="components/sass-bootstrap/js/bootstrap-typeahead.js"></script>
           <script src="components/sass-bootstrap/js/bootstrap-carousel.js"></script>
           <script src="components/sass-bootstrap/js/bootstrap-scrollspy.js"></script>
           <script src="components/sass-bootstrap/js/bootstrap-collapse.js"></script>
           <script src="components/sass-bootstrap/js/bootstrap-tab.js"></script>
           <!-- endbuild -->
   </body>
   </html>
   

2. Создайте новый файл с именем main.scss, расположенный в папке emberapp / app / styles :

   $iconSpritePath: "../images/glyphicons-halflings.png";
   $iconWhiteSpritePath: "../images/glyphicons-halflings-white.png";
   
   @import 'sass-bootstrap/lib/bootstrap';
   @import 'sass-bootstrap/lib/responsive';
   

3. Скопируйте glyphicons-halflinkgs.png и glyphicons-halflings-white.png из каталога emberapp / app / components / sass-bootstrap / img в папку emberapp / app / images .

4. Сохраните index.html . Если у вас запущена задача сервера Grunt и открыто окно браузера для просмотра приложения, вы должны увидеть, как изменился стиль страницы после сохранения страницы index.html . Разница немного тонкая на данный момент. Вот до и после скриншотов:

   Перед:

   

   После:

   

Резюме

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