Shared web-components with StencilJS

Stencil is a simple compiler for generating Web Components and progressive web apps (PWA).

The presentation focuses on a review of all main concepts and rules. Checking the syntax and how to apply it in different frameworks.

Meetup GDG, 25 de septiembre de 2019 / Santiago/Chile
Link: https://www.meetup.com/gdg-santiago-chile/events/264634504/

Transcript

1. A Front End Developer at Concrete Felipe Sousa ✈
2. Shared Web Components with StencilJS A simple alternative to create shared and smart components.
3. - Web Components - StencilJS - Shared
4. Web Components
5. A little bit about history.
6. /2010 /2013 /2013 /2014 /2016
7. /2015 /2015 /2017
8. Always restricted to run inside the same tool.
9. What’s Web Components? Allow you create your own elements without a library or framework.
10. Custom Elements Web Components concepts Custom Elements Shadow DOM HTML Templates
11. Web Components concepts A set of JavaScript APIs that allow you to define custom elements and their behaviour, which can then be used as desired in your user interface. HTML Templates Custom Elements Shadow DOM
12. Web Components concepts HTML Templates Custom Elements Shadow DOM <my-custom-component> </my-custom-component>
13. Custom Elements Web Components concepts An important aspect of web components is encapsulation — being able to keep the markup structure, style, and behavior hidden and separate from other code on the page so that different parts do not clash, and the code can be kept nice and clean. Shadow DOM HTML Templates Custom Elements
14. Custom Elements Web Components concepts The <template> and <slot> elements enable you to write markup templates that are not displayed in the rendered page. These can then be reused multiple times as the basis of a custom element's structure. Custom Elements HTML Templates Shadow DOM
15. Using only the browser power!
16. But is really hard scale or manage big applications.
17. Shared
18. The components way to create applications.
20. CURRENTLY MUSIC
21. HEADER HEADER
22. MUSIC LIST MUSIC LIST
23. MUSIC CONTROLS MUSIC CONTROLS
24. SIDEBAR SIDEBAR
27. Only available if you’ve the same technology
28. Micro Front Ends
29. StencilJS
30. StencilJS Stencil is a toolchain for building reusable, scalable Design Systems. Generate small, blazing fast, and 100% standards based Web Components that run in every browser.
31. Personal Notes ◦ Mixin between Angular & React ◦ Web Components Based ◦ Really shared concept ◦ Easy to scale ◦ No hard setups ◦ Easy to learn
32. Features ◦ Virtual DOM ◦ Async Rendering (inspired by React Fiber) ◦ Reactive data-binding ◦ TypeScript
34. How?
35. Components How? Applications
36. Components
37. ◦Decorators ◦Lifecycle Hooks Components Notes
38. Decorators
39. @<DecoratorName>(Props) Decorator Name Decorator Definition string/object
40. Decorators API ◦ Component ◦ Prop ◦ State ◦ Watch ◦ Event ◦ Method ◦ Listen
41. Component
42. Component
43. Prop
44. State
45. Method
46. Event
47. Listen
48. Watch
49. Lifecycle Hooks
50. Stencil Component Life-Cycle ◦ connectedCallback ◦ disconnectedCallback ◦ componentWillLoad ◦ componentDidLoad ◦ componentWillRender ◦ componentDidRender ◦ componentWillUpdate ◦ componentDidUpdate
53. Component Example
54. Render Use JSX to create the component template.
55. JSX - How to use
56. https://bit.ly/2PcIn2h
57. Applications
58. Application Notes ◦ Stencil Router ◦ Services Workers - Optional Feature ◦ Build Process
59. Data Management
60. Stencil Design System
63. CLI/Utils
64. CLI/Utils ◦ Tests: E2E & Unit Tests ◦ Plugins • Sass • Less • Stylus • Posts CSS ◦ Auto Documentation
65. Auto Documentation You can create your documentation components using a command.
66. Stencil Config File
67. Terminal $ stencil build --docs-readme
68. Community
73. Who are using?
75. You can also work with: $ npm init stencil
76. A small experiment Angular 8 & Stencil
77. /felipesousa @felipz_sousa felipesousa.space @concretelatinoamerica /concrete-latinoamerica
78. Thank’s! Obrigado! Gracias!