ember.string.interpolate
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/8431829TRANSCRIPT
![Page 1: Ember.String.Interpolate](https://reader034.vdocument.in/reader034/viewer/2022051818/54b6d7ab4a795934608b4579/html5/thumbnails/1.jpg)
Jay Phelpshttps://github.com/jayphelps
January 14, 2014
Ember.String.interpolate
![Page 2: Ember.String.Interpolate](https://reader034.vdocument.in/reader034/viewer/2022051818/54b6d7ab4a795934608b4579/html5/thumbnails/2.jpg)
Jay Phelpshttps://github.com/jayphelps
January 14, 2014
Ember.String.interpolate
![Page 3: Ember.String.Interpolate](https://reader034.vdocument.in/reader034/viewer/2022051818/54b6d7ab4a795934608b4579/html5/thumbnails/3.jpg)
WHO I AM
Jay Phelps
![Page 4: Ember.String.Interpolate](https://reader034.vdocument.in/reader034/viewer/2022051818/54b6d7ab4a795934608b4579/html5/thumbnails/4.jpg)
WHO I AM
• CTO at Pivotshare
Jay Phelps
![Page 5: Ember.String.Interpolate](https://reader034.vdocument.in/reader034/viewer/2022051818/54b6d7ab4a795934608b4579/html5/thumbnails/5.jpg)
WHO I AM
• CTO at Pivotshare
• Loves code, hates condiments.
Jay Phelps
![Page 6: Ember.String.Interpolate](https://reader034.vdocument.in/reader034/viewer/2022051818/54b6d7ab4a795934608b4579/html5/thumbnails/6.jpg)
WHO I AM
• CTO at Pivotshare
• Loves code, hates condiments.
Jay Phelps
github: @jayphelpstwitter: @_jayphelps
![Page 7: Ember.String.Interpolate](https://reader034.vdocument.in/reader034/viewer/2022051818/54b6d7ab4a795934608b4579/html5/thumbnails/7.jpg)
![Page 8: Ember.String.Interpolate](https://reader034.vdocument.in/reader034/viewer/2022051818/54b6d7ab4a795934608b4579/html5/thumbnails/8.jpg)
THE “PROBLEM”
![Page 9: Ember.String.Interpolate](https://reader034.vdocument.in/reader034/viewer/2022051818/54b6d7ab4a795934608b4579/html5/thumbnails/9.jpg)
THE “PROBLEM”• Create a string from a mix of pre-defined and runtime strings.
![Page 10: Ember.String.Interpolate](https://reader034.vdocument.in/reader034/viewer/2022051818/54b6d7ab4a795934608b4579/html5/thumbnails/10.jpg)
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.
![Page 11: Ember.String.Interpolate](https://reader034.vdocument.in/reader034/viewer/2022051818/54b6d7ab4a795934608b4579/html5/thumbnails/11.jpg)
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
![Page 12: Ember.String.Interpolate](https://reader034.vdocument.in/reader034/viewer/2022051818/54b6d7ab4a795934608b4579/html5/thumbnails/12.jpg)
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
![Page 13: Ember.String.Interpolate](https://reader034.vdocument.in/reader034/viewer/2022051818/54b6d7ab4a795934608b4579/html5/thumbnails/13.jpg)
SIMPLE EXAMPLE
![Page 14: Ember.String.Interpolate](https://reader034.vdocument.in/reader034/viewer/2022051818/54b6d7ab4a795934608b4579/html5/thumbnails/14.jpg)
THE “SOLUTION”
![Page 15: Ember.String.Interpolate](https://reader034.vdocument.in/reader034/viewer/2022051818/54b6d7ab4a795934608b4579/html5/thumbnails/15.jpg)
THE “SOLUTION”
• How do programming languages solve similar gripes?
![Page 16: Ember.String.Interpolate](https://reader034.vdocument.in/reader034/viewer/2022051818/54b6d7ab4a795934608b4579/html5/thumbnails/16.jpg)
STRING INTERPOLATION
![Page 17: Ember.String.Interpolate](https://reader034.vdocument.in/reader034/viewer/2022051818/54b6d7ab4a795934608b4579/html5/thumbnails/17.jpg)
STRING INTERPOLATION
![Page 18: Ember.String.Interpolate](https://reader034.vdocument.in/reader034/viewer/2022051818/54b6d7ab4a795934608b4579/html5/thumbnails/18.jpg)
STRING INTERPOLATION
![Page 19: Ember.String.Interpolate](https://reader034.vdocument.in/reader034/viewer/2022051818/54b6d7ab4a795934608b4579/html5/thumbnails/19.jpg)
STRING INTERPOLATION
![Page 20: Ember.String.Interpolate](https://reader034.vdocument.in/reader034/viewer/2022051818/54b6d7ab4a795934608b4579/html5/thumbnails/20.jpg)
STRING INTERPOLATION
![Page 21: Ember.String.Interpolate](https://reader034.vdocument.in/reader034/viewer/2022051818/54b6d7ab4a795934608b4579/html5/thumbnails/21.jpg)
STRING INTERPOLATION
![Page 22: Ember.String.Interpolate](https://reader034.vdocument.in/reader034/viewer/2022051818/54b6d7ab4a795934608b4579/html5/thumbnails/22.jpg)
STRING INTERPOLATION• A prefix token is used to identify keys that should be replaced with that variables value. (i.e. a placeholder)
![Page 23: Ember.String.Interpolate](https://reader034.vdocument.in/reader034/viewer/2022051818/54b6d7ab4a795934608b4579/html5/thumbnails/23.jpg)
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
![Page 24: Ember.String.Interpolate](https://reader034.vdocument.in/reader034/viewer/2022051818/54b6d7ab4a795934608b4579/html5/thumbnails/24.jpg)
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)
![Page 25: Ember.String.Interpolate](https://reader034.vdocument.in/reader034/viewer/2022051818/54b6d7ab4a795934608b4579/html5/thumbnails/25.jpg)
SIMPLE EXAMPLEBACK TO OUR
![Page 26: Ember.String.Interpolate](https://reader034.vdocument.in/reader034/viewer/2022051818/54b6d7ab4a795934608b4579/html5/thumbnails/26.jpg)
SIMPLE EXAMPLEBACK TO OUR
![Page 27: Ember.String.Interpolate](https://reader034.vdocument.in/reader034/viewer/2022051818/54b6d7ab4a795934608b4579/html5/thumbnails/27.jpg)
WHAT DOES IT GIVE US?
![Page 28: Ember.String.Interpolate](https://reader034.vdocument.in/reader034/viewer/2022051818/54b6d7ab4a795934608b4579/html5/thumbnails/28.jpg)
WHAT DOES IT GIVE US?
• One liners
![Page 29: Ember.String.Interpolate](https://reader034.vdocument.in/reader034/viewer/2022051818/54b6d7ab4a795934608b4579/html5/thumbnails/29.jpg)
WHAT DOES IT GIVE US?
• One liners
• $keys are automatically observed and the string recomputed on changes
![Page 30: Ember.String.Interpolate](https://reader034.vdocument.in/reader034/viewer/2022051818/54b6d7ab4a795934608b4579/html5/thumbnails/30.jpg)
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
![Page 31: Ember.String.Interpolate](https://reader034.vdocument.in/reader034/viewer/2022051818/54b6d7ab4a795934608b4579/html5/thumbnails/31.jpg)
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...
![Page 32: Ember.String.Interpolate](https://reader034.vdocument.in/reader034/viewer/2022051818/54b6d7ab4a795934608b4579/html5/thumbnails/32.jpg)
INLINE EXPRESSIONS
![Page 33: Ember.String.Interpolate](https://reader034.vdocument.in/reader034/viewer/2022051818/54b6d7ab4a795934608b4579/html5/thumbnails/33.jpg)
INLINE EXPRESSIONS
![Page 34: Ember.String.Interpolate](https://reader034.vdocument.in/reader034/viewer/2022051818/54b6d7ab4a795934608b4579/html5/thumbnails/34.jpg)
INLINE EXPRESSIONS
• Accepts any valid JavaScript expression.
![Page 35: Ember.String.Interpolate](https://reader034.vdocument.in/reader034/viewer/2022051818/54b6d7ab4a795934608b4579/html5/thumbnails/35.jpg)
INLINE EXPRESSIONS
• Accepts any valid JavaScript expression.
• Identifiers are still looked up on context (not scope) so no need to use `this.key`
![Page 36: Ember.String.Interpolate](https://reader034.vdocument.in/reader034/viewer/2022051818/54b6d7ab4a795934608b4579/html5/thumbnails/36.jpg)
WHAT ELSE?
![Page 37: Ember.String.Interpolate](https://reader034.vdocument.in/reader034/viewer/2022051818/54b6d7ab4a795934608b4579/html5/thumbnails/37.jpg)
WHAT ELSE?• Resolves properties on global context (e.g. window) if not found on current, otherwise replaces with empty string.
![Page 38: Ember.String.Interpolate](https://reader034.vdocument.in/reader034/viewer/2022051818/54b6d7ab4a795934608b4579/html5/thumbnails/38.jpg)
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...)
![Page 39: Ember.String.Interpolate](https://reader034.vdocument.in/reader034/viewer/2022051818/54b6d7ab4a795934608b4579/html5/thumbnails/39.jpg)
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)
![Page 40: Ember.String.Interpolate](https://reader034.vdocument.in/reader034/viewer/2022051818/54b6d7ab4a795934608b4579/html5/thumbnails/40.jpg)
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”
![Page 41: Ember.String.Interpolate](https://reader034.vdocument.in/reader034/viewer/2022051818/54b6d7ab4a795934608b4579/html5/thumbnails/41.jpg)
SECURITY CONSIDERATIONS
![Page 42: Ember.String.Interpolate](https://reader034.vdocument.in/reader034/viewer/2022051818/54b6d7ab4a795934608b4579/html5/thumbnails/42.jpg)
SECURITY CONSIDERATIONS
• NEVER call .interpolate() directly on un-safe strings.
![Page 43: Ember.String.Interpolate](https://reader034.vdocument.in/reader034/viewer/2022051818/54b6d7ab4a795934608b4579/html5/thumbnails/43.jpg)
SECURITY CONSIDERATIONS
• NEVER call .interpolate() directly on un-safe strings.
• A malicious user could use ${expression} for XSS attacks
![Page 44: Ember.String.Interpolate](https://reader034.vdocument.in/reader034/viewer/2022051818/54b6d7ab4a795934608b4579/html5/thumbnails/44.jpg)
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.
![Page 45: Ember.String.Interpolate](https://reader034.vdocument.in/reader034/viewer/2022051818/54b6d7ab4a795934608b4579/html5/thumbnails/45.jpg)
SECURITY CONSIDERATIONS
![Page 46: Ember.String.Interpolate](https://reader034.vdocument.in/reader034/viewer/2022051818/54b6d7ab4a795934608b4579/html5/thumbnails/46.jpg)
QUESTIONS?
https://github.com/jayphelps/ember.string.interpolate