Ember.String.interpolate

Jay Phelps
https://github.com/jayphelps

January 14, 2014
Ember.String.interpolate

Jay Phelps
https://github.com/jayphelps

January 14, 2014
WHO I AM
Jay Phelps
WHO I AM
Jay Phelps
•

CTO at Pivotshare
WHO I AM
Jay Phelps
•

CTO at Pivotshare

•

Loves code, hates
condiments.
WHO I AM
Jay Phelps
•

CTO at Pivotshare

•

Loves code, hates
condiments.
github: @jayphelps
twitter: @_jayphelps
THE “PROBLEM”
THE “PROBLEM”
•

Create a string from a mix of pre-defined and runtime
strings.
THE “PROBLEM”
•

Create a string from a mix of pre-defined and runtime
strings.
•

Concatenating a bunch of this.get(‘key’...
THE “PROBLEM”
•

Create a string from a mix of pre-defined and runtime
strings.
•

Concatenating a bunch of this.get(‘key’...
THE “PROBLEM”
•

Create a string from a mix of pre-defined and runtime
strings.
•

Concatenating a bunch of this.get(‘key’...
SIMPLE EXAMPLE
THE “SOLUTION”
THE “SOLUTION”

•

How do programming languages solve similar gripes?
STRING INTERPOLATION
STRING INTERPOLATION
STRING INTERPOLATION
STRING INTERPOLATION
STRING INTERPOLATION
STRING INTERPOLATION
STRING INTERPOLATION
•

A prefix token is used to identify keys that should be
replaced with that variables value. (i.e. a...
STRING INTERPOLATION
•

A prefix token is used to identify keys that should be
replaced with that variables value. (i.e. a...
STRING INTERPOLATION
•

A prefix token is used to identify keys that should be
replaced with that variables value. (i.e. a...
BACK TO OUR

SIMPLE EXAMPLE
BACK TO OUR

SIMPLE EXAMPLE
WHAT DOES IT GIVE US?
WHAT DOES IT GIVE US?
•

One liners
WHAT DOES IT GIVE US?
•

One liners

•

$keys are automatically observed and the string
recomputed on changes
WHAT DOES IT GIVE US?
•

One liners

•

$keys are automatically observed and the string
recomputed on changes

•

Returns ...
WHAT DOES IT GIVE US?
•

One liners

•

$keys are automatically observed and the string
recomputed on changes

•

Returns ...
INLINE EXPRESSIONS
INLINE EXPRESSIONS
INLINE EXPRESSIONS

•

Accepts any valid JavaScript expression.
INLINE EXPRESSIONS

•

Accepts any valid JavaScript expression.

•

Identifiers are still looked up on context (not scope)...
WHAT ELSE?
WHAT ELSE?
•

Resolves properties on global context (e.g. window) if
not found on current, otherwise replaces with empty
s...
WHAT ELSE?
•

Resolves properties on global context (e.g. window) if
not found on current, otherwise replaces with empty
s...
WHAT ELSE?
•

Resolves properties on global context (e.g. window) if
not found on current, otherwise replaces with empty
s...
WHAT ELSE?
•

Resolves properties on global context (e.g. window) if
not found on current, otherwise replaces with empty
s...
SECURITY
CONSIDERATIONS
SECURITY
CONSIDERATIONS
•

NEVER call .interpolate() directly on un-safe strings.
SECURITY
CONSIDERATIONS
•

NEVER call .interpolate() directly on un-safe strings.
•

A malicious user could use ${expressi...
SECURITY
CONSIDERATIONS
•

NEVER call .interpolate() directly on un-safe strings.
•

•

A malicious user could use ${expre...
SECURITY
CONSIDERATIONS
QUESTIONS?
https://github.com/jayphelps/ember.string.interpolate
Ember.String.Interpolate
Upcoming SlideShare
Loading in …5
×

Ember.String.Interpolate

2,055 views

Published on

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

0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,055
On SlideShare
0
From Embeds
0
Number of Embeds
22
Actions
Shares
0
Downloads
8
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Ember.String.Interpolate

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

×