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
240
Spin me a Yarn
serenaf
1
59
Emberconf 2017 - Spin me a Yarn
serenaf
0
170
Featured
See All Featured
[RailsConf 2023] Rails as a piece of cake
palkan
52
4.9k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
109
49k
Into the Great Unknown - MozCon
thekraken
32
1.5k
The Language of Interfaces
destraynor
154
24k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
131
33k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
47
5k
The Cult of Friendly URLs
andyhume
78
6k
Bootstrapping a Software Product
garrettdimon
PRO
305
110k
How to Ace a Technical Interview
jacobian
276
23k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
232
17k
Optimizing for Happiness
mojombo
376
70k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
33
1.9k
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