Share
Webcomponenten worden momenteel en enthousiast besproken als een aanstaande "tektonische verschuiving voor webontwikkeling" met de belofte om het webontwerplandschap permanent te veranderen. Grote spelers stappen vooruit om webcomponenten werkelijkheid te maken. Zowel Google als Mozilla introduceren nu al native browser-ondersteuning.
Wat zijn webcomponenten die u vraagt? In een notendop geven webcomponenten u een manier om uw eigen aangepaste HTML-elementen te maken die vrijwel alles kunnen doen wat u hen wilt. In plaats van het laden van uw sites met uitgebreide markup, lange scripts en herhalende code, verpakt u alles in mooie, nette kleine aangepaste HTML-elementen.
De eenvoudigste manier om te begrijpen hoe webonderdelen aangepaste HTML-elementen toestaan, is om eerst te kijken naar een bestaand element dat we al kennen van HTML5: het label. Met behulp van dit element kun je een video plaatsen met slechts een paar coderegels, bijvoorbeeld:
U ziet mogelijk slechts enkele HTML-regels hierboven, maar hier is wat element ziet er echt uit als achter de schermen:
Standaard verbergt de browser al die uitgebreide code zodat je hem niet hoeft te zien of je zorgen hoeft te maken over het schrijven van het bericht wanneer je een video wilt plaatsen. Je slaat gewoon in je en
Eerder konden alleen browser-leveranciers op deze manier elementen maken. Maar stel je voor dat je dezelfde aanpak zelf zou kunnen gebruiken met andere soorten inhoud?
Neem bijvoorbeeld een diavoorstelling met afbeeldingen. Meestal hebt u een paar rondes geneste div's nodig met specifieke klassennamen om de presentatie af te wikkelen, elke dia in te pakken en bijschriften en miniaturen toe te voegen. Je zou ook een algemene diashow-opties moeten instellen voor zaken als dia-overgangseffecten via enkele inline jQuery / JavaScript.
Wat als je dit allemaal zou kunnen overslaan en in plaats daarvan gewoon gebruik maken van:
Met webcomponenten is dat precies wat u kunt doen.
Als u een beknopte, eenvoudig te gebruiken methode wilt bieden voor het plaatsen van inhoud die anders opgeblazen en onhandig zou zijn, kunt u doorgaan en uw eigen webcomponent maken.
Webcomponenten kunnen ook eenvoudig worden gedeeld, zodat ontwikkelaars aan boord kunnen gaan is er een goede gok dat je gewoon een vooraf gebouwde webcomponent kunt pakken voor de meest voorkomende projectvereisten. We zien nu al vrij gedeelde componenten voor alles, van spraakherkenning ...
voor presentatiebouwers ...
om QR-code te genereren.
Laten we eens kijken naar wat zich achter het gordijn van webcomponenten bevindt.
Webcomponenten, zoals ze op dit moment bestaan, bestaan uit vier delen:
Aangepaste elementen zijn precies zoals ze klinken: elementen die u kunt benoemen naar keuze en werken op elke gewenste manier. En als ik iets zeg, meen ik het echt. Ik presenteer bijvoorbeeld de
Live demo - beweeg over de balkAangepaste elementen worden gedeclareerd, in hun eenvoudigste vorm, zoals zo:
...
Wanneer u een aangepast element maakt, kunt u dit helemaal opnieuw doen, of u kunt een bestaand HTML-element uitbreiden, zoals en geef het bijvoorbeeld de gewijzigde functionaliteit of presentatie die u nodig hebt.
...
Notitie: het is de moeite waard erop te wijzen dat de
De Shadow DOM is echt het kernaspect van de werking van webcomponenten. Eerder keken we naar de HTML5 element en liet zien dat er, hoewel je slechts een paar regels code ziet, in werkelijkheid nogal wat code verborgen zit. De plaats waar deze verborgen code leeft, wordt de "Shadow DOM" genoemd.
Verkopers van browsers gebruiken deze schaduw-DOM al jaren om elementen zoals invoer, audio, video enzovoort te implementeren. Via webcomponenten kan het nu door elke ontwikkelaar worden gebruikt.
Het algemene idee is dat je alle code opneemt die niet echt gezien hoeft te worden tijdens de opmaakplaatsing en deze verduistert in de Schaduw DOM, zodat deze niet in de weg zit. Hierdoor hoeft u alleen maar te handelen met de relevante informatie, bijvoorbeeld de hoogte, breedte en bronbestandslocaties bij gebruik van de element.
Een van de gaafste dingen over werken met de Shadow DOM is dat elke instantie zijn eigen kleine wereld is die op zichzelf staat. Dus als je styling en scripts in het element hebt, zullen ze niet per ongeluk uitlekken en effect hebben op iets anders op de pagina.
Omgekeerd hebben CSS en JavaScript elders op de pagina geen effect op uw webcomponent, met uitzondering van stijlhaken die u specifiek kunt maken om externe CSS-targeting toe te staan. Dat betekent dat u zich geen zorgen meer hoeft te maken over het namaken van uw ID- en klassenamen om conflicten te voorkomen.
Als je wilt zien hoe de schaduw-DOM eruit ziet, is dat eenvoudig. Zorg ervoor dat je een up-to-date installatie van Chrome uitvoert, open de Dev Tools, klik op het tandwielpictogram om instellingen te openen en vink het vakje aan Toon gebruiker-agentschaduw DOM:
Wanneer u vervolgens een element met een schaduw-DOM inspecteert, ziet u de volledige code. Probeer het uit door de
Voor een volledig overzicht van de DOM-schaduwchecks: Intro to Shadow DOM
We hebben al besproken hoe aangepaste elementen toestaan dat alleen de betreffende informatie wordt gefocust, terwijl alle resterende code wordt verduisterd in de schaduw-DOM. Een sjabloon binnen een webcomponent bevat alle presentatie-elementen van die resterende code.
Als onderdeel van de code die de webcomponent definieert, de tags ... worden geplaatst, en tussen die labels in om het even welke HTML en CSS waarvoor de component nodig is.
Bekijk bijvoorbeeld de code die de. Heeft gemaakt tag is op regel 4 en het sluiten ervan tag staat op regel 201. Tussen deze tags staat alle CSS die verantwoordelijk is voor het maken van de positionering en animatie en de HTML waarmee elk van de afbeeldingen wordt geplaatst.
Met HTML-import kunt u alles wat hierboven is beschreven opnemen en op uw pagina laten werken. Webcomponenten worden gedefinieerd in een extern HTML-bestand, zodat het bestand moet worden geïmporteerd om een aangepast element te laten werken. HTML-invoer verwerkt dit via een tag, die u bekend zult zijn met het importeren van externe CSS-bestanden.
Bijvoorbeeld, voordat u de
De mogelijkheden die door webcomponenten worden geboden, maken het idee van duiken als eerste in gebruik ervan zeer aantrekkelijk, maar op dit moment is de browserondersteuning nog niet werkbaar. De huidige status van ondersteuning ziet er als volgt uit:
http://jonrimmer.github.io/are-we-componentized-yet/Native ondersteuning wordt momenteel geïmplementeerd voor Chrome, Opera en Firefox, maar is nog niet voltooid. IE en Safari hebben hun plannen nog niet bekendgemaakt, maar er wordt gedacht dat gezien de meerderheid van de browsers webcomponenten zullen ondersteunen, de andere browsers waarschijnlijk zullen volgen.
Als je nu wilt gaan werken met webcomponenten, moet je nu een van de beschikbare polyfills gebruiken. Het goede nieuws is dat twee van de meest populaire oplossingen worden gemaakt door Google en Mozilla, dus we kunnen enige consistentie verwachten met de manier waarop native support uiteindelijk zal werken.
Het is moeilijk om niet te leunen op het gebruik van Polymer. Chrome is nu de meest gebruikte browser en u kunt ervan uitgaan dat bij de ontwikkeling rekening zal worden gehouden met de manier waarop de code van het webonderdeel door Google wordt geïndexeerd.
Polymer wordt geleverd met een volledige bibliotheek met vooraf gebouwde webcomponenten. Het omvat de "Polymer Core-elementen" die functioneel zijn georiënteerd en de "Paper-elementen" die ontwerpgericht zijn.
Bij het maken van aangepaste elementen met Polymeer, in plaats van het formaat te gebruiken
Polymer beschrijft zichzelf als "in developer preview" in plaats van absoluut productieklaar, maar ze zeggen ook
... ondanks het label hebben veel mensen al succes gehad met het gebruik van Polymer in de productie.
Als u rekening moet houden met IE9, dat naar schatting ongeveer 1,9% tot 5,11% marktaandeel heeft, heeft u pech met Polymer. U kunt echter nog steeds met de X-tags van Mozilla gaan.
X-Tags is een JavaScript-bibliotheek gemaakt door Mozilla die op dit moment een voordeel heeft ten opzichte van Polymer doordat de ondersteuning voor browsers breder is. Als dat een belangrijke overweging voor u is, kan X-Tags uw voorkeur hebben.
Op dit moment, als IE8 moet worden ondersteund, zijn webonderdelen waarschijnlijk niet voor jou omdat de beschikbare polyfills IE9 + ondersteunen. Schattingen zijn dat IE8-gebruikers ongeveer 2,1% tot 3,82% hebben, maar als uw eigen statistieken anders zeggen, moet u een oordeel vellen over hoe ver terug uw browserondersteuning moet rekken.
Een mogelijke manier om uzelf voor te bereiden op de overstap naar het gebruik van webcomponenten, is om voorlopig met Ember.js of AngularJS te werken. Beide hebben hun eigen systemen voor het maken van componenten en beloven beide om over te gaan naar het gebruik van native webcomponentcode wanneer deze volledig beschikbaar wordt.
Ik hoop dat je het leuk vond om dit overzicht te lezen van wat webcomponenten zijn en waarom je het zou moeten schelen! Er is nog veel meer om in te duiken, maar met deze grondbeginselen behandeld, hebben we volop gelegenheid voor zelfstudies over het daadwerkelijk bouwen van aangepaste webcomponenten. Wat denk je? Onder welke omstandigheden zou je jezelf kunnen zien gebruiken?
Accentsconagua