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