Web Components + JSX + ❤️
=
Stencil.js
and know a brief about them...
Gokul Kathirvel
💻 Front-end Developer, Zoho Corp
🤝 Co-organizer, EmberJS Chennai
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
