Deoarece am definit mesajele să fie de tip poate , le permitem să fie nul sau nedefinit . Dar acest lucru nu ne dă dreptul de a efectua operații asupra acestuia (cum ar fi .length sau .map) fără să verificăm nul, deoarece dacă valoarea mesajelor este de fapt nulă sau nedefinită, atunci va apărea o eroare de tip atunci când vom încerca să operăm. aceasta.

Deci, să revenim și să ne actualizăm funcția de vizualizare la ceva de genul acesta:

Const MyComponent = (( mesaje, isFetching ): AppState) => ( if (isFetching) ( return ) else if (mesaje === null || mesaje === nedefinit) ( return

Beneficiul #7: Reduceți numărul de teste unitare

De exemplu, să revenim la funcția calculateAreas cu tipuri dinamice și gestionarea erorilor.

Const calculateAreas = (radii) => ( // Gestionează intrările nedefinite sau nule dacă (!radii) ( throw new Error("Argument lipsește"); ) // Gestionează intrările non-matrice dacă (!Array.isArray(radii) ) ( throw new Error("Argumentul trebuie să fie o matrice"); ) var zone = ; for (var i = 0; i< radii.length; i++) { if (typeof radii[i] !== "number") { throw new Error("Array must contain valid numbers only"); } else { areas[i] = 3.14 * (radii[i] * radii[i]); } } return areas; };
Dacă am fi programatori sârguincioși, am putea lua în considerare testarea parametrilor trecuți nevalidi pentru a verifica dacă aceștia sunt gestionați corect de programul nostru:

It("nu ar trebui să funcționeze - cazul 1", () => ( aștept(() => calculateAreas()).to.throw(Eroare); )); it("nu ar trebui să funcționeze - cazul 2", () => ( așteptați(() => calculateAreas(undefined).to.throw(Eroare); )); it("nu ar trebui să funcționeze - cazul 2", () => ( așteaptă(() => calculateAreas(„bună ziua”)).to.throw(Eroare); ));
… și așa mai departe. Dar este foarte probabil să uităm să testăm niște cazuri de margine – iar clientul nostru va fi cel care va descoperi problema. :(

Deoarece testele se bazează exclusiv pe situațiile pe care am venit să le testam, ele sunt existențiale și, în practică, sunt ușor de ocolit.

Pe de altă parte, când trebuie să setăm tipuri:

Const calculateAreas = (razele: Matrice ): Matrice => ( var zone = ; pentru (var i = 0; i< radii.length; i++) { areas[i] = 3.14 * (radii[i] * radii[i]); } return areas; };
... nu numai că obținem o garanție că scopul nostru corespunde realității, dar astfel de teste sunt pur și simplu mai fiabile. Spre deosebire de testele cu reguli de bază, tipurile sunt universale și mai greu de învins.

Dacă îl priviți în ansamblu, imaginea este următoarea: testele sunt bune pentru verificarea logicii, iar tipurile sunt bune pentru verificarea tipurilor de date. Când sunt combinate, suma pieselor produce un efect și mai mare.

Beneficiul #8: Instrumentul de modelare a domeniului

Să presupunem că aplicația oferă utilizatorului una sau mai multe metode de plată pentru a face achiziții pe platformă. Utilizatorului i se permite să aleagă dintre trei metode de plată (Paypal, Card de credit, Cont bancar).

Deci, mai întâi vom aplica aliasuri de tip pentru trei metode de plată:

Tastați Paypal = ( id: număr, tip: „Paypal” ); tip CreditCard = ( id: număr, tip: „CreditCard” ); tip Bank = ( id: număr, tip: „Bank” );
Acum puteți seta tipul PaymentMethod să fie un set disjunc cu trei cazuri:

Tip PaymentMethod = Paypal | Card de credit | Bancă;
Acum să creăm un model de stare pentru aplicația noastră. Pentru a menține lucrurile simple, să presupunem că aceste aplicații constau doar din metode de plată disponibile utilizatorului.

Tip Model = ( paymentMethods: Array };
Este acceptabil? Ei bine, știm că pentru a obține metodele de plată ale utilizatorului, trebuie să faceți o solicitare către API și, în funcție de rezultatul și stadiul procesului, aplicația poate accepta diferite state. În realitate, sunt posibile patru stări:

1) Nu am primit metode de plată.
2) Suntem în proces de obținere a metodelor de plată.
3) Am primit cu succes metode de plată.
4) Am încercat să obținem metode de plată, dar a apărut o eroare.

Dar tipul nostru simplu de model cu metode de plată nu acoperă toate aceste cazuri. În schimb, presupune că metodele de plată există întotdeauna.

Hmmmm. Există o modalitate de a construi un model astfel încât starea aplicației să ia una dintre aceste patru valori și numai ele? Să aruncăm o privire:

Tastați AppState = (tip: „NotFetched” ) | ( tip: „Preluare”) | ( tip: „Eșec”, eroare: E) | ( tip: „Succes”, Metode de plată: Matrice };
Am folosit tipul de set disjunct pentru a seta AppState la una dintre cele patru stări descrise mai sus. Observați cum folosesc proprietatea type pentru a determina în care dintre cele patru stări se află aplicația. Această proprietate de tip este cea care creează un set disjuns. Folosind-o putem analiza și stabili când avem metode de plată și când nu.

Veți observa, de asemenea, că trec tipul parametrizat E și D în starea aplicației. Tipul D va reprezenta metoda de plată a utilizatorului (Metoda de plată definită mai sus). Nu am setat tipul E să fie tipul nostru de eroare, așa că hai să facem asta acum:

Tastați HttpError = ( id: șir, mesaj: șir);
Acum puteți modela domeniul aplicației:

Tip Model = AppState ;
În general, semnătura pentru starea aplicației este acum AppState unde E are forma HttpError și D este PaymentMethod. Și AppState are patru (și doar aceste patru) stări posibile: NotFetched, Fetching, Failure și Success.

Găsesc astfel de modele de domenii utile pentru a gândi și a proiecta interfețe de utilizator conform anumitor reguli de afaceri. Regulile de afaceri ne spun că o aplicație poate fi doar într-una dintre aceste stări, iar acest lucru ne permite să expunem în mod explicit un AppState și să ne asigurăm că va fi doar într-una dintre aceste stări predefinite. Și când dezvoltăm conform acestui model (de exemplu, creând o componentă de vizualizare), devine absolut evident că trebuie să ne ocupăm de toate cele patru stări posibile.

În plus, codul se documentează în sine - doar uitați-vă la seturile disjunse și devine imediat clar cum este structurat AppState.

Dezavantajele utilizării tipurilor statice

Este important să înțelegem și să recunoaștem aceste deficiențe, astfel încât să putem lua o decizie în cunoștință de cauză atunci când are sens să folosim tipuri statice și când pur și simplu nu merită.

Iată câteva dintre aceste considerații:

Dezavantajul #1: Tipurile statice necesită învățare prealabilă

Când am învățat pentru prima dată Elm (un limbaj funcțional tipizat static), tipurile au fost adesea în cale. Am continuat să întâlnesc erori de compilator din cauza definițiilor mele de tip.

A învăța să folosească tipurile în mod eficient a fost jumătate din bătălie în învățarea limbii în sine. Drept urmare, curba de învățare a lui Elm este mai abruptă decât cea a JavaScript din cauza tipurilor sale statice.

Acest lucru este important în special pentru începători, care au cea mai mare sarcină cognitivă din sintaxa de învățare. Adăugarea de sintaxă la acest mix poate fi copleșitoare pentru un începător.

Dezavantajul #2: Poate fi blocat în verbozitate

De exemplu, în schimb:

Funcția asincronă amountExceedsPurchaseLimit(amount, getPurchaseLimit)( var limit = await getPurchaseLimit(); return limit > amount; )
Trebuie sa scriem:

Funcția asincronă amountExceedsPurchaseLimit(amount: number, getPurchaseLimit: () => Promis ): Promisiune ( var limit = await getPurchaseLimit(); return limit > amount; )
Și în schimb:

Var user = ( id: 123456, nume: "Preethi", oraș: "San Francisco", );
Trebuie sa scrii asta:

Tip User = ( id: număr, nume: șir, oraș: șir, ); var user: User = ( id: 123456, nume: "Preethi", oraș: "San Francisco", );
Evident, sunt adăugate linii suplimentare de cod. Dar există câteva argumente împotriva considerării acestui dezavantaj.

În primul rând, așa cum am menționat mai devreme, tipurile statice distrug o întreagă categorie de teste. Unii dezvoltatori pot considera acest lucru un compromis perfect rezonabil.

În al doilea rând, așa cum am văzut mai devreme, tipurile statice pot elimina uneori nevoia unei gestionări complexe a erorilor, iar acest lucru, la rândul său, reduce foarte mult aglomerația de coduri.

Este greu de spus dacă verbozitatea este un argument real împotriva tipurilor, dar merită reținut.

Dezavantajul #3: Este nevoie de timp pentru a deveni priceput în utilizarea tipurilor.

De exemplu, o abordare este de a codifica logica de afaceri critică cu tipuri statice, dar lăsați piese de logică de scurtă durată sau neimportante pentru a evita complexitatea inutilă.

Cunoașterea diferenței poate fi dificilă, mai ales dacă un dezvoltator mai puțin experimentat trebuie să ia decizii din mers.

Dezavantajul #4: Tipurile statice pot întârzia dezvoltarea rapidă

Argumentul aici este că verificarea tipului static poate face ca un programator să-și piardă concentrarea prea des - și știi, concentrarea este factorul cheie pentru a scrie un program bun.

Nu este doar atât. De asemenea, controlerele de tip static nu sunt întotdeauna ideale. Uneori apare o situație când știi ce să faci, dar verificarea tipului te împiedică și te împiedică.

Sunt sigur că am omis alte defecte, dar acestea sunt cele mai importante pentru mine.

Ar trebui să folosesc sau nu tipuri statice în JavaScript?

Primele limbaje de programare pe care le-am învățat au fost JavaScript și Python, ambele limbaje tipizate dinamic.

Dar stăpânirea tipurilor statice a adăugat o nouă dimensiune modului în care mă gândesc la programare. De exemplu, deși la început mi s-au părut copleșitoare mesajele constante de eroare ale compilatorului lui Elm, descoperirea tipurilor și plăcerea compilatorului a devenit o a doua natură și mi-a îmbunătățit efectiv abilitățile de programare. În plus, nu există nimic mai eliberator decât un robot inteligent care să-mi spună ce greșesc și cum să o repar.

Da, există compromisuri inevitabile cu tipurile statice, cum ar fi faptul de a fi prea pronunțat și de a petrece timp învățându-le. Dar tipurile adaugă securitate și corectitudine programelor, ceea ce elimină semnificația acestor „dezavantaje” pentru mine personal.

Tipurile dinamice par mai rapide și mai simple, dar pot eșua atunci când puneți efectiv programul în acțiune. În același timp, poți vorbi cu orice dezvoltator Java care se ocupă de tipuri mai complexe parametrizate și îți vor spune cât de mult îi urăsc.

În cele din urmă, aici nu există o soluție unică. Personal, prefer să folosesc tipuri statice în următoarele condiții:

1. Programul este esențial pentru afacerea dvs.
2. Programul va fi probabil refactorizat pentru a se potrivi noilor nevoi.
3. Programul este complex și are multe părți mobile.
4. Programul este susținut de o echipă mare de dezvoltatori care trebuie să înțeleagă codul rapid și precis.

1. Codul este de scurtă durată și nu este critic pentru misiune.
2. Faci un prototip și încerci să avansezi cât mai repede posibil.
3. Programul este mic și/sau simplu.
4. Sunteți singurul dezvoltator.

Concluzie

Capacitatea de a comuta între tipurile dinamice și statice este un instrument puternic pentru comunitatea JavaScript și unul interesant :)

Programarea nu este doar o modalitate de a câștiga bani mari și nici măcar nu este o muncă în întregime mentală. Aceasta este o oportunitate de a înțelege în ce constă lumea din jurul nostru, de a o descompune în particule mici și apoi de a o reasambla, ghidați de propria noastră logică și cunoștințe.

Limbajele de programare sunt doar un instrument cu care o persoană construiește reguli în sistemele create.

Internetul prezintă o mulțime de oportunități pe care mințile strălucitoare și întreprinzătoare le profită. Desigur, dezvoltarea web are și propriile instrumente pentru a da viață ideilor. Unul dintre ele este limbajul de programare JavaScript, care va fi discutat în acest articol:

Informații generale

Mulți oameni, chiar și cei care nu au nimic de-a face cu domeniul IT, au auzit cuvântul Java. Un limbaj revoluționar, independent de platformă, în care aplicațiile pentru sistemele mobile sunt scrise în mod activ. A fost dezvoltat de compania promițătoare Sun, care a intrat apoi sub aripa Oracle. Dar nicio companie nu are nimic de-a face cu JavaScript:

Tot ceea ce i s-a cerut de la Sun era permisiunea de a folosi o parte a numelui. În mod surprinzător, JavaScript nu este deținut de nicio companie.

Când scrieți aplicații web, programarea JavaScript este folosită cel mai des. Dacă enumeram pe scurt caracteristicile cheie ale acestui limbaj, ar trebui să evidențiem următoarele:

• Orientarea obiectelor. Execuția programului reprezintă interacțiunea obiectelor;
• Conversia tipului de date se realizează automat;
• Funcțiile acționează ca obiecte clasa de bază. Această caracteristică face JavaScript similar cu multe limbaje de programare funcționale, cum ar fi Lisp și Haskell;
• Ștergerea automată a memoriei. Așa-numita colectare de gunoi face JavaScript similar cu C# sau Java.

Dacă vorbim despre esența utilizării JavaScript, atunci acest limbaj vă permite să „reînvie” paginile site-ului web nemișcate folosind cod care poate fi executat ( așa-numitele scripturi). Adică putem face o analogie cu desenele animate, unde html și css sunt personajele desenate, iar JavaScript este ceea ce le face să se miște.

Dacă vorbesc despre Sintaxa JavaScript, atunci are următoarele caracteristici:

• Înregistrarea este importantă. Funcțiile numite func() și Func() sunt complet diferite;
• Operatorii trebuie să fie urmați de punct și virgulă;
• Obiecte și operații încorporate;
• Spațiile nu sunt numărate. Puteți folosi câte indentări doriți, precum și întreruperi de linie, pentru a vă formata codul.

Cel mai simplu cod JavaScript arată astfel:

Scopul aplicatiei

Pentru a înțelege de ce este nevoie de JavaScript și cât de necesar este să-l înveți, ar trebui să evidențiem câteva domenii în care este folosit limba dată programare.

• Dezvoltare de aplicatii web. Doriți să instalați un contor simplu, să organizați transferul de date între formulare sau să plasați un joc pe site-ul dvs.? Apoi JavaScript va prelua asistent fidelîn acest caz;
• „Participarea activă” în AJAX. Această tehnologie a făcut posibilă accelerarea semnificativă a funcționării aplicațiilor prin schimbul de date cu serverul în modul „în fundal”:

• OS. Este posibil ca unii oameni să nu fi știut, dar Windows, Linux și Mac au propriii lor concurenți în browser, dintre care partea leului este scrisă în JavaScript;
• Aplicatii mobile;
• Domeniu de studiu. Orice specialitate de programare la o universitate include într-o măsură sau alta studiul JavaScript. Acest lucru se datorează faptului că limbajul a fost dezvoltat inițial pentru programatori nu foarte puternici. Lecțiile JavaScript sunt țesute logic în cursul HTML de bază, așa că învățarea este destul de simplă.

Avantaje și dezavantaje

Nu credeți că JavaScript este un fel de panaceu pentru toate problemele și fiecare programator folosește acest limbaj cu zâmbetul pe buze. Totul în lume are pozitivul său și laturile negative. În primul rând, să remarcăm deficiențele.

• Necesitatea de a oferi compatibilitate între browsere. Deoarece JavaScript acționează ca o tehnologie de internet, trebuie să suportați regulile pe care le stabilește World Wide Web. Codul trebuie să ruleze corect în toate, sau cel puțin în cele mai populare, browsere;
• Sistemul de moștenire într-o limbă face dificilă înțelegerea a ceea ce se întâmplă. JavaScript implementează moștenirea bazată pe prototip. Oamenii care au studiat alte limbaje de programare orientate pe obiecte sunt obișnuiți cu familiarul " clasa descendentă moşteneşte clasa de părinți " Dar în JavaScript, astfel de lucruri sunt gestionate direct de obiecte, iar acest lucru este dincolo de înțelegerea ta;
• Nu există o bibliotecă standard. JavaScript nu oferă nicio posibilitate de lucru cu fișiere, fluxuri I/O sau alte lucruri utile;
• Sintaxa în general face dificil de înțeles. Frumusețea codului nu este în mod clar punctul forte al JavaScript, dar se respectă regula principală a programatorilor: „ Lucrări? Nu atinge!».

Acum merită remarcat câteva avantaje

• JavaScript oferă un numar mare de oportunități de a rezolva o mare varietate de probleme. Flexibilitatea limbajului permite utilizarea multor modele de programare în raport cu condițiile specifice. Mintea inventiva va avea o adevarata placere;
• Popularitatea JavaScript deschide un număr considerabil de biblioteci gata făcute pentru programator, care pot simplifica semnificativ scrierea codului și pot nivela imperfecțiunile de sintaxă;
• Aplicare în multe domenii. Lat Capabilitati JavaScript oferiți programatorilor șansa de a se încerca ca dezvoltatori ai unei game largi de aplicații, iar acest lucru, desigur, alimentează interesul pentru activitățile profesionale.

Nu ar trebui să acordați atenție faptului că au existat mai multe minusuri decât plusuri. JavaScript este ferm înrădăcinat în nișa sa și nicio critică nu îl va scoate de acolo în acest moment.

Pentru cei care vor să studieze

Complex și un drum lung pentru cei care decid să studieze temeinic JavaScript. Pentru începători, există recomandări de bază, în urma cărora îți poți simplifica semnificativ învățarea.

• În primul rând, HTML. Nu poți începe să faci nimic pentru internet fără elementele de bază. Foile de stil în cascadă (CSS) vor fi, de asemenea, foarte utile;
• Folosiți literatură nouă. Programarea nu este fizică, ale cărei legi sunt inviolabile, iar manualele noi sunt cele vechi. Tehnologiile IT sunt în continuă evoluție, iar actualizările utile nu trebuie neglijate;
• Încercați să scrieți singur toate secțiunile programului. Dacă ceva nu funcționează deloc, puteți împrumuta codul altcuiva, dar numai după ce mai întâi înțelegeți fiecare linie pentru dvs.;
• Depanarea este cel mai bun prieten al tău. Găsirea rapidă a erorilor este una dintre cele cele mai importante momenteîn programare;
• Nu ignora regulile de formatare. Desigur, codul nu se va îmbunătăți sau mai rău de la cantități diferite indentări și spații, dar ușurința de citire și înțelegere de către programator este, de asemenea, un punct important. Codul de mai jos? foarte greu de perceput, mai ales dacă nu ești el

• Numele de variabile trebuie să aibă sens lexical. În procesul de scriere a programelor simple, acest lucru nu pare deloc important, dar când numărul de linii de cod depășește o mie, toți diavolii își rup picioarele;

dezvoltare web

Vue.JS: caracteristici, avantaje și dezavantaje

Vue.JS este numele acestui framework front-end pe care îl auzim din ce în ce mai des. Pentru a spune pompos, el este acum în vârful popularității sale. Acest fapt nu a putut scăpa echipei noastre de front-end. Am decis să înțelegem cu atenție de ce a apărut Vue.JS și ce probleme rezolvă.

Introducere

Implementarea interfeței de utilizare web se confruntă cu provocări din ce în ce mai complexe, care necesită utilizarea unor instrumente din ce în ce mai sofisticate. Să adăugăm aici tendința de îndepărtare de arhitectura aplicației MVC și obținem o tendință destul de interesantă. Dezvoltatorii moderni tind să folosească biblioteci separate pentru fiecare strat de sarcini. Pe fondul acestor modificări, a apărut framework-ul Vue.JS și a început să câștige popularitate.

Pur teoretic, este o alternativă la jQuery. Dar, în realitate, Vue.JS concurează cu destul de mult succes cu React.JS, liderul evident în spațiul View. Printre tehnologiile populare moderne care rezolvă probleme similare, putem evidenția și Angular și Ember. Fiecare dintre ele are propriile sale avantaje și dezavantaje. Cu toate acestea, toate aceste cadre pot fi aduse la un numitor comun - complexitatea relativă a dezvoltării.

Caracteristicile Vue.JS

Vue.JS a fost creat cu un ochi pe cele mai bune practici ale tehnologiilor enumerate. Echipa Vue a împrumutat ideea unui DOM virtual de la React.JS. Această abordare elimină interacțiunea directă cu nodurile de interfață. Lucrarea inițială este efectuată cu o copie ușoară (DOM virtual). Și numai după ce această modificare este aplicată nodurilor interfeței reale. În același timp, are loc o comparație între arborele DOM real și copia sa virtuală. Astfel, se identifică diferența și se redesenează doar ceea ce s-a schimbat.

Am împrumutat legare de date bidirecțională de la Angular Vue.JS. Acest lucru vă permite să proiectați interfețe: în primul rând, declarativ; în al doilea rând, folosind Vue în motoarele de șabloane. Cum ar fi Haml sau Pug. Cu toate acestea, observăm că această abordare a fost practicată înainte. De exemplu, în cadrul Knockout.JS.

Nucleul Vue.JS, precum React, conține doar funcționalitatea necesară pentru a lucra cu interfața. Prin urmare, este compact, ușor de integrat cu alte tehnologii, inclusiv jQuery, și poate fi folosit chiar în schimb (pentru dezvoltarea interfețelor simple).

În plus, Vue are disponibile o serie de plugin-uri care implementează o abordare modernă a dezvoltării de aplicații web. Despre ce vorbim? De exemplu, aproape toate aplicațiile React sunt proiectate în tandem cu tehnologia de control al stării Redux, care este o bibliotecă separată și implementează arhitectura flux. Abordarea adoptată de biblioteca Redux s-a dovedit a fi destul de convenabilă și de succes. Prin urmare, Vue.JS a dezvoltat propria tehnologie pentru monitorizarea stării aplicației - Vuex. Vuex împrumută complet idei de la Redux, dar gradul de integrare a acestei biblioteci cu Vue este mult mai mare decât în ​​cazul React și Redux. Și asta se traduce în viteză și comoditate.

Nu trebuie să uităm că succesul unei tehnologii depinde direct de activitatea utilizatorilor ei. Adică comunitatea de dezvoltatori. Deci React, fiind poate cea mai populară tehnologie, are un număr mare de extensii la funcționalitatea principală. Sunt create de membrii comunității, iar dezvoltatorii React au un set de instrumente pentru fiecare ocazie. Vue.JS nu merge atât de bine în acest sens. Cel putin pentru moment. Cu toate acestea, această tehnologie câștigă amploare și are deja multe biblioteci utile care rezolvă majoritatea problemelor stringente ale dezvoltatorilor.

Experiență de utilizare pe un proiect real

Ne-am confruntat cu sarcina de a dezvolta o interfață care să conțină o hartă, filtre, rezultate de filtrare și o serie de elemente de interacțiune pe o singură pagină. Eram conștienți de faptul că utilizarea simplă a JavaScript Vanilla sau jQuery poate duce la dificultăți de dezvoltare. De ce nu React.js? Pentru că Vue.JS este mai simplu și mai ușor. De ce să vă deranjați cu un cadru mai greu pentru a dezvolta o singură interfață?

Ne uităm îndeaproape la Vue.JS de mult timp și ne-am dat seama că avantajele sale ne pot oferi un profit real. Ca urmare, a fost luată o decizie fundamentală de a „testa” această tehnologie în practică.

Iată un mic exemplu de inițializare a unei aplicații Vue.

În app.js, variabila aplicație este creată ca obiect Vue. Constructorul parcurge șablonul template.haml și face legăturile necesare.

Declarativitatea în Vue este atât de ușoară încât ne-a permis să o integrăm într-o aplicație web monolitică folosind motorul de șabloane Haml.

Aici, în funcție de veridicitatea indicatorului „filtersOpen”, clasa „rentbuy__filters—open” este adăugată sau eliminată elementului

Vue.JS pe lângă implementează totul abordări moderneîn dezvoltarea interfeței de utilizare web, este un cadru incredibil de ușor de învățat, flexibil și foarte integrat cu tehnologii terțe. Șablonul lui Vue ne-a oferit posibilitatea de a asocia elementele câmpului de filtrare cu câmpurile unui singur obiect. Acest lucru a făcut posibil să aveți întotdeauna opțiuni de selecție actualizate la îndemână și a făcut mai ușoară validarea și curățarea filtrului.

Aici, valorile câmpurilor de intrare sunt legate de câmpurile obiectului „date” folosind legarea în două sensuri. Acest lucru face ca câmpul obiect să se schimbe atunci când valoarea din câmpul de intrare se modifică și invers.

Datorită reactivității Vue.JS, am scăpat de duplicarea codului. Cum sa întâmplat asta? Într-un număr de cazuri, setul de câmpuri de filtrare a coincis parțial (în funcție de starea aplicației). Există o amenințare reală de duplicare masivă a codului. Cu toate acestea, folosind predicate simple definite în șablon, puteți comuta rapid și convenabil între seturi de câmpuri.

Aici blocul cu câmpul de introducere este vizibil pe pagină când condiția este îndeplinită

De asemenea, datorită flexibilității Vue.JS, am putut profita de dezvoltarea bazată pe componente în elementele listei de rezultate de filtrare. După cum vă amintiți, cadrul nostru folosește tehnologia DOM virtuală. În consecință, odată cu sosirea de noi rezultate, componentele actuale pur și simplu nu sunt redesenate. Ceea ce se traduce în viteză și confort pentru utilizatori.

Elementele din matricea „proprietăți” sunt redate ca „propunere” a componentei Vue. Setul de elemente de pe pagină se modifică automat în funcție de modificările din matrice. Componenta „propunere” este obișnuită șablon HTML, al cărui cod este inclus într-o etichetă de script cu tipul „text/x-template”

De asemenea, rețineți că Vue urmărește ciclu de viață componente. Adică, le puteți aplica orice metode (modificare, ștergere etc.) după inițializare și atașare la arborele DOM. În special, putem inițializa cu ușurință aplicația atunci când pagina se încarcă în browser. De exemplu, solicitați o selecție inițială de elemente, în funcție de dimensiunea actuală a hărții de pe pagina utilizatorului.

Arhitectura aplicației Vue oferă o separare simplă și clară a metodelor, componentelor și datelor. Codul devine mult mai lizibil, ușor de extensibil și vă permite să integrați tehnologii terțe direct în metodele de aplicare Vue. Ca rezultat, dezvoltarea interfeței a durat relativ puțin. Codul s-a dovedit a fi compact și ușor de extensibil. Iar flexibilitatea Vue.JS a contribuit la combinarea sa cu alte tehnologii.

Beneficiile Vue.JS

După ce am studiat caracteristicile cheie ale tehnologiei și le-am testat în practică, putem enumera principalele avantaje ale cadrului Vue:

• Biblioteca este destul de simplă și funcțională. Pentru a-l înțelege, aveți nevoie de o cantitate minimă de cunoștințe.
• Nu există cerințe de stivă, așa că Vue.JS poate fi folosit pe orice proiect.
• Cadrul cântărește destul de mult. Economisim timp de încărcare a paginii și obținem o mulțime de beneficii: plus la conversie, plus la UX, plus la clasarea căutării etc.
• Viteză de dezvoltare destul de rapidă. Datorită utilizării oricăror șabloane și disponibilității documentației, majoritatea problemelor care apar sunt rezolvate destul de rapid. Inclusiv în comparație cu React, deoarece în majoritatea aplicațiilor care nu au interfețe complexe, toată puterea acestui framework este puțin redundantă.
• Abilitatea de a găsi și conecta la proiect aproape orice dezvoltator care este cel puțin puțin familiarizat cu dezvoltarea front-end. Bariera scăzută la intrare permite atât dezvoltatorilor front-end, cât și back-end să lucreze cu cadrul.

Vue vă permite să creați aplicatii functionale, potrivindu-se cu toate standarde moderne, cu conexiune minimă de noi resurse și, de fapt, mai ieftine.

Dezavantajele Vue.JS

Există și dezavantaje. În special în comparație cu React.JS.

• Lucrul la starea de aplicare are loc „sub capotă”. ÎN proiecte de anvergură acest lucru poate duce la ca funcționarea componentelor să nu fie evidentă, ceea ce creează adesea probleme cu depanarea și dezvoltarea eficientă.
• Abordarea componentelor din Vue.JS nu este la fel de flexibilă și evidentă ca în React.
• Sistemul de randare React este mai funcțional. Oferă mai multe opțiuni de depanare.
• Șablonul React este mult mai flexibil (JS vs DSL).

Concluzie

Vue.JS implementează toate abordările moderne ale dezvoltării UI web și este un cadru ușor de învățat, flexibil și foarte integrat cu tehnologii terțe. Desigur, în ceea ce privește crearea de interfețe complexe (de exemplu, pentru site-urile web corporative), React este superior. Dar pentru rezolvarea unor probleme relativ simple, utilizarea Vue pare nu doar justificată, ci și de preferat.

Am pregătit articolul

Departamentul Dezvoltare Web

Dezvoltare profesională de site-uri web și aplicații pe partea de server și client. Design, aspectul paginii și întreținere proiecte finalizate.