Нежное введение в Ember 2.0

Предисловие авторов: февраль 2017 г.

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

Создание простого блога с использованием Ember 2.0

С недавним выпуском стабильной версии Ember 2.0, состоявшейся 12 июня, мы впервые познакомились с новым движком рендеринга Glimmer, поставляемым вместе с Ember 2.0, а также с HTMLBars и рядом других новых функций EmberJS.

Для тех, кто впервые использует Ember.js, Ember 2.0 предлагает новый старт. Удалив тонну беспорядка и введя более простой синтаксис, Ember 2.0 устранит избыточность и, надеюсь, упростит изучение фреймворка новичкам.

В этом примере мы собираемся создать очень простой блог, используя Ember-2.0, Ember-cli, Ember-data и Firebase. Моя цель - создать в Ember 2.0 самое простое приложение, какое только возможно, в качестве введения в фреймворк. Если у вас есть предложения по этому приложению, дайте мне знать, если они есть.

Введение

Для этого приложения вам нужно будет написать всего 15 строк кода и создать крошечный шаблон HTML из 25 строк. Это приложение использует ряд функций и генераторов ember-cli, чтобы ускорить работу вашего приложения, используя современный синтаксис Ember 2.0 и последние версии ember-cli, ember-data, HTMLBars, & Блеск.

Цели

Создайте простой блог, используя Ember-2.0, Ember-cli, Ember-data и Firebase.

Целевая аудитория

Новички, желающие впервые попробовать Ember 2.0 без урока истории в Ember 1.x. Предполагается некоторый опыт работы с JavaScript.

Демо

Вы можете просмотреть демонстрацию приложения, которое мы собираемся создать, по адресу https://ember-blog2.firebaseapp.com/. Исходный код приложения также доступен на Github.

Начало работы

ember new ember2-blog

Если вы еще не установили ember-cli, bower и node, перейдите сюда, чтобы узнать больше о настройке вашей среды.

Предварительный просмотр вашего приложения

Прежде чем вы начнете работать над своим проектом, вам нужно будет перейти в каталог проекта (он был создан ember-cli на предыдущем шаге).

Теперь в консоли запустите сервер ember. Это создаст ваше приложение и будет обслуживать его на http: // localhost: 4200.

Теперь откройте в браузере http: // localhost: 4200 /. Вы должны увидеть сообщение Добро пожаловать в Ember.js.

Вы можете проверить свой console.log или проверить ember Inspector, чтобы убедиться, что вы используете Ember 2.0.0 (или новее).

Это отражено в нашем шаблоне приложения, расположенном по адресу app / templates / application.hbs.

Не закрывая окно консоли или окно браузера, попробуйте изменить часть HTML внутри шаблона приложения. Например:

<h2 id="title">My Ember 2.0 Blog</h2>
{{outlet}}

Вы заметите, что ember-cli немедленно создает ваше приложение и обновляет окно браузера.

Для чего нужен {{outlet}}?

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

Например, когда мы загружаем приложение, мы вводим маршрут индекса по умолчанию (что имеет смысл, поскольку index.html является страницей по умолчанию для большинства веб-сайтов). Если он присутствует, приложение будет искать шаблон с именем index.hbs и отображать его в розетке в шаблоне приложения.

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

Создание нашего шаблона индекса

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

ember generate route index

В результате будут созданы два файла: app / templates / index.hbs (наш шаблон индекса) и app / routes / index.js (наш индексный маршрут).

Это шаблон по умолчанию для маршрута index приложения.

Шаблон индекса отвечает за отображение нашей индексной страницы, а Индексный маршрут отвечает за снабжение индексной страницы нашего приложения данными, необходимыми для отображения шаблона.

Добавление HTML

Теперь откройте шаблон, расположенный в app / templates / index.hbs, и добавьте текст или HTML.

Затем выполните следующую команду из своего проекта, чтобы запустить сервер ember:

ember server

Когда приложение загрузится, вы заметите, что ваш текст или HTML появится внутри розетки.

По завершении не забудьте отменить изменения в index.hbs.

Firebase

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

Если у вас нет учетной записи firebase, создайте ее на https://www.firebase.com.

После регистрации учетной записи создайте новую Firebase. Вы можете сделать это, перейдя на https://www.firebase.com/account/.

Установка ember-fire

EmberFire - официально поддерживаемый адаптер для использования Firebase с Ember Data.

Чтобы установить ember-fire, выполните следующую команду изнутри вашего проекта:

ember install emberfire

Это добавит ember-fire в ваш package.json и ваш проект ember-cli.

Подключение firebase к нашему приложению

Прежде чем мы сможем использовать firebase в нашем приложении ember, нам нужно подключить его. Ember использует шаблон адаптера для подключения приложений Ember к ресурсам данных с помощью ember-data.

При запуске предыдущей команды для нас был создан адаптер. Затем появилось сообщение:

EmberFire has been installed. Please configure your firebase URL in config/environment.js

Нам нужно открыть config / environment.js и добавить имя нашей firebase в файл конфигурации.

Мой environment.js сейчас выглядит так:

/* jshint node: true */
module.exports = function(environment) {
 var ENV = {
 modulePrefix: 'ember2-blog',
 environment: environment,
 contentSecurityPolicy: { 'connect-src': "'self' wss://*.firebaseio.com" },
 firebase: ‘https://YOUR-FIREBASE-NAME.firebaseio.com/',
 baseURL: '/',
 locationType: ‘auto’,
 EmberENV: {
 FEATURES: {
 // Here you can enable experimental features on an ember canary build
 // e.g. ‘with-controller’: true
 }
 },
APP: {
 // Here you can pass flags/options to your application instance
 // when it is created
 }
 };
if (environment === 'development') {
 // ENV.APP.LOG_RESOLVER = true;
 // ENV.APP.LOG_ACTIVE_GENERATION = true;
 // ENV.APP.LOG_TRANSITIONS = true;
 // ENV.APP.LOG_TRANSITIONS_INTERNAL = true;
 // ENV.APP.LOG_VIEW_LOOKUPS = true;
 }
if (environment === 'test') {
 // Testem prefers this…
 ENV.baseURL = '/';
 ENV.locationType = 'none';
// keep test console output quieter
 ENV.APP.LOG_ACTIVE_GENERATION = false;
 ENV.APP.LOG_VIEW_LOOKUPS = false;
ENV.APP.rootElement = '#ember-testing';
 }
if (environment === 'production') {
}
return ENV;
};

Вам нужно изменить часть, которая говорит

firebase: 'https://YOUR-FIREBASE-NAME.firebaseio.com/',

Чтобы соответствовать URL-адресу firebase, который вы хотите использовать.

Моделирование наших данных

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

В этом примере мы создаем блог. В нашем блоге будет одна модель:

Сообщения

Заголовок поста
Текст сообщения
Дата создания сообщения в блоге
Автор сообщения

В Ember мы сначала определяем структуру наших данных. Это контекст, который использует Ember, чтобы понять, как работает наше приложение.

Наша модель сообщений

заголовок (строка)
Автор (строка)
Дата (дата)
Текст (строка)

Создание модели сообщения

ember generate model post title:string author:string createdDate:date text:string

В нашей консоли мы увидим следующее:

version: 0.2.3
Could not find watchman, falling back to NodeWatcher for file system events.
Visit http://www.ember-cli.com/#watchman for more info.
installing
create app/models/post.js
installing
create tests/unit/models/post-test.js

Что только что произошло?

Генератор ресурсов последовательно выполняет несколько задач.

Сначала ember-cli создал модель для нашего ресурса сообщений.

import DS from ‘ember-data’;
export default DS.Model.extend({
   title: DS.attr(‘string’),
   author: DS.attr(‘string’),
   date: DS.attr(‘date’),
   text: DS.attr(‘string’)
});

Кроме того, ember-cli создал пустой модульный тест для нашего ресурса сообщений.

Желаемая структура приложения

Для этого приложения мы создадим очень простой блог.

Для этого мы разделим наше приложение на два компонента.

Список сообщений в блоге
Способ создать новую запись в блоге

Что такое компоненты?

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

Компоненты получили свое название из спецификации W3C для веб-компонентов. Хотя спецификация еще не доработана, в последнее время она стала очень популярной. Из-за этого реализация компонентов ember.js близко соответствует спецификации W3C.

Из чего состоят компоненты?

В Ember в настоящее время компоненты состоят из:

Шаблон компонента
Javascript, поддерживающий шаблон компонента

Идея состоит в том, что вы передаете данные в компонент, и компонент отображает шаблон в браузере на основе этих данных.

Создание нашего первого компонента

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

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

ember generate component create-new-post --pod

Это сгенерирует новый шаблон, создаст файл Javascript для его поддержки и создаст тест:

installing
create app/components/create-new-post/component.js
create app/components/create-new-post/template.hbs
installing
create tests/unit/components/create-new-post/component-test.js

Что делает - стручок?

- pod создает наши компоненты, используя структуру pod. Вместо размещения всех маршрутов в папке, всех тестов в папке и всех шаблонов в другой папке, pods позволяет структурировать ваше приложение таким образом, чтобы оно отражало структуру вашего приложения. . Например, если бы у вас был URL-адрес в вашем блоге ember2-blog.firebaseapp.com/post/new, все файлы, поддерживающие эту «страницу», были бы сгруппированы вместе, что значительно упростило бы понимание. приложение, особенно если вы его не писали.

Создание шаблона для нашего нового компонента

Откройте шаблон компонента, расположенный в app / components / create-new-post / template.hbs, и используйте следующий шаблон:

<h3>Create a New Post</h3>

<form id="NewPost">
    <p>
      {{input value=newPost.title placeholder="Title"}}
      {{input value=newPost.author placeholder="Author"}}
    </p>
    <p>
      {{textarea value=newPost.text placeholder="Content" rows="10" cols="140"}}
    </p>
    <p>
        <button {{action "createPost"}}>Publish</button>
    </p>
</form>

Он состоит из трех помощников HTMLBars и помощника действий. Помощники HTMLBars создают текстовый ввод и текстовое поле, в то время как помощник действий вызывает определенную функцию Javascript в нашем приложении Ember.

Добавление нашего компонента в наше приложение

Теперь, когда мы зарегистрировали новый компонент и создали его шаблон, мы можем добавить его на любую страницу в нашем приложении.

Откройте apps / templates / index.hbs и добавьте следующее:

{{#create-new-post}}{{/create-new-post}}

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

Действие компонента

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

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

{{action "createPost"}}

При нажатии кнопки запускается метод createPost в разделе действия нашего компонента.

Перейдите к app / components / create-new-post / component.js. Вы должны увидеть следующее:

import Ember from 'ember';
export default Ember.Component.extend({
});

Внутри объекта, переданного в Ember.Component.extend () , добавьте следующее свойство:

import Ember from 'ember';
export default Ember.Component.extend({
    actions: {
    }
});

Этот объект будет содержать все действия, которые может выполнять ваш компонент. Поскольку мы вызвали наш createPost, добавьте пустой метод с именем createPost:

import Ember from 'ember';
export default Ember.Component.extend({
    actions: {
        createPost: function () {

        }
    }
});

Теперь попробуйте добавить оператор console.log () к пустому методу.

import Ember from 'ember';
export default Ember.Component.extend({
    actions: {
        createPost: function () {
            console.log("Hello!");
        }
    }
});

Запустите приложение Ember. Теперь, когда вы нажимаете кнопку Опубликовать, в консоли должно появиться следующее:

Hello!

Сбор данных из нашей формы

Что мы действительно хотим сделать внутри нашего действия createPost, так это собрать данные из формы create-new-post и создать новое сообщение.

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

В нашем индексном маршруте app / routes / index.js измените код, добавив следующее:

import Ember from 'ember';
export default Ember.Route.extend({
    model: function () {
        return {};
    }
});

Это создаст пустой объект и вернет его в качестве модели для нашего индексного маршрута.

Затем в app / templates / index.hbs добавьте post = model к нашему компоненту, чтобы передать нашу недавно созданную модель нашему компоненту как post объект.

{{#create-new-post newPost=model createPost="createPost"}}{{/create-new-post}}

Это передаст модель индекса нашему компоненту.

Затем откройте app / components / create-new-post / template.hbs. Вы заметите, что мы используем post.title и post.author в качестве значений для наших двух помощников ввода. Теперь, когда мы вводим что-то в поле ‹input›, свойства, которые мы указали для объекта `post` внутри нашего компонента, будут изменены. Это связано с тем, что в Ember данные связаны между шаблонами и моделями.

Поскольку компоненты работают автономно, вам нужно будет явно передать объект post в действие createPost. Вы можете сделать это, изменив нашу кнопку:

<button {{action 'createPost' newPost}}>Publish</button>

Теперь внутри app / components / create-new-post / component.js обновите следующее:

export default Ember.Component.extend({
    actions: {
        createPost: function (newPost) {
            console.log(newPost.title, newPost.author);
        }
    }
});

Передав объект post в наш метод createPost, мы можем получить доступ к свойствам наших полей ‹input› и нашего ‹текстового поля. ›. Если вы откроете приложение ember, вы сможете видеть поля заголовка и автора, зарегистрированные в консоли, каждый раз, когда вы нажимаете кнопку Опубликовать.

Создание новой записи

Доступ к нашей базе данных через ember-data

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

Обновление нашего действия

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

Для этого мы собираемся отправить значение из компонента в индексный маршрут приложения. Там мы будем обрабатывать сохраняемые данные в нашей Firebase.

Обновите app / components / create-new-post / component.js следующим образом:

import Ember from 'ember';

export default Ember.Component.extend({
  actions: {
    createPost: function (model) {
      this.sendAction('createPost', model);

      // Clear each input field
      this.set('newPost.title', null);
      this.set('newPost.author', null);
      this.set('newPost.text', null);
    }
  }
});

Теперь мы передаем нашу модель из нашего компонента в метод createPost внутри нашего блока actions.

Затем мы передаем его в маршрут index приложения с помощью метода sendAction.

Затем внутри app / routes / index.js добавьте следующее:

import Ember from 'ember';

export default Ember.Route.extend({
  model: function () {
      return {};
  },

  actions: {
    createPost: function (model) {
      let post = this.store.createRecord('post', {
        title: model.title,
        text: model.text,
        author: model.author,
        createdDate: new Date()
      });
      post.save();
    }
  }
});

Затем мы создаем новую запись сообщения в хранилище данных со свойствами, соответствующими нашей модели сообщения .

Затем мы сохраняем нашу новую запись сообщения и сбрасываем форму.

Теперь вы можете создавать новые сообщения

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

Создание компонента сообщения в блоге

Затем мы создадим компонент blog-post для отображения одного сообщения в блоге. Для этого выполните следующую команду изнутри вашего приложения:

ember generate component blog-post --pod

Затем в app / components / blog-post / template.hbs вставьте следующий код:

<article>
    <br>
    <h2>{{attrs.post.title}}</h2>
    <p>{{attrs.post.text}}</p>
    <i>
        (Posted on {{attrs.post.createdDate}}
        by {{attrs.post.author}})
    </i>
    <br><br><br>
    <hr>
</article>

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

Загрузка сообщений

Далее мы собираемся отобразить список сообщений на главной странице. Для этого вам нужно будет получить свои сообщения из Firebase. Это будет сделано в нашем индексном маршруте.

Откройте app / routes / index.js. Мы должны добавить следующий код для получения всех наших сообщений из Firebase:

import Ember from 'ember';
export default Ember.Route.extend({
    model: function () {
        return this.store.findAll('post');
    },

    actions: {
      createPost: function (model) {
        let post = this.store.createRecord('post', {
          title: model.title,
          text: model.text,
          author: model.author,
          createdDate: new Date()
        });
        post.save();
      }
    }
});

Отображение сообщений в индексе

Затем мы отобразим наши сообщения в индексном маршруте (домашняя страница нашего приложения). Для этого нам нужно отредактировать наш шаблон индекса.

Внутри app / templates / index.hbs добавьте в начало следующий код:

{{#each model as |post|}}
    {{#blog-post post=post}}{{/blog-post}}
{{/each}}

Что происходит?

Первый помощник - это каждый помощник, использующий синтаксис блока. Он получает model.content из нашего маршрута индекса и преобразует его в серию объектов post внутри каждого оператора. Каждый объект post передается в компонент blog-post и обрабатывается вспомогательной функцией each.

Просмотр нашего приложения

Наше приложение готово. Вы должны иметь возможность выполнять следующие действия из своего приложения:

Разместите новое сообщение в блоге, содержащее заголовок, автора, текущую дату и некоторый текст.
Смотрите, как ваши новые сообщения мгновенно появляются в вашем блоге.
Просмотрите все сообщения, которые ранее были добавлены в ваш блог.

Если вы можете сделать все вышеперечисленное, вы готовы двигаться дальше и развертывать свое приложение на бесплатном хостинге Firebase.

Необязательно: добавление стилей

При желании вы можете добавить несколько базовых стилей в файл app / styles / app.css. Я добавил следующее:

Https://gist.github.com/kidGodzilla/39a651dced3dc2fe84ea#file-style-css

Развертывание нашего приложения

Установка инструментов Firebase

Выполните следующую команду, чтобы установить Firebase Tools:

npm install -g firebase-tools

Инициализация Firebase

Теперь, когда наше приложение работает, мы можем развернуть его на нашем хостинге Firebase (это было настроено при создании Firebase).

Изнутри вашего приложения запустите команду:

firebase init

и следуйте инструкциям, которые он вам дает. Вам нужно будет ввести свое имя пользователя и пароль firebase, выбрать firebase, в которую вы хотите развернуть, и каталог, который вы хотите развернуть.

При выборе каталога, который вы хотите развернуть, вы должны ввести:

dist

для развертывания вашего скомпилированного приложения ember (а не всего исходного кода).

Ember Build

Далее вам нужно запустить

ember build -prod

команда изнутри вашего проекта.

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

Обновите файл firebase.json

Вам нужно будет внести небольшие изменения в файл firebase.json, чтобы включить URL-адреса Ember, добавив следующий код:

"rewrites": [{
  "source": "**",
  "destination": "/index.html"
}]

Ваш последний файл firebase.json должен выглядеть примерно так:

{
 “firebase”: “ember2-blog”,
 “public”: “dist”,
 “ignore”: [
 “firebase.json”,
 “**/.*”,
 “**/node_modules/**”
 ],
 "rewrites": [{
   "source": "**",
   "destination": "/index.html"
 }]
}

Развертывание в Firebase

Теперь вы готовы к развертыванию в Firebase. Все, что вам нужно сделать, это ввести

firebase deploy

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

Preparing to deploy Public Directory…
progress: 100%
Successfully deployed
Site URL: https://ember2-blog.firebaseapp.com, or use firebase open
Hosting Dashboard: https://firebase.com/account then view the hosting section of your app

Ваш сайт теперь доступен по адресу https: // ‹your-firebase-name› .firebaseapp.com /. Обратите внимание, что приложения Firebase обслуживаются только через https. Это означает, что любые ресурсы или вызовы ajax, которые вы включаете в свое приложение Firebase, также должны обслуживаться через https.

Вот так выглядит успех!

Администрирование ваших сообщений

Вы можете удалить или изменить существующие сообщения из панели администратора Firebase. Например, если вы хотите удалить все свои сообщения, нажмите красный x рядом с сообщениями.

Придерживайтесь второй части, где мы добавим более красивый стиль и сделаем несколько обновлений для нашего приложения!