Ember js: A framework for ambitious web developers

(снова) время попробовать / Хабр

Я написал эту статью по мотивам выступления, которое я делал на встрече Berlin.js. В последнее время выходит мало русскоязычных материалов об этом довольно популярном и стабильном фреймворке и я решил немного исправить эту ситуацию.

Вы учите Ember.js один раз, а потом применяете эти знания на всех Ember.js проектах. Этот тезис я попытаюсь раскрыть под катом.

Коротко о моем опыте. Впервые я попробовал Ember.js в 2014 году на своей первой работе в качестве фронт-энд разработчика. Фреймворк тогда еще был построен в парадигме MVC и не использовал CLI. В силу отсутствия большого опыта судить о сильных и слабых сторонах было сложно. В целом, мои впечатления хорошо передаются этим лайв-батлом 2013 года между Ember.js и Angular.js. Да, в гугловском фреймворке было много из коробки, но в Ember легко интегрировать сторонние библиотеки, вроде moment.js или jQuery-плагины, вроде datatables.net, что сделало его намного более гибким.

Потом я перешел в другую компанию и год работал с Can. js и React.js, но в 2016 году у меня появилась возможность выбирать, и я дал шанс старому товарищу. К тому моменту парадигма сменилась на Data Down Actions Up, появились сервисы и компоненты. Однако в целом все осталось знакомо и понятно, поэтому особых проблем с адаптацией не было.

С тех пор Ember.js мой основной инструмент. И на мой взгляд, этот фреймворк стоит того, чтобы рассматривать его как основной выбор, если вы разрабатываете SPA.

Опрос Npm 2018 зафиксировал некоторую усталость js-сообщества от многочисленных инструментов, необходимых в разработке:

all of our survey respondents would like to see less tooling, less configuration required to get started, and better documentation of the tools that do exist

Это понятное явление, учитывая, что React.js — это мейнстрим. Когда дело доходит до маркетинга, библиотека позиционируется как очень «легкий» инструмент, а значит, простой в освоении и очень гибкий. Но это обманчивая гибкость тривиальности. Представьте, что вы приходите покупать машину, а вместо этого вам предлагают купить только двигатель со словами: «Вы можете сделать с этим двигателем отличную машину. Большую, маленькую, зеленую, синюю, хэтчбэк или универсал. Для такси, для езды по городу или по сельской местности. Подойдет для любой машины!». Это прекрасно, что подойдет. Но хотелось бы сесть и поехать. Только для этого понадобится еще подобрать коробку передач, найти кузов и к тому же(!) выбрать цвет. И маркетинг об этом умалчивает.

Такой порядок вещей привел к разношерстной эко-системе с огромным разнообразием вспомогательных библиотек. Библиотек, которые часто несовместимы между собой, поэтому их нужно тщательно выбирать. Выбор — это, конечно, хорошо, но выбирать из 24 видов джема утомляет. И опрос Npm это подтверждает.

Так вот, дорогие читатели, у меня для вас хорошие новости. Ember-сообщество намного меньше страдает от мук выбора в силу «конструктивных особенностей» фреймворка. Как написал один из респондентов последнего опроса Ember-сообщества :

You can learn Ember once and apply your knowledge in any other Ember project… Ember is always a coherent experience as all addons can be authored and consumed via the same tools. Spending less brainpower on tooling, setting up a testing environment, or writing testable code is a very good thing.

что переводится как

Вы учите Ember.js один раз, а потом применяете эти знания на всех Ember.js проектах.… С Ember вы получаете цельный опыт, так как все эддоны могут быть созданы и интегрированы одним и тем же набором инструментов. Экономия ментальной энергии на освоение инструментов, развертывания тестового окружения или написание поверяемого кода — это хорошая вещь.

Далее я объясню, почему с Ember вы получаете этот цельный опыт, но сначала ответим на один нужный вопрос.

В наше время редко встретишь живой js-фреймворк, разработка которого не прекращалась на протяжении последних 5 лет. Но Ember один из них.

Активная разработка не прекращалась никогда, а вот адаптация стагнировала в 2016 году. Если мы обратимся к тому же опросу Npm 2018, то там упоминается следующий график:

Как мы видим, в 2017 году произошел разворот, и Ember снова начал расти, опережая средние темпы. Этому феномену есть простое объяснение. В 2017 году компания LinkedIn решила провести редизайн и выбрала Ember.js для реализации обеих (desktop и mobile) версий своего основного сайта. Это событие дало энергию для развития и создало текущий тренд.

Надо отметить, что помимо LinkedIn, фреймворк используют таких известных компаниях, как Microsoft, Netflix, Travis CI (весь их фронт выложен в open-source ), Intercom, Heroku и другие.

В общем, фреймворк жив и здоров).

Ниже вы можете увидеть ни на что не претендующий, неполный и субъективный список разных аспектов фронтенд разработки, цель которого просто показать примерное положение Ember.js среди других библиотек. Синяя и зеленые линии относятся к React.js и Vue.js, серая и оранжевая к Angular и Ember.js:

Ember.js по «коробочному» функционалу ближе к Angular, стараясь предоставить дефолтную реализацию и инструменты для всех задач, которые встают, когда мы хотим создать новое SPA. Если что-то не устраивает или чего-то не хватает, вы ищите для этого соответствующий эддон (ну или пишите его сами). Об эддонах чуть ниже.

React.js

Если вы приходите из мира React.js, то для вас будет знакомо разбиение страницы на иерархию компонентов. В Ember вы также будете думать, как лучше разбить вашу страницу на компоненты и инкапсулировать в них локальные состояния.
Если вы знакомы с React-router, то роутер в Ember вам также покажется знакомым. Изначально роутер в React был скопирован с эмберовского, хотя сейчас проект уже давно живет своей жизнью.
Наконец, если вы комфортно чувствуете себя в работе с Redux и/или GraphQL, вы также можете использовать их с Ember.js (см тут и тут)

Также на последнем EmberConf было выступление, посвященное сравнению паттернов для React и Ember.

Vue.js

Естественно, вам так же как и людям из React, будет знакома парадигма разбиения интерфейса на компоненты. Помимо этого, вам будут знакомы концепции шаблонов и computed properties.

Angular.js

Тем, кто хорошо знает этот фреймворк, знакомым покажутся сервисы и механизм Dependency Injection. Также вам наверняка понравятся декораторы, которые будут официально выпущены в релизе 3.10, и использование которых сейчас возможно с помощью полифила. Также вам наверняка захочется использоваться Typescript (см тут), который становится все более популярным в Ember-сообществе.

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

Ember-cli, а не Webpack

Стандартным инструментом для генерации приложения является Ember-cli. Практически все и всегда используют именно его. С помощью Ember-cli вы будете генерировать новые приложения и файлы в существующем приложении. Инструмент отвечает за компиляцию ресурсов и развертывание среды разработки с live-reload и тестами. Для этого создано много расширений, покрывающих все основные жизненные ситуации (вплоть до fingerprinting, CSP или SRI). Также его можно использовать для выкладки на боевые среды.

Для многих может показаться необычным, что инструмент не использует webpack. Вместо этого применяется broccoli.js. В целом от этого, во время разработки приложения вам не будет ни жарко, ни холодно.

Ember-cli — это стабильный и удобный инструмент. И во многом из-за этого сообщество не страдает от мук с выбором.

Жесткая структура файлов

Этот момент часто повергает незнакомых с фреймворком людей в шок. Посмотрите на структуру файлов стандартного Ember-приложения:

Что вы скажете, узнав, что ее нельзя поменять? Нельзя переложить файлы в другие папки и назвать их по-своему. Однажды из-за этого я даже услышал эпитет «фашистский» по отношению к фреймворку).

Однако такое ограничение было введено специально. Вот пруф:

Конечно, если вы свободный художник и ранимая творческая личность, вам будет сложно принять такой порядок. Но для остальных, «средних» программистов, новичков в разработке и тех, кому не хочется думать об организации папок и именовании файлов каждый новый проект, это весьма удобно.

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

Эддоны (Addons)

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

Допустим, вам нужно использовать один и тот же компонент в нескольких приложениях (ну вдруг). Тогда, если вы знаете, что компоненты всегда лежат в папке app/components/, вы можете выделить этот компонент в отдельный npm-пакет, добавить его в зависимости, и умный Ember-cli подтянет этот компонент в приложение на стадии компиляции. И вы сможете переиспользовать его в ваших приложениях.

Но это не самое удивительное. Удивительное здесь то, что ВСЕ остальные Ember-приложения также смогут использовать его, если вы опубликуете этот пакет в open-source. И все такие npm-пакеты, выложенные другими разработчиками, вы можете использовать во всех своих приложениях, не прикладывая дополнительных усилий на интеграцию.

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

Эддоны — это то, как Ember-разработчики делятся функциональностью с другими. И из-за того, что эддоны работают во всех приложениях, все используют более менее один и тот же набор. Поэтому, когда вы приходите в уже устоявшийся проект, вы, скорее всего, знаете 90% эддонов, которые он использует. Приложение вам знакомо, даже если вы видите его код первый раз в жизни.

Коммуникация с BE

Последний аспект, по которому я, пожалуй, пройдусь только вскользь, это работа с бэк-эндом.

Обычно, если вы работаете в парадигме ресурсов, в Ember для работы с данными вы будете использовать библиотеку Ember-data. Она опциональна, но по умолчанию добавляется во все новые приложения. В ней описан DSL для работы с моделями, который выглядит примерно так:

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

Если же вам не повезет, то Ember-data предоставляет вам необходимые абстракции, например, Adapter и Serializer. Эти абстракции помогут писать чистый код, чтобы не вышло как на картинке:

По умолчанию, Ember-data придерживается спецификации JSON:API (здесь о сравнении с GraphQL и REST). По своему опыту могу сказать, что использование JSON:API экономит уйму времени и моральных сил для вас и ваших бэкэнд-разработчиков. Вы НЕ обсуждаете, какие должны быть URL, в кэмелКейсе или в кебаб-кейсе должны быть атрибуты и параметры, PATCH или PUT использовать для изменения, какой должна быть структура JSON в запросе и ответе для вложенных ресурсов. Вы обсуждаете только модели, их отношения и бизнес-правила у атрибутов. Это еще один случай, когда ограничение выбора позитивно сказывается на продуктивности.

Независимо от того, опытный вы разработчик или нет, я советую начать знакомство с Ember открыв официальный туториал.

Он поэтапно познакомит вас со всеми основными моментами:

• Как создавать приложение используя ember-cli
• Как создавать компоненты, пути, модели и тд
• Как использовать Ember-data
• Как написать сложный компонент
• Как встроить стороннюю библиотеку
• Как задеплоить

Основным каналом общения Ember-разработчиков является twitter Discord сервер. Там всегда тусуются опытные программисты, которые помогут вам с непонятными моментами. Есть и русскоязычный канал. И не забывайте, что архитектура всех Ember-приложений одинакова и все используют одни и те же инструменты. Это сильно повышает вероятность быстрого ответа на ваш вопрос.

Другие каналы общения можно найти на оф сайте.

UPDATE: На русском про Ember можно спрашивать в телеграмм канале ember_js

В финале я бы хотел еще раз подчеркнуть основной тезис. Вы учите Ember.js один раз, а потом применяете эти знания на всех проектах.

Спасибо за внимание!

Ember.js — идеальный фреймворк для веб приложений | by Dan Steshenko | devSchacht

Перевод статьи Graham Cox:Ember.js: The Perfect Framework for Web Applications.

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

Мы собираемся написать приложение Dice Roller, позволяющее кинуть кости и посмотреть историю всех совершенных бросков. Полностью работающие приложение можно увидеть на GitHub.

Ember.js вобрал в себя множество современных JavaScript концепций и технологий. Вот их неполный список:

• Транспайлер Babel для полноценной поддержки ES2015 синтаксиса.
• Поддержка юнит, интеграционного и приемочного тестирований с помощью Testem и QUnit.
• Brocolli.js для сборки ассетов.
• Поддержка live-reload для сокращения отклика во время разработки.
• Шаблонизация с использованием Handlebars.
• Навигация в любую часть приложения благодаря системе роутинга.
• Полная поддержка JSON API, но при этом присутствует возможность использовать любой API, который вам необходим.

Для работы с Ember.js предполагается, что у вас установлены свежие версии Node.js и npm. Если нет, то их можно скачать и установить с сайта Node.js.

Также стоит упомянуть, что Ember — исключительно фронтенд фреймворк. Есть множество способов взаимодействия с бэкендом на ваш выбор, но сам бэкенд никак не управляется Ember.

Немало возможностей Ember.js связано с его интерфейсом командной строки или CLI. Этот инструмент, известный как ember-cli, управляет большой частью процесса разработки: от создания приложения и добавления различного функционала и до запуска тестов и деплоя на продакшен.

Практически всё во время разработки Ember.js приложения будет в какой-то степени связано с этим инструментом, поэтому важно понимать как им пользоваться. Мы будем использовать его при создании нашего приложения.

Первым делом нужно убедиться, что ember-cli установлен и актуален. Устанавливаем его c помощью npm:

$ npm install -g ember-cli

и проверяем успешность установки:

$ ember --version
ember-cli: 2.15.0-beta.1
node: 8.2.1
os: darwin x64

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

Наше приложение создалось и готово. У нас даже настроился Git, как система контроля версий.

Примечание: Вы можете отключить интеграцию с Git, а также использовать Yarn вместо npm. Используйте команду ember new --help для более подробной информации.

Запуск сервера Ember.js приложения для целей разработки делается также с помощью ember-cli:

Всё готово. Приложение запущено по адресу http://localhost:4200 и выглядит следующим образом:

Также запустился LiveReload сервер, автоматически наблюдающий за изменениями в файловой системе. Это значит, что любое изменение в коде приведёт к автоматической перезагрузке нашего приложения в браузере. А изменения картинок или CSS применяется даже без перезагрузки.

Начальная страница подсказывает нам, что делать. Давайте изменим её и посмотрим, что произойдет. Мы собираемся изменить файл app/templates/application.hbs, чтобы он выглядел так:

Примечание: {{outlet}} — это часть того, как роутинг работает в Ember. Мы еще вернемся к этому позже.

Первое, на что стоит обратить внимание, это результат работы ember-cli:

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

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

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

В дополнение, у нас уже все готово для запуска тестов. Для этого мы вновь можем воспользоваться ember-cli таким образом:

Заметьте, что в выводе консоли упоминается PhantomJS. Это потому, что Ember имеет полную поддержку запуска интеграционных тестов в браузере и по умолчанию использует безголовый браузер PhantomJS (прим. пер., с версии 2.15 по умолчанию используется headless chrome). Вы можете настроить запуск тестов в любом браузере по вашему желанию. Например при настройке непрерывной интеграции (CI) будет полезно воспользоваться этим, чтобы удостовериться, что приложение корректно работает во всех поддерживаемых вами браузерах.

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

В корне директории вы можете увидеть следующие файлы и папки:

• README.md — стандартный файл, описывающий ваше приложение.
• package.json — стандартный файл пакетного менеджера npm, также описывающий ваше приложение, но с точки зрения зависимостей. В нем описаны зависимости вашего приложения и их версии, чтобы они устанавливались корректно.
• ember-cli-build.js — конфигурационный файл для ember-cli.
• testem.js — конфигурационный файл для тестирующего фреймворка Testem. Он позволяет, среди прочего, определить в каких браузерах будут запускаться тесты.
• app/ — здесь хранится логика приложения. Многое происходит в этой папке и мы рассмотрим это ниже.
• config/ — конфигурация нашего приложения:
• config/targets.js — содержит список поддерживаемых браузеров. Это необходимо для Babel, чтобы он транспилировал ваш код в работающий во всех необходимых вам браузерах.
• config/environment.js — содержит необходимые настройки приложения, отличающиеся в различных окружениях.
• public/ — любые статические ресурсы, которые необходимы вашему приложению. Например, картинки или шрифты.
• vendor/ — сюда можно сложить любые зависимости, которые не будут управляться системой сборки.
• tests/ — это место для тестов:
• tests/unit — все юнит тесты приложения.
• tests/integration — все интеграционные тесты.

Пока мы не зашли слишком далеко, давайте добавим на нашу страницу немного разметки. А чтобы она смотрелась хорошо, будем использовать Materialize CSS framework.

Добавление подобного стороннего контента может быть осуществленно несколькими способами:

• Указанием ссылки на внешний CDN сервис
• С помощью пакетных менеджеров вроде npm или Bower
• Подключив напрямую в приложение из папки vendor/
• Использовать Ember Addon, если такой имеется

К сожалению, аддон для Materialize пока что не совместим с последней версией Ember, поэтому мы просто добавим ссылку на него. Чтобы сделать это, мы обновим app/index.html файл, являющийся корневой страницей, в которую будет отрендерено наше приложение. Мы хотим добавить ссылки на CDN для jQuery, Google Icon Font и Materialize.

Теперь мы можем обновить нашу главную страницу, добавив разметки. Для этого отредактируем файл app/templates/application.hbs:

Мы добавили шапку, а также контейнер с тэгом {{outlet}} упомянутым ранее.

В браузере это должно выглядеть так:

Так, что же такое outlet тэг? Ember работает на основе роутов, где каждый роут является ребенком другого роута. Самый верхний роут в этой иерархии обрабатывается Ember автоматически и рендерит шаблон app/templates/application.hbs.

Тэг outlet определяет, где Ember отрендерит следующий роут в текущей иерархии. Таким образом роут первого уровня будет отрендерен в добавленный нами тэг в application.hbs, а роут второго уровня будет отрендерен в такой же тэг в темплейте роута первого уровня. И так далее.

В Ember.js приложении каждая посещаемая страница доступна с помощью роута. Существует прямая связь между адресной строкой (URL) в браузере и роутом в приложении.

Проще показать это на примере. Давайте добавим новый роут в наше приложение, позволяющий пользователю бросать кости. И вновь это делается с помощью ember-cli:

Что создалось с помощью этой команды?

• Обработчик для роута — app/routes/roll.js
• Шаблон для роута — app/templates/roll.hbs
• Тест для роута tests/unit/routes/roll-test.js
• Новый роут добавился в файл конфигурации роутера — app/router.js

Давайте посмотрим на это в действии. Для начала мы хотим создать довольно простую страницу, позволяющую нам получить число после броска костей. Для этого обновим файл app/templates/roll.hbs:

Результат будет доступен в браузере по адресу http://localhost:4200/roll:

Теперь нам нужна возможность попадать на эту страницу с главной страницы. Ember позволяет сделать это очень просто с помощью хелпера link-to, который принимает первым аргументом имя роута и рендерится в разметку, позволяющую нашему пользователю попасть на нужный роут.

В нашем случае нужно обновить файл app/templates/application.hbs, чтобы он содержал следующее:

Это добавит ссылку на роут roll в шапку страницы, как мы и задумывали:

Если на данном этапе вы попробовали протестировать наше приложение, то могли заметить одну проблему. Переход по ссылке в роут roll работает корректно, но метки элементов форм не выстраиваются правильно. Это происходит потому что Materialize нужно использовать JavaScript, чтобы поставить метки на свои места, после того как они будут отрендерены. Но динамический роутинг предполагает, что страница не будет перезагружена. Таким образом, у нас пока что нет места, где можно инициализировать этот JavaScript код.

На помощь приходят компоненты. Компоненты — это частички интерфейса пользователя, имеющие свой жизненный цикл, с которым мы можем взаимодействовать и в который мы можем встроить необходимый нам JavaScript код. Также они используются для создания переиспользуемых элементов интерфейса, но к этому мы ещё вернёмся.

Пока что мы собираемся создать компонент, представляющий собой форму для броска костей. Как обычно, создание компонента тоже можно осуществить с помощью ember-cli:

$ ember generate component roll-dice
installing component
create app/components/roll-dice.js
create app/templates/components/roll-dice.hbs
installing component-test
create tests/integration/components/roll-dice-test.js

Мы получили:

• app/components/roll-dice.js — код, управляющий компонентом
• app/templates/components/roll-dice.hbs — шаблон компонента, где мы определим, как он выглядит
• tests/integration/components/roll-dice-test.js — тест, чтобы удостовериться, что компонент работает правильно

Мы перенесём всю разметку из роута roll в компонент, что не повлияет на работу приложения в целом, но позволит нам использовать всю силу компонент.

Обновим шаблон компонента app/templates/components/roll-dice.hbs:

А также шаблон роута app/templates/roll.hbs:

Тэг roll-dice в шаблоне говорит Ember, где отрендерить наш компонент.

Компоненты в Ember имеют заданный жизненный цикл, которому они следуют, с множеством хуков, вызываемых на различных стадиях. Мы используем хук didRender, который будет вызван после того, как компонент будет отрендерен (в первый раз или в любые последующие), чтобы попросить Materialize обновить метки элементов форм.

Сделать это можно, обновив код компонента app/components/roll-dice.js таким образом:

Теперь при любом заходе в роут roll нужный нам код отработает и Materialize исправит отображение меток.

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

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

В нашем случае у нас есть три поля ввода, поэтому нам нужно добавить три строчки внутри класса компонента в файле app/components/roll-dice.js:

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

Обратите внимание, что атрибут value имеет слегка странный синтаксис. Подобный синтаксис может быть использован с любым атрибутом хелпера, не только с value. Вообще существует три способа передачи значения в атрибут:

• Как строку в кавычках (значением будет эта строка
• Как строку без кавычек (в этом случае значение будет взято из одноименного поля в классе компоненты, но компонента никогда не обновится)
• С использованием (mut <name>) (значение также возьмется из одноименного поля в классе компонента, но компонент будет изменяться, когда значение изменится в браузере)

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

Следующим шагом мы хотим добавить компоненту интерактивность. Например, хорошо бы обрабатывать нажатие кнопки «Бросить кость». Для этого в Ember есть экшены. Это методы, описанные в классе компонента, которые могут быть подключены в шаблон компонента. Обычно методы описывают в специальном объекте компонента actions.

Добавим экшен в наш компонент app/components/roll-dice.js:

Мы возвращаем false, чтобы предотвратить всплытие события. Это довольно стандартная процедура в веб-приложениях и в данном случае предотвращает отправку формы и перезагрузку страницы.

Вы можете заметить, что мы ссылаемся на поля, которые мы ранее объявили в классе, чтобы иметь доступ к значениям полей ввода. Здесь нет никакого взаимодействия с DOM: мы оперируем только JavaScript переменными.

Осталось подключить наш экшен. В шаблоне нам нужно сказать тэгу формы, что ему нужно вызвать triggerRoll экшен, когда случится событие onsubmit. Это делается добавлением всего одного атрибута с использованием action хелпера. В шаблоне app/templates/components/roll-dice.hbs это выглядит так:

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

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

Мы хотим достичь следующего:

• Пользователь определяет параметры для броска кости
• Пользователь нажимает на кнопку «Бросить кость»
• Приложение выполняет логику броска кости и отправляет результат и параметры совершенного броска на сервер
• Сервер запоминает результат и сообщает клиенту об удачном сохранении
• Браузер отображает результат броска

Звучит довольно просто. И конечно, с Ember, это действительно так.

Ember управляет этим, используя встроенную концепцию хранилища — Store, наполненного моделями — Models. Хранилище — единственный источник знаний о данных во всем приложении, а модель представляет часть этих данных в хранилище. Модели сами знают как сохранить себя на сервер, а хранилище знает как создавать и управлять моделями.

Очень важно сохранять инкапсуляцию во всем нашем приложении. Роуты (и контроллеры, о которых мы не будем говорить здесь) имеют доступ к хранилищу. Компоненты — нет.

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

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

В классе, ответственном за управление роутом app/routes/roll.js зарегистрируем экшен saveRoll, которым мы собираемся выполнить:

И перепишем логику экшена компонента. Теперь мы хотим вызвать другой экшен в нашем компоненте, передав параметры броска в его аргументы. Это делается с помощью метода sendAction, доступного в классе компонента.

Осталось связать экшен из роута и экшен компонента. Для этого изменим внешний вид вызова компонента в шаблоне роута app/templates/roll.hbs:

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

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

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

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

Теперь мы можем заполнить модель app/models/roll.js атрибутами, необходимыми для представления наших данных:

DS.attr вызывается чтобы определить атрибут модели заданного типа. Эти типы в Ember называются преобразователями (transform). Варианты преобразователей по умолчанию: "string", "number", "data"или "boolean". Но при необходимости вы всегда можете добавить свой.

Используем эту модель для создания броска кости в хранилище и сохранения на бэкенд. Для этого нам нужно получить доступ к хранилищу в классе роута app/routes/roll.js:

Если мы сейчас попробуем выполнить этот код, нажав на кнопку «Бросить кость», это приведёт к сетевому вызову на наш сервер. И это не сработает, потому что у нас нет сервера.

Не будем беспокоиться об этом, потому что мы не затрагиваем здесь тему реализации бэкенда. Но если вам нужно разрабатывать Ember приложение совсем без бэкенда, есть различные варианты, например, использование аддона ember-localstorage-adapter, чтобы сохранять данные в local-storage браузера. Также можно использовать аддоны ember-cli-mirage или emberfire.

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

Ember неявно использует роут под названием index для отображения первоначальной страницы приложения. Если для этого роута нет никаких файлов, то никакой ошибки не произойдет: просто на главной страницы ничего не будет отрендерено. Мы будем использовать этот роут для отображения всех совершенных бросков из хранилища.

Так как index роут уже существует, то нам не нужно вызывать никаких команд с помощью ember-cli, мы просто создадим файл app/routes/index.js, в который добавим:

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

Создадим файл app/templates/index.hbs и добавим в него разметку:

В шаблоне мы имеем доступ к модели, возвращённой роутом, и, итерируясь по ней, создаём таблицу, которая выглядит так:

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

Использование Ember может очень сильно повысить эффективность разработки фронтенда. В противоположность библиотекам, вроде React, Ember даёт вам весь необходимый функционал без дополнительных усилий. Использование ember-cli и настроенных процессов сборки приложения выводит его на следующий уровень, делая процесс невероятно простым и безболезненным от начала и до конца. Добавив сюда поддержку сообщества практически не остается задач, которые не могли бы быть решены.

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

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

Ember.js или Vue.js: какой фреймворк выбрать?

Изначально JavaScript создавался для работы с веб-приложениями, однако теперь он используется для создания мобильных приложений. Фреймворки на основе JavaScript популярны среди разработчиков, поскольку они упрощают процесс разработки.

Использование определенного фреймворка определяет скорость и уровень сложности создания приложения. Таким образом, для достижения успешного результата необходимо выбрать лучший вариант для приложения. Приведем сравнение Ember.js и Vue.js — двух фреймворков, которые выделяются среди других.

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

● Код должен быть прост для понимания.

● Фреймворк должен обеспечивать максимальную мощность при наименьшем объеме кода.

● Фреймворк должен предоставлять хорошо изложенную структуру для работы.

● Поддерживает ли фреймворк встроенный или внешний маршрутизатор?

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

● Фреймворк должен обладать возможностью маршрутизации на основе URL-адреса в случае, если пользователям необходимо обмениваться ссылками на подэкраны в интерфейсе в одностраничных архитектурах.

● Более узкий вариант шаблона предоставляет возможность двусторонней привязки.

● Фреймворк должен работать исправно со сторонними библиотеками.

● Тестирование кода внутри фреймворка не должно вызывать затруднений.

● Фреймворк должен предоставлять клиентский сервис HTTP для вызовов AJAX.

● Документация должна быть полной и актуальной.

● Фреймворк должен быть совместим с последней версией браузера.

● Фреймворк должен удовлетворять вышеуказанным условиям для упрощения создания приложения.

● Чистая архитектура Vue.js упрощает интеграцию с другими приложениями.

● Vue.js легкий и быстрый. Уменьшить его размер можно, выполнив развертывание только интерпретатора.

● Предоставляет возможность разделения компилятора и виртуального шаблона DOM.

● Благодаря легкости интеграции его можно использовать для внесения изменений в существующие приложения.

● Для восполнения недостатков можно подключить любую библиотеку.

● Поскольку Vue.js использует потоковую визуализацию на стороне сервера, пользователи могут быстро получать ответы.

● Рендеринг на стороне сервера также помогает повысить рейтинг в поисковых системах.

● Благодаря простой структуре его может использовать даже начинающий разработчик.

● Предоставляет возможность вернуться, проверить и исправить ошибки.

● Предоставляет возможность проверки всех существующих состояний.

● Подробная документация также ускоряет создание веб-страницы или приложения.

● Ember.js — это open-source MVVM фреймворк для разработки сложных многостраничных приложений на основе модели.

● Он предлагает как новейшие, так и старые функции.

● Это плотно структурированный, негибкий фреймворк.

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

● Есть строгое руководство по избежанию устаревших версий API.

● API Ember упрощает использование сложных функций.

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

● С помощью промисов можно писать модульный и простой код, используя любой API Ember.js.

● Ember.js — это полностью загруженный фронтэнд-фреймворк.

● Это стабильный фреймворк, поскольку все компоненты обладают одинаковыми функциями и свойствами.

● Четко определенные ограничения предотвращают усложнение приложения.

● Язык Handlebars, используемый Ember.js, упрощает чтение и понимание шаблонов, а также ускоряет их загрузку.

● Handlebars обновляет шаблон при каждом добавлении и удалении данных.

● Активное сообщество Ember.js регулярно обновляет фреймворк и упрощает обратную совместимость.

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

Ember.js предлагает хорошо организованный и надежный фреймворк. Он отлично подходит для большой команды разработчиков, позволяя каждому разобраться в написанном коде и внести вклад в общий проект.

Vue.js позволяет использовать синтаксис разных видов и упрощает написание кода. Он также оптимизирован для SEO. Ember — это полностью загруженный фронтэнд-фреймворк для быстрого создания приложений. Однако он не подходит для разработки небольших проектов.

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

Читайте также:

Перевод статьи eSparkBiz: Which Framework Works Better For You — Ember.js or Vue.js?

Ember.js: идеальная платформа для веб-приложений

Ember.js — это продуманный внешний интерфейс JavaScript, который в последнее время вызывает большой интерес. Эта статья познакомит вас с некоторыми ключевыми понятиями фреймворка при создании простого приложения, чтобы показать базовый пример того, что он способен производить.

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

Среда Ember.js объединяет множество современных концепций и технологий JavaScript в один пакет, включая, но не ограничиваясь:

• Использование транспортера инструмента Babel , для поддержки ES2016 во всем.
• Поддержка тестирования на уровне Unit, Integration и Acceptance в стандартной комплектации на базе Testem и QTest .
• Создание активов с использованием Broccoli.js .
• Поддержка перезагрузки в реальном времени, для сокращения времени цикла разработки.
• Создание шаблонов с использованием синтаксиса разметки Handlebars .
• URL Routing — первая разработка, обеспечивающая полную поддержку глубоких ссылок.
• Полный слой данных, построенный на основе JSON API , но подключаемый для любого доступа к API, который вам необходим.

Понять Ember за 30 минут

Приложения с Ember JavaScript Framework

Для работы с Ember.js предполагается, что у вас установлена ​​последняя версия Node.js и npm. Если нет, то их можно загрузить и установить с веб-сайта Node.js.

Следует также упомянуть, что Ember — это просто оболочка внешнего интерфейса. У него есть несколько способов взаимодействия с бэкэндом по вашему выбору, но этот бэкэнд никоим образом не обрабатывается самим Ember.

Представляем ember-cli

Большая часть возможностей Ember.js заключается в его интерфейсе командной строки (CLI). Этот инструмент, известный как ember-cli, поддерживает большую часть жизненного цикла разработки приложения Ember.js, начиная с создания приложения, добавляя в него функциональность вплоть до запуска тестовых наборов и запуска реального проекта в режиме разработки.

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

Первое, что нам нужно сделать, это убедиться, что Ember.js CLI правильно установлен и обновлен. Это делается путем установки из npm следующим образом:

$ npm install -g ember-cli 

и мы можем проверить, что он был успешно установлен, выполнив следующую команду:

 $ ember --version ember-cli: 2.15.0-beta.1 node: 8.2.1 os: darwin x64 

Создание вашего первого приложения Ember.js

После установки ember-cli вы готовы приступить к созданию приложения. Это первое место, где мы будем использовать инструмент CLI Ember.js — он создает всю структуру приложения, настраивая все готово к работе.

 $ ember new dice-roller installing app create .editorconfig create .ember-cli create .eslintrc.js create .travis.yml create .watchmanconfig create README.md create app/app.js create app/components/.gitkeep create app/controllers/.gitkeep create app/helpers/.gitkeep create app/index.html create app/models/.gitkeep create app/resolver.js create app/router.js create app/routes/.gitkeep create app/styles/app.css create app/templates/application.hbs create app/templates/components/.gitkeep create config/environment.js create config/targets.js create ember-cli-build.js create .gitignore create package.json create public/crossdomain.xml create public/robots.txt create testem.js create tests/.eslintrc.js create tests/helpers/destroy-app.js create tests/helpers/module-for-acceptance.js create tests/helpers/resolver.js create tests/helpers/start-app.js create tests/index.html create tests/integration/.gitkeep create tests/test-helper.js create tests/unit/.gitkeep create vendor/.gitkeep NPM: Installed dependencies Successfully initialized git. $ 

Это привело к созданию целого приложения, которое готово к запуску. Он даже настроил Git в качестве источника контроля для отслеживания вашей работы.

Примечание: если вы хотите, вы можете отключить интеграцию с Git, и вы можете предпочесть пряжу над npm. Помощь для инструмента описывает это и многое другое.

Теперь посмотрим, как это выглядит. Запуск приложения Ember для целей разработки — еще раз — также выполняется с помощью ember-cli:

 $ cd dice-roller $ ember serve Livereload server on http://localhost:49153 'instrument' is imported from external module 'ember-data/-debug' but never used Warning: ignoring input sourcemap for vendor/ember/ember.debug.js because ENOENT: no such file or directory, open '/Users/coxg/source/me/writing/repos/dice-roller/tmp/source_map_concat-input_base_path-2fXNPqjl.tmp/vendor/ember/ember.debug.map' Warning: ignoring input sourcemap for vendor/ember/ember-testing.js because ENOENT: no such file or directory, open '/Users/coxg/source/me/writing/repos/dice-roller/tmp/source_map_concat-input_base_path-Xwpjztar.tmp/vendor/ember/ember-testing.map' Build successful (5835ms) – Serving on http://localhost:4200/ Slowest Nodes (totalTime => 5% ) | Total (avg) ----------------------------------------------+--------------------- Babel (16) | 4625ms (289 ms) Rollup (1) | 445ms 

Теперь мы готовы к работе. Приложение работает на http: // localhost: 4200 и выглядит так:

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

Давай попробуем?

Начальная страница уже говорит нам, что делать, так что давайте пойдем и изменим главную страницу и посмотрим, что произойдет. Мы собираемся изменить файл app/templates/application.hbs чтобы он выглядел следующим образом.

 This is my new application. {{outlet}} 

Примечание. Тег {{outlet}} является частью работы Routing в Ember. Мы рассмотрим это позже.

Первое, на что нужно обратить внимание, это вывод ember-cli, который должен выглядеть следующим образом:

 file changed templates/application.hbs Build successful (67ms) – Serving on http://localhost:4200/ Slowest Nodes (totalTime => 5% ) | Total (avg) ----------------------------------------------+--------------------- SourceMapConcat: Concat: App (1) | 9ms SourceMapConcat: Concat: Vendor /asset... (1) | 8ms SimpleConcatConcat: Concat: Vendor Sty... (1) | 4ms Funnel (7) | 4ms (0 ms) 

Это говорит нам о том, что мы заметили, что мы изменили шаблон, перестроили и перезапустили все. У нас было нулевое участие в этой части.

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

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

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

 $ ember test ⠸ Building'instrument' is imported from external module 'ember-data/-debug' but never used ⠴ BuildingWarning: ignoring input sourcemap for vendor/ember/ember.debug.js because ENOENT: no such file or directory, open '/Users/coxg/source/me/writing/repos/dice-roller/tmp/source_map_concat-input_base_path-S8aQFGaz.tmp/vendor/ember/ember.debug.map' ⠇ BuildingWarning: ignoring input sourcemap for vendor/ember/ember-testing.js because ENOENT: no such file or directory, open '/Users/coxg/source/me/writing/repos/dice-roller/tmp/source_map_concat-input_base_path-wO8OLEE2.tmp/vendor/ember/ember-testing.map' cleaning up... Built project successfully. Stored in "/Users/coxg/source/me/writing/repos/dice-roller/tmp/class-tests_dist-PUnMT5zL.tmp". ok 1 PhantomJS 2.1 - ESLint | app: app.js ok 2 PhantomJS 2.1 - ESLint | app: resolver.js ok 3 PhantomJS 2.1 - ESLint | app: router.js ok 4 PhantomJS 2.1 - ESLint | tests: helpers/destroy-app.js ok 5 PhantomJS 2.1 - ESLint | tests: helpers/module-for-acceptance.js ok 6 PhantomJS 2.1 - ESLint | tests: helpers/resolver.js ok 7 PhantomJS 2.1 - ESLint | tests: helpers/start-app.js ok 8 PhantomJS 2.1 - ESLint | tests: test-helper.js 1..8  

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

Как структурировано приложение Ember.js

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

На самом верхнем уровне вы заметите следующие файлы и каталоги:

• README.md — это стандартный файл readme, описывающий приложение
• package.json — это стандартный файл конфигурации npm, описывающий ваше приложение. Это используется в первую очередь для правильной установки зависимостей.
• ember-cli-build.js — это конфигурация инструмента Ember CLI для поддержки нашей сборки.
• testem.js — это конфигурация для тестовой среды. Это позволяет вам, помимо прочего, определить браузеры, которые следует использовать для запуска тестов в различных средах.
• приложение / — это фактическая логика приложения. Здесь много чего будет описано ниже.
• config / — это конфигурация для приложения
  • config / target.js — это список поддерживаемых браузеров. Это используется Бабелем для обеспечения того, чтобы Javascript передавался таким образом, чтобы все они работали.
  • config / environment.js — это основная конфигурация для вашего приложения. Все, что необходимо для приложения, но может варьироваться в зависимости от среды, должно быть здесь.
• public / — это любые статические ресурсы, которые вы хотите включить в свое приложение. Например, изображения и шрифты.
• vendor / — это то место, куда переходят любые зависимости внешнего интерфейса, которые не управляются системой сборки
• тесты / — это то, где все тесты идут
  • tests / unit — это все модульные тесты для приложения
  • тесты / интеграция — это все интеграционные тесты для приложения

Общая структура страницы (включая стороннее содержимое)

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

Добавление поддержки стороннего контента, подобного этому, может быть выполнено несколькими способами:

• Прямая ссылка на контент на внешнем сервисе, таком как CDN
• Использование менеджера пакетов, такого как npm или Bower, чтобы установить его для нас
• Включая это прямо в нашем приложении.
• Использование Ember Addon, если оно есть

К сожалению, аддон для Materialize еще не работает с последней версией Ember.js, поэтому вместо этого мы просто будем ссылаться на ресурсы CDN с нашей главной страницы. Чтобы добиться этого, мы собираемся обновить app/index.html , который является структурой главной страницы, в которую отображается наше приложение. Мы просто добавим ссылки CDN для jQuery, Google Icon Font и Materialize.

  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.1/css/materialize.min.css">  <script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.1/js/materialize.min.js"></script> 

Теперь мы можем обновить главную страницу, чтобы показать наш основной шаблон. Это делается путем редактирования app/templates/application.hbs так:

 <nav> <div> <a href="#"> <i>filter_6</i> Dice Roller </a> <ul> </ul> </div> </nav> <div> {{outlet}} </div> 

Это дает нам Materialize Nav в верхней части экрана с контейнером, содержащим упомянутый ранее тег {{outlet}} .

Это выглядит так при посещении в вашем браузере:

Так что же это за outlet ? Ember работает вне маршрутов, где каждый маршрут считается дочерним по отношению к какому-либо другому маршруту. Самый верхний маршрут обрабатывается Ember автоматически и отображает шаблон app/templates/application.hbs .

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

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

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

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

 $ ember generate route roll installing route create app/routes/roll.js create app/templates/roll.hbs updating router add route roll installing route-test create tests/unit/routes/roll-test.js 

Эта команда дала нам следующее:

• Обработчик маршрута — app/routes/roll.js
• Шаблон для маршрута — app/templates/roll.hbs
• Тест для маршрута — tests/unit/routes/roll-test.js
• Обновлена ​​конфигурация маршрутизатора, чтобы узнать об этом новом маршруте — app/router.js

Давайте посмотрим это в действии. На данный момент у нас будет очень простая страница, позволяющая нам бросать несколько кубиков. Для этого обновите app/templates/roll.hbs следующим образом:

 <div> <form> <div> <div> <input placeholder="Name" type="text"> <label for="roll_name">Name of Roll</label> </div> </div> <div> <div> <input placeholder="Number of dice" type="number" value="1"> <label for="number_of_dice">Number of Dice</label> </div> <div> <input placeholder="Number of sides" type="number" value="6"> <label for="number_of_sides">Number of Sides</label> </div> </div> <div> <button type="submit" name="action"> Roll Dice <i>send</i> </button> </div> </form> </div> {{outlet}} 

Затем зайдите на http: // localhost: 4200 / roll и посмотрите результат:

Теперь мы должны быть в состоянии добраться сюда. Ember делает это очень просто, используя тег link-to . Это берет (среди прочего) имя маршрута, на который мы отправляем пользователя, и затем создаем разметку, чтобы туда попасть.

В нашем случае мы будем обновлять app/templates/application.hbs чтобы он содержал следующее:

 <ul> {{#link-to 'roll' tagName="li"}} <a href="roll">Roll Dice</a> {{/link-to}} </ul> 

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

Затем эта новая ссылка приводит пользователя к маршруту «/ roll», который мы только что настроили, именно так, как нужно.

Создание модульных компонентов

Если вы до сих пор тестируете приложение, вы заметите одну проблему. Открытие домашней страницы и посещение ссылки «/ roll» работает, но метки в форме не выстраиваются должным образом. Это связано с тем, что Materialise должен запускать некоторый JavaScript, чтобы разобраться, но динамическая маршрутизация означает, что страница не перезагружается. Нам нужно немного помочь здесь.

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

На данный момент мы собираемся создать один компонент, представляющий форму Roll Dice. Как всегда, генерация компонента выполняется с помощью нашего инструмента ember-cli следующим образом:

 $ ember generate component roll-dice installing component create app/components/roll-dice.js create app/templates/components/roll-dice.hbs installing component-test create tests/integration/components/roll-dice-test.js 

Это дало нам:

• app / components / roll-dice.js — код, который питает компонент
• app / templates / components / roll-dice.hbs — шаблон, управляющий тем, как он будет выглядеть
• tests / интеграции / компоненты / roll-dice-test.js — тест для проверки правильности работы компонента

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

Обновите app/templates/components/roll-dice.hbs следующим образом:

 <form> <div> <div> <input placeholder="Name" type="text"> <label for="roll_name">Name of Roll</label> </div> </div> <div> <div> <input placeholder="Number of dice" type="number" value="1"> <label for="number_of_dice">Number of Dice</label> </div> <div> <input placeholder="Number of sides" type="number" value="6"> <label for="number_of_sides">Number of Sides</label> </div> </div> <div> <button type="submit" name="action"> Roll Dice <i>send</i> </button> </div> </form> 

А затем обновите app / templates / roll.hbs следующим образом:

 <div> {{roll-dice}} </div> {{outlet}} 

Шаблон для нашего компонента — это именно та разметка, которая была у нас ранее в нашем маршруте, и теперь наш маршрут значительно упрощен. Тег roll-dice — это то, что говорит Ember для рендеринга нашего компонента в нужном месте.

Если бы мы запустили это сейчас, мы бы не увидели никакой функциональной разницы, но наш код немного более модульный. Мы собираемся воспользоваться компонентом, чтобы исправить ошибку рендеринга и добавить некоторые функции в нашу систему.

Жизненный цикл компонента

У компонентов Ember есть определенный жизненный цикл, за которым они следуют, с несколькими хуками, которые могут запускаться на разных этапах. Мы собираемся использовать хук didRender который вызывается после рендеринга компонента — либо в первый раз, либо в любой последующий раз — чтобы попросить Materialize обновить метки в текстовых полях.

Это делается путем обновления кода за компонентом, который находится внутри app/components/roll-dice.js , чтобы он выглядел следующим образом:

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

Теперь каждый раз, когда вы посещаете маршрут «/ roll» — будь то с помощью глубокой ссылки на него или с помощью ссылки на заголовок — этот код запускается, и Materialise обновляет метки для правильной передачи.

Привязка данных

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

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

В этом случае у нас есть три поля, поэтому нам нужно добавить следующие три строки в app/components/roll-dice.js , прямо внутри определения компонента:

  rollName: '', numberOfDice: 1, numberOfSides: 6, 

Затем мы обновляем наш шаблон для рендеринга с использованием хелперов вместо прямой рендеринга HTML-разметки. Для этого замените теги <input> следующим образом:

 <div> <div>  {{input placeholder="Name" value=(mut rollName)}} <label for="roll_name">Name of Roll</label> </div> </div> <div> <div>  {{input placeholder="Number of dice" type="number" value=(mut numberOfDice)}} <label for="number_of_dice">Number of Dice</label> </div> <div>  {{input placeholder="Number of sides" type="number" value=(mut numberOfSides)}} <label for="number_of_sides">Number of Sides</label> </div> </div> 

Обратите внимание, что атрибут value имеет слегка странный синтаксис. Этот синтаксис можно использовать для любого атрибута тега, а не только для value . Это можно использовать тремя способами:

• В качестве строки в кавычках — значение используется как есть
• Как строка без кавычек — значение заполняется из этого фрагмента данных компонента, но компонент никогда не обновляется
• As (mut <name>) — значение заполняется из этого фрагмента данных компонента, а компонент изменяется при изменении значения в браузере.

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

Компонент действия

Следующее, что мы хотим сделать, это взаимодействовать с компонентом. В частности, было бы хорошо справиться, когда нажата наша кнопка «Roll Dice». Ember обрабатывает это с помощью Actions — фрагментов кода в вашем компоненте, которые можно подключить к вашему шаблону. Действия просто определяются как функции в нашем классе компонентов внутри специального поля, называемого actions , которые реализуют нашу желаемую функциональность.

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

Наш блок кода действий внутри app/components/roll-dice.hbs будет выглядеть следующим образом:

  actions: { triggerRoll() { alert(`Rolling ${this.numberOfDice}D${this.numberOfSides} as "${this.rollName}"`); return false; } } 

Мы возвращаем false чтобы предотвратить появление событий . Это довольно стандартное поведение в приложениях HTML, и в этом случае необходимо, чтобы при отправке формы не происходила перезагрузка страницы.

Вы заметите, что мы ссылаемся на наши поля, которые мы ранее определили для доступа к полям ввода. Здесь вообще нет доступа к DOM — это просто взаимодействие с переменными JavaScript.

Теперь нам просто нужно подключить это. В нашем шаблоне нам нужно сообщить тегу формы, что он должен запускать это действие при onsubmit события onsubmit . Это просто добавление одного атрибута к тегу формы с помощью помощника Ember, чтобы подключить его к нашему действию. Это выглядит следующим образом внутри app/templates/components/roll-dice.hbs :

 <form onsubmit={{action 'triggerRoll'}}> 

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

Управление данными между клиентом и сервером

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

Наш желаемый поток здесь:

• Пользователи определяют кости, которые они хотят бросить
• Пользователь нажимает кнопку «Roll Dice»
• Браузер отправляет данные на сервер
• Сервер бросает кости, запоминает результат и отправляет результаты обратно клиенту
• Браузер отображает результаты броска костей

Звучит достаточно просто. И, конечно же, с Эмбер это действительно так.

Ember обрабатывает это, используя встроенную концепцию Store, заполненную моделями. Магазин — это единый источник знаний во всем приложении, а каждая Модель — это единая информация в магазине. Все модели знают, как сохранить себя на сервере, а Магазин знает, как создавать и получать доступ к Моделям.

Передача управления от компонентов к маршрутам

Во всем нашем приложении важно сохранять правильность инкапсуляции. Маршруты (и контроллеры, которые мы не рассмотрели) имеют доступ к магазину. Компонентов нет.

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

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

В логике нашего маршрута — app/routes/roll.js — нам нужно добавить следующий блок, чтобы зарегистрировать действие, которое мы собираемся выполнить.

 actions: { saveRoll: function(rollName, numberOfDice, numberOfSides) { alert(`Rolling ${numberOfDice}D${numberOfSides} as "${rollName}"`); } } 

В логике нашего компонента — app/components/roll-dice.js — нам нужно запустить действие для нашего компонента, когда мы сами сработаем. Это делается с sendAction механизма sendAction внутри нашего существующего обработчика действий.

 triggerRoll() { this.sendAction('roll', this.rollName, this.numberOfDice, this.numberOfSides); return false; } 

И, наконец, нам нужно подключить действие. Это делается в шаблоне для маршрута — app/templates/roll.hbs — путем изменения способа отображения нашего компонента:

 {{roll-dice roll="saveRoll" }} 

Это сообщает компоненту, что список свойств связан с действием saveRoll внутри нашего маршрута. Этот roll имени затем используется внутри нашего компонента, чтобы указать вызывающему игроку, что бросок кубика был сделан. Это имя имеет смысл для нашего компонента — потому что он знает, что запрашивает бросок костей, но ему все равно, как это делает другой код или что он будет делать с информацией.

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

Сохранение в магазине

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

Для создания класса модели мы выполняем:

 $ ember generate model roll installing model create app/models/roll.js installing model-test create tests/unit/models/roll-test.js 

Затем мы рассказываем нашей модели об атрибутах, которые ей необходимо понять. Это делается путем изменения app/models/roll.js чтобы он выглядел следующим образом:

 import DS from 'ember-data'; export default DS.Model.extend({ rollName: DS.attr('string'), numberOfDice: DS.attr('number'), numberOfSides: DS.attr('number'), result: DS.attr('number') }); 

DS.attr определяют новый атрибут указанного типа, называемый Transform in Ember. Здесь используются параметры по умолчанию: «строка», «число», «дата» и «логическое значение», хотя при необходимости вы можете указать свои собственные.

Теперь мы можем использовать это для создания или проката. Это делается путем доступа к магазину из нашего действия, которое мы теперь имеем в app/routes/roll.js :

 saveRoll: function(rollName, numberOfDice, numberOfSides) { let result = 0; for (let i = 0; i < numberOfDice; ++i) { result += 1 + (parseInt(Math.random() * numberOfSides)); } const store = this.get('store');  

Если мы попробуем это, мы увидим, что нажатие кнопки « Roll Dice» вызывает сетевой вызов на наш сервер. Это терпит неудачу, потому что наш сервер еще не ожидает этого, но это прогресс.

Мы не фокусируемся здесь на бэкэнде, поэтому будем заниматься этим. Если вам нужно разработать приложение Ember без какого-либо бэкэнда, тогда есть варианты, такие как ember-localstorage-adapter, которые будут полностью работать в браузере. В качестве альтернативы вам просто нужно написать соответствующий сервер и убедиться, что сервер и клиент размещены правильно и все будет работать.

Загрузка из магазина

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

У Ember неявно есть маршрут с именем index который используется для визуализации начальной страницы приложения. Если файлы для этого маршрута не существуют, то ошибка не возникает, но вместо этого ничего не отображается. Мы собираемся использовать этот маршрут для рендеринга всех исторических рулонов из нашего магазина.

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

Наш обработчик маршрута перейдет в app/routes/index.js и будет выглядеть следующим образом:

 import Ember from 'ember'; export default Ember.Route.extend({ model() { return this.get('store').findAll('roll'); } }); 

Здесь наш маршрут имеет прямой доступ к хранилищу и может использовать метод findAll для загрузки каждого оставшегося броска. Затем мы предоставляем их шаблону с использованием метода model .

Наш шаблон перейдет в app/templates/index.hbs следующим образом:

 <table> <thead> <tr> <th>Name</th> <th>Dice Rolled</th> <th>Result</th> </tr> </thead> <tbody> {{#each model as |roll|}} <tr> <td>{{roll.rollName}}</td> <td>{{roll.numberOfDice}}D{{roll.numberOfSides}}</td> <td>{{roll.result}}</td> </tr> {{/each}} </tbody> </table> {{outlet}} 

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

Резюме

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

Использование Ember может значительно повысить эффективность разработки вашего интерфейса. В отличие от таких библиотек, как React, Ember предоставляет вам полный набор функциональных возможностей, необходимых для создания полнофункционального приложения без дополнительных инструментов. Добавление ember-cli и ember-cli настроек выводит это на новый уровень, делая процесс невероятно простым и безболезненным от начала до конца. В сочетании с поддержкой сообщества почти ничего не может быть достигнуто.

К сожалению, может быть сложно вставить Ember в существующий проект. Лучше всего работает при запуске нового проекта. Установка его в существующий может быть трудной или невозможной. Ember также работает из коробки с очень специфическим способом работы с бэкэндами, и если ваш существующий бэкэнд не соответствует этому, то вы можете потратить много времени и усилий, либо переработав бэкэнд, либо найдя / написав плагины поговорить с существующим.

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

Как пользоваться руководствами — Начало работы

Что такое Ember?

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

Некоторые из этих функций, о которых вы узнаете в руководствах:

• Ember CLI — надежный инструментарий разработки для создания, разработки и сборки приложений Ember.Изучите основные команды из руководств по интерфейсу командной строки.
• Компоненты — фундаментальная конструкция, используемая в приложениях Ember, используемая для создания многоразовых элементов пользовательского интерфейса и определения макета и функциональности приложения.
• Маршрутизация — центральная часть приложения Ember. Позволяет разработчикам управлять состоянием приложения из URL-адреса.
• Services — способ хранить долгосрочное состояние в вашем приложении и передавать его.
• Ember Data — Ember Data обеспечивает согласованный способ связи с внешними API и управления состоянием приложения
• Ember Inspector — расширение браузера или букмарклет для проверки вашего приложения в реальном времени.Это также полезно для обнаружения приложений Ember в дикой природе, попробуйте установить его и откройте веб-сайт НАСА!

Организация

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

Руководства содержат практические объяснения того, как создавать приложения Ember, ориентируясь на наиболее широко используемые функции Ember.js. Для получения исчерпывающей документации по каждой функции и API Ember см. Документация по API Ember.js.

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

Допущения

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

Чтобы извлечь максимальную пользу из руководств, вы должны иметь практические знания HTML, CSS и JavaScript — строительные блоки веб-страниц. Ты можешь найти подробнее о каждой из этих технологий см. Работа с HTML, CSS и JavaScript. руководство, включая некоторые специальные функции, которые использует Ember, например, класс поля и декораторы.

Доступность

Если вы используете программу чтения с экрана при просмотре руководств, мы рекомендуем использовать Firefox и NVDA или Safari и VoiceOver для наилучшего взаимодействия.

Сообщение о проблеме

Опечатки, пропущенные слова и образцы кода с ошибками учитываются. ошибки документации. Если вы заметили один из них или хотите улучшить существующие гиды, мы рады помочь вам помочь нам!

Некоторые из наиболее распространенных способов сообщить о проблеме с руководствами:

• Использование значка карандаша в правом верхнем углу каждой страницы руководства
• Открытие вопроса или запроса на перенос в репозиторий GitHub

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

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

Если у вас есть какие-либо вопросы по поводу стиля или процесса участия, вы можете ознакомиться с нашим руководством. Если ваш вопрос не устранен, напишите нам на канале # dev-ember-learning в сообществе Ember в Discord.

Удачи!

Ember.js · GitHub

1. Ember.js — JavaScript-фреймворк для создания амбициозных веб-приложений.

   JavaScript Бег 21,9 км 4,2 км

2. Библиотека сохранения данных для Ember.js.

   JavaScript 3k 1,3 км

3. Добавляет вкладку Ember в Инструменты разработчика браузера, которая позволяет вам проверять объекты Ember в вашем приложении.

   JavaScript 941 272

4. RFC для изменений в Ember

   Оболочка 735 407

5. Протокол встречи от Ember.js основные команды

   138 39

6. Помощники, не зависящие от тестовой платформы, для тестирования приложений Ember.js

   JavaScript 164 215

Репозитории

• уголь.js

  Ember.js — JavaScript-фреймворк для создания амбициозных веб-приложений.

  JavaScript Массачусетский технологический институт 4 241 21 938 315 (По 15 вопросам нужна помощь) 107 Обновлено 29 июля 2021 г.
• JavaScript 215 164 51 (Требуется помощь по 1 проблеме) 14 Обновлено 29 июля 2021 г.

• основные заметки

  Протокол встречи от Ember.js основные команды

• данные

  Библиотека сохранения данных для Ember.js.

  JavaScript 1,301 2 982 116 50 Обновлено 28 июля 2021 г.

• тлеющий инспектор

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

  JavaScript Массачусетский технологический институт 272 941 58 (Требуется помощь по 4 вопросам) 11 Обновлено 28 июля 2021 г.
• JavaScript Массачусетский технологический институт 9 3 6 15 Обновлено 27 июля 2021 г.
• JavaScript Массачусетский технологический институт 7 9 8 20 Обновлено 26 июля 2021 г.

• уголь-мокко

  Помощники Mocha для тестирования Ember.js приложения

  JavaScript Apache-2.0 59 130 10 29 Обновлено 26 июля 2021 г.

• rfcs

  RFC для изменений в Ember

  Оболочка 406 735 145 88 Обновлено 22 июля 2021 г.

• официанты

  Надстройка Ember, позволяющая @ ember / test-helpers управлять асинхронными операциями.

  Машинопись Массачусетский технологический институт 11 18 5 8 Обновлено 13 июля 2021 г.
• JavaScript 2 1 2 5 Обновлено 9 июля 2021 г.
• JavaScript Массачусетский технологический институт 78 106 16 15 Обновлено 1 июля 2021 г.
• JavaScript Массачусетский технологический институт 134 256 10 10 Обновлено 1 июля 2021 г.
• JavaScript Массачусетский технологический институт 10 39 6 (Требуется помощь по 1 проблеме) 9 Обновлено 1 июля 2021 г.
• JavaScript Массачусетский технологический институт 0 0 0 25 Обновлено 1 июля 2021 г.
• JavaScript Массачусетский технологический институт 7 14 5 12 Обновлено 1 июля 2021 г.
• JavaScript Массачусетский технологический институт 4 4 0 7 Обновлено 18 июня 2021 г.
• JavaScript Массачусетский технологический институт 20 71 11 5 Обновлено 18 июня 2021 г.
• JavaScript Массачусетский технологический институт 4 2 0 3 Обновлено 12 июня 2021 г.
• JavaScript Массачусетский технологический институт 1 3 0 7 Обновлено 10 июня 2021 г.

• уголь

  Уголь.js модуль npm

  JavaScript 2 0 1 1 Обновлено 23 мая 2021 г.
• JavaScript Массачусетский технологический институт 0 1 0 1 Обновлено 11 мая 2021 г.
• JavaScript Массачусетский технологический институт 8 7 1 15 Обновлено 10 мая 2021 г.
• JavaScript Массачусетский технологический институт 7 3 1 8 Обновлено 9 мая 2021 г.
• Рубин Массачусетский технологический институт 155 0 0 0 Обновлено 25 января 2021 г.
• JavaScript 0 0 0 0 Обновлено 10 нояб.2020 г.
• JavaScript 1 5 6 0 Обновлено 3 ноября 2020 г.

• .github

  Файлы работоспособности по умолчанию для всех репозиториев в организации emberjs

  0 0 0 0 Обновлено 29 сентября 2020 г.
• JavaScript Массачусетский технологический институт 6 8 0 2 Обновлено 12 сентября 2020 г.
• JavaScript Массачусетский технологический институт 3 7 3 (Требуется помощь по 2 вопросам) 0 Обновлено 20 декабря 2019 г.

Ember.js в 2021 году — маяк производительности | Блог

Simpleabs ❤️ Ember

Чтобы быть полностью прозрачным, я сильно склоняюсь к Эмбер. С помощью simpleabs я основал то, что сейчас ведущая консалтинговая компания Ember в Европе. Мы помогли многим команды успешно создают, развивают и поддерживают большие приложения с помощью Ember over года.Некоторые члены нашей команды входят в основную команду Ember, и мы поддерживать ряд широко распространенных библиотек в экосистеме. Мы даже являемся одним из официальных спонсоров фреймворка. Имея весь этот опыт, а также некоторый опыт работы с командами, использующими другие стеки технологий, я думаю, что у нас есть взгляд на разработку внешнего интерфейса, может немного отличаться от взглядов других команд, и поэтому стоит обмен.

Статус-кво фронтенд-инжиниринга

В мире фронтенд-инжиниринга достигнут огромный прогресс. последние 10 лет или около того.Когда был впервые выпущен Ember, jQuery (а иногда даже Prototype) по-прежнему оставались популярными решениями для изготовления в противном случае статические и отображаемые на сервере страницы динамические. И пока jQuery остается самая используемая библиотека JavaScript в Интернете на сегодняшний день, методы, впервые представленные Ember и Angular.js (а затем React и другими) в настоящее время широко приняты и приняты. Хотя фронтенд-инжиниринг был чем-то что многие «настоящих» разработчиков смотрели бы свысока всего несколько лет назад, и что часто было просто запоздалой мыслью, эта область была профессионализирована значительно и теперь получает то внимание, которого заслуживает.Это не только признать тот факт, что разработка внешнего интерфейса является чрезвычайно сложной задачей, но также его значение для бизнеса из-за прямого воздействия на конечных пользователей опыт.

Однако в мире фронтенд-разработки дела не замедлились. По факту, как раз наоборот — мы наблюдаем инновации и изменения на чрезвычайно высоком уровне. и, похоже, все еще набирает обороты. JavaScript стал доминирующий язык в мире и является ответом по умолчанию, который многие разработчики должны делать практически все, что они могут иметь дело в сети (теперь вы даже можете написать свой CSS на JS 🙀).И хотя инновации, изучение возможностей и новых подходов — это здорово, тот факт, что огромное сообщество разработчиков коллективно ищет следующая большая вещь, и все только ждут, чтобы вскочить на следующую подножку приносит больше вреда, чем может показаться на первый взгляд. Легко недооценивать затраты, связанные с оттоком клиентов, из-за которых используются новые подходы. чрезмерно охотно приносит с собой, что часто бывает только для того, чтобы позже понять, что шумиха снова сменил направление, и то, на что вы делаете ставку, теперь превратилось в тупик.

Фетиш сложности

Я думаю, что во внешнем интерфейсе сложность в некотором роде фетишизируется — в основном из-за двух настроений. Один — просто эго. Как вирусологи и эпидемиологи скажем (и все мы узнали в прошлом году), «нет славы в профилактика «. И вот так (на удивление) мало славы можно найти в стабильной доставке реальной стоимости продукта на основе решений общих проблем другие нашли до вас и закодировали в рамках, основанных на сильных условности.С другой стороны, вся инженерная слава можно найти в найти лучший ™ способ решения конкретной проблемы и укротить низкоуровневые сложность, даже если вся эта работа не способствует выполнению продукта и бизнес-видение — решение таких проблем часто делается только ради славы, независимо от того, была ли проблема решена ранее или даже представляет собой вызов в соответствующем проекте вообще. Пошагово портировав приложение React перейти от Redux к MobX к хукам и далее в течение последних нескольких лет, вероятно, было увлекательным инженерным путешествием и принесло с собой целую кучу интересная и интересная работа.Однако соотношение затрат и выгод всех время, потраченное на это начинание, может быть сомнительным.

Крис Мэнсон из Simpleabs и Команды Ember Learning Core недавно рассказали мне история инженера, с которым он разговаривал на конференции. Они поняли и полностью согласен с ценностью, которую Ember предоставил как полнофункциональную, батареи включены интерфейсные приложения, которые позволяют командам создавать небоскребы начиная с 20 этажа вместо того, чтобы начинать закладку Фонд.Тем не менее, они сказали, что никогда не предложат схему своему начальнику потому что тогда они не смогли бы написать столько кода для решения низкоуровневых проблемы, которые они сочли особенно интересными, потому что «Ember делает все за вас» . Хотя то, что может быть веской причиной не выбирать техническое решение на раз, в большинстве случаев доставка важна и должна быть основной движущей силой для решения.

Другое мнение, которое, как я считаю, способствует фетишу сложности, — это желание контролировать каждый аспект и каждую деталь своего приложения.Частично это могло быть вызвано сообществом Node — в моем понимании это вызывает большие сомнения. мнение — любовные отношения с микропакетами, в которых составляются заявки тщательно подобранной комбинации крошечных библиотек, которые идеально подходят для особых потребностей конкретного приложения — или, в большинстве случаев, личных предпочтения инженера (-ов), создающего проект. Многие команды, с которыми я разговаривал на протяжении многих лет твердо придерживались мнения о том, какая именно библиотека маршрутизации им нужно, почему они не могут использовать шаблоны управления состоянием фреймворка X, но придется использовать другую микробиблиотеку и т. д.И хотя многие из этих аргументов будет иметь смысл с чисто технической точки зрения, практическое влияние чаще всего пренебрежимо или даже неактуально. Хотя что определенно что все время и усилия, потраченные на сборку (и последующее обслуживание) этих узкоспециализированные специальные рамки — это , а не , которые будут строиться и улучшаться реальные продукты для реальных пользователей.

Ember: превращая сложность в простоту

В отличие от этого, Эмбер принимает эти низкие и в основном неважные решения об отказе от велосипеда из рук разработчиков.Это полнофункциональный фреймворк с батарейками. и, как аналогичные решения для бэкэнда, такие как Ruby on Rails, он предоставляет все, что нужно для создания приложения согласованным образом с помощью согласованного API где отдельные части работают вместе безупречно, так как они предназначены для работать вместе с самого начала. Из-за этого не допускается уровень свобода и детальный контроль над каждой мелкой деталью, которую многие ищут для внешнего мира, как упоминалось выше. И хотя это может звучать непривлекательный для многих, на самом деле это его самая сильная сторона, поскольку позволяет командам сосредоточиться на реализации своего видения продукта и компании и доставке реальной стоимости для своих пользователей.

Существенная и случайная сложность

Написание любой программной системы означает столкновение с большим количеством сложностей. Эта сложность проявляется в двух формах (см. Знаменитая статья Фреда Брукса по этой теме): существенная сложность и случайная сложность. Существенная сложность в том, насколько сложно что-то нужно делать, независимо от опыта, используемой технологии и т. д. Это неотъемлемое свойство проблемы, которую вы решаете. Сложение двух чисел — это как правило, задача относительно невысокой сложности при построении социальной сети имеет намного более высокая сложность по сравнению.С другой стороны, случайная сложность часть сложности, которая не присуща проблеме, которую вы решаете но введен как часть решения. Добавление двух чисел в C ++ — это больше сложнее, чем делать то же самое в JavaScript, как и в C ++, вам нужно беспокоиться насчет управления памятью, вам нужно компилировать и т. д. — все это не обязательно для JavaScript, что, таким образом, снижает случайную сложность.

 $ npm install -g ember-cli 

 $ ember новое имя-проекта 

 $ ember server 

 Успешная сборка (190 мс) - обслуживание на http: // localhost: 4200 /

Самые медленные узлы (totalTime> = 5%) | Итого (средн.)
----------------------------------------- + -------- ---
BroccoliMergeTrees (17) | 35 мс (2 мс)
Пакет / активы / поставщик.js (1) | 13 мс
Concat: стили / активы / вендор ... (1) | 12 мс 

  $ npm install -g ember-cli
  

  $ ember --version
уголек-cli: 2.15.0-beta.1
узел: 8.2.1
ОС: Дарвин x64
  

  $ ember новый игра в кости
установка приложения
  создать .editorconfig
  создать .ember-cli
  создать .eslintrc.js
  создать .travis.yml
  создать .watchmanconfig
  создать README.мкр
  создать app / app.js
  создать приложение / компоненты / .gitkeep
  создать приложение / контроллеры / .gitkeep
  создать приложение / помощники / .gitkeep
  создать приложение / index.html
  создать приложение / модели / .gitkeep
  создать приложение / resolver.js
  создать app / router.js
  создать приложение / маршруты / .gitkeep
  создать приложение / стили / app.css
  создать приложение / шаблоны / application.hbs
  создать приложение / шаблоны / компоненты / .gitkeep
  создать config / environment.js
  создать config / targets.js
  создать ember-cli-build.js
  создать .gitignore
  создать package.json
  создать паблик / кроссдомен.xml
  создать общедоступный / robots.txt
  создать testem.js
  создать тесты / .eslintrc.js
  создать тесты / помощники / destroy-app.js
  создать tests / helpers / module-for-accept.js
  создать тесты / помощники / resolver.js
  создать тесты / помощники / start-app.js
  создать тесты / index.html
  создать тесты / интеграция / .gitkeep
  создать тесты / test-helper.js
  создать тесты / unit / .gitkeep
  создать поставщика / .gitkeep
NPM: установленные зависимости
Успешно инициализирован git.

$
  

  $ cd игра в кости
$ угольная подача
Сервер Livereload на http: // localhost: 49153
'instrument' импортируется из внешнего модуля 'ember-data / -debug', но никогда не используется
Предупреждение: игнорирование исходной карты ввода для vendor / ember / ember.debug.js, потому что ENOENT: нет такого файла или каталога, откройте '/Users/coxg/source/me/writing/repos/dice-roller/tmp/source_map_concat-input_base_path-2fXNPqjl.tmp/vendor/ember/ember.debug.map '
Предупреждение: игнорирование исходной карты ввода для vendor / ember / ember-testing.js, потому что ENOENT: нет такого файла или каталога, откройте '/ Users / coxg / source / me / writing / repos / dice-Roller / tmp / source_map_concat-input_base_path-Xwpjztar .tmp / vendor / ember / ember-testing.map '

Успешная сборка (5835 мс) - обслуживание на http: // localhost: 4200 /



Самые медленные узлы (totalTime => 5%) | Итого (средн.)
---------------------------------------------- + --- ------------------
Вавилон (16) | 4625 мс (289 мс)
Накопительный пакет (1) | 445 мс
  

  Это мое новое приложение.

{{торговая точка}}
  

  файл изменен templates / application.hbs

Успешная сборка (67 мс) - обслуживание на http: // localhost: 4200 /

Самые медленные узлы (totalTime => 5%) | Итого (средн.)
---------------------------------------------- + --- ------------------
SourceMapConcat: Concat: Приложение (1) | 9 мс
SourceMapConcat: Concat: Поставщик / актив... (1) | 8 мс
SimpleConcatConcat: Concat: Производитель Sty ... (1) | 4 мс
Воронка (7) | 4 мс (0 мс)
  

  $ тлеющий тест
⠸ Building'instrument 'импортируется из внешнего модуля' ember-data / -debug ', но никогда не используется
⠴ BuildingWarning: игнорирование исходной карты ввода для vendor / ember / ember.debug.js, потому что ENOENT: нет такого файла или каталога, откройте '/ Users / coxg / source / me / writing / repos / dice-Roller / tmp / source_map_concat-input_base_path- S8aQFGaz.tmp / vendor / ember / ember.debug.map '
⠇ BuildingWarning: игнорирование исходной карты ввода для vendor / ember / ember-testing.js, потому что ENOENT: нет такого файла или каталога, откройте '/ Users / coxg / source / me / writing / repos / dice-Roller / tmp / source_map_concat-input_base_path- wO8OLEE2.tmp / vendor / ember / ember-testing.map '
убираться...
Создан проект успешно. Хранится в "/Users/coxg/source/me/writing/repos/dice-roller/tmp/class-tests_dist-PUnMT5zL.tmp".
ок 1 PhantomJS 2.1 - ESLint | приложение: app.js
ok 2 PhantomJS 2.1 - ESLint | приложение: решатель.js
ok 3 PhantomJS 2.1 - ESLint | приложение: router.js
ok 4 PhantomJS 2.1 - ESLint | тесты: помощники / destroy-app.js
ok 5 PhantomJS 2.1 - ESLint | тесты: helpers / module-for-accept.js
ok 6 PhantomJS 2.1 - ESLint | тесты: помощники / resolver.js
ok 7 PhantomJS 2.1 - ESLint | тесты: помощники / start-app.js
ok 8 PhantomJS 2.1 - ESLint | тесты: test-helper.js

1..8






  

  


    {{торговая точка}}

  

  $ ember создать свиток маршрута
установка маршрута
  создать приложение / маршруты / roll.js
  создать приложение / шаблоны / roll.hbs
обновление роутера
  добавить прокрутку маршрута
установка route-test
  создать tests / unit / routes / roll-test.js
  

  

    <форма>
        

            

                
                 Название ролика 
            
        
        

            

                
                 Количество игральных костей 
            
            

                
                 Количество сторон 
            
        
        

            
                Игральная кость
                 отправить 
            
        
    


{{торговая точка}}
  

  

    {{# link-to 'roll' tagName = "li"}}
         Бросьте кости 
    {{/ссылка к}}

  

  $ ember генерирует компонент ролл-кости
установка компонента
  создать приложение / компоненты / roll-dice.js
  создать приложение / шаблоны / компоненты / roll-dice.hbs
установка компонента-теста
  создать тесты / интеграция / компоненты / roll-dice-test.js
  

  <форма>
    

        

            
             Название ролика 
        
    
    

        

            
             Количество игральных костей 
        
        

            
             Количество сторон 
        
    
    

        
            Игральная кость
             отправить 
        
    

  

  

    {{игральная кость}}


{{торговая точка}}
  

 
импортировать Ember из ember;

экспорт по умолчанию Ember.Component.extend ({
    didRender () {
        Materialize.updateTextFields ();
    }
});
  

  rollName: '',
    numberOfDice: 1,
    кол-во сторон: 6,
  

  

    

        
        {{input placeholder = "Name" value = (mut rollName)}}
         Название ролика 
    


    

        
        {{input placeholder = "Number of dice" type = "number" value = (mut numberOfDice)}}
         Количество игральных костей 
    
    

        
        {{input placeholder = "Количество сторон" type = "number" value = (mut numberOfSides)}}
         Количество сторон 
    

  

  действий: {
        triggerRoll () {
            alert (`Прокрутка $ {this.numberOfDice} D $ {this.numberOfSides} как" $ {this.rollName} "`);
            вернуть ложь;
        }
    }
  

  действий: {
    saveRoll: function (rollName, numberOfDice, numberOfSides) {
        alert (`Прокрутка $ {numberOfDice} D $ {numberOfSides} как" $ {rollName} "`);
    }
}
  

  triggerRoll () {
    this.sendAction ('бросок', this.rollName, this.numberOfDice, this.numberOfSides);
    вернуть ложь;
}
  

  {{roll-dice roll = "saveRoll"}}
  

  $ ember generate model roll
установка модели
  создать приложение / модели / roll.js
установка модельного теста
  создать тесты / unit / models / roll-test.js
  

  импорт DS из 'ember-data';

экспортировать DS по умолчанию.Model.extend ({
    rollName: DS.attr ('строка'),
    numberOfDice: DS.attr ('число'),
    numberOfSides: DS.attr ('число'),
    результат: DS.attr ('число')
});
  

  saveRoll: function (rollName, numberOfDice, numberOfSides) {
    пусть результат = 0;
    for (let i = 0; i  

  импорт Ember из «уголька»;

экспорт по умолчанию Ember.Route.extend ({
    model () {
        вернуть this.get ('store'). findAll ('roll');
    }
});
  

  <таблица>
    
        
             Имя 
             Брошенные кости 
             Результат 
        
    
    
    {{#each model as | roll |}}
        
             {{ролл.rollName}} 
             {{roll.numberOfDice}} D {{roll.numberOfSides}} 
             {{roll.result}} 
        
    {{/каждый}}
    



{{торговая точка}}