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
56
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
230
Spin me a Yarn
serenaf
1
59
Emberconf 2017 - Spin me a Yarn
serenaf
0
170
Featured
See All Featured
Rails Girls Zürich Keynote
gr2m
93
13k
Making the Leap to Tech Lead
cromwellryan
132
8.9k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
504
140k
Git: the NoSQL Database
bkeepers
PRO
425
64k
The Straight Up "How To Draw Better" Workshop
denniskardys
232
140k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
664
120k
Unsuck your backbone
ammeep
668
57k
Reflections from 52 weeks, 52 projects
jeffersonlam
346
20k
Agile that works and the tools we love
rasmusluckow
327
21k
Mobile First: as difficult as doing things right
swwweet
222
8.9k
Designing Experiences People Love
moore
138
23k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
246
1.3M
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