$30 off During Our Annual Pro Sale. View Details »

Notes from The Great Dust.js Migration

Notes from The Great Dust.js Migration

Dominykas Blyžė

October 07, 2013
Tweet

More Decks by Dominykas Blyžė

Other Decks in Programming

Transcript

  1. Notes from The Great Dust.js Migration By ( ), 2013-10-08

    Dominykas Blyžė @dymonaz
  2. The system we set out to build (mid-2012) Mobile first

    Progressive enhancement Must render on server Should be able to render on the client Re-use view logic
  3. The path we took node.js (doh) Dumb views -> no

    DOM -> templating language Side effect: no JS 3 weeks before release (except on the server, of course)
  4. LinkedIn's research Source: Four way tie Only HBS and Dust

    relevant for us "we hope to contribute back" (on Dust) At the time - Dust seemed to be poor on node.js and Rhino was mentioned http://dominykas.net/15
  5. Why Handlebars Wide support and lots of marketing Seemed like

    state of the art Extremely dumb - good for dumb views?
  6. Handlebars six months later... { { . . / .

    . / . . / . . / . . / i 1 8 n . h e l l o M e m b e r } } No parent scope in partials No access to context in helpers { { # h e l p e r v a l u e 1 k e y 2 = v a l u e 2 } } { { e l s e } } n e w H a n d l e b a r s . S a f e S t r i n g ( ) { { # w i t h } } - never optimize for "less typing"
  7. Lesson If your views are super dumb - you may

    as well go for _ . t e m p l a t e ( )
  8. Enter dust.js USE THE LINKEDIN FORK

  9. Not #1 in Google for "dust.js" n p m i

    n s t a l l d u s t j s - l i n k e d i n n p m i n s t a l l d u s t j s - h e l p e r s http://linkedin.github.io/dustjs/ https://github.com/linkedin/dustjs
  10. Saner helpers: { @ m y H e l p

    e r k = v / } Tradeoffs: Harder to create Not portable Harder to TDD
  11. HBS helper { { # e n u m V

    a l k e y o b j } } f u n c t i o n e n u m V a l ( v a l , a r r ) { r e t u r n a r r [ v a l ] ; }
  12. Dust.js helper { @ e n u m V a

    l o b j = o b j k e y = k e y / } f u n c t i o n e n u m V a l ( c h k , c t x , b o d i e s , p a r a m s ) { i f ( ! p a r a m s . o b j ) r e t u r n c h k ; v a r v a l = p a r a m s . o b j [ p a r a m s . k e y ] ; i f ( t y p e o f ( v a l ) = = " u n d e f i n e d " ) r e t u r n c h k ; r e t u r n c h k . w r i t e ( v a l ) ; } ;
  13. Multiple "else" blocks (bodies) Don't forget: "else" is a reserved

    word - use b o d i e s [ " e l s e " ] . { @ m y H e l p e r } d e f a u l t { : b o d y 1 } o k { : b o d y 2 } n o t o k { / m y H e l p e r }
  14. Filters FTW { v a r | s } -

    no escaping { v a r | h } - force escape { v a r | j s } - JSON.stringify { . | j s } - debug the shit out of your context { v a r | u } { v a r | u c }
  15. Async-ish Uses a callback, but happens in the same tick.

    Don't release zalgo: by @izs d u s t . r e n d e r ( " m y T e m p l a t e " , { " k e y " : " v a l u e " } , f u n c t i o n ( e r r , h t m l ) { d o c u m e n t . b o d y . i n n e r H T M L = h t m l ; } ) ; http://dominykas.net/16
  16. Re-usable partials Missing feature: passing in partial output as params

    Dynamic partials: { > " a v a t a r s / a v a t a r { s i z e } " / }
  17. "Inline partials" aka layouts layout.dust custom.dust { + b o

    d y } d e f a u l t c o n t e n t { / b o d y } { > " l a y o u t " / } { < b o d y } c o n t e n t { / b o d y }
  18. String interpolation { @ m y H e l p

    e r p a r a m = " { s o m e V a r } { o t h e r V a r } " / } See: d u s t . t a p ( )
  19. No auto-escaping in helpers Make sure to d u s

    t . e s c a p e H t m l ( ) .
  20. Ultimate templating problem: i18n S t r i n g

    t o b e { l i n k B e g i n } t r a n s l a t e d { l i n k E n d }
  21. Gotcha: no booleans, no null { # v a r

    k e y = t r u e } { ? k e y } h i { / k e y } { / v a r } See also: { # v a r k e y = 0 } { ? k e y } h i { / k e y } { / v a r } { # v a r k e y = 1 } { ? k e y } h i { / k e y } { / v a r } { # v a r k e y = " " } { ? k e y } h i { / k e y } { / v a r } GH-219
  22. Gotcha: @eq and variables { @ e q k e

    y = c o u n t v a l u e = " 0 " } . . . { / e q } { @ e q k e y = " { c o u n t } " v a l u e = " 0 " } . . . { / e q }
  23. Absurd: @if { @ i f c o n d

    = " { x } < { y } & & { b } = = { c } & & ' { e } ' . l e n g t h | | ' { f } ' . l e n g t h " } < d i v > x i s l e s s t h a n y a n d b = = c a n d e i t h e r e o r f e x i s t s i n t h e o u t p u t < / d i v > { / i f }
  24. Ambiguity - sections { # v a r } {

    n a m e } { / v a r } could loop or have w i t h -like behavior. Neat: can pass params: { # v a r k e y = " v a l " } . . { / v a r }
  25. Other issues Requires hacking to use with AMD Poor documentation,

    esp. internals Cleans whitespace by default
  26. Going forward See also: by @brikis98 PayPal uses for JSP

    - Rhino is good! Dust in C++? Maybe use @substack's streaming HTML? Maybe use ejs? http://dominykas.net/17
  27. Slides: ; http://dominykas.net/18 @dymonaz