Crafting the Perfect Computed Property

This talk was held as part of Embercamp 2016.

Transcript

1. Crafting the Perfect Computed Property
3. How I Learned To Stop Worrying
4. How I Learned To Stop Worrying Use A Babel Transform And
5. How I Learned To Stop Worrying Use A Babel Transform In An Ember Addon And
6. How I Learned To Stop Worrying Use A Babel Transform In An Ember Addon With A Computed Property Macro And
7. How I Learned To Stop Worrying Use A Babel Transform In An Ember Addon With A Computed Property Macro Based On Template Strings And
10. Who am I? Serena Fritsch serena@intercom.io @serifritsch
11. Who are we? Serena Fritsch serena@intercom.io @serifritsch Gavin Joyce gavin@intercom.io @gavinjoyce
12. Ember@Intercom
15. Computed Property Macros
16. Example
17. Ember.String.fmt String formatting function available up until Ember 2+ Replaces all occurrences of %@ inside a string with the passed arguments
18. Computed.fmt Custom computed property that mirrors Ember.String.fmt functionality Implementation uses Ember.String.fmt under the hood
19. The Perfect Computed Property
20. What does it look like? Similar syntax to ES 2015 Template Strings First proposal on the ember-cpm repository
21. Proposal Robert Jackson wondered whether we could use real-template strings A precedent for this had already been set by the ember-cli-htmlbars- precompiler https://github.com/ember-cli/ember-cli-htmlbars-inline-precompile
22. HTMLBars Precompiler Addon
23. HTMLBars Precompiler Addon
24. Next Approach Use a tagged template literal and then transform it using the Babel precompiler
25. Shortcomings JSHint emits errors for template string arguments :(
26. Next Idea
27. Example What it looks like at build-time
28. Architecture Node Module Ember Add-On Template String Parser Template String Add-on imports
29. Template String Parser Implemented as a node module Follows similar concept to James Kyle’s super-tiny compiler https://github.com/thejameskyle/the-super-tiny-compiler Easy to unit-test
30. Template String Parser Before After
31. Template String Parser hi ${name}, you are ${age} years old Sections: Mode: Literal
32. Template String Parser hi ${name}, you are ${age} years old Sections: Mode: Literal
33. Template String Parser hi ${name}, you are ${age} years old Sections: Mode: Literal
34. Template String Parser hi ${name}, you are ${age} years old Sections: Mode: Literal
35. Template String Parser hi ${name}, you are ${age} years old Sections: Mode: Property hi
36. Template String Parser hi ${name}, you are ${age} years old Sections: Mode: Property hi
37. Template String Parser hi ${name}, you are ${age} years old Sections: Mode: Property hi
38. Template String Parser hi ${name}, you are ${age} years old Sections: Mode: Property hi
39. Template String Parser hi ${name}, you are ${age} years old Sections: Mode: Property hi
40. Template String Parser hi ${name}, you are ${age} years old Sections: Mode: Property hi
41. Template String Parser hi ${name}, you are ${age} years old Sections: Mode: Property hi
42. Template String Parser hi ${name}, you are ${age} years old Sections: Mode: Literal hi name
43. Template String Parser hi ${name}, you are ${age} years old Sections: Mode: Literal hi name
44. Template String Parser hi ${name}, you are ${age} years old Sections: Mode: Literal hi name , you are age year s old
45. Ember Addon Uses Babel source code transformations to overwrite AST nodes Imports the String Template Parser as a dependency
46. How does it work?
47. How does it work? 1. Detect Import Statements
48. How does it work? 1. Detect import statements 2. Detect function calls
49. How does it work? 1. Detect import statements 2. Detect function calls 3. Pass template to parser
50. How does it work? 1. Detect import statements 2. Detect function calls 3. Pass template to parser 4. Substitute function call
51. Result Build-Time
52. Result Run-Time
53. Demo
54. Installation 3) https://github.com/intercom/ember-computed-template-string 1) ember install ember-computed-template-string 2) import templateString from ‘ember-computed-template-string’
55. Wrap-Up
56. Thank You