Hoy por hoy las experiences de usuario pueden ser enriquecidas mediante el uso de Web Components, que son un estándar de la W3C soportado por la mayoría de los navegadores web modernos. Por Alex Arriaga

1. Stencil
The magical, reusable web
component compiler
*Opinions are my own and not the views of my current or past employers

2. What is Stencil?
• Stencil is a compiler that generates Web Components (more
specifically, Custom Elements)

3. Introduction I
• Why Stencil?
• Other frameworks
• Requirements

4. Introduction II
• Who is using it?
• Ionic https://ionicframework.com/

5. Getting
Started

6. Initialize a project
npm init stencil

7. Example
Basic render with Stencil

8. JSX

9. What is JSX?
Syntax extension to JavaScript
Stencil embraces the “very well-know” JSX syntax

10. Example
JSX syntax

11. Components

12. Stencil Component?
Reusable and isolated pieces
Accept inputs (props) and return JSX elements describing what should appear on the screen

13. Example of a component

14. Be pure…
All Stencil components must act like pure
functions with respect to their props

15. Example
Let’s create components

16. Interpolation

17. ”Interpolation”-like syntax

18. Example
Let’s understand interpolation

19. @Prop()

20. Props = params?
Custom attribute/properties exposed publicly on the
element that developers can provide values for

21. Props = properties
props Component DOM
Props are immutable by default

22. Example
Let’s see the ”props” concept

23. Example
Let’s check it out!

24. Styling

25. Styling components
Shadow DOM
API built into the browser that allows for DOM encapsulation and style encapsulation

26. Example
Let’s practice styling

27. SASS ?

28. SASS/SCSS support
npm install @stencil/sass --save-dev
// Don’t forget to configure stencil.config.js

29. Example
Styling with SASS

30. Example
Working with global styles

31. @State()

32. State, state, state
State is similar to props, but it is private and fully controlled by the component
State should be reserved only for interactivity

33. Props = properties
props DOM
State is internal
Component
State

34. Important state’s rule
Any changes to a @State() property will cause
the components render function to be called
again

35. Example
Understanding the “state”
concept

36. Example
Using the “state” in Stencil

37. Stateful vs stateless components
Props
+
State
Props
Read-only (immutable)
Stateful Stateless

38. REST &
AJAX

39. Example
Using fetch() to get data

40. Building

41. Example
Creating our bundles

42. Thank you!
Alex Arriaga
@alex_arriaga_m
YouTube.com/AlexArriaga