Wat is PolymerJs en waarom zou je het moeten weten?

Bij het maken van een webapplicatie is de discussie altijd tussen de beste Frameworks zoals Angular of React of Vue en waarom de een beter of slechter is dan de ander. Maar ik ben hier om iets te presenteren dat veel universeler, compatibeler en gemakkelijker te leren is:PolymerJs .

Wat is PolymerJs?

Polymer is een project dat u helpt het volledige potentieel van internet te ontsluiten. Het is een bibliotheek en toolbox voor het gebruik van WebComponents en het bouwen van Progressive Web Applications (PWA).

Maar wat is een WebComponent en waarom heeft het zoveel potentieel?

Uitstekende vraag mijn jonge Padawan. Ik laat MDN (de ontwikkelaarsbijbel) het voor me beantwoorden:

Een herbruikbare Hello World maken

Genoeg theorie voor vandaag. Er wordt veel meer geleerd wanneer vingers op toetsen drukken. Laten we ons eerste herbruikbare onderdeel maken met behulp van Polymer, zodat u kunt zien hoe gemakkelijk het is en hoe goed het werkt.

Om te beginnen hebben we een paar tools nodig die je misschien al hebt geïnstalleerd:

  • NodeJ's
  • Git
  • npm

Nu we de basis voor webontwikkeling hebben, gaan we de Polymer CLI installeren:

npm install -g polymer-cli@next

en kloon het eerste voorbeeld:

git clone https://[email protected]/westdabestdb/polymerapp.git

Zodra je dit hebt gedaan, is het tijd om Polymer eens uit te proberen:

cd polymerapp
polymer serve
//applications: http://127.0.0.1:8081
//reusable components: http://127.0.0.1:8081/components/polymerapp/

Als je nu naar http://127.0.0.1:8081 gaat, zou je een mooi, minimalistisch Hello World-scherm moeten zien. Wat u ziet is een herbruikbaar onderdeel, laten we eens kijken:

import {
    PolymerElement,
    html
} from '@polymer/polymer';
class HelloWorld extends PolymerElement {

    constructor(who) {
        super();
        this.who = who;
    }

    static get properties() {
        return {
            who: {
                type: String,
                value: 'World'
            }
        };
    }

    static get template() {
        return html`
        <div class="app-container">
            Hello [[who]]
        </div>

        <style>
            .app-container {
                text-align: center;
                font-family: Arial, Helvetica, sans-serif;
                font-weight: bold;
                font-size: 5em;
                height: 100vh;
                width: 100vw;
                background-color: #e3e3e3;
                display: flex;
                align-items: center;
                justify-content: center;
            }
        </style>
        `;
    }
}

customElements.define('hello-world', HelloWorld);

Voor degenen die React al kennen, dit is alsof je thuis bent. We hebben een constructor met een parameter genaamd who Ik wijs het toe aan een interne eigenschap met dezelfde naam. Mijn sjabloon is HTML-code met CSS die begroet wat eraan is doorgegeven in de variabele who . Ten slotte geef ik mijn component een naam en noem ik het hello-world, zodat we het kunnen weergeven door gewoon <hello-world who="there!"></hello-world> te doen Dat is precies wat ik doe uit de index:

import './HelloWorld.js'
class PolymerApp extends PolymerElement {

    static get properties() {
        return {
            who: {
                type: String,
                value: 'World'
            }
        }
    }
    static get template() {
        return html `
        <hello-world who="there!"></hello-world>
        `;
    }
}
customElements.define('polymer-app', PolymerApp);

Dat is het, de interessante punten om in gedachten te houden zijn:

  • WebComponents zijn universeel, vereisen geen bibliotheek en kunnen in elke browser worden weergegeven
  • De componenten die we maken zijn herbruikbaar en we kunnen hier nog veel meer zien die door anderen zijn gemaakt
  • We kunnen alleen applicaties maken met deze bibliotheek

Klaar voor mij, nu volg je

Ik hoop dat het je heeft gediend om iets nieuws te leren, nu is het jouw beurt om te blijven leren en verdiepen. Bedankt dat je hier bent.

Met vriendelijke groet, Ariel Mirra.

instagram | linkedin | andere projecten