Ember.String.Interpolate
Upcoming SlideShare
Loading in...5
×

Like this? Share it with your network

Share

Ember.String.Interpolate

  • 1,060 views
Uploaded on

https://github.com/jayphelps/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

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
1,060
On Slideshare
1,049
From Embeds
11
Number of Embeds
1

Actions

Shares
Downloads
5
Comments
0
Likes
1

Embeds 11

https://twitter.com 11

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. Ember.String.interpolate Jay Phelps https://github.com/jayphelps January 14, 2014
  • 2. Ember.String.interpolate Jay Phelps https://github.com/jayphelps January 14, 2014
  • 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
  • 7. THE “PROBLEM”
  • 8. THE “PROBLEM” • Create a string from a mix of pre-defined and runtime strings.
  • 9. 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.
  • 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. • Requires Boilerplate
  • 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 • Not pretty
  • 12. SIMPLE EXAMPLE
  • 13. THE “SOLUTION”
  • 14. THE “SOLUTION” • How do programming languages solve similar gripes?
  • 15. STRING INTERPOLATION
  • 16. STRING INTERPOLATION
  • 17. STRING INTERPOLATION
  • 18. STRING INTERPOLATION
  • 19. STRING INTERPOLATION
  • 20. STRING INTERPOLATION
  • 21. STRING INTERPOLATION • A prefix token is used to identify keys that should be replaced with that variables value. (i.e. a placeholder)
  • 22. 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
  • 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 • For Ember, we can create a computed property that binds these keys to the values on the current context. (this)
  • 24. BACK TO OUR SIMPLE EXAMPLE
  • 25. BACK TO OUR SIMPLE EXAMPLE
  • 26. WHAT DOES IT GIVE US?
  • 27. WHAT DOES IT GIVE US? • One liners
  • 28. WHAT DOES IT GIVE US? • One liners • $keys are automatically observed and the string recomputed on changes
  • 29. 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
  • 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 • Also...
  • 31. INLINE EXPRESSIONS
  • 32. INLINE EXPRESSIONS
  • 33. INLINE EXPRESSIONS • Accepts any valid JavaScript expression.
  • 34. INLINE EXPRESSIONS • Accepts any valid JavaScript expression. • Identifiers are still looked up on context (not scope) so no need to use `this.key`
  • 35. WHAT ELSE?
  • 36. WHAT ELSE? • Resolves properties on global context (e.g. window) if not found on current, otherwise replaces with empty string.
  • 37. 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...)
  • 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...) • Customize the token (use # or whatever you want)
  • 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) • Actually an Ember.js wrapper around my generic interpolation library, “String.interpolate.js”
  • 40. SECURITY CONSIDERATIONS
  • 41. SECURITY CONSIDERATIONS • NEVER call .interpolate() directly on un-safe strings.
  • 42. SECURITY CONSIDERATIONS • NEVER call .interpolate() directly on un-safe strings. • A malicious user could use ${expression} for XSS attacks
  • 43. 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.
  • 44. SECURITY CONSIDERATIONS
  • 45. QUESTIONS? https://github.com/jayphelps/ember.string.interpolate