Սկսում ենք ապե ջան. “Polymer”

Բարև. Ուզում եմ կարճ - կոնկրետ խոսամ Polymer - ի պրինցիպների մասին.

Ճիշտա հեսա կասեք “Էտքան յեքյա գիրք գրեցիր, բայց ուզում ես կարճ բացատրես?” ու ես կասեմ ` “Հա!”. Գրքի մեջ ուղղակի շատ էի խորացել ու ձեռի հետ էլ app ենք սարքում Polymer - ով. Եթե ուզում ես առնես գիրքս ` դավայծե. Ես մենակ ուրախ եմ :) http://amzn.to/29Tj9NF


Web Component - ներ

Polymer - ը օգտագործումա Web Component ներ: Կարումա Custom Element ներ սարքի, կարումա HTML Import անի, կարումա Template ներ օգտագործի ու կարումա Shadow DOM օգտագործեր (հիմա default-ը ShadyDom-ա). Իհարկե Պոլիմեռը էտ ամենը էնքանա հեշտացրել որ կարող ես նույնիսկ էս գլուխը չկարդալ ու անցնել միանգամից Պոլիմեռի գլխին :)

Բայց եթե ուզում ես նաև պատկերացում կազմես Web Componentների մասին, կարող ես շարունակել կարդալ.

Custom Elements

Էս մի հատկությունով կարում ես քո “սեփական” HTML էլեմենտը սարքես ու օգտագործես քո ծրագրի մեջ.

Օրինակ կարող ես սարքել ` <my-input type=”text”></my-input>. Տաս իրան քո ուզած սթայլերը, իրա առանձին ֆունկցիոնալ մասը ու ինչքան ուզես օգտագործես.

Ավելի մանրամասն խոսում եմ իմ YouTubeի վիդեոյում: https://www.youtube.com/watch?v=e5DTp-Ez8vc

Templates

Եթե աշխատել ես AngularJS-ով, KnockoutJS, BackboneJS ներով ուրեմն “Template” տերմինը պետքա որ ծանոթ լինի արդեն.

Template - ը մեռած HTML կոդա, որը կարող ես օգտագործել JavaScript - ով.

Template սարքելը դարձելա վաբշե հեշտ. Կարող ես ուղղակի <template> թեգ գրես քո HTMLի մեջ ու ինչ որ կա էտ թեգի մեջ կլինի ուղղակի ինեռտ մի բան, documentը ոչ load կանի էտ HTMLտ, ոչ էլ render.

<template id="my-own-template">
<p>This is a template.</p>
</template>
...
<script>
var template = document.querySelector('#my-own-temlate');
var content = template.content;
document.body.innerHTML = content.innerHTML;
<script/>

Էս վերևի օրինակում Թեմփլեյթ եմ սարքել. Հետո JavaScript ով վերցնում եմ Թեմփլեյթի եղած contentը ու ավելացնում bodyի մեջ. Ավելացնելուց հետո էտ contentը նոր load կլինի, մինչև էտ ինքը մեռած մաս էր.

HTML Imports

էս հատկությունով կարում եք ուրիշ HTML դոկումենտներ իմպոռտ անեք. Ամենաշատը Polymer ում էսա օգտագործվում.

Ունես լիքը կոմպոնենտներ, որոնք ուղղակի իմպոռտ են անում իրար.

Ոնց իմպոռտ անես ուրիշ դոկումենտ? Հեշտ!

<link rel="import" href="../paper-input/paper-input.html" />

~~~~~ Polymer ~~~~

Ինչա Պոլիմեռը? Պոլիմեռը գրադարանա, որը օգտագործումա Web Componentների հմտությունները Material Design ափփլիքեյշններ սարքելու համար.

  • Ինքը ունի ԼԻՔԸ պատրաստի էլեմենտներ որը կարաս օգտագործես.
  • Ինքը ունի API, որը օգտագործելով կարաս քո Էլեմենտները սարքես.
  • Իրանով շատ-շաաատ արագա աշխատելը. “Վախտին էլ BootStrapն էր տենց. Արագի մեջ կարայիր սայթ հավաքեիր”.

Ոնց օգտագործել Պոլիմեռի էլեմենտները?

Մտեք ստեղ ` https://elements.polymer-project.org/ ու կտեսնեք տարբեր բաժիններ. Ամեն բաժնում կան առանձին էլեմենտների հավաքածու.

Օրինակ ` Paper Element ների մեջ Material Design վերաբերվող էլեմենտներնա.

Ոնց օգտագործենք էտ էլեմենտը մեր HTMLում?

Եթե օգտագործում եք Bower. ուղղակի install արեք ձեր ուզած էլեմենտը.

bower install --save PolymerElements/paper-button

Իսկ ձեր HTMLի տեսքը կլինի սենց:

<head>
<link rel="import" href="bower_components/paper-button/paper-button.html" />
</head>
<body>
    <paper-button raised>Hello</paper-button>
</body>

Նույն ձևի ամեն էլեմենտը օգտագործելու համար, պետքա իմպոռտ անել, նոր օգտագործել HTMLի մեջ.

Custom Polymer Component

Ոնց ստեղծես քո անձնական Պոլիմեռ էլեմենտը?

Պետքա ստեղծել առանձին html ֆայլ ու օգտագործել Polymerի APIը.

<dom-module id="my-polymer-element">
<template>
<p>My name is {{name}} and I'm {{age}} year's old!</p>
</template>
<script>
Polymer({
is: 'my-polymer-element',
properties: {
name: {
value: 'Arshak'
},
age: {
type: Number,
value: 25
}
}
})
</script>
</dom-module>

Ցանկալիյա որ ֆայլի անունը լինի Էլեմենտի անունը որը որ ստեղծելու եք. Մեր դեպքում ` my-polymer-element.

Scriptի մեջ ինչպես տեսնում եք ` կանչում ենք Polymer ֆունցկիան, որի մեջ ասում ենք մեր նորաստեղծ էլեմենտի տվյալները.

is ը պետք է լինի նույն <dom-module> թեգի idն.

properties ի մեջ գրում ենք էն property ները որոնք պետքա պաս տանք հետագայում. Օրինակ, մեր կոմպոնենտը օգտագործելուց, կլինի`

<my-polymer-element name="Joe" age="18"><my-polymer-element/>

Իսկ մեր էլեմենտը կտպի ուղղակի ` “My name is Joe and I’m 18 years old.”.

Նույն պրինցիպով կարող եք Իմպոռտ անել ձեր նորաստեղծ էլեմենտը.

<link rel="import" href="my-polymer-element.html" />

Այսքանը. Հույսով եմ օգտակար գտնվեցի Polymer ի մասին սկզբնական գիտելիք տալով. Չնայած հենց իրենց կայքում այնքան տեղեկություն կա որ “Էլ դու սուս”.

Ես նույնպես աշխատել եմ Polymerի Paper Elementների վրա :) Օրինակ հենց paper-button էլեմենտի կոդի մեջ կարող եք տեսնել իմ ձեռագիրը. + ստեղծել եմ իմ անձնական էլեմենտները, որը հիմա առկա է GitHubում ու դուք էլ կարող եք օգտագործել.

Վիդեո էլեմենտ, ստեղծված իմ կողմից:

<paper-fab> մենյույի մնան, բայց որի մեջ կարող եք նույնիսկ submenuներ ավելացնել, էլի իմ կողմից ստեղծված:

Poly անունով app, որը գրել եմ գիրք գրելու ընթացքում, հենց գրքի մեջ օգտագործելու համար:

Էսքանը. Հլը որ. Հարցերի դեպքում, միշտ պատրաստ եմ օգնել!

Like what you read? Give Arshak Khachatrian a round of applause.

From a quick cheer to a standing ovation, clap to show how much you enjoyed this story.