An Introduction to Lightning Web Components

In Salesforce, Lightning Web Components (LWC) are a revolutionary change in the lightning platform programming paradigm. Jos olet uusi Lightning Platform ja olet ollut kehittää ratkaisuja ulkopuolella Salesforce avulla HTML ja JavaScript, niin löydät LWC on pala kakkua. Tässä blogissa, aiomme kattaa seuraavat näkökohdat:

• mitä LWC on?
• miksi LWC?
• entä Aura?
• mistä aloittaa?
• LWC-rakenne

Mitä ovat Lightning Web-komponentit?

LWC on uusi ohjelmointimalli, jolla kehitetään Salesforce lightning-komponentteja. Se on KÄYTTÖLIITTYMÄKEHYS, joka on rakennettu käyttäen natiivia HTML: ää ja modernia JavaScriptiä. Se käyttää keskeisiä web-komponenttistandardeja ja hyödyntää mukautettuja elementtejä, malleja, sisustajia, moduuleja, shadow DOM: ia ja muita ECMAScript 7: ssä ja sen ulkopuolella saatavilla olevia uusia kielirakenteita.

Kuva 1: 2019 web stack

Lightning-komponentteja on aiemmin voitu kehittää aura-komponenttikehyksen avulla. Nyt meillä on uudet puitteet kehittää samoja salamakomponentteja.

miksi LWC?

meidän on ymmärrettävä, miksi Salesforce on ottanut käyttöön LWC: n, jossa meillä oli jo Aura-Komponenttikehys. Tätä varten meidän on palattava vuoteen 2014 ja tarkasteltava tätä 2014 web-pinoa.

vuonna 2014, Kun Lightning Components framework lanseerattiin yhdessä Aura-ohjelmointimallin kanssa, web-standardit tarjosivat vain rajallisen pohjan sille täydelle pinolle, jonka kehittäjät tarvitsevat suurten verkkosovellusten rakentamiseen, ts. renderöintimoottori, vakioelementit, tapahtumat ja ydinkieli (ECMAScript 5).

verkkostandardeista puuttuvat kaikki keskeiset elementit, kuten komponenttimalli, mallipohjat, moduulit ja varjodom.

kuva 2: 2014 web-pino

tämä tarkoittaa, että web-standardit tai web-pino vuonna 2014 eivät olleet tarpeeksi tehokkaita käyttöliittymäkomponenttien luomiseen. Samalla kuvaan tuli monia erilaisia kehyksiä, kuten kulmikas, React ja Aura. Kaikissa näissä kehyksissä oli puuttuvia avainelementtejä, joita tarvitsimme käyttöliittymäkomponenttien luomiseen.

nyt vuosina 2014-2019 nettipinossa tai natiiviselainmoottorissa on ollut paljon parannettavaa.

kuva 3: web stack-muunnos

näet mallipohjat, muokatut elementit ja shadow DOM-moduulit. Ne kaikki ovat osa web pino itse. Tämä tarkoittaa, että uusin web-pino on tarpeeksi tehokas auttamaan meitä luomaan nämä KÄYTTÖLIITTYMÄKOMPONENTIT. Emme tarvitse paksua kehyskerrosta väliin, mikä voi vahingoittaa komponenttimme suorituskykyä. Se on syy LWC-kehyksen käyttöönottoon. Suurin osa lwc: n ominaisuuksista on osa itse web-pinoa, ja vain muutama asia riippuu nyt kehyksistä. LWC: n mukana tulee myös base lightning-komponentit, kaikki ne 70+ perusosat, jotka ovat osa Aura Component Frameworkia, on muunnettu Lightning Web-komponenteiksi, ja ne kaikki ovat osa LWC-kehystä. Voimme käyttää näitä peruskomponentteja suunnittelemaan KÄYTTÖLIITTYMÄKOMPONENTTEJAMME.

uusimman web-pinon voimalla LWC: llä on monia erilaisia etuja aura-komponentteihin nähden seuraavasti:

1. parempi suorituskyky
2. nykyaikaiset verkkostandardit
3. yhteensopiva Aura-komponenttien kanssa
4. nopeammat latauspaikat
5. parempi turvallisuus, parempi testaus ja parempi selainyhteensopivuus
6. kehityksen helppous

entä Aura?

varmaan ihmettelet, että kun kerran LWC on täällä, niin mitä auralle tapahtuu? Häviääkö se?

vastaus on “ei”, koska LWC ja Aura sopivat täydellisesti yhteen keskenään. Voit laittaa LWC: n ja Aura-komponentit samalle sivulle, etkä huomaa mitään eroa siellä, koska LWC: si voi puhua Aura-Komponentillesi ja Aura-komponenttisi voi myös puhua LWC: llesi. Voit jopa sisällyttää LWC sisällä Aura-komponentti, jossa päinvastoin ei ole totta, koska et halua sisällyttää mukautetun kehyksen sisällä yleinen kehys, joka on LWC.

Kuva 4: Auran ja lwc: n yhteentoimivuus

tätä kuvaa katsoessasi huomaat, että sekä LWC: llä että auralla oli samat selaintapahtumat, standardielementit ja renderointimekanismi. Erona on, että Aura rakennettiin ECMAScript 5: lle. LWC perustuu uusimpaan ECMAScript-versioon, joka on ECMAScript 7. Molemmat jakavat Salesforcen olennaiset ominaisuudet, kuten Lighting Locker, Lightning Data Services ja Base Lightning-komponentit.

yhteenvetona voidaan todeta, että LWC on uusi tapa kehittää salamakomponentteja. Se ei tarkoita, että Aura-Komponenttikehys olisi menossa mihinkään. Voit silti käyttää Aura-ohjelmointimalliasi käyttöliittymäkomponenttien luomiseen, jos tunnet Aura-Komponenttikehyksen paremmin. Mutta jos aloitat juuri nyt tai jos luot uusia komponentteja tästä eteenpäin, ehdotan, että käytät LWC: tä, koska siinä on paljon erilaisia etuja – kuten parempi komponenttien suorituskyky – ja se hyödyntää kaikkia web-pinon ominaisuuksia. On aina parempi käyttää LWC: tä Auran yli uusille komponenteille, mutta sinun ei tarvitse siirtää nykyisiä Aura-Komponenttejasi LWC: hen.

mistä aloittaa?

lwc: n luominen ja kehittäminen sekä niiden tehokkaiden ominaisuuksien ja suorituskyvyn hyödyntäminen edellyttää Salesforce DX: n perustamista. Toisin kuin Aura Components, LWC-komponenttien kehittäminen kehittäjäkonsolissa ei ole mahdollista. Sinun täytyy kirjoittaa se paikallisesti ja sitten työntää se org. Näin sinun tulee määrittää kehittäjäympäristösi. Tarvitset joukon työkaluja, kuten Visual Studio Code, Salesforce Komentoriviliitäntä, ja Org.

Tässä muutamia suositeltuja vaiheita:

1. Asenna VS-koodi ja aseta se Salesforcen kehittämiseen. Voit seurata tätä Trailhead-moduulia.
2. saat helposti ymmärrettävän näytekoodin lähes kaikkiin käyttötapauksiin täältä.
3. lisää näytteitä löydät täältä.
4. kehitä LWC itse ja kokeile koodia ajamalla se täällä.
5. tärkeintä on, että saat aloitettua LWC Trailmixin avulla.

LWC-komponenttirakenne

miten LWC muodostuu?

Aura-komponentin tapaan lwc: n pääsisältö on myös HTML ja JavaScript. On valinnaista sisältöä, kuten CSS. Mutta sitten näiden lisäksi LWC: lle on myös XML-konfiguraatiotiedosto, joka määrittelee komponentin metatietoarvot.

kuva 5: LWC-tiedostorakenne

kaikki nämä tiedostonimet on sovitettava komponentin nimeen. Kansion ja tiedostojen on noudatettava joitakin nimeämissääntöjä seuraavasti:

• on aloitettava pienellä kirjaimella
• saa sisältää ainoastaan aakkosnumeerisia tai alaviivoja
• on oltava ainutkertainen nimiavaruudessa
• ei voi sisältää tyhjämerkkejä
• ei voi päättyä alaviivaan
• ei voi sisältää alaviivaa
• ei voi sisältää alaviivaa
• ei voi sisältää väliviiva (viiva)

LWC-tiedostorakenne näyttäisi tältä:

käydään nämä tiedostot läpi yksitellen.:

HTML

• is a root tag <template> that includes your component ‘ s HTML
• When it renders, the <template> tag is replaced with <namespace-component-name>

JavaScript:

• jos haluat tuoda moduulissa ilmoitettuja toimintoja, käytä tuontilausuntoa.
• jos haluat antaa muiden koodien käyttää moduulin toimintoja, käytä vientiilmoitusta.
• LightningElement on mukautetun kääre standardin HTML elementti ja laajennamme sitä komponentti ja vienti.

Asetukset:

• XML-tiedosto, joka määrittää metatietojen määritysarvot komponentille
• asetimme < tavoitteet> ottamaan käyttöön komponentteja eri sivuille, kuten sovellussivu, Tallennussivu jne.

CSS:

• muotoilemaan komponentin.
• tyylilevy levitetään automaattisesti.

tiedostot, joista olemme keskustelleet-miten komponentti rakentaisi nämä näyttää?

komponentti UI:

voit yrittää rakentaa tätä komponenttia VS-koodin asetukset ja ottaa sen käyttöön org. Jos et ole setup VS koodi vielä, niin älä huoli. Salesforce tarjoaa myös leikkikentän LWC: lle-voit kokeilla tätä komponenttia täällä.

tämä on paras aika aloittaa Lightning Web-komponenteilla, jotka tarjoavat uusimman web-standardin tehon, paremman suorituskyvyn ja yhteentoimivuuden Aura-komponenttien kanssa.

alla olevista linkeistä voit lukea lisää Lightning Web-komponenteista.

1. https://developer.salesforce.com/docs/component-library/documentation/en/lwc
2. https://developer.salesforce.com/docs/component-library/overview/components
3. https://trailhead.salesforce.com/en/content/learn/projects/quick-start-lightning-web-components
4. https://trailhead.salesforce.com/en/users/strailhead/trailmixes/lightning-web-components
5. https://www.lightningdesignsystem.com/
6. https://trailhead.salesforce.com/content/learn/projects/quick-start-lightning-web-components/set-up-visual-studio-code

tietoja tekijästä

Sagar Zade on tekniikan Apulaiskonsultti Perficientissä. Hän on Salesforce certified Administrator, App Builder, Platform Developer, ja Vlocity certified Platform Developer. Hän on innokas oppimaan ja tutustumaan Salesforcessa käytettäviin uusiin teknologioihin ja jakaa tietoa innoissaan.

lisää tästä tekijästä