Download to read offline
More Related Content
Similar to Whats next in clientside templating
More from Filip Bruun Bech-Larsen
Whats next in clientside templating
- 1.
- 2.
- 3.
- 4.
- 7.
- 8.
- 9. TEMPLATING… • Building userinterface using a declarative format (kinda looks like html) • Some parts are static - some are dynamic
- 10.
- 11.
- 20.
- 21.
- 22. THEJOBOFATEMPLATINGSYSTEM • Balance between •developer experience • fast boot • fast update
- 23. WHATDOESTHEPLATFORMPROVIDE? • template element •(tagged) template literals
- 24. THETEMPLATEELEMENT • holds “inert”DOM • scripts don’t run • styles don’t apply • easily cloned https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template
- 26. TEMPLATELITERALS • instead ofquotes uses backticks - ` • can span multiple lines • can embed expressions • can be tagged… https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals
- 28. TAGGEDTEMPLATELITERALS • a tagis a function that processes the template literal - both the literal and the expressive parts. Can return anything
- 30. TAGGEDTEMPLATELITERALS • a tagis a function that processes the template literal - both the literal and the expressive parts. Can return anything. • the literal parts-array will be the same (===) in consecutive calls
- 32.
- 33. THEJOBOFATEMPLATINGSYSTEM • balance between •developer experience • fast boot • fast update
- 34. ASOLUTION? • template injs means tools • create template to stamp out clone • identity of staticParts as caching-key • We know what changed…
- 35.
- 36.
- 37.
- 38. LIT-HTML • A tag-function(called html) that returns templating instructions (called TemplateResult) • A render method to produce and maintain dom from TemplateResult • Tiny and super fast https://github.com/Polymer/lit-html
- 40.
- 41.
- 42.
- 43.
- 44.
- 45.
- 46.
- 47.
- 48.
- 49.
- 50.
- 51.
- 52. ASYNCVIAPROMISES streams also supported- either via append or replace strategies
- 53.
- 54.
- 55.
- 56. DIRECTIVES or use await,or simply just setValue(promise)
- 57.
- 58. PERFORMANCE • 2 aproachesto rendering/updating • Be smart (Polymer) - scales with complexity (no of changes) • Be fast (React) - scales with number of nodes (but very fast because of vdom) • Lit-html tries to sit in the middle (scales with expressions)
- 59. THATALLGOOD… how do Imake a component?
- 60.
- 61.
- 62.
- 63.
- 64. WEBCOMPONENTS • custom-elements • shadow-DOM •template-element • html-imports
- 66. LIT-HTMLANDWEBCOMPONENTS • Lit isbuild to be a great fit with web-components • make a render-method that returns a TemplateResult • use property setters to invalidate • re-render when invalidated • dispatch native DOM-events
- 67.
- 68.
- 70.
- 71. • Special typedproperties • React to changes • Attributes-reflection • Automatic batching rendering LITELEMENT
- 74.
- 75.
- 76.
- 78.
- 79. ELEMENT-ROUTER • native web-componentrouter (no dependencies) • syntax/api almost like Preact-router • <1 kb • works with lit-html, hyperHTML, or nothing or anything else really… https://github.com/filipbech/element-router
- 81.
- 82. THANKYOU! This was “Whatsnext in templating” I’m @filipbech Follow for slides