Co je PolymerJs a proč byste to měli vědět

Při vytváření webové aplikace se vždy diskutuje mezi nejlepšími frameworky, jako je Angular nebo React nebo Vue, a proč je každý z nich lepší nebo horší než ten druhý. Ale jsem tu, abych představil něco mnohem univerzálnějšího, kompatibilnějšího a snazšího se naučit:PolymerJs .

Co je PolymerJs?

Polymer je projekt, který vám pomůže uvolnit plný potenciál webu. Jedná se o knihovnu a sadu nástrojů pro používání WebComponents a vytváření progresivních webových aplikací (PWA).

Ale co je to WebComponent a proč má takový potenciál?

Skvělá otázka, můj mladý padawane. Nechám na to odpovědět MDN (bible vývojáře):

Vytvoření opakovaně použitelného Hello World

Pro dnešek dost teorie. Mnohem více se naučíte, když prsty stisknete klávesy. Pojďme vytvořit naši první opakovaně použitelnou komponentu s pomocí Polymeru, abyste viděli, jak snadné to je a jak dobře to funguje.

Abychom mohli začít, potřebujeme několik nástrojů, které již možná máte nainstalované:

  • NodeJs
  • Git
  • npm

Nyní, když máme základy pro vývoj webu, pojďme nainstalovat Polymer CLI:

npm install -g polymer-cli@next

a naklonujte původní příklad:

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

Jakmile to uděláte, je čas vyndat Polymer na otočení:

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

Když nyní přejdete na http://127.0.0.1:8081, měli byste vidět krásnou minimalistickou obrazovku Hello World. To, co vidíte, je opakovaně použitelná součást, pojďme se na to podívat:

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);

Pro ty, kteří už React znají, je to jako doma. Máme konstruktor s parametrem who Přiřadím ji k interní vlastnosti stejného jména. Moje šablona je HTML kód s CSS, který vítá to, co mu bylo předáno v proměnné who . Nakonec pojmenuji svou komponentu a nazvu ji hello-world, abychom ji mohli zobrazit pouhým provedením <hello-world who="there!"></hello-world> Což je přesně to, co dělám z indexu:

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);

To je vše, zajímavé body, které je třeba mít na paměti, jsou:

  • WebComponents jsou univerzální, nevyžadují žádnou knihovnu a lze je zobrazit v libovolném prohlížeči
  • Komponenty, které vytvoříme, jsou opakovaně použitelné a můžeme zde vidět mnoho dalších vytvořených ostatními
  • Aplikace můžeme vytvářet pouze s touto knihovnou

Připraveno pro mě, nyní mě sledujete

Doufám, že vám to posloužilo k tomu, abyste se naučili něco nového, nyní je řada na vás, abyste pokračovali v učení a prohlubování. Děkujeme, že jste zde.

S pozdravem, Ariel Mirra.

instagram | linkovaný | další projekty