Web Components

· 2 min read
Web Components

Nu har jag ägnat ett dygn åt att gräva i hur #bower och #npm är tänkt att fungera tillsammans och grävt i all frustration många har av att #web_components inte har scopes för custom elements. En tag kan bero på en annan som i sin tur har egna beroenden. Om olika delar vill ha olika taggar som råkar heta lika dant, eller helt enkelt beror på olika versioner av samma tag, så går det inte.

Web components är ändå något som ger fantastisk snygg inkapsling, så vi kan komma bort från långa headers med beroenden eller stora css-filer som försöker hantera allt. Tillsammans med HTTP/2 så kan en komplex webbplats bestå av många små delar och varje del sköter sig själv och kan inte förstöra för andra. Varje komponent har sin egen html, css och javascript. Det blir mycket mer städat. ... Förutom då det potentiella problemet med versionskrockar och namespace-konflikter.

Hur stort det problemet är vet vi kanske inte, men användningen av komponenter har ökat med lättheten att hantera många komponenter. Och node.js med npm har gjort det väldigt enkelt att ha många olika versioner av samma komponent, på serversidan. Och det har gjort att npm blivit oerhört populärt. Många gånger större än närmsta konkurrerande pakethanterare Maven för Java, Gems för Ruby och PyPi för Python. (En gång i tiden var Perls CPAN överlägset störst.)

Npm utvecklades för att hantera server-sidan av webbapplikationer men har sedan länge utökats till att även hantera klientsidan genom att komponenter kompileras till javascript anpassade för browsern, med stöd för olika versioner. Det kan dock resultera i ganska stora filer då det finns så många olika komponenter som folk gärna använder. Och när de kompileras och minimeras blir det också svårare att debugga och ännu svårare att lära sig genom att titta på webbplatser man själv inte skapat.

Många verkar förvänta sig att #polymer ska fungera minst lika bra med enkapsuleringen, men den är byggd på webbstandarder som i denna första version inte har det stödet ännu. Det är också därför som bower används för installation snarare än npm. Bower har förlorat i popularitet men är ett bra verktyg för web components, så som de ser ut idag.

Webbstandarden kommer att finnas i alla webbläsare men är än så länge bara i Chrome och Opera. Dock så fungerar det till 95% med polyfills så det går att använda idag om du undviker det lilla som ännu inte fungerar.

Förutom custom elements, html imports, templates och shadow dom, inkluderar det även CSS-variabler och HTTP/2. Alla dessa tillsammans + lite till skapar förutsättning att hantera komponenter bättre än tidigare.

Det är en uppsättning med webbstandarder som kan användas i valfritt ramverk. Polymer har några hjälpfunktioner som hjälper dig sätta samman detta, men Polymer är inte ett ramverk utan kan användas tillsammans med det ramverk du själv väljer. Men det går även att bygga saker med enbart Polymer.

[[https://www.facebook.com/aigan/posts/10153709329937393]]

Written by Jonas Liljegren
Building modern web components on reactive state semantic graphs. Passionate about exploring unconventional methods in technology development to shape a better future.
π