Cele mai recente tendințe în dezvoltarea aplicațiilor web pentru 2021: la ce să ne așteptăm de la industrie

Anul se apropie deja de sfârșit și, deși este puțin prea devreme pentru a contabiliza rezultatele anului 2019, este cu siguranță timpul să privim înainte și să luăm în considerare tendințele viitoare în dezvoltarea web . În calitate de companie de dezvoltare web, este în interesul nostru să fim la curent cu aceste lucruri. În acest articol, enumerăm tehnologiile și abordările trend - noi și vechi - credem că vor avea o atracție semnificativă anul viitor. Citiți mai departe pentru a afla ce sunt.

Pentru claritate și comoditate, articolul este împărțit în secțiuni: backend, frontend, web design și diverse .

Tendințe de backend

HTTP / 3

HTTP / 3 este cea mai recentă versiune a protocolului HTTP pe care îl cunoaștem cu toții. Este un salt semnificativ de la HTTP / 2, în principal pentru că HTTP / 3 este construit pe protocolul QUIC bazat pe UDP (pronunțat „rapid” și reprezintă Quick UDP Internet Connections), în timp ce HTTP / 2 se bazează pe TCP (Transmission Control Protocol) . HTTP / 2 utilizează o singură conexiune, ceea ce în general nu este o problemă decât dacă vorbim despre o rețea de calitate scăzută. Într-o rețea de calitate scăzută, HTTP / 2 poate fi extrem de lent, deoarece are nevoie de timp suplimentar pentru a reprocesa pachetele scăzute.

O conexiune UDP tradițională are o problemă cu fiabilitatea transferului de date din cauza lipsei de mecanisme suplimentare de verificare a erorilor . Când un pachet este scăzut, sistemul nu îl retransmite, deoarece nu are cheltuieli generale pentru deschiderea / menținerea / închiderea conexiunii. QUIC rezolvă această problemă cu multiplexarea sau transmiterea simultană a mai multor semnale printr-un singur canal. Acesta combină fiabilitatea TCP cu viteza UDP.

QUIC este practic ceea ce sugerează numele său - un protocol mai rapid . Este mai simplu, mai ușor și mai eficient, menținând în același timp fiabilitatea. Nu este de mirare că este una dintre tendințele viitoare în dezvoltarea web.

GraphQL

GraphQL este un limbaj de interogare API și un standard pentru dezvoltarea API-urilor. Este un copil al Facebook și nici măcar nu este atât de tânăr - a fost dezvoltat în 2012 și făcut open source în 2015. Dar GraphQL este adoptat de tot mai multe companii în zilele noastre, ceea ce ne-a obligat să îl adăugăm pe lista noastră a tendințelor de dezvoltare web pentru 2021.

Înainte de GraphQL, aveam REST, a cărui problemă principală era că necesita mai multe puncte finale și extragea prea multe date de la acestea, nu toate fiind necesare pentru sarcina la îndemână. GraphQL este diferit. Cu GraphQL, obțineți datele pe care le solicitați în mod specific doar printr-un singur punct final. Acest lucru face ca GraphQL să fie mai rapid și mult mai eficient . De asemenea, codul API este mult mai scurt, deoarece nu este necesar să scrieți un punct final separat pentru fiecare cerere.

În cele din urmă, merită să rețineți că GraphQL este un limbaj open-source, ceea ce înseamnă că poate fi actualizat practic de oricine. Open-source face evoluția constantă. Vom vedea ce noi tendințe aduce GraphQL în viitor.

Roboții și AI

Chatboturile sunt peste tot în aceste zile, nu-i așa? Sunt în tendințe atât pe web, cât și pe mobil. Și nu se vor opri în curând, se pare. Mai mult decât atât, cu ajutorul sistemelor de procesare a limbajului natural (NLP) alimentate de AI , acestea devin mai inteligente și mai eficiente.

În timp ce câțiva ani în urmă chatbot-urile ofereau conversații strict preprogramate care rezolvau o gamă limitată de probleme, astăzi, conversația cu un bot aproape nu se distinge de a discuta cu un specialist în asistență umană.

AI s-a strecurat acum chiar și în designul web. Instrumente precum Sketch2Code pot transforma automat o schiță de site web într-un prototip HTML. AI îmbunătățește experiența utilizatorului, face căutarea și recomandările mai precise și oferă optimizarea căutării vocale.

Nest.js

Nest.js este un cadru Node.js care permite dezvoltatorilor web să creeze aplicații scalabile de pe server. Nest.js și-a asigurat un loc printre tendințele de dezvoltare web pe care fiecare CTO trebuie să le aibă în vedere pentru anul următor (și poate mai mult) datorită combinației sale de flexibilitate și siguranță.

Construit folosind TypeScript, un superset de JavaScript și puternic inspirat de Angular, Nest.js este mai simplu, mai flexibil și permite mai puțin timp de oprire decât majoritatea celorlalte opțiuni. Este pe deplin compatibil cu serverele Node.js Express și cu majoritatea bibliotecilor JavaScript existente. Există, de asemenea, soluții de arhitectură livrate pentru Nest.js, iar aplicațiile sale pot fi scrise nu numai cu TypeScript, ci și cu JavaScript, dacă un dezvoltator preferă.

Tendințe frontend

WebAssembly (WASM)

JavaScript este minunat, dar nu este lipsit de erori. O problemă specială pe care JavaScript o are este performanța. Este aceeași problemă pentru toate limbajele de programare interpretate, iar WebAssembly este cel mai recent mod de a lupta împotriva acestuia.

Cel mai bun lucru despre WebAssembly este că nu este un limbaj complet nou. Puteți scrie în limba preferată și apoi să o compilați într-un fișier WASM pentru a rula în browsere. Limbile acceptate în prezent de WebAssembly sunt C / C ++, Elixir, Rust, Python, Go, C # /. Net și Java.

WebAssembly nu a fost inventat în 2019; este pe piață de câțiva ani deja. Dar se dezvoltă rapid și oferă din ce în ce mai multe opțiuni. De asemenea, acum este acceptat în mod implicit de toate browserele majore, ceea ce face ca a fi sub centura programatorului să fie un lucru grozav.

Aplicații web progresive (PWA)

O aplicație web progresivă este practic o pagină web cu funcționalități apropiate de cea a unei aplicații mobile native:

• Poate fi „instalat” pe dispozitive într-o clipă - utilizatorii pur și simplu fixează pagina pe ecranul de start al smartphone-ului pentru a avea acces la ea în orice moment, chiar și offline.
• Este receptiv - se ajustează automat la dimensiunea și modul ecranului dispozitivului.
• Este sigur - PWA-urile trebuie să fie difuzate prin HTTPS.
• Arată și funcționează ca o aplicație nativă, dar ocupă mult mai puțin spațiu.

Desigur, există încă limitări ale PWA-urilor și nu pot împinge complet aplicațiile native. (Trebuie totuși?) În special, fiind în esență pagini web, PWA-urile nu pot utiliza majoritatea funcțiilor hardware, cum ar fi NFC și Bluetooth. Cu toate acestea, nu toate aplicațiile necesită această funcționalitate.

PWA-urile sunt mai rapide, mai ușoare și mai ieftine de dezvoltat, motiv pentru care sunt în tendințe în dezvoltarea web în acest an și cu siguranță vor continua să evolueze în 2021.

Accesibilitate (a11y)

Aceasta este una dintre cele mai importante tendințe în dezvoltarea aplicațiilor web. Credem că accesibilitatea ar trebui să fie în partea de sus a listei fiecărui dezvoltator de site-uri web nu numai pentru site-urile noi, ci și pentru actualizările la cele vechi.

Accesibilitatea, sau a11y, este un principiu care spune că sistemele informatice ar trebui să fie convenabile pentru toate tipurile de utilizatori. Site-urile web ar trebui să funcționeze bine pe toate tipurile de dispozitive, da. Dar ar trebui să funcționeze bine și pentru utilizatorii cu tot felul de deficiențe și dizabilități . A11y se referă în general la accesibilitatea atât a software-ului, cât și a hardware-ului.

Când vine vorba de dezvoltarea web, accesibilitatea poate fi realizată prin:

• dimensiuni de caractere mai mari sau personalizabile
• pagini opționale cu contrast ridicat
• suport pentru sinteza vorbirii / text-to-speech
• subtitrări în video
• transcrieri pentru toate fișierele audio
• recunoașterea vorbirii pentru navigație
• texte în limbaj simplu
• evidențiind părți importante
• navigare consecventă cu cât mai puțini pași posibil
• autorizare simplificată (dar fără a sacrifica securitatea datelor)
• navigare cu tastatură în loc de mouse / touchpad
• HTML semantic

Numele a11y provine din faptul că există 13 litere în „accesibilitate”, deci sunt 11 între „a” și „y”. Dar dacă te uiți atent, a11y arată ca cuvântul „aliat” - un prieten, un asistent, un partener.

Tendințe JavaScript

Există puține noutăți în JavaScript în ansamblu, desigur, dar există mai multe cadre de frontend noi care intenționează să ia lumea în asalt. Să vorbim puțin despre ele.

Gatsby.js

Gatsby este un SSG sau un generator de site static . Și dacă credeți că site-urile statice sunt un lucru din trecut, avem știri pentru dvs.: se numără printre cele mai noi tendințe tehnologice.

Unul dintre cei mai mari profesioniști ai Gatsby.js este că nu necesită servere tradiționale; funcționează cu BYOC (Adu-ți propriul conținut) și poate construi un site web bazat pe date dintr-un fișier CMS, CSV, API și markdown. Gatsby folosește, de asemenea, GraphQL, un limbaj de interogare high-end pe care l-am menționat anterior, pentru a construi straturi de date.

Stăpânirea Gatsby.js necesită ca un dezvoltator să cunoască React Native și / sau GraphQL, dar nu aveți nevoie de cunoștințe profunde chiar de pe bat - puteți începe să învățați toate cele trei în același timp.

Gatsby.js este un SSG perfect pentru dezvoltarea site-urilor de comerț electronic . Acest generator bazat pe React vă ajută să creați site-uri care se încarcă într-o clipită, destul de literal - nu vorbim secunde aici, vorbim milisecunde. Orice proprietar de companie de comerț electronic știe că, uneori, o întârziere de fracțiune de secundă la încărcarea paginii poate face diferența dacă clientul efectuează achiziția. Acest lucru este valabil pentru alte tipuri de site-uri, deși poate într-o măsură mai mică.

Cadrele SPA

Probabil că ați observat că în majoritatea site-urilor web există aceeași interfață de bază pentru toate paginile sau pentru majoritatea acestora. Totuși, când accesați o altă pagină din site, întreaga pagină se reîncarcă, inclusiv acele elemente care sunt aceleași. Asta se întâmplă cu aplicațiile web cu mai multe pagini.

SPA-urile sau aplicațiile cu o singură pagină sunt aplicații web în care pagina nu se reîncarcă complet atunci când un utilizator dă clic între secțiuni; extrage doar datele necesare în loc să solicite o actualizare completă a HTML-ului. Aceasta scurtează timpul de încărcare. De asemenea, necesită o lățime de bandă mult mai mică.

Astăzi, SPA-urile pot fi implementate cu trei cadre principale: React, Vue și Angular. React are cea mai mare cotă de piață, în timp ce Vue, fiind noul copil din bloc, are cea mai mică. Cu toate acestea, Vue.js este probabil cel mai bine adaptat pentru a funcționa în mod specific cu SPA-urile - este cu adevărat mic, dar scalabil, flexibil și oferă opțiuni de integrare de top. Prevedem ca anul viitor să devină un jucător influent.

Vue 3

La sfârșitul lunii iunie 2019 , Evan You și echipa din spatele Vue.js au postat un RFC (cerere de comentarii) cu privire la noua iterație a cadrului, Vue 3, care a fost întâmpinată cu un pic de negativitate în cadrul comunității. Dar, după cum sa dovedit, această negativitate a fost puternică, dar nu atât de masivă. De asemenea, așa cum se întâmplă adesea, a luat naștere dintr-o serie de neînțelegeri.

Motivul pentru care unii dezvoltatori web și-au pus chiloții într-o răsucire a fost faptul că Vue.js a obținut brusc un API bazat pe funcții pentru a-l înlocui pe cel obișnuit bazat pe obiecte . Cu toate acestea, nu a fost exact corect. Noua componentă API bazată pe funcții este un plus de tipuri și poate fi utilizată împreună cu API-ul tradițional bazat pe obiecte, dacă doriți.

Noua sintaxă din API 3 Composition Vue are o logică mai bună și asigură o mai bună structurare a codului . Unii dezvoltatori spun chiar că scurtează ușor codul. În momentul scrierii, cadrul Vue 3 este disponibil ca plugin pentru Vue 2 utilizând Biblioteca de compoziție Vue.

Svelte.js

Introdus de Rich Harris la JSConf EU 2019, Svelte este în același timp similar și diferit de Vue. Este similar prin faptul că este, de asemenea, un cadru component. Cu toate acestea, spre deosebire de Vue, Svelte este un compilator de componente care rulează în timpul construirii . Acest lucru face posibilă încărcarea numai a componentelor necesare pentru afișarea aplicației. Nu utilizați un DOM virtual atunci când lucrați cu Svelte.

Svelte are o sintaxă simplă care permite dezvoltatorilor să acceseze variabile din marcare în loc să utilizeze împachetări de stare care sunt diferite pentru diferite cadre. Acest lucru face din Svelte un cadru aproape perfect pentru cei noi în dezvoltarea web. Pentru dezvoltatorii mai experimentați, Svelte înseamnă posibilitatea de a scrie cod mai repede și de a obține site-uri web cu performanțe superioare.

În anul de la prezentare, Svelte a trecut prin îmbunătățiri și actualizări majore , rezultând ceea ce mulți dezvoltatori numesc astăzi unul dintre cele mai simple și mai frumoase cadre existente.

TypeScript

TypeScript este un superset de JavaScript și câștigă popularitate în ciuda (sau poate datorită) faptului că nu este total nou. A fost printre tendințele de programare web de câțiva ani și, fiind open-source, este în mod constant dezvoltat și actualizat.

Avantajele TypeScript includ tastarea statică opțională. De asemenea, face ca noile caracteristici JavaScript să fie compatibile înapoi - ES6 și ES7 pot fi convertite în ES5 și mai mici folosind compilatorul. Aceasta înseamnă că codul scris pentru cele mai noi browsere va funcționa în continuare cu cele vechi.

TypeScript este mai ușor de citit, mai flexibil când vine vorba de refactorizare, mai ușor de testat și are o mulțime de documentație de top pentru dezvoltatori. Mulți cred că este viitorul JavaScript .

Cadrele CSS

Cadrele simplifică totul și asta include CSS mult malignizat. Să vedem ce este în tendință CSS anul acesta.

Houdini CSS

Houdini (ca și în Harry Houdini, celebrul iluzionist) este un cadru foarte unic printre cele mai noi tendințe de dezvoltare web. Practic, Houdini este o colecție de API-uri care oferă dezvoltatorilor acces la modelul de obiecte CSS . Ceea ce înseamnă acest lucru este că, dacă aveți nevoie de stiluri care nu sunt încă disponibile în CSS, nu este nevoie să suprascrieți CSS cu JavaScript. Cu cadrul Houdini CSS, puteți scrie cod care va fi văzut de browsere ca CSS și analizat ca atare.

Rezultatul este că analiza durează mult mai puțin timp, dezvoltatorii nu trebuie să aștepte ca furnizorii de browsere să extindă CSS, iar proiectele pot deveni mai personalizate și unice.

Totuși, există încă o problemă: Houdini nu este încă acceptat de toate browserele majore. Dar procesul a fost lansat și așteptăm ca modul în care folosim CSS să se schimbe complet.

Bulma

Bulma este una dintre cele mai moderne tendințe din industrie. Este construit cu extensia Sass (Syntactically Awesome Style Sheets) și se bazează pe modulul CSS Flexible Box Layout Module sau pe scurt Flexbox. Flexbox este un modul utilizat adesea pentru crearea de site-uri web receptive.

Bulma este un cadru CSS open-source gratuit care oferă o serie de teme create de comunitate cu cât mai puține stiluri posibil . Este simplu de implementat și poate fi personalizat datorită versiunii Sass. Datorită simplității codului CSS Bulma, site-urile web construite cu acesta sunt, de obicei, compatibile cu toate browserele și nu prezintă niciun fel de probleme. În prezent, este unul dintre cele mai populare cadre CSS în rândul dezvoltatorilor și se pare că va deține poziția și anul viitor.

Windwind

Cadrul Tailwind CSS a existat de ceva timp, dar a crescut destul de mult în popularitate în ultimele luni.

Particularitatea despre Tailwind este că nu este un kit UI, care îl diferențiază de alte cadre CSS. Nu are componente UI încorporate . În schimb, Tailwind oferă un set de widget-uri pentru dezvoltarea rapidă a UI cu clase de utilitate Atomic CSS . Aceasta înseamnă că veți putea construi de la zero și exact așa cum aveți nevoie, nelimitat de teme și stiluri oferite de alte cadre CSS.

Totuși, va trebui să vă familiarizați cu Atomic CSS, ceea ce face ca Tailwind să devină o mică provocare în comparație cu rivalii săi. Pe partea luminoasă, vă va oferi aspectul și senzația cea mai personalizată.

Proiectare Motion UI

Motion UI este cea mai mare tendință nouă în design și dezvoltare web. Pe scurt, Motion UI înseamnă exact ceea ce spune numele - adăugând acțiune pe paginile site-ului dvs. web. Și nu include doar imagini. Micro-interacțiunile fac parte din Motion UI la fel de mult ca animațiile. Gesturile responsive vă pot ajuta vizitatorii să înțeleagă semnificația din spatele unui element - de exemplu, prin simpla desfășurare a unei explicații atunci când cursorul se deplasează deasupra acestuia.

Adăugarea de mișcare la interfața site-ului dvs. web poate atinge mai multe obiective:

• Ajutați utilizatorii să navigheze cu ușurință pe site
• Atrageți atenția asupra părților importante ale site-ului dvs. web
• Distrați și distrageți atenția utilizatorilor în timp ce așteaptă o tranziție de la un ecran la altul
• Îmbunătățiți-vă identitatea mărcii

Motion îi ajută pe proprietarii de site-uri web să spună o poveste în foarte puține cuvinte. Sau în niciun cuvânt. Cheia este să o faci corect - nu prea mult și nu prea puțin.

Alte tendințe tehnologice ale aplicațiilor web

Am dori să subliniem câteva tendințe care nu sunt exact legate de frontend, backend sau design. Acestea sunt lucruri simple care contează din ce în ce mai mult în fiecare an care trece și pe măsură ce tehnologia se dezvoltă.

Securitatea și confidențialitatea datelor

Astăzi, avem pauze din ce în ce mai scurte între noile scandaluri de scurgere de date. Dar este încă nevoie de o scurgere pentru ca cineva să încerce să facă o gaură. Este la fel în lumea fizică și online. Din acest motiv, noi protocoale de securitate high-end sunt dezvoltate constant: certificate SSL , verificări de securitate , protecție împotriva atacurilor DDoS și așa mai departe și așa mai departe.

În mai 2018, Uniunea Europeană a emis Regulamentul general privind protecția datelor sau GDPR. Conform GDPR, site-urile web ar trebui să informeze vizitatorii despre ce informații vor fi colectate despre acestea (fie prin cookie-uri, fie prin furnizarea unei adrese de e-mail și completarea unui profil) și modul în care vor fi utilizate aceste informații. Drept urmare, am văzut o creștere uriașă a investițiilor în securitate cibernetică. Oamenii cer siguranță online acum că ne gestionăm identitățile și finanțele pe internet.

Securitatea datelor nu mai este o tendință viitoare. Este tendința de astăzi și va deveni mai mare doar cu timpul. Deci, dacă sunteți proprietarul unui site web, trebuie să țineți ochii deschiși.

Viteza de încărcare

Dacă ați citit acest articol în întregime, este posibil să fi observat numărul de tehnologii, atât backend, cât și frontend, care sunt axate pe încărcarea mai rapidă a paginilor , finalizarea mai rapidă a sarcinilor , totul mai rapid . Ne grăbim întotdeauna și, atunci când o pagină se încarcă prea lent, o abandonăm și mergem la o alternativă. La urma urmei, sunt destule. Viteza de încărcare a fost, este și va fi în tendințe în dezvoltarea web în următorii câțiva ani, iar dezvoltatorii web trebuie să țină la vedere toată noua tehnologie care vizează accelerarea site-urilor web.

Aceasta este ideea noastră asupra tehnologiilor web pe care ne așteptăm să le facem cunoscute în anul următor.

Scris de Svitlana Varaksina și Artem Chervichnik