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
270
Spin me a Yarn
serenaf
1
61
Emberconf 2017 - Spin me a Yarn
serenaf
0
170
Featured
See All Featured
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
9
960
Measuring & Analyzing Core Web Vitals
bluesmoon
9
610
Music & Morning Musume
bryan
46
6.8k
Producing Creativity
orderedlist
PRO
347
40k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
358
30k
Making Projects Easy
brettharned
119
6.4k
Reflections from 52 weeks, 52 projects
jeffersonlam
352
21k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
252
21k
BBQ
matthewcrist
89
9.8k
Learning to Love Humans: Emotional Interface Design
aarron
274
40k
Making the Leap to Tech Lead
cromwellryan
135
9.5k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
54
3k
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