The future of templating and frameworks
- 1. the future of templating and frameworks… Filip Bech-Larsen @IMPACTdigitaldk
- 2. Whats next in templating Filip Bech-Larsen @IMPACTdigitaldk
- 3. @filipbech
- 7. Whats next in templating Filip Bech-Larsen @IMPACTdigitaldk
- 8. templating… • Building user interface using a declarative format (kinda looks like html) • Some parts are static - some are dynamic
- 9. UI = f(state) React really taught this to the world…
- 10. a trip down memory lane…
- 18. whats next?
- 19. lets take a step back…
- 20. the job of a templating system • balance between • developer experience • fast boot • fast update
- 21. What does the platform 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 • instead of 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 use this to create a cool templating system?
- 31. the job of a templating system • balance between • developer experience • fast boot • fast update
- 32. a solution? • template in js means tools • create template to stamp out clone • identity of staticParts as caching-key • We know what changed…
- 34. 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
- 36. what can lit handle
- 37. Text content
- 38. expressions
- 39. expressions
- 40. attributes
- 42. Arrays
- 44. DOM nodes
- 47. remember this?
- 48. directives
- 49. directives or use await, or simply just setValue(promise)
- 50. lit-extended is sugar • properties instead of attributes by default • declarative event-listening syntax • only 540b gzipped extra…
- 51. lit-extended
- 52. so you say its fast?
- 53. Performance • 2 aproaches to rendering/updating • Be clever (Polymer) - scales with complexity (no of changes) • Be brutal (React) - scales with number of nodes (but very fast because of vdom)
- 54. Performance • 2 aproaches to rendering/updating • Be clever (Polymer) - scales with complexity (no of changes) • Be brutal (React) - scales with number of nodes (but very fast because of vdom) • Lit-html tries to sit in the middle (scales with expressions)
- 55. that all good… how do I make a component?
- 56. lit only handles templates
- 57. bring your own component encapsulation, data-flow, events
- 58. if only the platform had that…
- 59. Web-Components
- 60. WebComponents • custom-elements • shadow-DOM • template-element • html-imports
- 62. 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
- 64. there are helpers already Like LitElement (lit-html-element on npm)
- 65. • superpowers properties • change => invalidation • types (for conversion), attributes reflection, default value • computed properties • batching rendering • lifecycle hooks • easy id element-queries LitElement https://github.com/kenchris/lit-element
- 67. with decorators…
- 68. one more thing…
- 69. element-router • native web-component router (no dependencies) • syntax/api almost like Preact-router • <1 kb https://github.com/filipbech/element-router
- 70. templating with lit is pretty sweet
- 72. Thank you! This was “Whats next in templating” I’m @filipbech @IMPACTdigitaldk Follow for slides