Web Components + JSX + ❤️

=

Stencil.js

and know a brief about them...

Gokul Kathirvel

 💻 Front-end Developer, Zoho Corp

🤝 Co-organizer, EmberJS Chennai 

@_gokatz
gokatz.me

Web Component - What?

  • Web Standards

  • Suit of Platform APIs

  • Extending HTML

  • Reusable Components

  • Browser Agnostic Approach

The What!

  • Custom Elements

  • Shadow DOM

  • HTML Templates

  • ES Modules

Platform APIs

Web Component - Why?

  • Works Everywhere*

  • Tech Agnostic

  • Encapsulation

  • Simpler Way

  • Future Proof

The Why!

Web Component - How?

  • Plain Old JavaScript

The How!

  • Lit HTML

  • Polymer

  • Stencil.js

  • Hybrid

let template = document.querySelector("#sparkle-button");

class SparkleButton extends HTMLElement {
  constructor() {
    super();
    let shadowRoot = this.attachShadow({ mode: "open" });
    shadowRoot.appendChild(template.content.cloneNode(true));
  }
}

window.customElements.define("sparkle-button", SparkleButton);
<template id="sparkle-button">
  <style>
    :host {
      border: 1px solid gold;
      padding: 10px;
      border-radius: 4px;
    }
    img {
      vertical-align: bottom; 
      margin-right: 5px;
    }
  </style>

  <img
       src="https://cdn.glitch.com/d10331b6-8e16-4707-a44f-8618eedaec9b%2Fclean.png?v=1613101084565"
       height="20px"
       width="20px"
       />
  <slot></slot>
</template>

<sparkle-button> Click Me! </sparkle-button>

JSX

  • Javascript Extension

  • Engine with the full power of Javascript

  • UI and Rendering logic

  • Embraces Componentisation

  • Expressions inside Tags

 

if (user) {
  return (<h1>
    Hello, {formatName(user)}!
  </h1>);  
}
return <h1>Hello, Stranger.</h1>;
<ul>
{
  users.map((user) => {
    return  <li>{user.name}</li>;
  });
}
</ul>

Web Components + JSX + ❤️

=

Stencil.js

Stencil.js

Let's Build'em

npm init stencil

sparkle-ui

Resources

Thank You

Web Components and Stencil.js

By Gokul Kathirvel

Made with Slides.com

Web Components and Stencil.js

  • 1,231

More from Gokul Kathirvel