Ember.String.Interpolate
•
1 like•2,642 views
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
Recommended
More Related Content
Viewers also liked
More from Jay Phelps
More from Jay Phelps (13)
Recently uploaded
Recently uploaded (20)
Ember.String.Interpolate
- 3. WHO I AM Jay Phelps
- 4. WHO I AM Jay Phelps • CTO at Pivotshare
- 5. WHO I AM Jay Phelps • CTO at Pivotshare • Loves code, hates condiments.
- 6. WHO I AM Jay Phelps • CTO at Pivotshare • Loves code, hates condiments. github: @jayphelps twitter: @_jayphelps
- 9. THE “PROBLEM” • Create a string from a mix of pre-defined and runtime strings.
- 10. 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.
- 11. 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
- 12. 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
- 13. SIMPLE EXAMPLE
- 14. THE “SOLUTION”
- 15. THE “SOLUTION” • How do programming languages solve similar gripes?
- 22. STRING INTERPOLATION • A prefix token is used to identify keys that should be replaced with that variables value. (i.e. a placeholder)
- 23. 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
- 24. 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)
- 25. BACK TO OUR SIMPLE EXAMPLE
- 26. BACK TO OUR SIMPLE EXAMPLE
- 27. WHAT DOES IT GIVE US?
- 28. WHAT DOES IT GIVE US? • One liners
- 29. WHAT DOES IT GIVE US? • One liners • $keys are automatically observed and the string recomputed on changes
- 30. 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
- 31. 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...
- 34. INLINE EXPRESSIONS • Accepts any valid JavaScript expression.
- 35. INLINE EXPRESSIONS • Accepts any valid JavaScript expression. • Identifiers are still looked up on context (not scope) so no need to use `this.key`
- 36. WHAT ELSE?
- 37. WHAT ELSE? • Resolves properties on global context (e.g. window) if not found on current, otherwise replaces with empty string.
- 38. 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...)
- 39. 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)
- 40. 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”
- 42. SECURITY CONSIDERATIONS • NEVER call .interpolate() directly on un-safe strings.
- 43. SECURITY CONSIDERATIONS • NEVER call .interpolate() directly on un-safe strings. • A malicious user could use ${expression} for XSS attacks
- 44. 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.