Discussing the future of frontend templating, introducing lit-html with lit-html-element and element-router. This talk was given at React Aarhus.

1. Whats next in templating
Filip Bech-Larsen
@IMPACTdigitaldk

2. @filipbech

3. #weAreHiring #Aarhus #Cph

5. https://developers.google.com/experts/people/filip-bruun-bech-larsen

6. https://www.facebook.com/groups/ngAarhus/

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 for creating 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…

33. introducing lit-html

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

41. TemplateResult
for composition

42. Arrays

43. Arrays
for composition

44. DOM nodes

45. Async via promises

46. extending lit-html
directives

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 smart (Polymer) - scales with complexity (no of changes)
• Be fast (React) - scales with number of nodes (but very fast because of
vdom)

54. Performance
• 2 aproaches to 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)

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

71. thats it… questions?