Stencil Presentation

## Web Components <br> & <br> Andes 3.0 Subscriptions Featuring <img src='https://stenciljs.com/_next/image?url=%2F_next%2Fstatic%2Fmedia%2Flogo.ee275b6c.png&w=256&q=75' style="width: 150px"> --- ## A (Very) Brief History <br> of Front End Tooling ---- ### The Stone Age - Put all your files in a folder - Upload them via FTP ---- ### The Bronze Age - Put all your files in a folder - Run some build scripts to optimize and concat the files (Grunt, Gulp, etc) - Upload the results via FTP ---- ### The Renaissance - Put all your files in a folder - Set aside a week or two to configure and troubleshoot Webpack - Use a framework (Angular, React, Vue, etc) - Commit changes to version control - Have a CI server build a giant JS file and deploy it somewhere ---- ### The Modern Age - All of the above… - Module splitting - Lazy-Loading - Module Federation <p>  <img width="400" src='https://i.imgflip.com/7d1ssx.jpg'> </p> ---- ### Current Day - Micro-Frontends with React - All of the above, and while you're at it... make a web-component too :thinking_face: --- ### Question: _Wait... Can't I just do everything in a Web Component?_ ---- ### Answer: _Sure... But they're verbose and honestly, kinda weird_ --- ## Web Components --- ### An Example ```javascript [1-7|19-23|28-36|38] const templateTodo = document.createElement('template'); templateTodo.innerHTML = ` <section> <todo-input></todo-input> <ul id="list-container"></ul> </section> `; class MyTodo extends HTMLElement { constructor() { super(); this.list = [ { text: 'my initial todo', checked: false }, { text: 'Learn about Web Components', checked: true } ]; } connectedCallback() { this.appendChild(templateTodo.content.cloneNode(true)); this.listContainer = this.querySelector('#list-container'); this._render(); } _render() { if (!this.listContainer) return; // empty the list this.listContainer.innerHTML = ''; this.list.forEach((item, index) => { let item = document.createElement('todo-item'); item.setAttribute('text', item.text); item.checked = item.checked; item.addEventListener('onToggle', this.toggleItem.bind(this)); this.listContainer.appendChild(item); }); } } window.customElements.define('my-todo', MyTodo); ``` --- ### What if it could look like this? ```tsx [1-3|5-8|14-20] @Component({ tag: "my-todo", }) export class MyTodo { @Prop() list = [ { text: "my initial todo", checked: false }, { text: "Learn about Web Components", checked: true }, ]; render() { return ( <section> <ul id="list-container"> {this.list.map((todo) => ( <todo-item onToggle={() => this.toggleItem(item)} checked={todo.checked} > {todo.text} </todo-item> ))} </ul> </section> ); } } ``` --- ### And what if we didn't have to worry about Webpack? --- ### And what if we didn't have to worry about all that federation, module splitting, lazy-loading and other stuff? <span>Which brings us to the topic of…</span> --- <img src='https://stenciljs.com/_next/image?url=%2F_next%2Fstatic%2Fmedia%2Flogo.ee275b6c.png&w=256&q=75' style="width: 150px"> Stencil is a library for building reusable, scalable Web Components that are small, blazing fast and run everywhere. ---- ### Simple With intentionally small tooling, a tiny API, and out-of-the-box configuration, Stencil gets out of the way and lets you focus. ---- ### Performant A tiny runtime and the raw power of native Web Components make Stencil one of the fastest compilers around. ---- ### Future proof Build cross-framework components and design systems on open web standards, and break free of Framework Churn. ---- ### Framework-agnostic Stencil components are just Web Components, so they will work with any major framework—or no framework at all. --- ### Demo