Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Crafting the Perfect Computed Property
Search
Serena Fritsch
July 12, 2016
0
62
Crafting the Perfect Computed Property
This talk was held as part of Embercamp 2016.
Serena Fritsch
July 12, 2016
Tweet
Share
More Decks by Serena Fritsch
See All by Serena Fritsch
Let Me Ember this for You
serenaf
0
260
Spin me a Yarn
serenaf
1
61
Emberconf 2017 - Spin me a Yarn
serenaf
0
170
Featured
See All Featured
Site-Speed That Sticks
csswizardry
10
700
Code Reviewing Like a Champion
maltzj
524
40k
KATA
mclloyd
30
14k
Building Flexible Design Systems
yeseniaperezcruz
328
39k
A designer walks into a library…
pauljervisheath
207
24k
Product Roadmaps are Hard
iamctodd
PRO
54
11k
Facilitating Awesome Meetings
lara
54
6.5k
Reflections from 52 weeks, 52 projects
jeffersonlam
351
21k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.7k
For a Future-Friendly Web
brad_frost
179
9.8k
Automating Front-end Workflow
addyosmani
1370
200k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
181
54k
Transcript
Crafting the Perfect Computed Property
None
How I Learned To Stop Worrying
How I Learned To Stop Worrying Use A Babel Transform
And
How I Learned To Stop Worrying Use A Babel Transform
In An Ember Addon And
How I Learned To Stop Worrying Use A Babel Transform
In An Ember Addon With A Computed Property Macro And
How I Learned To Stop Worrying Use A Babel Transform
In An Ember Addon With A Computed Property Macro Based On Template Strings And
None
None
Who am I? Serena Fritsch
[email protected]
@serifritsch
Who are we? Serena Fritsch
[email protected]
@serifritsch Gavin Joyce
[email protected]
@gavinjoyce
Ember@Intercom
None
None
Computed Property Macros
Example
Ember.String.fmt String formatting function available up until Ember 2+ Replaces
all occurrences of %@ inside a string with the passed arguments
Computed.fmt Custom computed property that mirrors Ember.String.fmt functionality Implementation uses
Ember.String.fmt under the hood
The Perfect Computed Property
What does it look like? Similar syntax to ES 2015
Template Strings First proposal on the ember-cpm repository
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
HTMLBars Precompiler Addon
HTMLBars Precompiler Addon
Next Approach Use a tagged template literal and then transform
it using the Babel precompiler
Shortcomings JSHint emits errors for template string arguments :(
Next Idea
Example What it looks like at build-time
Architecture Node Module Ember Add-On Template String Parser Template String
Add-on imports
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
Template String Parser Before After
Template String Parser hi ${name}, you are ${age} years old
Sections: Mode: Literal
Template String Parser hi ${name}, you are ${age} years old
Sections: Mode: Literal
Template String Parser hi ${name}, you are ${age} years old
Sections: Mode: Literal
Template String Parser hi ${name}, you are ${age} years old
Sections: Mode: Literal
Template String Parser hi ${name}, you are ${age} years old
Sections: Mode: Property hi
Template String Parser hi ${name}, you are ${age} years old
Sections: Mode: Property hi
Template String Parser hi ${name}, you are ${age} years old
Sections: Mode: Property hi
Template String Parser hi ${name}, you are ${age} years old
Sections: Mode: Property hi
Template String Parser hi ${name}, you are ${age} years old
Sections: Mode: Property hi
Template String Parser hi ${name}, you are ${age} years old
Sections: Mode: Property hi
Template String Parser hi ${name}, you are ${age} years old
Sections: Mode: Property hi
Template String Parser hi ${name}, you are ${age} years old
Sections: Mode: Literal hi name
Template String Parser hi ${name}, you are ${age} years old
Sections: Mode: Literal hi name
Template String Parser hi ${name}, you are ${age} years old
Sections: Mode: Literal hi name , you are age year s old
Ember Addon Uses Babel source code transformations to overwrite AST
nodes Imports the String Template Parser as a dependency
How does it work?
How does it work? 1. Detect Import Statements
How does it work? 1. Detect import statements 2. Detect
function calls
How does it work? 1. Detect import statements 2. Detect
function calls 3. Pass template to parser
How does it work? 1. Detect import statements 2. Detect
function calls 3. Pass template to parser 4. Substitute function call
Result Build-Time
Result Run-Time
Demo
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’
Wrap-Up
Thank You