Notes from The Great Dust.js Migration

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