Download to read offline
More Related Content
Similar to Whats next in templating
More from Filip Bruun Bech-Larsen
Whats next in templating
- 1. Whats next intemplating Filip Bech-Larsen @IMPACTdigitaldk
- 2.
- 3.
- 5.
- 6. Whats next intemplating Filip Bech-Larsen @IMPACTdigitaldk
- 7. understand details to gainperspective
- 8. Templating… • Building userinterface using a declarative format (kinda looks like html) • Some parts are static - some are dynamic
- 9. UI = f(state) Reactreally taught this to the world…
- 10. a trip downmemory lane…
- 18.
- 19. lets take astep back…
- 20. The job ofa templating system • Balance between • developer experience • fast boot • fast update
- 21. What does theplatform provide? • template element • (tagged) template literals
- 22. The template element •holds “inert” DOM • scripts don’t run • styles don’t apply • easily cloned https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template
- 24. Template literals • insteadof quotes uses backticks - ` • can span multiple lines • can embed expressions • can be tagged… https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals
- 26. Tagged template literals •a tag is a function that processes the template literal - both the literal and the expressive parts. Can return anything
- 28. Tagged template literals •a tag is 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
- 30. can we usethis for creating a cool templating system?
- 31. The job ofa templating system • balance between • developer experience • fast boot • fast update
- 32. A solution? • templatein js means tools • create template to stamp out clone • identity of staticParts as caching-key • We know what changed…
- 33. Not entirely myidea… • hyperHTML • lit-html • innerself
- 34. understand details to gainperspective
- 35.
- 36. lit-html • A tag-function(called html) that returns templating instructions (called TemplateResult) • A render method to produce and maintain dom from TemplateResult • ~2kb gzipped and super fast https://github.com/Polymer/lit-html
- 38. what can lithandle ?
- 39.
- 40.
- 41.
- 42.
- 43.
- 44.
- 45.
- 46.
- 47.
- 48.
- 49.
- 50.
- 51. Directives or use await,or simply just setValue(promise)
- 52. lit-extended is sugar •properties instead of attributes by default • declarative event-listening syntax • tiny… <1kb
- 53.
- 54. so you sayits fast?
- 55. 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)
- 56. that all good… howdo I make a component?
- 57. lit only handlestemplates
- 58. bring your owncomponent encapsulation, data-flow, events
- 59. if only theplatform had that…
- 60.
- 61. WebComponents • custom-elements • shadow-DOM •template-element • html-imports
- 63. Lit-html and webcomponents •Lit is build 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
- 65. there are helpersalready lit-html-element, @polymer/litElement, more…
- 67. understand details to gainperspective
- 68. • superpowers properties •change => invalidation • types (for conversion), attributes reflection, default value • computed properties • batching rendering • lifecycle hooks • easy id element-queries lit-html-element https://github.com/kenchris/lit-element
- 70.
- 72.
- 73.
- 74. 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
- 76. templating with lit ispretty sweet
- 77.
- 78. Thank you! This was“Whats next in templating” I’m @filipbech @IMPACTdigitaldk Follow for slides