Writing code to update our code - Wicked Good Ember

After upgrading Ember we might have times where we start to receive warnings about things that we should update in our code because of deprecations.
We can write scripts with tools like sed or Perl to fix our code but, when we are working with multiple teams and projects, we can see that those scripts start to fail or are not easy to maintain.
In this talk we’ll cover a different approach to update our code through direct operations on its abstract syntax tree (AST) using recast and how to distribute our solutions as addons so they can be used by other teams.
Specifically we’ll see how AST transform are used for scenarios like:
- Route generation in ember-cli
- Update QUnit tests via ember-watson
- Upgrade Ember-Data deprecations

Transcript

1. Writing code to update our code Wicked Good Ember
2. ¡Hola! • Name: Adolfo Builes (@abuiles) • Location: Medellín, Colombia. • say bouiless -v Thomas Wicked Good Ember
3. Wicked Good Ember
4. Finally, I'll get to discover whether @abuiles is really a cat. — Jeffrey Biles (@JeffreyBiles) Wicked Good Ember
5. Wicked Good Ember
6. Chinese Wicked Good Ember
7. I work at Envoy Wicked Good Ember
8. Envoy <3 Ember Wicked Good Ember
9. Motorcycling + OSS + ... Wicked Good Ember
10. Wicked Good Ember
11. Why am I here anyways? Wicked Good Ember
12. I used to do Ember consulting Wicked Good Ember
13. "Ember facilitator" Wicked Good Ember
14. Help them live on the edge Wicked Good Ember
15. ember-cli 0.1.13 came out Wicked Good Ember
16. Wicked Good Ember
17. QUnit's syntax changed Wicked Good Ember
18. test('Creating a new friends', function() { visit('/friends/new'); andThen(function() { // GLOBAL equal(currentPath(), 'friends.new'); // GLOBAL ok(true, 'called'); }); }); Wicked Good Ember
19. import {module, test} from 'qunit'; module('Acceptance: FriendsNew', { beforeEach: function(assert) { }, afterEach: function() { } }); test('Creating a new friends', function(assert) { visit('/friends/new'); andThen(function() { assert.equal(currentPath(), 'friends.new'); assert.ok(true, 'called'); }); }); Wicked Good Ember
20. How can I fix this? Wicked Good Ember
21. I know Perl! (not really) Wicked Good Ember
22. Perl Pie find . -type f | xargs perl -pi -e "s/ expect\(/assert\.expect(/g" find . -type f | xargs perl -pi -e "s/ ok\(/assert\.ok(/g" find . -type f | xargs perl -pi -e "s/ equal\(/assert\.equal(/g" find . -type f | xargs perl -pi -e "s/ deepEqual\(/assert\.deepEqual(/g" Wicked Good Ember
23. It worked great the first time Wicked Good Ember
24. Because I run it in a personal project Wicked Good Ember
25. but it didn't work well when sharing with others Wicked Good Ember
26. So I thought ... Wicked Good Ember
27. How can I get this to work on any project? Wicked Good Ember
28. Early ember-cli adopter? Wicked Good Ember
29. Back in the old days Router.map(function() { this.route('friends', function() { }); }); Wicked Good Ember
30. $ ember g route friends/new Wicked Good Ember
31. Output Router.map(function() { this.route('friends', function() { }); this.route('friends/new'); }); Wicked Good Ember
32. Regexp based replacements if (plural === name) { newContent = oldContent.replace( /(map\(function\(\) {[\s\S]+)}\)/, "$1 this.resource('" + name + "', function() { });" + EOL + "})" ); } else { newContent = oldContent.replace( /(map\(function\(\) {[\s\S]+)}\)/, "$1 this.resource('" + name + "', { path: '" + plural + "/:" + name + "_id' }, function() { });" + EOL + "})" ); } Wicked Good Ember
33. ember-router- generator Wicked Good Ember
34. Abstract Syntax Trees (AST) to the rescue! Wicked Good Ember
35. Tree representation of our code Wicked Good Ember
36. this.route('friends'); + Program body [1] + ExpressionStatement + expression + CallExpression + callee |-+ MemberExpression | + computed: false | + object | |-+ ThisExpression | + property | + Identifier | + name: route + arguments [1] + Literal + value: friends + raw: 'friends' Wicked Good Ember
37. { "type": "Program", "body": [ { "type": "ExpressionStatement", "expression": { "type": "CallExpression", "callee": { "type": "MemberExpression", "property": { "type": "Identifier", "name": "route" }... }, "arguments": [ { "type": "Literal", "value": "friends", "raw": "'friends'" } ] } } ] } Wicked Good Ember
38. We need an ECMAScript parser • Traverse • Identify • Replace • Create • Print Wicked Good Ember
39. Esprima and Recast Wicked Good Ember
40. Recast has a better support ES-NEXT Wicked Good Ember
41. How does it work? Wicked Good Ember
42. AST generation Wicked Good Ember
43. recast.parse var recast = require('recast'); var ast = recast.parse(testsFileSource); Wicked Good Ember
44. { "type": "Program", "body": [ { "type": "ExpressionStatement", "expression": { "type": "CallExpression", "callee": { "type": "MemberExpression", "property": { "type": "Identifier", "name": "route" } }, "arguments": [ { "type": "Literal", "value": "friends", "raw": "'friends'" } ] } } ] } Wicked Good Ember
45. Traversing Wicked Good Ember
46. Visitor Pattern recast.visit(ast, { visitExpressionStatement: function(path) { // magic code here }, visitImportDeclaration: function(path) { if (isImportFor('ember-qunit', path.node)) { sections.addQUnitImport = false; } if (isImportFor('qunit', path.node)) { sections.addQUnitImport = false; } this.traverse(path); } }) Wicked Good Ember
47. visitExpressionStatement: function(path) { var node = path.node; // module('Acceptance: foo', ..) if (isModule(node)) { sections.modules.push(node); } // test('it works', function() {}) if (isTest(node)) { sections.tests.push(node); } if (isSkip(node)) { sections.skips.push(node); } // ok(true, 'the truth') if (isAssertion(node)) { sections.assertions.push(node); } this.traverse(path); } Wicked Good Ember
48. Identifying nodes Wicked Good Ember
49. var types = recast.types.namedTypes; // ok(true, 'the truth'); function isAssertion(node) { // node.expression.type === 'CallExpression' return types.CallExpression.check(node.expression) && ASSERTIONS.indexOf(node.expression.callee.name) != -1; } var ASSERTIONS = [ 'deepEqual', 'equal', 'expect', 'ok', ... ]; Wicked Good Ember
50. Replacing Nodes Wicked Good Ember
51. sections.tests.forEach(function(node) { transformTestStatement(node); }); sections.assertions.forEach(function(node) { transformAssertions(node); }); Wicked Good Ember
52. function transformAssertions(node) { node.expression.callee.name = 'assert.' + node.expression.callee.name; } Wicked Good Ember
53. function transformAssertions(node) { node.expression.callee.name = 'assert.' + node.expression.callee.name; } // output for this would be something like ok(true, 'the truth') => assert.ok(true, 'the truth') Wicked Good Ember
54. function transformTestCallback(callback){ if (types.FunctionExpression.check(callback)) { if (callback.params.length === 0) { callback.params.push(builders.identifier('assert')); } } } Wicked Good Ember
55. function transformTestCallback(callback){ if (types.FunctionExpression.check(callback)) { if (callback.params.length === 0) { callback.params.push(builders.identifier('assert')); } } } // example test('it works', function(){}); => test('it works', function(callback){}); Wicked Good Ember
56. Builders Wicked Good Ember
57. var builders = recast.types.builders; builders.identifier('assert') => { name: 'assert', loc: null, type: 'Identifier', comments: null, typeAnnotation: null } Wicked Good Ember
58. builders.importDeclaration(specifiers, builders.moduleSpecifier('qunit'); => { specifiers: [ { id: { name: 'module', type: 'Identifier', }, ... ], source: { value: 'qunit', type: 'ModuleSpecifier', } type: 'ImportDeclaration' } // output import {module, test} from 'qunit'; Wicked Good Ember
59. Printing Wicked Good Ember
60. recast.print(ast, { tabWidth: 2, quote: 'single' }).code => 'this.route(\'foo\')' Wicked Good Ember
61. Final Result? Wicked Good Ember
62. abuiles/ember- watson Wicked Good Ember
63. Ember 2.0 and my dreams of a self- upgrading framework Wicked Good Ember
64. • ✓ Use Ember.computed/Ember.observer instead of prototype extensions // ember watson:convert-prototype-extensions // before isActive: function(){ }.property('subscribed', 'paid') // after isActive: Ember.computed('subscribed', 'paid', function() { }) Wicked Good Ember
65. • ✓ Update model lookups on relationships to use kebab- case // ember watson:convert-ember-data-model-lookups // before, using a camelCase string export default DS.Model.extend({ postComments: DS.hasMany('postComment', {async: true}) }); // after export default DS.Model.extend({ postComments: DS.hasMany('post-comment', {async: true}) }); Wicked Good Ember
66. • ✓ async will be the default in ED, add async:false to every rel without async info // ember watson:convert-ember-data-async-false-relationships // before posts: DS.hasMany('post') // after posts: DS.hasMany('post', {async: false}) Wicked Good Ember
67. • ☐ fix initializers/instance initializers //before App.initializer({ name: "clock", initialize: function(container, application) { application.register("clock:main", Clock); var clock = container.lookup("clock:main"); clock.setStartTime(Date.now()); } }); // after App.initializer({ }); App.instanceInitializer({ }); Wicked Good Ember
68. • ☐ Upgrade CP syntax //before isActive: Ember.computed('subscribed', 'paid', function() { }) //after isActive: Ember.computed('subscribed', 'paid', { get() {}, set() {} }) Wicked Good Ember
69. // feeling brave? // rwjblue/ember-computed-decorators @computed('subscribed', 'paid') isActive() { } Wicked Good Ember
70. • ☐ Migrate from proxy controllers (HtmlBarCast anyone?) // before Ember.ObjectController.extend({}) // after Ember.Controller.extend({ // all sort of craziness here }) Wicked Good Ember
71. • ☐ Replace bind-attr //before <image {{bind-attr src=model.src}}/> // after <image src={{model.src}}> Wicked Good Ember
72. • ☐ Static Analysis, identify bad practices (something similar to rubocop). setupController() { // lol you won't have a model } Wicked Good Ember
73. Present/Future Wicked Good Ember
74. Short term goal is to help people migrate easily to Ember 2.0 Wicked Good Ember
75. Long Term Goal? Wicked Good Ember
76. Get Rich with EDRAAS.com (j/k) Wicked Good Ember
77. A lot of companies stay behind because upgrading === ! Wicked Good Ember
78. Make Ember self- upgradable through custom formulas Wicked Good Ember
79. What if every RFC has an ember-watson formula attached? Wicked Good Ember
80. More people might jump on the rapid- release train Wicked Good Ember
81. Sharing the cost among the community Wicked Good Ember
82. While helping Ember to move forward Wicked Good Ember
83. Call For Help Wicked Good Ember
84. Ember Suave dockyard/ember-suave Wicked Good Ember
85. Ember Suave dockyard/ember-suave Wicked Good Ember
86. Muchas Gracias Wicked Good Ember
87. Muchas Gracias buy my book wge.abuiles.com ($15-off!) Wicked Good Ember
88. Muchas Gracias buy my book wge.abuiles.com ($15-off!) come work with me envoy.co/jobs Wicked Good Ember