44: Elm and Web Components

Javascript to Elm

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

Follow

• JavaScript to Elm

  • Twitter: @jstoelm
  • Email: [email protected]

• Jesse Tomchak

  • Twitter: @jtomchak