44: Elm and Web Components

Javascript to Elm

English - August 02, 2018 10:00 - 29 minutes - 25.1 MB - ★★★★★ - 4 ratings
Technology elm javascript programming Homepage Download Apple Podcasts Google Podcasts Overcast Castro Pocket Casts RSS feed

Previous Episode: 43: Finally in Production

Next Episode: 45: Exploring ReasonML

Based on 2 events. Luke Westby's talk at Elm Conf, and the most recent episode of the frontend Happy Hour podcast about.... web components. So I've heard about them, and meh, didn't seem to solve any immediate problems I've been having, but I don't actually know enough about them to actually apply them to any problem I encounter!

What is web component

Web components are a set of web platform APIs that allow you to create new custom, reusable, encapsulated HTML tags to use in web pages and web apps. Custom components and widgets build on the Web Component standards, will work across modern browsers, and can be used with any JavaScript library or framework that works with HTML.

Build on 4 specifications

Custom Element specifications

Shadow DOM

You can think of shadow DOM as a scoped subtree inside your element.

HTML Imports

HTML Template

Libs to help build custom web elements

Bosonic is a collection of components designed to meet the everyday needs of web developers.
Polymer provides a set of features for creating custom elements.
SkateJS is a JavaScript library for writing web components with a small footprint.
Slim.js is an opensource lightweight web component library that provides data-binding and extended capabilities for components, using es6 native class inheritance.
Stencil is an opensource compiler that generates standards-compliant web components.
X-Tag is an open source JavaScript library that provides an interface for component development.

This may be a silly question, but where does the JS go?

I’m looking at web components and having visons of html, js, and css files in my project again? Is it bc polymer is using bower? i thought that was totally depreciated!!!!

OK. So it seems web components have been trying to get a foothold for a while now. I like Rob’s rebuttal about not being mutually exclusive. “React build a better mousetrap”

What problem does it solve creating component based web apps? I think we got that with react, anything missing? Where’s the win?

Let’s look at a ploymer app

npm install npm start polymer serve

Let’s build a little ploymer app?

The HTML is used for configuration and sets the initial state of the page. I have a hard time being ok with this. for so many years, the index.html page is for bootstrapping my app. no more. I’ve even declared proudly, as a frontend developer, the only HTML i write is the index file to host my app! Maybe I don’t know as much about web dom as I thought? NOPE. The one thing I could not stand was the [[]] or {{}} syntax in quotes assigned to a element property Can I use it in my Elm code Luke says I can, but I’m not sold that this is the time for me to saddle up. What does web components do for me now? Picks

Front End Happy Hour

Resources

When and how to use Web Components with elm” by Luke Westby

Front End Happy Hour

Org Webcomponents

Bower lives?

Broken promise of web components

Rebutal by Rob Dodson

frameworks vs web components

Web Components Model driven views

Lessons Learned

Vanilla web component