o introducere în Lightning Web Components

în Salesforce, Lightning Web Components (LWC) sunt o schimbare revoluționară în paradigma de programare a platformei lightning. Dacă sunteți nou în platforma Lightning și ați dezvoltat soluții în afara Salesforce cu ajutorul HTML și JavaScript, atunci veți găsi că LWC este o bucată de tort. În acest blog, vom acoperi următoarele aspecte:

• ce este LWC?
• de ce LWC?
• Ce zici de Aura?
• de unde să încep?
• structura LWC

ce sunt componentele Lightning Web?

LWC este un nou model de programare pentru a dezvolta componente Salesforce lightning. Este un cadru UI care este construit folosind HTML nativ și JavaScript modern. Folosește standarde de componente Web de bază și folosește elemente personalizate, șabloane, decoratori, module, shadow DOM și alte construcții de limbi noi disponibile în ECMAScript 7 și nu numai.

Figura 1: 2019 stiva web

componentele Lightning au putut fi dezvoltate anterior folosind cadrul componentei aura. Acum avem un nou cadru pentru a dezvolta aceleași componente lightning.

de ce LWC?

trebuie să înțelegem de ce Salesforce a introdus LWC unde am avut deja cadrul componentei Aura. Pentru aceasta, trebuie să ne întoarcem la 2014 și trebuie să aruncăm o privire la această stivă web 2014.

în 2014, când Lightning Components framework a fost lansat împreună cu modelul de programare Aura, standardele web au oferit doar o bază limitată pentru stiva completă de care dezvoltatorii au nevoie pentru a construi aplicații web la scară largă, adică. un motor de randare, elemente standard, evenimente și un limbaj de bază (ECMAScript 5).

elementele cheie, cum ar fi un model de componente, șabloane, module și shadow DOM, lipsesc din standardele web.

Figura 2: stiva web 2014

aceasta înseamnă că standardele web sau stiva web din 2014 nu au fost suficient de puternice pentru a ne ajuta să creăm componente UI. În același timp, multe cadre diferite au intrat în imagine, cum ar fi Angular, React și Aura. Toate aceste cadre au venit cu aceste elemente cheie lipsă de care aveam nevoie pentru a crea componente UI.

acum, din 2014-2019, au existat multe îmbunătățiri în stiva web sau în Motorul nativ al browserului web.

Figura 3: transformarea stivei web

puteți vedea șabloanele, elementele personalizate și modulele shadow DOM. Toate fac parte din stiva web în sine. Aceasta înseamnă că cea mai recentă stivă web este suficient de puternică pentru a ne ajuta să creăm aceste componente UI. Nu avem nevoie de un strat cadru gros între ele, care ar putea afecta performanța componentelor noastre. Acesta este motivul din spatele introducerii cadrului LWC. Majoritatea caracteristicilor LWC fac parte din stiva web în sine și doar câteva lucruri depind acum de cadre. LWC, de asemenea, vine cu componente lightning de bază, toate acele 70+ componente de bază care fac parte din cadrul componentei Aura au fost convertite în componente Web Lightning, și toate fac parte din cadrul LWC. Putem folosi aceste componente de bază pentru a proiecta în componentele noastre UI.

cu puterea celei mai recente stive web, LWC vine cu multe avantaje diferite față de componentele aura, după cum urmează:

1. performanță mai bună
2. standarde web moderne
3. compatibil cu componentele Aura
4. site-uri de încărcare mai rapide
5. securitate mai bună, testare mai bună și compatibilitate mai bună a browserului
6. ușurință de dezvoltare

ce zici de Aura?

trebuie să vă întrebați că, din moment ce LWC este aici, ce se va întâmpla cu Aura? Va dispărea?

răspunsul este “nu”, deoarece LWC și Aura se potrivesc perfect unul pentru celălalt. Puteți pune LWC-ul și componentele Aura pe aceeași pagină și nu veți observa nicio diferență acolo, deoarece LWC-ul dvs. poate vorbi cu componenta Aura, iar componenta Aura poate vorbi și cu LWC-ul dvs. Puteți include chiar LWC în interiorul unei componente Aura în cazul în care vice-versa nu este adevărat, deoarece nu doriți să includeți un cadru personalizat într-un cadru generic, care este un LWC.

Figura 4: Interoperabilitatea Aura și LWC

privind această imagine, veți observa că atât LWC, cât și Aura au împărtășit aceleași evenimente de browser, elemente standard și mecanism de redare. Diferența este că Aura a fost construită pe ECMAScript 5. LWC este construit pe cea mai recentă versiune ECMAScript, care este ECMAScript 7. Ambele împărtășesc caracteristicile esențiale Salesforce, cum ar fi dulapul de iluminat, serviciile de date Lightning și componentele Lightning de bază.

pentru a rezuma, LWC este un nou mod de a vă dezvolta componentele lightning. Aceasta nu înseamnă că Aura Component framework se întâmplă oriunde. Puteți utiliza în continuare modelul de programare Aura pentru a crea componentele UI dacă sunteți mai familiarizați cu cadrul componentei Aura. Dar dacă începeți chiar acum sau dacă creați componente noi de aici înainte, v – aș sugera să utilizați lwc, deoarece vine cu o mulțime de avantaje diferite – cum ar fi o performanță mai bună a componentelor-și utilizează toate caracteristicile stivei dvs. web. Este întotdeauna mai bine să utilizați LWC peste Aura pentru noile componente, dar nu trebuie să migrați componentele Aura existente la un LWC de acum.

de unde să încep?

pentru a crea și dezvolta LWC și pentru a utiliza caracteristicile lor puternice și beneficiile de performanță, trebuie să configurați Salesforce DX. Spre deosebire de componentele Aura, dezvoltarea componentelor LWC în consola pentru dezvoltatori nu este posibilă. Trebuie să-l scrie la nivel local și apoi împingeți-l la org dumneavoastră. Făcând acest lucru, va trebui să configurați mediul pentru dezvoltatori. Aveți nevoie de un set de instrumente precum Visual Studio Code, Salesforce Command Line Interface și un Org.

iată câțiva pași recomandați:

1. instalați codul VS și configurați-l pentru dezvoltarea Salesforce. Puteți urmări acest modul Trailhead.
2. obțineți un exemplu de cod ușor de înțeles pentru aproape toate cazurile de utilizare aici.
3. pentru mai multe probe, vizitați aici.
4. dezvoltați singur un LWC și încercați codul rulându-l aici.
5. cel mai important, completați începeți cu LWC Trailmix.

structura componentelor LWC

cum se formează un LWC?

Similar cu o componentă Aura, conținutul principal al unui LWC este, de asemenea, HTML și JavaScript. Există conținut opțional, cum ar fi CSS. Dar, pe lângă acestea pentru LWC, este inclus și un fișier de configurare XML, care definește valorile metadatelor pentru componentă.

Figura 5: structura fișierului LWC

toate aceste nume de fișiere ar trebui să se potrivească cu numele componentei. Dosarul și fișierele trebuie să respecte câteva reguli de denumire, după cum urmează:

• trebuie să înceapă cu o literă mică
• trebuie să conțină numai caractere alfanumerice sau de subliniere
• trebuie să fie unic în spațiul de nume
• nu poate include spațiu alb
• nu se poate termina cu un subliniere
• nu poate conține un cratimă (liniuță)

structura fișierului LWC ar arăta astfel:

acum, să acoperim toate aceste fișiere unul câte unul:

HTML

• are o etichetă rădăcină< șablon > care conține componenta HTML
• când se face, < șablon > tag-ul este înlocuit cu <namespace-component-name>

JavaScript:

• pentru a importa funcționalitatea declarată într-un modul, utilizați instrucțiunea import.
• pentru a permite altor coduri să utilizeze funcționalitatea într-un modul, utilizați instrucțiunea export.
• LightningElement este un înveliș personalizat al elementului HTML standard și îl extindem în componentă și export.

configurare:

• fișier XML care definește valorile de configurare a metadatelor pentru componenta
• setăm < ținte> pentru a implementa componente pentru diferite pagini, cum ar fi pagina aplicației, pagina de înregistrare etc.

CSS:

• pentru a modela o componentă.
• foaia de stil se aplică automat.

fișierele pe care le – am discutat-cum ar construi componenta cu aceste aspecte?

componenta UI:

puteți încerca să construiți această componentă în configurarea codului VS și să o implementați în org. Dacă nu ați configurat codul VS încă, atunci nu vă faceți griji. Salesforce oferă, de asemenea, un loc de joacă pentru LWC – puteți încerca această componentă aici.

acesta este cel mai bun moment pentru a începe cu componentele Lightning Web, care oferă puterea celui mai recent standard web, performanțe mai bune și interoperabilitate cu componentele Aura.

puteți consulta linkurile de mai jos pentru a afla mai multe despre componentele Web Lightning.

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

despre autor

Sagar Zade este consultant tehnic asociat la Perficient. Este administrator certificat salesforce, constructor de aplicații, dezvoltator de platforme și dezvoltator de platforme certificat Vlocity. El este dornic să învețe și să exploreze noile tehnologii utilizate în salesforce și încântat să împărtășească cunoștințele.

mai multe de la acest autor