Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Shared web-components with StencilJS

Felipe Sousa
September 25, 2019

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/

Felipe Sousa

September 25, 2019
Tweet

More Decks by Felipe Sousa

Other Decks in Programming

Transcript

  1. A Front End Developer at Concrete
    Felipe Sousa

    View full-size slide

  2. Shared Web Components with
    StencilJS
    A simple alternative to create shared and smart components.

    View full-size slide

  3. - Web Components
    - StencilJS
    - Shared

    View full-size slide

  4. Web Components

    View full-size slide

  5. A little bit about history.

    View full-size slide

  6. /2010 /2013 /2013 /2014 /2016

    View full-size slide

  7. /2015 /2015 /2017

    View full-size slide

  8. Always restricted to run inside the same tool.

    View full-size slide

  9. What’s Web Components?
    Allow you create your own elements without a
    library or framework.

    View full-size slide

  10. Custom Elements
    Web Components
    concepts
    Custom Elements
    Shadow DOM
    HTML Templates

    View full-size slide

  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

    View full-size slide

  12. Web Components
    concepts
    HTML Templates
    Custom Elements
    Shadow DOM


    View full-size slide

  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

    View full-size slide

  14. 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

    View full-size slide

  15. Using only the browser
    power!

    View full-size slide

  16. But is really hard scale or manage big
    applications.

    View full-size slide

  17. The components way to create applications.

    View full-size slide

  18. CURRENTLY MUSIC

    View full-size slide

  19. HEADER
    HEADER

    View full-size slide

  20. MUSIC LIST
    MUSIC LIST

    View full-size slide

  21. MUSIC CONTROLS
    MUSIC CONTROLS

    View full-size slide

  22. SIDEBAR
    SIDEBAR

    View full-size slide

  23. Only available if you’ve the same technology

    View full-size slide

  24. Micro Front Ends

    View full-size slide

  25. 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.

    View full-size slide

  26. Personal Notes
    ○ Mixin between Angular & React
    ○ Web Components Based
    ○ Really shared concept
    ○ Easy to scale
    ○ No hard setups
    ○ Easy to learn

    View full-size slide

  27. Features
    ○ Virtual DOM
    ○ Async Rendering (inspired by React Fiber)
    ○ Reactive data-binding
    ○ TypeScript

    View full-size slide

  28. Components
    How?
    Applications

    View full-size slide

  29. ○Decorators
    ○Lifecycle Hooks
    Components Notes

    View full-size slide

  30. @(Props)
    Decorator Name
    Decorator Definition string/object

    View full-size slide

  31. Decorators API
    ○ Component
    ○ Prop
    ○ State
    ○ Watch
    ○ Event
    ○ Method
    ○ Listen

    View full-size slide

  32. Lifecycle Hooks

    View full-size slide

  33. Stencil Component Life-Cycle
    ○ connectedCallback
    ○ disconnectedCallback
    ○ componentWillLoad
    ○ componentDidLoad
    ○ componentWillRender
    ○ componentDidRender
    ○ componentWillUpdate
    ○ componentDidUpdate

    View full-size slide

  34. Component Example

    View full-size slide

  35. Render
    Use JSX to create the component template.

    View full-size slide

  36. JSX - How to use

    View full-size slide

  37. https://bit.ly/2PcIn2h

    View full-size slide

  38. Applications

    View full-size slide

  39. Application Notes
    ○ Stencil Router
    ○ Services Workers - Optional Feature
    ○ Build Process

    View full-size slide

  40. Data Management

    View full-size slide

  41. Stencil Design System

    View full-size slide

  42. CLI/Utils
    ○ Tests: E2E & Unit Tests
    ○ Plugins
    • Sass
    • Less
    • Stylus
    • Posts CSS
    ○ Auto Documentation

    View full-size slide

  43. Auto Documentation
    You can create your documentation
    components using a command.

    View full-size slide

  44. Stencil Config File

    View full-size slide

  45. Terminal
    $ stencil build --docs-readme

    View full-size slide

  46. Who are using?

    View full-size slide

  47. You can also work with:
    $ npm init stencil

    View full-size slide

  48. A small experiment
    Angular 8 & Stencil

    View full-size slide

  49. /felipesousa
    @felipz_sousa
    felipesousa.space
    @concretelatinoamerica
    /concrete-latinoamerica

    View full-size slide

  50. Thank’s!
    Obrigado!
    Gracias!

    View full-size slide