Slide 1
Slide 1 text
A Front End Developer at Concrete
Felipe Sousa
✈
Slide 2
Slide 2 text
Shared Web Components with
StencilJS
A simple alternative to create shared and smart components.
Slide 3
Slide 3 text
- Web Components
- StencilJS
- Shared
Slide 4
Slide 4 text
Web Components
Slide 5
Slide 5 text
A little bit about history.
Slide 6
Slide 6 text
/2010 /2013 /2013 /2014 /2016
Slide 7
Slide 7 text
/2015 /2015 /2017
Slide 8
Slide 8 text
Always restricted to run inside the same tool.
Slide 9
Slide 9 text
What’s Web Components?
Allow you create your own elements without a
library or framework.
Slide 10
Slide 10 text
Custom Elements
Web Components
concepts
Custom Elements
Shadow DOM
HTML Templates
Slide 11
Slide 11 text
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
Slide 12
Slide 12 text
Web Components
concepts
HTML Templates
Custom Elements
Shadow DOM
Slide 13
Slide 13 text
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
Slide 14
Slide 14 text
Custom Elements
Web Components
concepts
The and 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
Slide 15
Slide 15 text
Using only the browser
power!
Slide 16
Slide 16 text
But is really hard scale or manage big
applications.
Slide 17
Slide 17 text
Shared
Slide 18
Slide 18 text
The components way to create applications.
Slide 19
Slide 19 text
No content
Slide 20
Slide 20 text
CURRENTLY MUSIC
Slide 21
Slide 21 text
HEADER
HEADER
Slide 22
Slide 22 text
MUSIC LIST
MUSIC LIST
Slide 23
Slide 23 text
MUSIC CONTROLS
MUSIC CONTROLS
Slide 24
Slide 24 text
SIDEBAR
SIDEBAR
Slide 25
Slide 25 text
No content
Slide 26
Slide 26 text
No content
Slide 27
Slide 27 text
Only available if you’ve the same technology
Slide 28
Slide 28 text
Micro Front Ends
Slide 29
Slide 29 text
StencilJS
Slide 30
Slide 30 text
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.
Slide 31
Slide 31 text
Personal Notes
○ Mixin between Angular & React
○ Web Components Based
○ Really shared concept
○ Easy to scale
○ No hard setups
○ Easy to learn
Slide 32
Slide 32 text
Features
○ Virtual DOM
○ Async Rendering (inspired by React Fiber)
○ Reactive data-binding
○ TypeScript
Slide 33
Slide 33 text
No content
Slide 34
Slide 34 text
How?
Slide 35
Slide 35 text
Components
How?
Applications
Slide 36
Slide 36 text
Components
Slide 37
Slide 37 text
○Decorators
○Lifecycle Hooks
Components Notes
Slide 38
Slide 38 text
Decorators
Slide 39
Slide 39 text
@(Props)
Decorator Name
Decorator Definition string/object
Slide 40
Slide 40 text
Decorators API
○ Component
○ Prop
○ State
○ Watch
○ Event
○ Method
○ Listen
Slide 41
Slide 41 text
Component
Slide 42
Slide 42 text
Component
Slide 43
Slide 43 text
Prop
Slide 44
Slide 44 text
State
Slide 45
Slide 45 text
Method
Slide 46
Slide 46 text
Event
Slide 47
Slide 47 text
Listen
Slide 48
Slide 48 text
Watch
Slide 49
Slide 49 text
Lifecycle Hooks
Slide 50
Slide 50 text
Stencil Component Life-Cycle
○ connectedCallback
○ disconnectedCallback
○ componentWillLoad
○ componentDidLoad
○ componentWillRender
○ componentDidRender
○ componentWillUpdate
○ componentDidUpdate
Slide 51
Slide 51 text
No content
Slide 52
Slide 52 text
No content
Slide 53
Slide 53 text
Component Example
Slide 54
Slide 54 text
Render
Use JSX to create the component template.
Slide 55
Slide 55 text
JSX - How to use
Slide 56
Slide 56 text
https://bit.ly/2PcIn2h
Slide 57
Slide 57 text
Applications
Slide 58
Slide 58 text
Application Notes
○ Stencil Router
○ Services Workers - Optional Feature
○ Build Process
Slide 59
Slide 59 text
Data Management
Slide 60
Slide 60 text
Stencil Design System
Slide 61
Slide 61 text
No content
Slide 62
Slide 62 text
No content
Slide 63
Slide 63 text
CLI/Utils
Slide 64
Slide 64 text
CLI/Utils
○ Tests: E2E & Unit Tests
○ Plugins
• Sass
• Less
• Stylus
• Posts CSS
○ Auto Documentation
Slide 65
Slide 65 text
Auto Documentation
You can create your documentation
components using a command.
Slide 66
Slide 66 text
Stencil Config File
Slide 67
Slide 67 text
Terminal
$ stencil build --docs-readme
Slide 68
Slide 68 text
Community
Slide 69
Slide 69 text
No content
Slide 70
Slide 70 text
No content
Slide 71
Slide 71 text
No content
Slide 72
Slide 72 text
No content
Slide 73
Slide 73 text
Who are using?
Slide 74
Slide 74 text
No content
Slide 75
Slide 75 text
You can also work with:
$ npm init stencil
Slide 76
Slide 76 text
A small experiment
Angular 8 & Stencil
Slide 77
Slide 77 text
/felipesousa
@felipz_sousa
felipesousa.space
@concretelatinoamerica
/concrete-latinoamerica
Slide 78
Slide 78 text
Thank’s!
Obrigado!
Gracias!