ember-string-interpolate

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

Transcript

1. Jay Phelps https://github.com/jayphelps January 14, 2014 Ember.String.interpolate
2. Jay Phelps https://github.com/jayphelps January 14, 2014 Ember.String.interpolate
3. WHO I AM Jay Phelps
4. WHO I AM • CTO at Pivotshare Jay Phelps
5. WHO I AM • CTO at Pivotshare • Loves code, hates condiments. Jay Phelps
6. WHO I AM • CTO at Pivotshare • Loves code, hates condiments. Jay Phelps github: @jayphelps twitter: @_jayphelps
8. THE “PROBLEM”
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?
16. STRING INTERPOLATION
17. STRING INTERPOLATION
18. STRING INTERPOLATION
19. STRING INTERPOLATION
20. STRING INTERPOLATION
21. STRING INTERPOLATION
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. SIMPLE EXAMPLE BACK TO OUR
26. SIMPLE EXAMPLE BACK TO OUR
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...
32. INLINE EXPRESSIONS
33. INLINE EXPRESSIONS
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”
41. SECURITY CONSIDERATIONS
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.
45. SECURITY CONSIDERATIONS
46. QUESTIONS? https://github.com/jayphelps/ember.string.interpolate