Let's compose WebComponents JSConf BE

Creating web components shouldn't be limited to extending classes, it should use native solution but no magic that we can't understand.

What if instead of classes, we could create web components using only functions and being able to compose some of them together. In this talk we are going to see how we can use a library and native solutions like template literals for defining web components.

Transcript

1. Let’s compose A world without class WEBCOMPONENTS Henrique Limas @_hlimas
2. About me @_hlimas Frontend Engineer @ebaytechberlin I ❤ Web standards
3. Web Components is a set of four main specifications
4. Custom elements
5. Shadow DOM
6. ES Modules
7. HTML Templates
8. Custom Elements
9. <div> <span> <p> <input> <button> ... <js-conf> <date-picker> <our-button> <drag-drop> <our-router> ... Custom HTML tags
18. Custom Element API
19. Autocomplete
20. Lifecycles
21. connectedCallback
22. disconnectedCallback
23. attributeChangedCallback
24. adoptedCallback
26. Define the auto-complete
28. Autocomplete with groups
29. connectedCallback() Reuse with inheritance Autocomplete behaviours Custom autocomplete updateList() fetchApi()
31. O s a g a i
32. Osa what?
35. https://en.wikipedia.org/wiki/File:Biandintz_eta_zaldiak_-_modified2.jpg
36. https://en.wikipedia.org/wiki/File:Trontzea,_Euskal_Herria.jpg
37. / Tiny No class Compose
38. First example
39. Using attributes
40. Using attributes
41. Osagai is divided in different modules to import only what you need ♾ 2
42. Osagai
43. DOM
44. 2 Events
45. ♾ Lifecycles
47. Todo list
50. Update function
52. Todo list
54. ⚙ Separate logic from layout Osagai Component Template Function
57. Template
58. ⚙ Logic
60. Autocomplete with groups
61. Extract logic
62. Extract logic
63. Extract logic
64. Autocomplete with groups
66. ⚙ Custom renderer Renderer Custom template tag library
67. lit-html https://lit-html.polymer-project.org/
68. lit-html https://lit-html.polymer-project.org/
69. Custom renderer
70. bit.ly/lit-osagai lit-osagai
71. https://github.com/developit/htm
73. Osagai + Preact
74. bit.ly/htm-preact-osagai htm-preact-osagai
75. Thank you osagai.js.org bit.ly/osagai-repo @_hlimas