Progressive Web Components

Nya mode-ordet Progressive Web components

Det här är något att hålla utkik på och lägga på minnet. Jag hoppas det kan bli en bra paraplyterm, precis som progressive webapps, html5 och css3 var när de begav sig.

A Progressive Web Component is a native Custom Element designed in two layers: a base layer of HTML and CSS that renders immediately, without JavaScript, and an enhancement layer of JavaScript that adds reactivity, event handling, and more advanced templating.

Exempel

Klassiskt jQuery-exempel:

<ol class="sortable-todolist">
  <li>Greppa handtaget.</li>
  <li>Öppna dörren.</li>
  <li>Gå ut.</li>
</ol>

<script>
  $(".sortable-todolist").sortable().todo();
</script>

Samma sak, med Progressive Web Components:

<todo-list>
  <sortable-list>
    <ol class="sortable-todolist">
      <li>Greppa handtaget.</li>
      <li>Öppna dörren.</li>
      <li>Gå ut.</li>
    </ol>
  </sortable-list>
</todo-list>

I båda fallen initieras en lista med möjlighet att lägga till CSS.