Embed Size (px)
DESCRIPTION
https://github.com/jayphelps/ember.string.interpolate Adds string interpolation as a computed property to Ember.js (i.e. no more unreadable getter concatenation). This was the slideshow for my Ember.js South California Meetup talk. Sample code: https://gist.github.com/jayphelps/8431829
Citation preview
Jay Phelpshttps://github.com/jayphelps
January 14, 2014
Ember.String.interpolate
Jay Phelpshttps://github.com/jayphelps
January 14, 2014
Ember.String.interpolate
WHO I AM
Jay Phelps
WHO I AM
• CTO at Pivotshare
Jay Phelps
WHO I AM
• CTO at Pivotshare
• Loves code, hates condiments.
Jay Phelps
WHO I AM
• CTO at Pivotshare
• Loves code, hates condiments.
Jay Phelps
github: @jayphelpstwitter: @_jayphelps
THE “PROBLEM”
THE “PROBLEM”• Create a string from a mix of pre-defined and runtime strings.
THE “PROBLEM”• Create a string from a mix of pre-defined and runtime strings.
• Concatenating a bunch of this.get(‘key’) calls with strings is menial but can quickly become difficult to read.
THE “PROBLEM”• Create a string from a mix of pre-defined and runtime strings.
• Concatenating a bunch of this.get(‘key’) calls with strings is menial but can quickly become difficult to read.
• Requires Boilerplate
THE “PROBLEM”• Create a string from a mix of pre-defined and runtime strings.
• Concatenating a bunch of this.get(‘key’) calls with strings is menial but can quickly become difficult to read.
• Requires Boilerplate
• Not pretty
SIMPLE EXAMPLE
THE “SOLUTION”
THE “SOLUTION”
• How do programming languages solve similar gripes?
STRING INTERPOLATION
STRING INTERPOLATION
STRING INTERPOLATION
STRING INTERPOLATION
STRING INTERPOLATION
STRING INTERPOLATION
STRING INTERPOLATION• A prefix token is used to identify keys that should be replaced with that variables value. (i.e. a placeholder)
STRING INTERPOLATION• A prefix token is used to identify keys that should be replaced with that variables value. (i.e. a placeholder)
• Dollar sign ($), hash (#) are some of the most common tokens
STRING INTERPOLATION• A prefix token is used to identify keys that should be replaced with that variables value. (i.e. a placeholder)
• Dollar sign ($), hash (#) are some of the most common tokens
• For Ember, we can create a computed property that binds these keys to the values on the current context. (this)
SIMPLE EXAMPLEBACK TO OUR
SIMPLE EXAMPLEBACK TO OUR
WHAT DOES IT GIVE US?
WHAT DOES IT GIVE US?
• One liners
WHAT DOES IT GIVE US?
• One liners
• $keys are automatically observed and the string recomputed on changes
WHAT DOES IT GIVE US?
• One liners
• $keys are automatically observed and the string recomputed on changes
• Returns a computed property, so you can chain.readOnly(), .meta(), etc
WHAT DOES IT GIVE US?
• One liners
• $keys are automatically observed and the string recomputed on changes
• Returns a computed property, so you can chain.readOnly(), .meta(), etc
• Also...
INLINE EXPRESSIONS
INLINE EXPRESSIONS
INLINE EXPRESSIONS
• Accepts any valid JavaScript expression.
INLINE EXPRESSIONS
• Accepts any valid JavaScript expression.
• Identifiers are still looked up on context (not scope) so no need to use `this.key`
WHAT ELSE?
WHAT ELSE?• Resolves properties on global context (e.g. window) if not found on current, otherwise replaces with empty string.
WHAT ELSE?• Resolves properties on global context (e.g. window) if not found on current, otherwise replaces with empty string.
• Supports variable variables. (But please don’t...)
WHAT ELSE?• Resolves properties on global context (e.g. window) if not found on current, otherwise replaces with empty string.
• Supports variable variables. (But please don’t...)
• Customize the token (use # or whatever you want)
WHAT ELSE?• Resolves properties on global context (e.g. window) if not found on current, otherwise replaces with empty string.
• Supports variable variables. (But please don’t...)
• Customize the token (use # or whatever you want)
• Actually an Ember.js wrapper around my generic interpolation library, “String.interpolate.js”
SECURITY CONSIDERATIONS
SECURITY CONSIDERATIONS
• NEVER call .interpolate() directly on un-safe strings.
SECURITY CONSIDERATIONS
• NEVER call .interpolate() directly on un-safe strings.
• A malicious user could use ${expression} for XSS attacks
SECURITY CONSIDERATIONS
• NEVER call .interpolate() directly on un-safe strings.
• A malicious user could use ${expression} for XSS attacks
• Un-safe means you don’t have 100% control over it. Usually, that means user-generated.
SECURITY CONSIDERATIONS
QUESTIONS?
https://github.com/jayphelps/ember.string.interpolate
![ROI in the age of keyword not provided [Mozinar]](https://img.pdfslide.us/doc/110x75/53eabc7a8d7f7289708b51f7/roi-in-the-age-of-keyword-not-provided-mozinar.jpg)