Добро пожаловать во вторую часть этой серии обзоров курса Pluralsight Основы Аурелии Брайана Нойеса.

Брайан является техническим директором и архитектором в Solliance, экспертной компании по разработке технологических решений.

Брайан — региональный директор Microsoft и MVP, он специализируется на многофункциональных клиентских технологиях, а также на создании поддерживающих их сервисов с помощью WCF и веб-API ASP.NET.

Вы можете следить за Брайаном через его блог на http://briannoyes.net.

Обзор Аурелии

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

Он обсуждает, как Aurelia сравнима с другими фреймворками JavaScript, говоря, что ее ближайшим родственником является Durandal.

Он также обсуждает Angular 1.x, говоря, что это хороший фреймворк, но с некоторыми недостатками.

Эти недостатки являются одной из причин, по которым команда использовала разные подходы при разработке Angular 2.

Брайан говорит, что есть и другие популярные фреймворки: Ember, Backbone, Knockout и React. Из них только Эмбер так же всеобъемлющ, как Аурелия (хотя это означает, что остальные меньше по размеру). Он также добавляет, что если вы хотите, вы можете использовать React в качестве шаблона для шаблонов Aurelia по умолчанию и привязки данных.

Помимо этого модуля курса существует руководство Начало работы, написанное Робом Айзенбергом. Здесь есть ссылки для загрузки настроенной Aurelia для ES 2016 или настроенной для TypeScript Aurelia.

Совместимость с браузером

Брайан говорит, что Aurelia предназначена для вечнозеленых браузеров.

Для получения информации о том, как Aurelia работает с гибридной мобильной разработкой, см. aurelia-interface-update.

Особенности Аурелии

Узнаем о следующих особенностях:

  • Модульная архитектура
  • Внедрение зависимости
  • Двусторонняя привязка данных
  • Состав пользовательского интерфейса (MVVM)
  • Маршрутизация/навигация
  • Очереди задач
  • Паб-подписка
  • HTML-шаблоны
  • Пользовательские элементы
  • Пользовательские атрибуты
  • логирование

Создание приложения Hello Aurelia с нуля

Приложение Hello World с использованием Express JS, Babel, Aurelia-Bootsraper и Bootstrap.

Мы видим два метода привязки данных к нашему представлению html: литералы шаблонов и .bind.

Экскурсия по процессу начальной загрузки Aurelia

Здесь обсуждается концепция соглашения о конфигурации.

Одним из таких соглашений является загрузка модуля с именем «приложение».

Мы видим, что aurelia-bootstrapper.js — это транспилированный код ES5.

Чтобы найти исходный код, Брайан заходит на github.com/aurelia, где есть отдельный проект для каждого модуля, созданного командой Aurelia, и просматривает код index.js.

Вот официальный readme aurelia-bootstrapper.

Настройка запуска приложения

Брайан пишет метод configure в main.js. Этот модуль импортирует LogManager и ConsoleAppender, а демонстрация просто записывает отладочные сообщения в консоль.

Мы также видим, как загрузить имя, отличное от app, указав желаемое имя в setRoot.

Использование стартового приложения Aurelia для скелетной навигации

Мы хотим иметь возможность:

  • Сборка приложения, выполнение переноса кода во время разработки
  • Используйте LESS или SASS и скомпилируйте его в CSS
  • Запуск тестов, как модульных, так и сквозных
  • Подавать код и иметь возможность его отлаживать

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

Брайан устанавливает Gulp, Yeoman и генератор-аурелию Вилдана Софтика.

Тогда проект тривиально построить:

сборка глотком

Мы видим, что у нас есть новый каталог dist, содержащий наш транспилированный код.

Мы видим, что демо-приложение имеет ту же функциональность, что Роб продемонстрировал на NDC Oslo, когда сравнил 6 популярных фреймворков JavaScript.

Он также имеет функции для навигации по разным страницам, включая вложенную навигацию.

Еще одна полезная команда:

проглотить e2e

Это запускает все наши сквозные тесты.

Часть 3 — Реализация MVVM с Aurelia скоро будет