Хорошие новости! Большинство сообщений в блоге Ember 2, Stack Overflows и руководств по-прежнему актуальны для изучения и отладки Ember 3, выпущенного в феврале 2018 года. Всего лишь с парой изменений вы можете использовать старые фрагменты кода. Мы расскажем, какие изменения нужно внести, и кратко расскажем о различиях между Ember 2 и 3.

Различия между Ember 2 и 3

Вот в чем дело ... Разработчики не видят особой разницы, кроме способа импорта функций, и вы это сразу заметите.

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

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

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

Примеры кода, которых следует избегать

Хорошее практическое правило заключается в том, что статьи и видео, созданные с 2016 года, обычно полезны. Ember 2 был выпущен в августе 2015 года. Я не рекомендую смотреть образцы кода старше Ember 1.13, который был последним выпуском 1.x до Ember 2.

Где получить самую свежую информацию

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

Осмысление старых примеров кода и объяснений

В Ember 3 вы импортируете только те методы, которые вам нужны. Это было сделано для того, чтобы подготовить почву для будущих функций тряски деревьев. Однако в Ember 1.13–2.15 почти каждый файл JavaScript имел глобал вверху:

import Ember from `ember`;

Доступ к методам Ember API осуществлялся с помощью этого глобального Ember, как в этом примере компонента:

import Ember from 'ember';

export default Ember.Component.extend({
  isAwesome: Ember.computed('model.awesomeness', function() {
     return true
  })
});

Начиная с Ember 2.16, разработчики могли импортировать только то, что им нужно:

import Component from '@ember/component';
import { computed } from '@ember/object';

export default Component.extend({
  isAwesome: computed('model.awesomeness', function() {
     return true
  })
});

Присмотритесь…

  • Есть два новых оператора импорта, которые заменяют import Ember
  • export default Ember.Component стал export default Component
  • Ember.computed стал просто computed

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

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

Как преобразовать эти образцы кода

Итак, что вам нужно сделать, чтобы эти старые примеры кода работали в вашем приложении?

Во-первых, всегда используйте интерфейс командной строки Ember для создания файлов. Он позаботится об основном импорте Component, Route, Service и т. Д.

Во-вторых, не копируйте и не вставляйте import Ember from 'ember'. Тебе это не нужно.

В-третьих, найдите метод / свойство API в документации Ember API для своей версии приложения. На домашней странице есть список наиболее часто импортируемых API. В документации вы увидите правильный import путь, который нужно добавить вверху файла. В качестве альтернативы, может быть полезно взглянуть на Руководства по Ember для некоторых примеров методов в действии или официальные руководства.

В-четвертых, измените код так, чтобы он использовал импортированный метод. Вот две наиболее распространенные модификации:

  • Вычисленное свойство: добавьте import { computed } from ‘@ember/object’ вверху файла, а во фрагменте кода Ember.computed следует заменить на computed.
  • Внедрение службы: добавьте import { inject as service } from '@ember/service' вверху файла. Ember.inject.service следует заменить на service

this.get обычно необязателен в Ember 3, но это не повредит

Есть одна вещь, которую вам, вероятно, следует знать, но с этим ничего делать не нужно. В Ember 2, если вы хотели использовать свойство объекта (например, в компоненте или службе), вам всегда приходилось использовать this.get('somePropertyName'). В Ember 3 вы можете просто делать this.somePropertyName почти для всего, кроме свойств, которые являются прокси-серверами Promise. Когда вам нужно использовать get, вы увидите предупреждение в консоли или линтере. Дополнительные this.get в старом коде можно оставить!

Тестирование немного другое

Раньше методы тестирования API были частью основной кодовой базы Ember.js, а сегодня они являются частью помощников по тестированию ember. Вы можете найти документацию для старых помощников по тестированию в версиях 2.15 и более ранних версий Ember API Docs. «» Текущие документы API для помощников по тестированию 3.x доступны здесь.

Как и раньше, если вы используете старый код, вам нужно будет изменить imports, но сами методы API более или менее остались прежними. Вы можете взглянуть на кодмоды, используемые ember-cli-update, чтобы быстро найти, что нужно заменить. Вот codemod for qunit (среда тестирования, используемая многими разработчиками Ember) и помощники по тестированию.

Также гораздо проще внедрить сервис в тест! В этой статье показано, как это делалось раньше, а сегодня вы можете внедрить сервис в тест, используя this.owner.lookup('service:servicename').

Я рекомендую выступление Тобиаса Бениека на EmberConf 2018, если вам нужно полное сравнение:

Получать помощь

Посетите страницу Сообщество Ember, чтобы найти ссылки на чат-группы, форумы и многое другое. Любой желающий может задавать вопросы! Разместите ссылку на сообщение в блоге, статью или учебное пособие, которое вы делаете, а также на ошибки или проблемы, с которыми вы столкнулись.

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

Я что-нибудь пропустил? Дай и мне знать. Удачи!

PS: Важно, чтобы мы все не упускали из виду уроки, которые мы можем извлечь из других интерфейсных фреймворков и инструментов. Я рекомендую вам отправить статью или подписаться на информационный бюллетень http://frontendweekly.co/. Там опубликовано множество моих работ, вместе с множеством других авторов, и я хотел бы видеть в них еще несколько разработчиков Ember. Напишите мне, если вам нужна помощь с написанием!