SlideShare a Scribd company logo
In The Trenches With Tomster,
Upgrading Ember.js & Ember Data
Stacy London
@stacylondoner
May 2016
In The Trenches With Zoey,
Upgrading Ember.js & Ember Data
Stacy London
@stacylondoner
@stacylondoner
Who Am I?
• mostly a front-end engineer, artist, musicophile, &
traveler
• head up front-end engineering at ShoreTel’s
Milwaukee, WI office
• co-organizer of @mkejs, TA for @milwaukeegdi
• 1st web adventure was with geocities in 1997
• working with ember.js & ember-data for ~1 year
3
4

Recommended for you

Creating the interfaces of the future with the APIs of today
Creating the interfaces of the future with the APIs of todayCreating the interfaces of the future with the APIs of today
Creating the interfaces of the future with the APIs of today

The document discusses creating futuristic interfaces using web technologies like WebSockets, WebGL, and device APIs. It provides examples of syncing device orientation over WebSockets between clients, accessing the device camera with getUserMedia, and using head tracking with headtrackr.js to control the camera in a 3D scene rendered with three.js. Links are included for related projects on Wiimote control, head tracking examples, and touch tracking demos.

web socketsuser experiencewebgl
Symfony tips and tricks
Symfony tips and tricksSymfony tips and tricks
Symfony tips and tricks

A quick overview of tips, tricks and code snippets for developers using Symfony and all its ecosystem, from Monolog to Doctrine. Learn how to become more productive and discover some rarely used options and features.

doctrinemonologphp
AtlasCamp 2010: Making Confluence Macros Easy (for the user) - Dave Taylor
AtlasCamp 2010: Making Confluence Macros Easy (for the user) - Dave TaylorAtlasCamp 2010: Making Confluence Macros Easy (for the user) - Dave Taylor
AtlasCamp 2010: Making Confluence Macros Easy (for the user) - Dave Taylor

This document discusses how to add metadata to Confluence macros to improve the user experience. It covers adding basic metadata like the macro name, description and icon to make it visible in the macro browser. It also covers adding parameter metadata to generate a user-friendly macro form. JavaScript hooks can be used to further customize the form. The presentation demonstrates these techniques through an example macro and encourages attendees to apply them to their own macros to integrate with the macro browser and improve discoverability.

@stacylondoner
What is Ember.js?
• “A framework for creating
ambitious web applications”
• an open source single page web
application (SPA) framework
• Routes, Models, Components,
Controllers, Services
• Model View Controller (MVC) —>
Model Component (MC)
• common idioms and best practices
are incorporated into the framework
so you can focus on building your
app and not reinventing the wheel
5
@stacylondoner
What is Ember.js?
• convention over configuration
• developer productivity by providing a complete dev stack
• pluggable architecture (ember add-ons)
• stability without stagnation - big focus on backwards
compatibility while still innovating
• future web standards in mind - early adopter of promises,
web components, & ES6. Yehuda Katz (Ember co-
founder) is on the TC39 committee helping to set the future
direction of JavaScript
6
@stacylondoner
Ember CLI
• dev server with live reload
• complete testing framework
• provides generators for scaffolding (folder & file structure)
• dependency management
• ES6 modules
• ES6 syntax support + Babel
• asset management/build pipeline (combining, minifying,
versioning)
7
@stacylondoner
Ember Data
• data-persistence library
• maps client-side models (in a local data store) to
server-side data
• can load & save records and their relationships
without any configuration via RESTful JSON API
• model.save(); —> AJAX POST or PUT to your API
8

Recommended for you

Keeping the frontend under control with Symfony and Webpack
Keeping the frontend under control with Symfony and WebpackKeeping the frontend under control with Symfony and Webpack
Keeping the frontend under control with Symfony and Webpack

Webpack tutorial with tips for Symfony users. Topics covered include: current frontend trends, setup, loaders, dev tools, optimization in production, bundle splitting and tips and tricks for using webpack with existing projects. Symfony Munich Meetup 2016.

webpackfrontendsymfony
Promises are so passé - Tim Perry - Codemotion Milan 2016
Promises are so passé - Tim Perry - Codemotion Milan 2016Promises are so passé - Tim Perry - Codemotion Milan 2016
Promises are so passé - Tim Perry - Codemotion Milan 2016

The document discusses asynchronous programming in JavaScript and how it has evolved over time. It covers callbacks, promises, generators, and the new async/await syntax. Callbacks were difficult to read and handle errors across steps. Promises provided a better model but still had ceremony and didn't play nicely with other constructs. Generators allowed writing async code that looked synchronous but required wrapping in a promise. Async/await builds on promises and generators by providing syntax that looks like synchronous code while still being asynchronous under the hood. It addresses issues with previous approaches but developers still need to handle errors and can overuse await. Async/await is available in modern browsers and makes asynchronous JavaScript much cleaner.

codemotion milan 2016
Building Single Page Application (SPA) with Symfony2 and AngularJS
Building Single Page Application (SPA) with Symfony2 and AngularJSBuilding Single Page Application (SPA) with Symfony2 and AngularJS
Building Single Page Application (SPA) with Symfony2 and AngularJS

Forget about classic website where UX is not so important. We are living in time where usability is one of the important thing if you are building some business client oriented web service. How to connect Symfony2 as backend and AngularJS as frontend solution? What are best practices? What are disadvantageous? How to take best from both worlds? These are topics I will cover in my talk with real examples.

symfony2single page interfaceangularjs
@stacylondoner9
Less Scaffolding Code Smells
http://i.imgur.com/KfElr4h.gif
@stacylondoner10from World of Tomorrow by Don Hertzfeldt
Super Productive!
@stacylondoner11
Who Uses Ember?
@stacylondoner
Upgrading
Ember
12

Recommended for you

No Coding Necessary: Building Confluence User Macros Cheat Sheet - Atlassian ...
No Coding Necessary: Building Confluence User Macros Cheat Sheet - Atlassian ...No Coding Necessary: Building Confluence User Macros Cheat Sheet - Atlassian ...
No Coding Necessary: Building Confluence User Macros Cheat Sheet - Atlassian ...

This document provides summaries of 4 macros: 1. The "response-time" macro displays response time data from a specified page. 2. The "color-table" macro applies alternating row coloring to tables with the "confluenceTable" class. 3. The "watermark" macro adds a watermark image to the page with options to specify the image, repetition, and minimum height. 4. The "draft-watermark" macro inserts a "Draft" watermark image on the page by calling the "watermark" macro.

summitconfluenceatlassian
No Coding Necessary: Building User Macros and Dynamic Reports Inside Confluen...
No Coding Necessary: Building User Macros and Dynamic Reports Inside Confluen...No Coding Necessary: Building User Macros and Dynamic Reports Inside Confluen...
No Coding Necessary: Building User Macros and Dynamic Reports Inside Confluen...

No Coding Necessary: Building User Macros and Dynamic Reports Inside Confluence Charles Hall, Astrium & Jim Severino, Atlassian

atlassiansummit 2010
Sane Async Patterns
Sane Async PatternsSane Async Patterns
Sane Async Patterns

The document discusses different patterns for handling asynchronous code in JavaScript: callbacks, promises, and AMD (Asynchronous Module Definition). It outlines issues with nested callbacks and inflexible APIs. Promises and AMD aim to address these by allowing composition of asynchronous operations and defining module dependencies. The document provides examples of implementing PubSub with events, making and piping promises, and using AMD to load dependencies asynchronously. It concludes that callbacks should generally be avoided in favor of promises or AMD for asynchronous code.

javascript
@stacylondoner
Our Ember App
• 69K lines of code
• 7K lines of LESS

54K lines of JS

8K lines of HTML (.hbs)
• 134 routes

104 models

152 controllers

171 components

292 templates
** numbers are approximate and include subdirectory folders

13
@stacylondoner
Our Upgrade Path
• ember.js 1.10.x

ember-data 1.0.0-beta.16.1

ember-cli 0.2.5
• ember.js 1.13.x

ember-data 1.13.x

ember-cli 1.13.x
• ember.js 2.4.x

ember-data 2.5.x

ember-cli 2.4.x
14
@stacylondoner
Ember Upgrades
• follows semantic versioning (semver)
• breaking changes introduced at major versions
• new features / bug fixes at dot releases
• 6 week release cycle
• all major 2.x features were introduced early and
spread across several releases to avoid massive
upgrade issues
15
@stacylondoner
Long Term Support (LTS) Release
• Ember 2.4 is the first LTS
release
• good if you can’t upgrade
every 6 weeks
• bug fixes for 36 weeks
• security fixes for 60 weeks
• every 4th release will be
LTS
16

Recommended for you

The JavaFX Ecosystem
The JavaFX EcosystemThe JavaFX Ecosystem
The JavaFX Ecosystem

The document discusses the JavaFX ecosystem, including layout managers like MigLayout and Medusa, widgets like JideFX and ControlsFX, styling libraries like JFoenix and BootstrapFX, testing tools like TestFX, frameworks like Afterburner.fx and MvvmFX, integration platforms like e(fx)clipse, libraries like AnchorFX and ReactFX, and GroovyFX for writing JavaFX applications in Groovy. It provides an overview of the various options available for building JavaFX user interfaces, styling applications, testing, and developing full applications.

javafx
Build Amazing Add-ons for Atlassian JIRA and Confluence
Build Amazing Add-ons for Atlassian JIRA and ConfluenceBuild Amazing Add-ons for Atlassian JIRA and Confluence
Build Amazing Add-ons for Atlassian JIRA and Confluence

Slidedeck of Tobias Anstett's presentation about 'Building Amazing Add-ons for Atlassian JIRA and Confluence' at Java Forum Stuttgart, July 2014

 
by K15t
confluencesoftware developmentjavaforum
Building Universal Web Apps with React ForwardJS 2017
Building Universal Web Apps with React ForwardJS 2017Building Universal Web Apps with React ForwardJS 2017
Building Universal Web Apps with React ForwardJS 2017

Use React with Node, webpack, Redux and React Router to build an app with isomorphic architecture. ForwardJS 2017.

nodewebpackreact
@stacylondoner
Ember Architecture 1.x
• encouraged a Model-View-Controller-Route
architecture
• since then the industry has converged on a Model-
Component-Route pattern, which is what Ember 2.x
embraces
17
@stacylondoner18
@stacylondoner
@stacylondoner
Ember 2.x
• 2.0 was mostly about removing deprecated code
• One way data flow by default. Data down, actions
up (DDAU). Similar to React.js.
• Glimmer rendering engine speed improvements
(DOM diff algorithm similar to React.js)
• Fastboot for progressive web apps
19
@stacylondoner20
Glimmer
EmberConf 2016 Keynote by Tom Dale & Yehuda Katz
https://speakerdeck.com/tomdale/emberconf-2016-keynote

Recommended for you

WebcampZG - Rails 4
WebcampZG - Rails 4WebcampZG - Rails 4
WebcampZG - Rails 4

The document discusses the key changes in Rails 4.0. Some of the major new features include strong parameters for mass assignment protection, streaming responses using ActionController::Live, background job handling via ActiveSupport::Queue, and routing concerns to DRY up routes. Some existing features that have been improved include ActiveRecord::Relation to allow chaining of queries, caching with cache digests to automatically invalidate caches, and various performance improvements. A number of older and deprecated features have also been removed.

web devel
Rails Engine Patterns
Rails Engine PatternsRails Engine Patterns
Rails Engine Patterns

This talk covers a successful utilization of Rails Engines to share features that cut across the layers of MVC in different Rails 3 projects. Rails Engines thus provide the best of both worlds: improved productivity by reusing MVC code (including assets like Javascript, CSS, and Images) and better flexibility by allowing different applications to customize behavior as needed without reliance on application-dependent conditionals. Rails Engine patterns will be provided to guide developers on how to leverage Rails Engines' reusability and flexibility without sacrificing maintainability.

railssoftware architecturesoftware engineering
IndexedDB - Querying and Performance
IndexedDB - Querying and PerformanceIndexedDB - Querying and Performance
IndexedDB - Querying and Performance

Talk at HTMl5DevConf on April 1, 2013 about IndexedDB, Plugins for IndexedDB and performance analysis of IndexedDB.

html5dev confindexeddb
@stacylondoner
How do you
upgrade?
21
@stacylondoner
Upgrading Tips
• Apply each upgrade incrementally
• Don’t jump from 1.10.x to 2.4.x
• Recommend you don’t run the init part of the
upgrade directly on your project.
• Create a new dummy ember app at the new
version and compare to your project.
22
@stacylondoner
Ember CLI Upgrade - Demo Time!
23from World of Tomorrow by Don Hertzfeldt
@stacylondoner
Code Changes
24

Recommended for you

Angular2 for Beginners
Angular2 for BeginnersAngular2 for Beginners
Angular2 for Beginners

Slides for a four-hour Angular 2 workshop that models some real world Angular 2 applications, along with SVG graphics samples.

githubsvghttp
Angular js
Angular jsAngular js
Angular js

The document provides an overview of AngularJS, including its core concepts and how it can be used with Java frameworks like Spring, Struts, and Hibernate. AngularJS is an open-source JavaScript framework that assists with building single-page applications using MVC architecture. It allows developers to specify custom HTML tags and directives to control element behavior. The document then discusses key AngularJS concepts like data binding, directives, expressions, filters, controllers, dependency injection, views/routing, and services. It provides examples of how these concepts work and how AngularJS can integrate with Java frameworks in a sample reader application divided into multiple sub-projects.

170209 apm shipley capability briefing-esp v073-cliente
170209 apm shipley capability briefing-esp v073-cliente170209 apm shipley capability briefing-esp v073-cliente
170209 apm shipley capability briefing-esp v073-cliente

Este documento presenta las capacidades combinadas de APM y Shipley para ayudar a las organizaciones a ganar más propuestas y desarrollar negocios de manera más efectiva. Resume las visiones y propuestas de valor de ambas compañías, así como sus credenciales trabajando con grandes clientes. Propone una colaboración entre APM y Shipley para ofrecer servicios integrales de desarrollo de negocios, ventas y captura de oportunidades.

propuestaswinganar
@stacylondoner
Deprecation Warnings
• Ember will warn you ahead of new versions that something
is going to be deprecated by detecting use of it and then
outputting a warning message in the browser console.
• http://emberjs.com/deprecations/v1.x/
DEPRECATION: Using `{{view}}` or any path based on it
(‘some-template.hbs' @ L84:C16) has been deprecated.
[deprecation id: view.keyword.view] See http://emberjs.com/
deprecations/v1.x#toc_view-and-controller-template-keywords
for more details.
25
@stacylondoner
1.10 > 1.13: Remove Views
• remove all Views and replace with Components
• some Ember add-ons still were using Views so
needed those to upgrade before moving to Ember
2.x where Views were removed
• or you could include this to add Views back until
all add-ons are upgraded - https://github.com/
emberjs/ember-legacy-views
26
@stacylondoner
1.10 > 1.13: Remove Views
• components are isolated (scoped) so actions don’t
automatically bubble up
• had to refactor by registering the action we want to bubble
out of a component in the template calling the component



innerAction=“outerAction”
• using closure actions is a more elegant way to accomplish
this that we learned about later ;).

https://dockyard.com/blog/2015/10/29/ember-best-
practice-stop-bubbling-and-use-closure-actions
27
@stacylondoner28 @stacylondoner

Recommended for you

Delivering with ember.js
Delivering with ember.jsDelivering with ember.js
Delivering with ember.js

The slides I used while giving an introduction to Ember.JS at Codecamp Cluj Napoca in November 2016. It is a gist for all the things ember provide and why it enables teams to deliver products without blocking them in the past, as far as approaches and technology goes.

frameworkreduxember
Masa Israel Programs Overview
Masa Israel Programs OverviewMasa Israel Programs Overview
Masa Israel Programs Overview

Masa Israel offers uniquely transformative experiences: we believe that Israel is the perfect platform for young adults ages 18-30 to explore, enjoy and develop skills to thrive in different lifestyles and scenarios.

gap yeargraduate degreevolunteer
What I learned in my First 9 months of Ember
What I learned in my First 9 months of EmberWhat I learned in my First 9 months of Ember
What I learned in my First 9 months of Ember

9 Months ago I got tasked with learning Ember.js. Since Then I've launched 3 websites with 16000 lines of code. This is what I learned.

javascriptfront-endember
@stacylondoner29 @stacylondoner
@stacylondoner
1.10 > 1.13: Remove ArrayControllers
• replace ArrayControllers with Controllers
// Change:
export default Ember.ArrayController.extend({
// To:
export default Ember.Controller.extend({
• update templates to move away from
{{modelPropertyName}} to
{{model.modelPropertyname}}
30
@stacylondoner
1.10 > 1.13: Remove SortableMixin
const SongsController = Ember.ArrayController.extend(Ember.SortableMixin, {
model: null,
sortProperties: ['trackNumber'],
sortAscending: false
});
let songsController = SongsController.create({
songs: songList
});
// changes to ——————————————————————
const SongsController = Ember.Controller.extend({
model: null,
sortedSongs: Ember.computed.sort('model', 'songSorting'),
songSorting: ['trackNumber:desc']
});
let songsController = SongsController.create({
songs: songList
});
31
@stacylondoner
1.10 > 1.13: Remove bind-attr helper
• DEPRECATION: The `bind-attr` helper
(‘myTemplate.hbs' @ L2:C6) is deprecated in favor of
HTMLBars-style bound attributes.
<div {{bind-attr
class="noPrevPage:disabled :card-icon-wrapper"}}
{{action "prevPage"}}>

<div class="{{if noPrevPage 'disabled'}} card-
icon-wrapper” {{action "prevPage"}}>
32

Recommended for you

Ember Community 2016 - Be the Bark
Ember Community 2016 - Be the BarkEmber Community 2016 - Be the Bark
Ember Community 2016 - Be the Bark

For my talk I shared a few recent thoughts about open source communities, how they are influenced by the businesses that adopt their software, and how Ember's priorities can be thought about in 2016. A lot of this talk was inspired by and referenced Larry Wall's essay Diligence, Patience, and Humility (http://www.oreilly.com/openbook/opensources/book/larry.html).

javascriptopen sourcecommunity
20120518 mssql table_schema_xml_namespace
20120518 mssql table_schema_xml_namespace20120518 mssql table_schema_xml_namespace
20120518 mssql table_schema_xml_namespace
Testing ember data transforms
Testing ember data transformsTesting ember data transforms
Testing ember data transforms

The document discusses testing Ember data transforms. It describes an API that returns date fields in an non-standard format, and creating a custom transform to standardize the dates. The author searches various resources but cannot find documentation on testing transforms. They finally find an example transform addon that shows transforms can be tested by serializing and deserializing sample data.

ember-testingemberdata-transforms
@stacylondoner
1.10 > 1.13: Ember Watson
• some of the available changes were extremely
tedious to do and couldn’t be globally found/replaced
• ember watson to the rescue! 

https://github.com/abuiles/ember-watson
• biggest help was to convert computed properties and
observers to not use prototype extensions
• NOTE: It’s not required that you remove prototype extensions as part of the upgrade.
Decorators are coming so you may want to wait to switch until then. This just felt nicer
for reading code until then.

https://github.com/emberjs/guides/pull/110
33
@stacylondoner
1.10 > 1.13: Ember Watson
isAvailable: function() {
//code here
}.property('currentPresence'),
// watson automatically adjusted the code to:
isAvailable: Ember.computed('currentPresence', function() {
//code here
}),
34
@stacylondoner
1.10 > 1.13: Ember Watson
sourceListObserver: function() {
//code here
}.observes('sourceList'),
// watson automatically adjusted the code to:
sourceListObserver: Ember.observer('sourceList', function() {
//code here
}),
35
@stacylondoner
Ember Data
• Our RESTful API is written in Python using Tastypie
which is a web service API framework for Django.
• The ember-data default RESTAdapter does not
follow the conventions used in django-tastypie.
• Our Adapter & Serializers do quite a bit of work to
transforms the payloads and are based on https://
github.com/escalant3/ember-data-tastypie-adapter/
36

Recommended for you

Velocity spa faster_092116
Velocity spa faster_092116Velocity spa faster_092116
Velocity spa faster_092116

Making Single Page (SPA) Faster was a presentation done at Velocity NY 2016 It covers 3 main points: - selecting the right framework (performance oriented) - best practices and optimizations - monitoring

spa single page appsspavelocity conference
electron for emberists
electron for emberistselectron for emberists
electron for emberists

This document summarizes a presentation about building native desktop applications using Ember.js and Electron. It introduces Electron and explains how it allows composing desktop apps from JavaScript and HTML. It then discusses Ember Electron, a tool that integrates Electron workflows into Ember CLI. Key features covered include initializing Ember Electron, building and packaging the app, testing, adding shortcuts and dialogs, configuring icons and autoupdating. The presentation concludes with links to resources for learning more about Electron and Ember Electron.

hybrid-appsember-electronember
Nest v. Flat with EmberData
Nest v. Flat with EmberDataNest v. Flat with EmberData
Nest v. Flat with EmberData

13 Oct 2016 talk at Boston Ember.js An overview methods to connect to a nested API using EmberData: override adapter methods, `ember-data-url-templates` add-on and links. As a relative newcomer to Ember, I’d presumed that nested ember routes should be mirrored with nested API resources/collections, but the “truth” is murky.

apijavascriptdata
@stacylondoner
Ember Data 1.10 > 1.13
• sampled find methods meant touching a lot of our
code to replace store.find, store.all, and
store.getById with this more consistent API:
37
@stacylondoner
Ember Data 1.10 > 1.13
• API naming changes caused a bit of refactoring
• rollback renamed to rollbackAttributes
• isDirty renamed to hasDirtyAttributes
38
@stacylondoner
Ember Data - RESTAdapter
• needed to override ajaxOptions to make sure traditional
= true (which removes the [] from array parameters)
• needed to override handleResponse and
normalizeErrorResponse to map any error information in
the payload so that `reason` wasn’t empty when an issue
happened with saving/retrieving data
model.save().then(function() {
// success
}, function(reason) {
// failure
});
39
@stacylondoner
Ember Data - RESTSerializer
• Helper that converts a django-tastypie URI into an id for
ember-data use
• Conversions of attribute names to use underscores
• normalizeId was removed in Ember Data 2.x but we
still need to be able to convert from resource URIs into
Ids so just had to remove call to _super.
• since we have customized our serializer we needed to
set this flag as part of upgrading to 1.13.x:
isNewSerializerAPI: true
40

Recommended for you

LA Ember.js Meetup, Jan 2017
LA Ember.js Meetup, Jan 2017LA Ember.js Meetup, Jan 2017
LA Ember.js Meetup, Jan 2017

Building on the Glimmer rendering engine, Ember continues to make performance and stability dual priorities. Let's discuss what the web looks like in 2017 and how Ember is prepared, and can better prepare, to meet new challenges.

frameworkjavascriptember.js
Ember: Guts & Goals
Ember: Guts & GoalsEmber: Guts & Goals
Ember: Guts & Goals

This document provides an overview of Ember.js, including its core components and goals. It describes the evolution of its templating languages from Handlebars to HTMLBars to Glimmer. It also outlines Ember's release schedule and goals for upcoming versions, focusing on new features like routable components, engines, and Glimmer 2.

ember.js
Developing Single Page Apps with Ember.js
Developing Single Page Apps with Ember.jsDeveloping Single Page Apps with Ember.js
Developing Single Page Apps with Ember.js

This document discusses how Ember.js can help alleviate JavaScript fatigue by providing an integrated framework and development environment. It notes that Ember is convention-based and handles configuration of the build process and tools automatically. The document then provides an overview of key Ember concepts like ember-cli, routes, models, controllers, templates, and Ember-data.

emberjsjavascript
@stacylondoner
Ember Data - Model Helper
• in order to do do dirty checks and rollbacks on models with
complex relationships (hasMany, belongsTo) we have to re-
open the model and add additional logic
• this logic basically stores the original relationships on load
of the model so that they can be used later for rollback/dirty
checking
• now when you do model.rollback() it will rollback everything
including hasMany and belongsTo relationships
• http://stackoverflow.com/questions/14685046/how-to-rollback-
relationship-changes-in-emberdata/27184207#27184207
41
@stacylondoner
Ember Data 2.x
• JSON API Adapter & Serializer become the default
• this still does not follow the conventions used in
django-tastypie so we are not taking advantage
of that
• In Ember Data 2.0 relationships will be
asynchronous by default
42
@stacylondoner
Issues / Struggles - Services
• Services now work as expected in 2.x!!
• This was not our experience in 1.x.
43
@stacylondoner
Issues / Struggles - Versions
• Should your version of ember-data, ember-cli and ember.js
be the same? This is not very clear in the documentation.
Answer: Yes (but doesn’t have to).
• “Ember-Data and Ember CLI will be versioned in
lockstep with Ember itself"

http://emberjs.com/blog/2015/08/13/ember-2-0-
released.html#toc_ember-2-x-themes
• Technically any version of Ember CLI can work with any
version of Ember.js. You can stay on Ember.js 1.x and
upgrade to the latest Ember-CLI if you figure out the
correct dependencies.
44

Recommended for you

Ember.js the Second Step
Ember.js the Second StepEmber.js the Second Step
Ember.js the Second Step

Ember.js Tokyo Rebornで発表したスライドです。

ember.js
Intro to emberjs
Intro to emberjsIntro to emberjs
Intro to emberjs

Ember.js is a JavaScript MVC framework for building single-page web applications. It uses conventions over configurations and includes features like two-way data binding, routing and templates using Handlebars. Key concepts in Ember include models, routes, controllers and templates which work together in a defined workflow. Templates are used to display dynamic data from models and controllers handle updating the view. Routing in Ember maps URLs to routes and controllers. Ember Data provides a standard way to handle data persistence and normalization of models.

Ember.js internals backburner.js and rsvp.js
Ember.js internals  backburner.js and rsvp.jsEmber.js internals  backburner.js and rsvp.js
Ember.js internals backburner.js and rsvp.js

This document discusses Ember.js and the related libraries backburner.js and rsvp.js. Backburner.js implements the run loop in Ember.js, allowing asynchronous operations like data bindings, actions, and rendering to be scheduled and coalesced. Rsvp.js is a tiny Promises/A+ implementation that provides tools for organizing asynchronous JavaScript code. It discusses how promises represent potential future values and examples of using promises in Ember.js applications. Contact information is provided for getting help building ambitious web applications using these libraries.

ember.js
@stacylondoner
Issues / Struggles - Documentation
• Documentation hasn’t always been kept up to date
with released versions so it was sometimes hard to
know if you were doing something in the right way.
• Now there is a dedicated team and direction that
no new features will be added to the Ember 2.0
release channel without accompanying
documentation.
45
@stacylondoner
Ember Community
• If you run into an issue with a version you are
upgrading to you can log an issue on GitHub. My
experience has been really positive (people are
nice and helpful).
• e.g. classNames on components were being
output twice in the DOM in 1.13.8. Logged an
issue and it was resolved quickly.

https://github.com/emberjs/ember.js/issues/12146
46
@stacylondoner
Looking Ahead
• routable components (then we can remove
controllers)
• angle bracket components (for true one-way data
flow)
• use Fastboot for progressive web app
• 2.x deprecations 

http://emberjs.com/deprecations/v2.x/
47
@stacylondoner
Angle Bracket Components
{{!-- title is a mutable two-way binding --}}
{{my-component title=model.name}}
{{!-- title is just an (immutable) value --}}
<my-component title={{model.name}} />
48

Recommended for you

Write Once, Run Everywhere - Ember.js Munich
Write Once, Run Everywhere - Ember.js MunichWrite Once, Run Everywhere - Ember.js Munich
Write Once, Run Everywhere - Ember.js Munich

The document discusses building applications that can run everywhere using Ember.js and Electron. It introduces Electron and how it allows packaging Ember apps with Chromium for desktop distribution. It also covers using Ember addons to integrate Cordova and native device capabilities. The document demonstrates building a sample Ember app that uses routing, components and animations, and packaging it into a desktop app with Electron.

node.jsjavascriptemberjs
Ember.js firebase HTML5 NYC
Ember.js firebase HTML5 NYCEmber.js firebase HTML5 NYC
Ember.js firebase HTML5 NYC

This document describes using Ember.js and Firebase together to build an application. It discusses how Firebase allows developers to focus on innovation by commoditizing services like databases, file storage, hosting, etc. The document then provides steps to build a chat application using Ember.js, Firebase, Filepicker.io and other services. Code examples and a live demo are shown.

Parse Apps with Ember.js
Parse Apps with Ember.jsParse Apps with Ember.js
Parse Apps with Ember.js

Ember.js is a new JavaScript framework for building ambitiously complex web applications. Taking lessons from the iOS development platform and other JavaScript frameworks that came before it, Ember embraces the idea that our applications are more alike than they are dissimilar. It encourages coding by convention, testing, and MVC patterns. Building an app on Parse makes your data available via the Parse REST API. Using that API, ember-cli and Ember-Data, I’ll show you how to get started porting your native app to the mobile web. The live coded demo is here: http://emberjs.jsbin.com/lizep/7/edit?html,js,output

parseember.jsrest
@stacylondoner
Other Recommendations
content > model
• There was some confusion about if you should use
content or model. Content was used across our
codebase from implementing early beta versions.
Use model.
• Per Yehuda “People should use model as the
public API and things should work. If they do not in
some case, it's a bug and the bug should be
opened.” 

https://github.com/emberjs/ember.js/issues/2007
49
@stacylondoner
Other Recommendations
Liquid Fire
• If you do any sort of animation with JavaScript you should move
that into Liquid Fire so that you’ll have promise-based transitions.
• https://github.com/ember-animation/liquid-fire
• http://ember-animation.github.io/liquid-fire/
• This is critical if you are using the Ember test suite with
acceptance tests so that the ember run loop is cleaned up
appropriately in between tests.
• A good use case is transitioning modals. If you use Bootstrap
modals and the associated JS that goes with it to animate you’ll
have a bad time.
50
@stacylondoner
Resources
• Ember Blogs - notes about each release

http://emberjs.com/blog/2015/08/13/ember-2-0-
released.html
• Ember CLI Upgrade docs 

http://ember-cli.com/user-guide/#upgrading
• compare two versions to see what’s changed

https://github.com/ember-cli/ember-new-output/compare/
• deprecation workflow - hide deprecation noise so you can
work through one deprecation fix at a time

https://github.com/mixonic/ember-cli-deprecation-workflow
51
@stacylondoner
Thank you!
52

Recommended for you

Complex Architectures in Ember
Complex Architectures in EmberComplex Architectures in Ember
Complex Architectures in Ember

In Ember.js, routes and templates dictate the architecture of your app. This presentation will talk about why this is, and what tools Ember provides to manage architectural complexity.

codejavascriptember.js
Angular Application Testing
Angular Application TestingAngular Application Testing
Angular Application Testing

The Angular framework is great for building large-scale web applications that can be maintained and enhanced. When you're building enterprise-level apps, testing is vital to the development process. Testing improves the quality of code and reduces maintenance, saving both time and money. Developers who know how to build and leverage tests are highly valued by their clients and companies.

unit testingjasminees6
6 tips for improving ruby performance
6 tips for improving ruby performance6 tips for improving ruby performance
6 tips for improving ruby performance

This presentation was prepared for a Webcast where John Yerhot, Engine Yard US Support Lead, and Chris Kelly, Technical Evangelist at New Relic discussed how you can scale and improve the performance of your Ruby web apps. They shared detailed guidance on issues like: Caching strategies Slow database queries Background processing Profiling Ruby applications Picking the right Ruby web server Sharding data Attendees will learn how to: Gain visibility on site performance Improve scalability and uptime Find and fix key bottlenecks See the on-demand replay: http://pages.engineyard.com/6TipsforImprovingRubyApplicationPerformance.html

railsengine yarddatabase
@stacylondoner
Questions?
53

More Related Content

What's hot

Workshop 13: AngularJS Parte II
Workshop 13: AngularJS Parte IIWorkshop 13: AngularJS Parte II
Workshop 13: AngularJS Parte II
Visual Engineering
 
Ember - introduction
Ember - introductionEmber - introduction
Ember - introduction
Harikrishnan C
 
How to Build SPA with Vue Router 2.0
How to Build SPA with Vue Router 2.0How to Build SPA with Vue Router 2.0
How to Build SPA with Vue Router 2.0
Takuya Tejima
 
Creating the interfaces of the future with the APIs of today
Creating the interfaces of the future with the APIs of todayCreating the interfaces of the future with the APIs of today
Creating the interfaces of the future with the APIs of today
gerbille
 
Symfony tips and tricks
Symfony tips and tricksSymfony tips and tricks
Symfony tips and tricks
Javier Eguiluz
 
AtlasCamp 2010: Making Confluence Macros Easy (for the user) - Dave Taylor
AtlasCamp 2010: Making Confluence Macros Easy (for the user) - Dave TaylorAtlasCamp 2010: Making Confluence Macros Easy (for the user) - Dave Taylor
AtlasCamp 2010: Making Confluence Macros Easy (for the user) - Dave Taylor
Atlassian
 
Keeping the frontend under control with Symfony and Webpack
Keeping the frontend under control with Symfony and WebpackKeeping the frontend under control with Symfony and Webpack
Keeping the frontend under control with Symfony and Webpack
Ignacio Martín
 
Promises are so passé - Tim Perry - Codemotion Milan 2016
Promises are so passé - Tim Perry - Codemotion Milan 2016Promises are so passé - Tim Perry - Codemotion Milan 2016
Promises are so passé - Tim Perry - Codemotion Milan 2016
Codemotion
 
Building Single Page Application (SPA) with Symfony2 and AngularJS
Building Single Page Application (SPA) with Symfony2 and AngularJSBuilding Single Page Application (SPA) with Symfony2 and AngularJS
Building Single Page Application (SPA) with Symfony2 and AngularJS
Antonio Peric-Mazar
 
No Coding Necessary: Building Confluence User Macros Cheat Sheet - Atlassian ...
No Coding Necessary: Building Confluence User Macros Cheat Sheet - Atlassian ...No Coding Necessary: Building Confluence User Macros Cheat Sheet - Atlassian ...
No Coding Necessary: Building Confluence User Macros Cheat Sheet - Atlassian ...
Atlassian
 
No Coding Necessary: Building User Macros and Dynamic Reports Inside Confluen...
No Coding Necessary: Building User Macros and Dynamic Reports Inside Confluen...No Coding Necessary: Building User Macros and Dynamic Reports Inside Confluen...
No Coding Necessary: Building User Macros and Dynamic Reports Inside Confluen...
Atlassian
 
Sane Async Patterns
Sane Async PatternsSane Async Patterns
Sane Async Patterns
TrevorBurnham
 
The JavaFX Ecosystem
The JavaFX EcosystemThe JavaFX Ecosystem
The JavaFX Ecosystem
Andres Almiray
 
Build Amazing Add-ons for Atlassian JIRA and Confluence
Build Amazing Add-ons for Atlassian JIRA and ConfluenceBuild Amazing Add-ons for Atlassian JIRA and Confluence
Build Amazing Add-ons for Atlassian JIRA and Confluence
K15t
 
Building Universal Web Apps with React ForwardJS 2017
Building Universal Web Apps with React ForwardJS 2017Building Universal Web Apps with React ForwardJS 2017
Building Universal Web Apps with React ForwardJS 2017
Elyse Kolker Gordon
 
WebcampZG - Rails 4
WebcampZG - Rails 4WebcampZG - Rails 4
WebcampZG - Rails 4
shnikola
 
Rails Engine Patterns
Rails Engine PatternsRails Engine Patterns
Rails Engine Patterns
Andy Maleh
 
IndexedDB - Querying and Performance
IndexedDB - Querying and PerformanceIndexedDB - Querying and Performance
IndexedDB - Querying and Performance
Parashuram N
 
Angular2 for Beginners
Angular2 for BeginnersAngular2 for Beginners
Angular2 for Beginners
Oswald Campesato
 
Angular js
Angular jsAngular js
Angular js
Behind D Walls
 

What's hot (20)

Workshop 13: AngularJS Parte II
Workshop 13: AngularJS Parte IIWorkshop 13: AngularJS Parte II
Workshop 13: AngularJS Parte II
 
Ember - introduction
Ember - introductionEmber - introduction
Ember - introduction
 
How to Build SPA with Vue Router 2.0
How to Build SPA with Vue Router 2.0How to Build SPA with Vue Router 2.0
How to Build SPA with Vue Router 2.0
 
Creating the interfaces of the future with the APIs of today
Creating the interfaces of the future with the APIs of todayCreating the interfaces of the future with the APIs of today
Creating the interfaces of the future with the APIs of today
 
Symfony tips and tricks
Symfony tips and tricksSymfony tips and tricks
Symfony tips and tricks
 
AtlasCamp 2010: Making Confluence Macros Easy (for the user) - Dave Taylor
AtlasCamp 2010: Making Confluence Macros Easy (for the user) - Dave TaylorAtlasCamp 2010: Making Confluence Macros Easy (for the user) - Dave Taylor
AtlasCamp 2010: Making Confluence Macros Easy (for the user) - Dave Taylor
 
Keeping the frontend under control with Symfony and Webpack
Keeping the frontend under control with Symfony and WebpackKeeping the frontend under control with Symfony and Webpack
Keeping the frontend under control with Symfony and Webpack
 
Promises are so passé - Tim Perry - Codemotion Milan 2016
Promises are so passé - Tim Perry - Codemotion Milan 2016Promises are so passé - Tim Perry - Codemotion Milan 2016
Promises are so passé - Tim Perry - Codemotion Milan 2016
 
Building Single Page Application (SPA) with Symfony2 and AngularJS
Building Single Page Application (SPA) with Symfony2 and AngularJSBuilding Single Page Application (SPA) with Symfony2 and AngularJS
Building Single Page Application (SPA) with Symfony2 and AngularJS
 
No Coding Necessary: Building Confluence User Macros Cheat Sheet - Atlassian ...
No Coding Necessary: Building Confluence User Macros Cheat Sheet - Atlassian ...No Coding Necessary: Building Confluence User Macros Cheat Sheet - Atlassian ...
No Coding Necessary: Building Confluence User Macros Cheat Sheet - Atlassian ...
 
No Coding Necessary: Building User Macros and Dynamic Reports Inside Confluen...
No Coding Necessary: Building User Macros and Dynamic Reports Inside Confluen...No Coding Necessary: Building User Macros and Dynamic Reports Inside Confluen...
No Coding Necessary: Building User Macros and Dynamic Reports Inside Confluen...
 
Sane Async Patterns
Sane Async PatternsSane Async Patterns
Sane Async Patterns
 
The JavaFX Ecosystem
The JavaFX EcosystemThe JavaFX Ecosystem
The JavaFX Ecosystem
 
Build Amazing Add-ons for Atlassian JIRA and Confluence
Build Amazing Add-ons for Atlassian JIRA and ConfluenceBuild Amazing Add-ons for Atlassian JIRA and Confluence
Build Amazing Add-ons for Atlassian JIRA and Confluence
 
Building Universal Web Apps with React ForwardJS 2017
Building Universal Web Apps with React ForwardJS 2017Building Universal Web Apps with React ForwardJS 2017
Building Universal Web Apps with React ForwardJS 2017
 
WebcampZG - Rails 4
WebcampZG - Rails 4WebcampZG - Rails 4
WebcampZG - Rails 4
 
Rails Engine Patterns
Rails Engine PatternsRails Engine Patterns
Rails Engine Patterns
 
IndexedDB - Querying and Performance
IndexedDB - Querying and PerformanceIndexedDB - Querying and Performance
IndexedDB - Querying and Performance
 
Angular2 for Beginners
Angular2 for BeginnersAngular2 for Beginners
Angular2 for Beginners
 
Angular js
Angular jsAngular js
Angular js
 

Viewers also liked

170209 apm shipley capability briefing-esp v073-cliente
170209 apm shipley capability briefing-esp v073-cliente170209 apm shipley capability briefing-esp v073-cliente
170209 apm shipley capability briefing-esp v073-cliente
APM-Shipley
 
Delivering with ember.js
Delivering with ember.jsDelivering with ember.js
Delivering with ember.js
Andrei Sebastian Cîmpean
 
Masa Israel Programs Overview
Masa Israel Programs OverviewMasa Israel Programs Overview
Masa Israel Programs Overview
Masa Israel Journey
 
What I learned in my First 9 months of Ember
What I learned in my First 9 months of EmberWhat I learned in my First 9 months of Ember
What I learned in my First 9 months of Ember
Sara Raasch
 
Ember Community 2016 - Be the Bark
Ember Community 2016 - Be the BarkEmber Community 2016 - Be the Bark
Ember Community 2016 - Be the Bark
Matthew Beale
 
20120518 mssql table_schema_xml_namespace
20120518 mssql table_schema_xml_namespace20120518 mssql table_schema_xml_namespace
20120518 mssql table_schema_xml_namespace
LearningTech
 
Testing ember data transforms
Testing ember data transformsTesting ember data transforms
Testing ember data transforms
Sara Raasch
 
Velocity spa faster_092116
Velocity spa faster_092116Velocity spa faster_092116
Velocity spa faster_092116
Manuel Alvarez
 
electron for emberists
electron for emberistselectron for emberists
electron for emberists
Aidan Nulman
 
Nest v. Flat with EmberData
Nest v. Flat with EmberDataNest v. Flat with EmberData
Nest v. Flat with EmberData
Ryan M Harrison
 
LA Ember.js Meetup, Jan 2017
LA Ember.js Meetup, Jan 2017LA Ember.js Meetup, Jan 2017
LA Ember.js Meetup, Jan 2017
Matthew Beale
 
Ember: Guts & Goals
Ember: Guts & GoalsEmber: Guts & Goals
Ember: Guts & Goals
Bob Lail
 
Developing Single Page Apps with Ember.js
Developing Single Page Apps with Ember.jsDeveloping Single Page Apps with Ember.js
Developing Single Page Apps with Ember.js
Leo Hernandez
 
Ember.js the Second Step
Ember.js the Second StepEmber.js the Second Step
Ember.js the Second Step
Dopin Ninja
 
Intro to emberjs
Intro to emberjsIntro to emberjs
Intro to emberjs
Mandy Pao
 
Ember.js internals backburner.js and rsvp.js
Ember.js internals  backburner.js and rsvp.jsEmber.js internals  backburner.js and rsvp.js
Ember.js internals backburner.js and rsvp.js
gavinjoyce
 
Write Once, Run Everywhere - Ember.js Munich
Write Once, Run Everywhere - Ember.js MunichWrite Once, Run Everywhere - Ember.js Munich
Write Once, Run Everywhere - Ember.js Munich
Mike North
 
Ember.js firebase HTML5 NYC
Ember.js firebase HTML5 NYCEmber.js firebase HTML5 NYC
Ember.js firebase HTML5 NYC
Brendan O'Hara, MBA
 
Parse Apps with Ember.js
Parse Apps with Ember.jsParse Apps with Ember.js
Parse Apps with Ember.js
Matthew Beale
 
Complex Architectures in Ember
Complex Architectures in EmberComplex Architectures in Ember
Complex Architectures in Ember
Matthew Beale
 

Viewers also liked (20)

170209 apm shipley capability briefing-esp v073-cliente
170209 apm shipley capability briefing-esp v073-cliente170209 apm shipley capability briefing-esp v073-cliente
170209 apm shipley capability briefing-esp v073-cliente
 
Delivering with ember.js
Delivering with ember.jsDelivering with ember.js
Delivering with ember.js
 
Masa Israel Programs Overview
Masa Israel Programs OverviewMasa Israel Programs Overview
Masa Israel Programs Overview
 
What I learned in my First 9 months of Ember
What I learned in my First 9 months of EmberWhat I learned in my First 9 months of Ember
What I learned in my First 9 months of Ember
 
Ember Community 2016 - Be the Bark
Ember Community 2016 - Be the BarkEmber Community 2016 - Be the Bark
Ember Community 2016 - Be the Bark
 
20120518 mssql table_schema_xml_namespace
20120518 mssql table_schema_xml_namespace20120518 mssql table_schema_xml_namespace
20120518 mssql table_schema_xml_namespace
 
Testing ember data transforms
Testing ember data transformsTesting ember data transforms
Testing ember data transforms
 
Velocity spa faster_092116
Velocity spa faster_092116Velocity spa faster_092116
Velocity spa faster_092116
 
electron for emberists
electron for emberistselectron for emberists
electron for emberists
 
Nest v. Flat with EmberData
Nest v. Flat with EmberDataNest v. Flat with EmberData
Nest v. Flat with EmberData
 
LA Ember.js Meetup, Jan 2017
LA Ember.js Meetup, Jan 2017LA Ember.js Meetup, Jan 2017
LA Ember.js Meetup, Jan 2017
 
Ember: Guts & Goals
Ember: Guts & GoalsEmber: Guts & Goals
Ember: Guts & Goals
 
Developing Single Page Apps with Ember.js
Developing Single Page Apps with Ember.jsDeveloping Single Page Apps with Ember.js
Developing Single Page Apps with Ember.js
 
Ember.js the Second Step
Ember.js the Second StepEmber.js the Second Step
Ember.js the Second Step
 
Intro to emberjs
Intro to emberjsIntro to emberjs
Intro to emberjs
 
Ember.js internals backburner.js and rsvp.js
Ember.js internals  backburner.js and rsvp.jsEmber.js internals  backburner.js and rsvp.js
Ember.js internals backburner.js and rsvp.js
 
Write Once, Run Everywhere - Ember.js Munich
Write Once, Run Everywhere - Ember.js MunichWrite Once, Run Everywhere - Ember.js Munich
Write Once, Run Everywhere - Ember.js Munich
 
Ember.js firebase HTML5 NYC
Ember.js firebase HTML5 NYCEmber.js firebase HTML5 NYC
Ember.js firebase HTML5 NYC
 
Parse Apps with Ember.js
Parse Apps with Ember.jsParse Apps with Ember.js
Parse Apps with Ember.js
 
Complex Architectures in Ember
Complex Architectures in EmberComplex Architectures in Ember
Complex Architectures in Ember
 

Similar to In The Trenches With Tomster, Upgrading Ember.js & Ember Data

Angular Application Testing
Angular Application TestingAngular Application Testing
Angular Application Testing
Troy Miles
 
6 tips for improving ruby performance
6 tips for improving ruby performance6 tips for improving ruby performance
6 tips for improving ruby performance
Engine Yard
 
From MEAN to the MERN Stack
From MEAN to the MERN StackFrom MEAN to the MERN Stack
From MEAN to the MERN Stack
Troy Miles
 
EmberJS BucharestJS
EmberJS BucharestJSEmberJS BucharestJS
EmberJS BucharestJS
Remus Rusanu
 
One does not simply "Upgrade to Rails 3"
One does not simply "Upgrade to Rails 3"One does not simply "Upgrade to Rails 3"
One does not simply "Upgrade to Rails 3"
testflyjets
 
Ruby on Rails + AngularJS + Twitter Bootstrap
Ruby on Rails + AngularJS + Twitter BootstrapRuby on Rails + AngularJS + Twitter Bootstrap
Ruby on Rails + AngularJS + Twitter Bootstrap
Marcio Marinho
 
Basics of AngularJS
Basics of AngularJSBasics of AngularJS
Basics of AngularJS
Filip Janevski
 
Workshop 16: EmberJS Parte I
Workshop 16: EmberJS Parte IWorkshop 16: EmberJS Parte I
Workshop 16: EmberJS Parte I
Visual Engineering
 
Wider than rails
Wider than railsWider than rails
Wider than rails
Alexey Nayden
 
Untangling the web10
Untangling the web10Untangling the web10
Untangling the web10
Derek Jacoby
 
using Mithril.js + postgREST to build and consume API's
using Mithril.js + postgREST to build and consume API'susing Mithril.js + postgREST to build and consume API's
using Mithril.js + postgREST to build and consume API's
Antônio Roberto Silva
 
How and why we evolved a legacy Java web application to Scala... and we are s...
How and why we evolved a legacy Java web application to Scala... and we are s...How and why we evolved a legacy Java web application to Scala... and we are s...
How and why we evolved a legacy Java web application to Scala... and we are s...
Katia Aresti
 
Ember App Kit & The Ember Resolver
Ember App Kit & The Ember ResolverEmber App Kit & The Ember Resolver
Ember App Kit & The Ember Resolver
tboyt
 
Remix
RemixRemix
Top 10 Mistakes AngularJS Developers Make
Top 10 Mistakes AngularJS Developers MakeTop 10 Mistakes AngularJS Developers Make
Top 10 Mistakes AngularJS Developers Make
Mark Meyer
 
The future of web development write once, run everywhere with angular.js and ...
The future of web development write once, run everywhere with angular.js and ...The future of web development write once, run everywhere with angular.js and ...
The future of web development write once, run everywhere with angular.js and ...
Mark Roden
 
The future of web development write once, run everywhere with angular js an...
The future of web development   write once, run everywhere with angular js an...The future of web development   write once, run everywhere with angular js an...
The future of web development write once, run everywhere with angular js an...
Mark Leusink
 
Developing Lightning Components for Communities.pptx
Developing Lightning Components for Communities.pptxDeveloping Lightning Components for Communities.pptx
Developing Lightning Components for Communities.pptx
Dmitry Vinnik
 
Tech Webinar: Angular 2, Introduction to a new framework
Tech Webinar: Angular 2, Introduction to a new frameworkTech Webinar: Angular 2, Introduction to a new framework
Tech Webinar: Angular 2, Introduction to a new framework
Codemotion
 
React state management with Redux and MobX
React state management with Redux and MobXReact state management with Redux and MobX
React state management with Redux and MobX
Darko Kukovec
 

Similar to In The Trenches With Tomster, Upgrading Ember.js & Ember Data (20)

Angular Application Testing
Angular Application TestingAngular Application Testing
Angular Application Testing
 
6 tips for improving ruby performance
6 tips for improving ruby performance6 tips for improving ruby performance
6 tips for improving ruby performance
 
From MEAN to the MERN Stack
From MEAN to the MERN StackFrom MEAN to the MERN Stack
From MEAN to the MERN Stack
 
EmberJS BucharestJS
EmberJS BucharestJSEmberJS BucharestJS
EmberJS BucharestJS
 
One does not simply "Upgrade to Rails 3"
One does not simply "Upgrade to Rails 3"One does not simply "Upgrade to Rails 3"
One does not simply "Upgrade to Rails 3"
 
Ruby on Rails + AngularJS + Twitter Bootstrap
Ruby on Rails + AngularJS + Twitter BootstrapRuby on Rails + AngularJS + Twitter Bootstrap
Ruby on Rails + AngularJS + Twitter Bootstrap
 
Basics of AngularJS
Basics of AngularJSBasics of AngularJS
Basics of AngularJS
 
Workshop 16: EmberJS Parte I
Workshop 16: EmberJS Parte IWorkshop 16: EmberJS Parte I
Workshop 16: EmberJS Parte I
 
Wider than rails
Wider than railsWider than rails
Wider than rails
 
Untangling the web10
Untangling the web10Untangling the web10
Untangling the web10
 
using Mithril.js + postgREST to build and consume API's
using Mithril.js + postgREST to build and consume API'susing Mithril.js + postgREST to build and consume API's
using Mithril.js + postgREST to build and consume API's
 
How and why we evolved a legacy Java web application to Scala... and we are s...
How and why we evolved a legacy Java web application to Scala... and we are s...How and why we evolved a legacy Java web application to Scala... and we are s...
How and why we evolved a legacy Java web application to Scala... and we are s...
 
Ember App Kit & The Ember Resolver
Ember App Kit & The Ember ResolverEmber App Kit & The Ember Resolver
Ember App Kit & The Ember Resolver
 
Remix
RemixRemix
Remix
 
Top 10 Mistakes AngularJS Developers Make
Top 10 Mistakes AngularJS Developers MakeTop 10 Mistakes AngularJS Developers Make
Top 10 Mistakes AngularJS Developers Make
 
The future of web development write once, run everywhere with angular.js and ...
The future of web development write once, run everywhere with angular.js and ...The future of web development write once, run everywhere with angular.js and ...
The future of web development write once, run everywhere with angular.js and ...
 
The future of web development write once, run everywhere with angular js an...
The future of web development   write once, run everywhere with angular js an...The future of web development   write once, run everywhere with angular js an...
The future of web development write once, run everywhere with angular js an...
 
Developing Lightning Components for Communities.pptx
Developing Lightning Components for Communities.pptxDeveloping Lightning Components for Communities.pptx
Developing Lightning Components for Communities.pptx
 
Tech Webinar: Angular 2, Introduction to a new framework
Tech Webinar: Angular 2, Introduction to a new frameworkTech Webinar: Angular 2, Introduction to a new framework
Tech Webinar: Angular 2, Introduction to a new framework
 
React state management with Redux and MobX
React state management with Redux and MobXReact state management with Redux and MobX
React state management with Redux and MobX
 

Recently uploaded

Quality Patents: Patents That Stand the Test of Time
Quality Patents: Patents That Stand the Test of TimeQuality Patents: Patents That Stand the Test of Time
Quality Patents: Patents That Stand the Test of Time
Aurora Consulting
 
Paradigm Shifts in User Modeling: A Journey from Historical Foundations to Em...
Paradigm Shifts in User Modeling: A Journey from Historical Foundations to Em...Paradigm Shifts in User Modeling: A Journey from Historical Foundations to Em...
Paradigm Shifts in User Modeling: A Journey from Historical Foundations to Em...
Erasmo Purificato
 
Choose our Linux Web Hosting for a seamless and successful online presence
Choose our Linux Web Hosting for a seamless and successful online presenceChoose our Linux Web Hosting for a seamless and successful online presence
Choose our Linux Web Hosting for a seamless and successful online presence
rajancomputerfbd
 
Mitigating the Impact of State Management in Cloud Stream Processing Systems
Mitigating the Impact of State Management in Cloud Stream Processing SystemsMitigating the Impact of State Management in Cloud Stream Processing Systems
Mitigating the Impact of State Management in Cloud Stream Processing Systems
ScyllaDB
 
find out more about the role of autonomous vehicles in facing global challenges
find out more about the role of autonomous vehicles in facing global challengesfind out more about the role of autonomous vehicles in facing global challenges
find out more about the role of autonomous vehicles in facing global challenges
huseindihon
 
20240702 Présentation Plateforme GenAI.pdf
20240702 Présentation Plateforme GenAI.pdf20240702 Présentation Plateforme GenAI.pdf
20240702 Présentation Plateforme GenAI.pdf
Sally Laouacheria
 
What's New in Copilot for Microsoft365 May 2024.pptx
What's New in Copilot for Microsoft365 May 2024.pptxWhat's New in Copilot for Microsoft365 May 2024.pptx
What's New in Copilot for Microsoft365 May 2024.pptx
Stephanie Beckett
 
Quantum Communications Q&A with Gemini LLM
Quantum Communications Q&A with Gemini LLMQuantum Communications Q&A with Gemini LLM
Quantum Communications Q&A with Gemini LLM
Vijayananda Mohire
 
Details of description part II: Describing images in practice - Tech Forum 2024
Details of description part II: Describing images in practice - Tech Forum 2024Details of description part II: Describing images in practice - Tech Forum 2024
Details of description part II: Describing images in practice - Tech Forum 2024
BookNet Canada
 
How to Build a Profitable IoT Product.pptx
How to Build a Profitable IoT Product.pptxHow to Build a Profitable IoT Product.pptx
How to Build a Profitable IoT Product.pptx
Adam Dunkels
 
WhatsApp Image 2024-03-27 at 08.19.52_bfd93109.pdf
WhatsApp Image 2024-03-27 at 08.19.52_bfd93109.pdfWhatsApp Image 2024-03-27 at 08.19.52_bfd93109.pdf
WhatsApp Image 2024-03-27 at 08.19.52_bfd93109.pdf
ArgaBisma
 
The Rise of Supernetwork Data Intensive Computing
The Rise of Supernetwork Data Intensive ComputingThe Rise of Supernetwork Data Intensive Computing
The Rise of Supernetwork Data Intensive Computing
Larry Smarr
 
Understanding Insider Security Threats: Types, Examples, Effects, and Mitigat...
Understanding Insider Security Threats: Types, Examples, Effects, and Mitigat...Understanding Insider Security Threats: Types, Examples, Effects, and Mitigat...
Understanding Insider Security Threats: Types, Examples, Effects, and Mitigat...
Bert Blevins
 
Calgary MuleSoft Meetup APM and IDP .pptx
Calgary MuleSoft Meetup APM and IDP .pptxCalgary MuleSoft Meetup APM and IDP .pptx
Calgary MuleSoft Meetup APM and IDP .pptx
ishalveerrandhawa1
 
Advanced Techniques for Cyber Security Analysis and Anomaly Detection
Advanced Techniques for Cyber Security Analysis and Anomaly DetectionAdvanced Techniques for Cyber Security Analysis and Anomaly Detection
Advanced Techniques for Cyber Security Analysis and Anomaly Detection
Bert Blevins
 
Best Practices for Effectively Running dbt in Airflow.pdf
Best Practices for Effectively Running dbt in Airflow.pdfBest Practices for Effectively Running dbt in Airflow.pdf
Best Practices for Effectively Running dbt in Airflow.pdf
Tatiana Al-Chueyr
 
Fluttercon 2024: Showing that you care about security - OpenSSF Scorecards fo...
Fluttercon 2024: Showing that you care about security - OpenSSF Scorecards fo...Fluttercon 2024: Showing that you care about security - OpenSSF Scorecards fo...
Fluttercon 2024: Showing that you care about security - OpenSSF Scorecards fo...
Chris Swan
 
RPA In Healthcare Benefits, Use Case, Trend And Challenges 2024.pptx
RPA In Healthcare Benefits, Use Case, Trend And Challenges 2024.pptxRPA In Healthcare Benefits, Use Case, Trend And Challenges 2024.pptx
RPA In Healthcare Benefits, Use Case, Trend And Challenges 2024.pptx
SynapseIndia
 
WPRiders Company Presentation Slide Deck
WPRiders Company Presentation Slide DeckWPRiders Company Presentation Slide Deck
WPRiders Company Presentation Slide Deck
Lidia A.
 
The Increasing Use of the National Research Platform by the CSU Campuses
The Increasing Use of the National Research Platform by the CSU CampusesThe Increasing Use of the National Research Platform by the CSU Campuses
The Increasing Use of the National Research Platform by the CSU Campuses
Larry Smarr
 

Recently uploaded (20)

Quality Patents: Patents That Stand the Test of Time
Quality Patents: Patents That Stand the Test of TimeQuality Patents: Patents That Stand the Test of Time
Quality Patents: Patents That Stand the Test of Time
 
Paradigm Shifts in User Modeling: A Journey from Historical Foundations to Em...
Paradigm Shifts in User Modeling: A Journey from Historical Foundations to Em...Paradigm Shifts in User Modeling: A Journey from Historical Foundations to Em...
Paradigm Shifts in User Modeling: A Journey from Historical Foundations to Em...
 
Choose our Linux Web Hosting for a seamless and successful online presence
Choose our Linux Web Hosting for a seamless and successful online presenceChoose our Linux Web Hosting for a seamless and successful online presence
Choose our Linux Web Hosting for a seamless and successful online presence
 
Mitigating the Impact of State Management in Cloud Stream Processing Systems
Mitigating the Impact of State Management in Cloud Stream Processing SystemsMitigating the Impact of State Management in Cloud Stream Processing Systems
Mitigating the Impact of State Management in Cloud Stream Processing Systems
 
find out more about the role of autonomous vehicles in facing global challenges
find out more about the role of autonomous vehicles in facing global challengesfind out more about the role of autonomous vehicles in facing global challenges
find out more about the role of autonomous vehicles in facing global challenges
 
20240702 Présentation Plateforme GenAI.pdf
20240702 Présentation Plateforme GenAI.pdf20240702 Présentation Plateforme GenAI.pdf
20240702 Présentation Plateforme GenAI.pdf
 
What's New in Copilot for Microsoft365 May 2024.pptx
What's New in Copilot for Microsoft365 May 2024.pptxWhat's New in Copilot for Microsoft365 May 2024.pptx
What's New in Copilot for Microsoft365 May 2024.pptx
 
Quantum Communications Q&A with Gemini LLM
Quantum Communications Q&A with Gemini LLMQuantum Communications Q&A with Gemini LLM
Quantum Communications Q&A with Gemini LLM
 
Details of description part II: Describing images in practice - Tech Forum 2024
Details of description part II: Describing images in practice - Tech Forum 2024Details of description part II: Describing images in practice - Tech Forum 2024
Details of description part II: Describing images in practice - Tech Forum 2024
 
How to Build a Profitable IoT Product.pptx
How to Build a Profitable IoT Product.pptxHow to Build a Profitable IoT Product.pptx
How to Build a Profitable IoT Product.pptx
 
WhatsApp Image 2024-03-27 at 08.19.52_bfd93109.pdf
WhatsApp Image 2024-03-27 at 08.19.52_bfd93109.pdfWhatsApp Image 2024-03-27 at 08.19.52_bfd93109.pdf
WhatsApp Image 2024-03-27 at 08.19.52_bfd93109.pdf
 
The Rise of Supernetwork Data Intensive Computing
The Rise of Supernetwork Data Intensive ComputingThe Rise of Supernetwork Data Intensive Computing
The Rise of Supernetwork Data Intensive Computing
 
Understanding Insider Security Threats: Types, Examples, Effects, and Mitigat...
Understanding Insider Security Threats: Types, Examples, Effects, and Mitigat...Understanding Insider Security Threats: Types, Examples, Effects, and Mitigat...
Understanding Insider Security Threats: Types, Examples, Effects, and Mitigat...
 
Calgary MuleSoft Meetup APM and IDP .pptx
Calgary MuleSoft Meetup APM and IDP .pptxCalgary MuleSoft Meetup APM and IDP .pptx
Calgary MuleSoft Meetup APM and IDP .pptx
 
Advanced Techniques for Cyber Security Analysis and Anomaly Detection
Advanced Techniques for Cyber Security Analysis and Anomaly DetectionAdvanced Techniques for Cyber Security Analysis and Anomaly Detection
Advanced Techniques for Cyber Security Analysis and Anomaly Detection
 
Best Practices for Effectively Running dbt in Airflow.pdf
Best Practices for Effectively Running dbt in Airflow.pdfBest Practices for Effectively Running dbt in Airflow.pdf
Best Practices for Effectively Running dbt in Airflow.pdf
 
Fluttercon 2024: Showing that you care about security - OpenSSF Scorecards fo...
Fluttercon 2024: Showing that you care about security - OpenSSF Scorecards fo...Fluttercon 2024: Showing that you care about security - OpenSSF Scorecards fo...
Fluttercon 2024: Showing that you care about security - OpenSSF Scorecards fo...
 
RPA In Healthcare Benefits, Use Case, Trend And Challenges 2024.pptx
RPA In Healthcare Benefits, Use Case, Trend And Challenges 2024.pptxRPA In Healthcare Benefits, Use Case, Trend And Challenges 2024.pptx
RPA In Healthcare Benefits, Use Case, Trend And Challenges 2024.pptx
 
WPRiders Company Presentation Slide Deck
WPRiders Company Presentation Slide DeckWPRiders Company Presentation Slide Deck
WPRiders Company Presentation Slide Deck
 
The Increasing Use of the National Research Platform by the CSU Campuses
The Increasing Use of the National Research Platform by the CSU CampusesThe Increasing Use of the National Research Platform by the CSU Campuses
The Increasing Use of the National Research Platform by the CSU Campuses
 

In The Trenches With Tomster, Upgrading Ember.js & Ember Data

  • 1. In The Trenches With Tomster, Upgrading Ember.js & Ember Data Stacy London @stacylondoner May 2016
  • 2. In The Trenches With Zoey, Upgrading Ember.js & Ember Data Stacy London @stacylondoner
  • 3. @stacylondoner Who Am I? • mostly a front-end engineer, artist, musicophile, & traveler • head up front-end engineering at ShoreTel’s Milwaukee, WI office • co-organizer of @mkejs, TA for @milwaukeegdi • 1st web adventure was with geocities in 1997 • working with ember.js & ember-data for ~1 year 3
  • 4. 4
  • 5. @stacylondoner What is Ember.js? • “A framework for creating ambitious web applications” • an open source single page web application (SPA) framework • Routes, Models, Components, Controllers, Services • Model View Controller (MVC) —> Model Component (MC) • common idioms and best practices are incorporated into the framework so you can focus on building your app and not reinventing the wheel 5
  • 6. @stacylondoner What is Ember.js? • convention over configuration • developer productivity by providing a complete dev stack • pluggable architecture (ember add-ons) • stability without stagnation - big focus on backwards compatibility while still innovating • future web standards in mind - early adopter of promises, web components, & ES6. Yehuda Katz (Ember co- founder) is on the TC39 committee helping to set the future direction of JavaScript 6
  • 7. @stacylondoner Ember CLI • dev server with live reload • complete testing framework • provides generators for scaffolding (folder & file structure) • dependency management • ES6 modules • ES6 syntax support + Babel • asset management/build pipeline (combining, minifying, versioning) 7
  • 8. @stacylondoner Ember Data • data-persistence library • maps client-side models (in a local data store) to server-side data • can load & save records and their relationships without any configuration via RESTful JSON API • model.save(); —> AJAX POST or PUT to your API 8
  • 9. @stacylondoner9 Less Scaffolding Code Smells http://i.imgur.com/KfElr4h.gif
  • 10. @stacylondoner10from World of Tomorrow by Don Hertzfeldt Super Productive!
  • 13. @stacylondoner Our Ember App • 69K lines of code • 7K lines of LESS
 54K lines of JS
 8K lines of HTML (.hbs) • 134 routes
 104 models
 152 controllers
 171 components
 292 templates ** numbers are approximate and include subdirectory folders
 13
  • 14. @stacylondoner Our Upgrade Path • ember.js 1.10.x
 ember-data 1.0.0-beta.16.1
 ember-cli 0.2.5 • ember.js 1.13.x
 ember-data 1.13.x
 ember-cli 1.13.x • ember.js 2.4.x
 ember-data 2.5.x
 ember-cli 2.4.x 14
  • 15. @stacylondoner Ember Upgrades • follows semantic versioning (semver) • breaking changes introduced at major versions • new features / bug fixes at dot releases • 6 week release cycle • all major 2.x features were introduced early and spread across several releases to avoid massive upgrade issues 15
  • 16. @stacylondoner Long Term Support (LTS) Release • Ember 2.4 is the first LTS release • good if you can’t upgrade every 6 weeks • bug fixes for 36 weeks • security fixes for 60 weeks • every 4th release will be LTS 16
  • 17. @stacylondoner Ember Architecture 1.x • encouraged a Model-View-Controller-Route architecture • since then the industry has converged on a Model- Component-Route pattern, which is what Ember 2.x embraces 17
  • 19. @stacylondoner Ember 2.x • 2.0 was mostly about removing deprecated code • One way data flow by default. Data down, actions up (DDAU). Similar to React.js. • Glimmer rendering engine speed improvements (DOM diff algorithm similar to React.js) • Fastboot for progressive web apps 19
  • 20. @stacylondoner20 Glimmer EmberConf 2016 Keynote by Tom Dale & Yehuda Katz https://speakerdeck.com/tomdale/emberconf-2016-keynote
  • 22. @stacylondoner Upgrading Tips • Apply each upgrade incrementally • Don’t jump from 1.10.x to 2.4.x • Recommend you don’t run the init part of the upgrade directly on your project. • Create a new dummy ember app at the new version and compare to your project. 22
  • 23. @stacylondoner Ember CLI Upgrade - Demo Time! 23from World of Tomorrow by Don Hertzfeldt
  • 25. @stacylondoner Deprecation Warnings • Ember will warn you ahead of new versions that something is going to be deprecated by detecting use of it and then outputting a warning message in the browser console. • http://emberjs.com/deprecations/v1.x/ DEPRECATION: Using `{{view}}` or any path based on it (‘some-template.hbs' @ L84:C16) has been deprecated. [deprecation id: view.keyword.view] See http://emberjs.com/ deprecations/v1.x#toc_view-and-controller-template-keywords for more details. 25
  • 26. @stacylondoner 1.10 > 1.13: Remove Views • remove all Views and replace with Components • some Ember add-ons still were using Views so needed those to upgrade before moving to Ember 2.x where Views were removed • or you could include this to add Views back until all add-ons are upgraded - https://github.com/ emberjs/ember-legacy-views 26
  • 27. @stacylondoner 1.10 > 1.13: Remove Views • components are isolated (scoped) so actions don’t automatically bubble up • had to refactor by registering the action we want to bubble out of a component in the template calling the component
 
 innerAction=“outerAction” • using closure actions is a more elegant way to accomplish this that we learned about later ;).
 https://dockyard.com/blog/2015/10/29/ember-best- practice-stop-bubbling-and-use-closure-actions 27
  • 30. @stacylondoner 1.10 > 1.13: Remove ArrayControllers • replace ArrayControllers with Controllers // Change: export default Ember.ArrayController.extend({ // To: export default Ember.Controller.extend({ • update templates to move away from {{modelPropertyName}} to {{model.modelPropertyname}} 30
  • 31. @stacylondoner 1.10 > 1.13: Remove SortableMixin const SongsController = Ember.ArrayController.extend(Ember.SortableMixin, { model: null, sortProperties: ['trackNumber'], sortAscending: false }); let songsController = SongsController.create({ songs: songList }); // changes to —————————————————————— const SongsController = Ember.Controller.extend({ model: null, sortedSongs: Ember.computed.sort('model', 'songSorting'), songSorting: ['trackNumber:desc'] }); let songsController = SongsController.create({ songs: songList }); 31
  • 32. @stacylondoner 1.10 > 1.13: Remove bind-attr helper • DEPRECATION: The `bind-attr` helper (‘myTemplate.hbs' @ L2:C6) is deprecated in favor of HTMLBars-style bound attributes. <div {{bind-attr class="noPrevPage:disabled :card-icon-wrapper"}} {{action "prevPage"}}> <!--becomes--> <div class="{{if noPrevPage 'disabled'}} card- icon-wrapper” {{action "prevPage"}}> 32
  • 33. @stacylondoner 1.10 > 1.13: Ember Watson • some of the available changes were extremely tedious to do and couldn’t be globally found/replaced • ember watson to the rescue! 
 https://github.com/abuiles/ember-watson • biggest help was to convert computed properties and observers to not use prototype extensions • NOTE: It’s not required that you remove prototype extensions as part of the upgrade. Decorators are coming so you may want to wait to switch until then. This just felt nicer for reading code until then.
 https://github.com/emberjs/guides/pull/110 33
  • 34. @stacylondoner 1.10 > 1.13: Ember Watson isAvailable: function() { //code here }.property('currentPresence'), // watson automatically adjusted the code to: isAvailable: Ember.computed('currentPresence', function() { //code here }), 34
  • 35. @stacylondoner 1.10 > 1.13: Ember Watson sourceListObserver: function() { //code here }.observes('sourceList'), // watson automatically adjusted the code to: sourceListObserver: Ember.observer('sourceList', function() { //code here }), 35
  • 36. @stacylondoner Ember Data • Our RESTful API is written in Python using Tastypie which is a web service API framework for Django. • The ember-data default RESTAdapter does not follow the conventions used in django-tastypie. • Our Adapter & Serializers do quite a bit of work to transforms the payloads and are based on https:// github.com/escalant3/ember-data-tastypie-adapter/ 36
  • 37. @stacylondoner Ember Data 1.10 > 1.13 • sampled find methods meant touching a lot of our code to replace store.find, store.all, and store.getById with this more consistent API: 37
  • 38. @stacylondoner Ember Data 1.10 > 1.13 • API naming changes caused a bit of refactoring • rollback renamed to rollbackAttributes • isDirty renamed to hasDirtyAttributes 38
  • 39. @stacylondoner Ember Data - RESTAdapter • needed to override ajaxOptions to make sure traditional = true (which removes the [] from array parameters) • needed to override handleResponse and normalizeErrorResponse to map any error information in the payload so that `reason` wasn’t empty when an issue happened with saving/retrieving data model.save().then(function() { // success }, function(reason) { // failure }); 39
  • 40. @stacylondoner Ember Data - RESTSerializer • Helper that converts a django-tastypie URI into an id for ember-data use • Conversions of attribute names to use underscores • normalizeId was removed in Ember Data 2.x but we still need to be able to convert from resource URIs into Ids so just had to remove call to _super. • since we have customized our serializer we needed to set this flag as part of upgrading to 1.13.x: isNewSerializerAPI: true 40
  • 41. @stacylondoner Ember Data - Model Helper • in order to do do dirty checks and rollbacks on models with complex relationships (hasMany, belongsTo) we have to re- open the model and add additional logic • this logic basically stores the original relationships on load of the model so that they can be used later for rollback/dirty checking • now when you do model.rollback() it will rollback everything including hasMany and belongsTo relationships • http://stackoverflow.com/questions/14685046/how-to-rollback- relationship-changes-in-emberdata/27184207#27184207 41
  • 42. @stacylondoner Ember Data 2.x • JSON API Adapter & Serializer become the default • this still does not follow the conventions used in django-tastypie so we are not taking advantage of that • In Ember Data 2.0 relationships will be asynchronous by default 42
  • 43. @stacylondoner Issues / Struggles - Services • Services now work as expected in 2.x!! • This was not our experience in 1.x. 43
  • 44. @stacylondoner Issues / Struggles - Versions • Should your version of ember-data, ember-cli and ember.js be the same? This is not very clear in the documentation. Answer: Yes (but doesn’t have to). • “Ember-Data and Ember CLI will be versioned in lockstep with Ember itself"
 http://emberjs.com/blog/2015/08/13/ember-2-0- released.html#toc_ember-2-x-themes • Technically any version of Ember CLI can work with any version of Ember.js. You can stay on Ember.js 1.x and upgrade to the latest Ember-CLI if you figure out the correct dependencies. 44
  • 45. @stacylondoner Issues / Struggles - Documentation • Documentation hasn’t always been kept up to date with released versions so it was sometimes hard to know if you were doing something in the right way. • Now there is a dedicated team and direction that no new features will be added to the Ember 2.0 release channel without accompanying documentation. 45
  • 46. @stacylondoner Ember Community • If you run into an issue with a version you are upgrading to you can log an issue on GitHub. My experience has been really positive (people are nice and helpful). • e.g. classNames on components were being output twice in the DOM in 1.13.8. Logged an issue and it was resolved quickly.
 https://github.com/emberjs/ember.js/issues/12146 46
  • 47. @stacylondoner Looking Ahead • routable components (then we can remove controllers) • angle bracket components (for true one-way data flow) • use Fastboot for progressive web app • 2.x deprecations 
 http://emberjs.com/deprecations/v2.x/ 47
  • 48. @stacylondoner Angle Bracket Components {{!-- title is a mutable two-way binding --}} {{my-component title=model.name}} {{!-- title is just an (immutable) value --}} <my-component title={{model.name}} /> 48
  • 49. @stacylondoner Other Recommendations content > model • There was some confusion about if you should use content or model. Content was used across our codebase from implementing early beta versions. Use model. • Per Yehuda “People should use model as the public API and things should work. If they do not in some case, it's a bug and the bug should be opened.” 
 https://github.com/emberjs/ember.js/issues/2007 49
  • 50. @stacylondoner Other Recommendations Liquid Fire • If you do any sort of animation with JavaScript you should move that into Liquid Fire so that you’ll have promise-based transitions. • https://github.com/ember-animation/liquid-fire • http://ember-animation.github.io/liquid-fire/ • This is critical if you are using the Ember test suite with acceptance tests so that the ember run loop is cleaned up appropriately in between tests. • A good use case is transitioning modals. If you use Bootstrap modals and the associated JS that goes with it to animate you’ll have a bad time. 50
  • 51. @stacylondoner Resources • Ember Blogs - notes about each release
 http://emberjs.com/blog/2015/08/13/ember-2-0- released.html • Ember CLI Upgrade docs 
 http://ember-cli.com/user-guide/#upgrading • compare two versions to see what’s changed
 https://github.com/ember-cli/ember-new-output/compare/ • deprecation workflow - hide deprecation noise so you can work through one deprecation fix at a time
 https://github.com/mixonic/ember-cli-deprecation-workflow 51