Embed Size (px)
Citation preview
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
@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
@stacylondoner 9
Less Scaffolding Code Smells
http://i.imgur.com/KfElr4h.gif
@stacylondoner 10from World of Tomorrow by Don Hertzfeldt
Super Productive!
@stacylondoner
Our Ember App
• 69K lines of code
• 7K lines of LESS54K lines of JS 8K lines of HTML (.hbs)
• 134 routes104 models152 controllers171 components292 templates
** numbers are approximate and include subdirectory folders
13
@stacylondoner
Our Upgrade Path
• ember.js 1.10.xember-data 1.0.0-beta.16.1 ember-cli 0.2.5
• ember.js 1.13.xember-data 1.13.x ember-cli 1.13.x
• ember.js 2.4.xember-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
@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
@stacylondoner 18 @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
@stacylondoner 20
Glimmer
EmberConf 2016 Keynote by Tom Dale & Yehuda Katz
https://speakerdeck.com/tomdale/emberconf-2016-keynote
@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
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 componentinnerAction=“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
@stacylondoner 28 @stacylondoner
@stacylondoner 29 @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"}}>
<!--becomes-->
<div class="{{if noPrevPage 'disabled'}} card-icon-wrapper” {{action "prevPage"}}>
32
@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
@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
@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
@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
@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 changedhttps://github.com/ember-cli/ember-new-output/compare/
• deprecation workflow - hide deprecation noise so you can work through one deprecation fix at a timehttps://github.com/mixonic/ember-cli-deprecation-workflow
51
