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

Like this? Share it with your network

Share

Ember.String.Interpolate

on

  • 975 views

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

Statistics

Views

Total Views
975
Views on SlideShare
964
Embed Views
11

Actions

Likes
1
Downloads
5
Comments
0

1 Embed 11

https://twitter.com 11

Accessibility

Upload Details

Uploaded via as Adobe PDF

Usage Rights

CC Attribution License

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Ember.String.Interpolate Presentation 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