Per chiarezza e praticità, l’articolo è diviso in sezioni: backend, frontend, web design e varie

Tendenze del backend

HTTP / 3

HTTP / 3 è l’ultima versione del protocollo HTTP che conosciamo tutti. È un salto significativo da HTTP / 2, principalmente perché HTTP / 3 è basato sul protocollo QUIC basato su UDP (pronunciato “rapido” e sta per connessioni Internet UDP rapide), mentre HTTP / 2 si basa su TCP (Transmission Control Protocol) . HTTP / 2 utilizza una singola connessione, che generalmente non costituisce un problema a meno che non si tratti di una rete di bassa qualità. In una rete di bassa qualità, HTTP / 2 può essere estremamente lento, poiché richiede tempo aggiuntivo per rielaborare i pacchetti rilasciati.

Una connessione UDP tradizionale presenta un problema con l’affidabilità del trasferimento dei dati a causa della mancanza di ulteriori meccanismi di controllo degli errori . Quando un pacchetto viene eliminato, il sistema non lo ritrasmette, poiché non ha costi generali di apertura / manutenzione / chiusura della connessione. QUIC risolve questo problema con il multiplexing o la trasmissione simultanea di più segnali tramite un singolo canale. Combina l’affidabilità di TCP con la velocità di UDP.

Fondamentalmente QUIC è ciò che suggerisce il nome: un protocollo più veloce . È più semplice, più leggero e più efficiente, pur mantenendo l’affidabilità. Non c’è da stupirsi che sia una delle tendenze future nello sviluppo web.

GraphQL

GraphQL è un linguaggio di query API e uno standard per lo sviluppo di API. È figlio di Facebook e non è nemmeno così giovane: è stato sviluppato nel 2012 e reso open-source nel 2015. Ma GraphQL è stato adottato da sempre più aziende al giorno d’oggi, il che ci ha costretto ad aggiungerlo alla nostra lista delle tendenze di sviluppo web per il 2020.

Prima di GraphQL, avevamo REST, il cui problema principale era che richiedeva più endpoint e ne estraeva troppi dati, non tutti necessari per l’attività a portata di mano. GraphQL è diverso. Con GraphQL, si ottengono solo i dati richiesti specificamente attraverso un singolo endpoint. Ciò rende GraphQL più veloce e molto più efficiente . Inoltre, il codice API è molto più breve, poiché non è necessario scrivere un endpoint separato per ogni richiesta.

Infine, vale la pena ricordare che GraphQL è un linguaggio open source, il che significa che può essere aggiornato praticamente da chiunque. L’open-source consente un’evoluzione costante. Vedremo quali saranno le nuove tendenze che GraphQL porterà in futuro.

Bots e AI

I chatbot sono ovunque in questi giorni, vero? Sono di tendenza sul Web e sui dispositivi mobili. E non si fermeranno presto, a quanto pare. Inoltre, con l’aiuto dei sistemi di elaborazione del linguaggio naturale (AI) basati sull’intelligenza artificiale , stanno diventando più intelligenti ed efficienti.

Mentre un paio di anni fa i chatbot offrivano solo conversazioni strettamente preprogrammate che risolvevano una serie limitata di problemi, oggi chattare con un robot sembra quasi indistinguibile dal chattare con uno specialista del supporto umano.

L’intelligenza artificiale si è ormai fatta strada anche nel web design. Strumenti come Sketch2Code possono trasformare automaticamente uno schizzo di un sito Web in un prototipo HTML. L’intelligenza artificiale migliora l’esperienza dell’utente, rende più precise le ricerche e i consigli e offre l’ottimizzazione della ricerca vocale.

Nest.js

Nest.js è un framework Node.js che consente agli sviluppatori Web di creare app lato server scalabili. Nest.js si è assicurato un posto tra le tendenze di sviluppo web che ogni CTO deve tenere a mente per il prossimo anno (e forse più a lungo) grazie alla sua combinazione di flessibilità e sicurezza.

Costruito utilizzando TypeScript, un superset di JavaScript e fortemente ispirato ad Angular, Nest.js è più semplice, più flessibile e consente meno tempi di inattività rispetto alla maggior parte delle altre opzioni. È pienamente compatibile con i server Node.js Express e con la maggior parte delle librerie JavaScript esistenti. Esistono anche soluzioni di architettura predefinite disponibili per Nest.js e le sue applicazioni possono essere scritte non solo con TypeScript ma anche con JavaScript se lo sviluppatore preferisce.

Tendenze del frontend

WebAssembly (WASM)

JavaScript è fantastico, ma non è privo di difetti. Un problema particolare che JavaScript ha sono le prestazioni. È lo stesso problema per tutti i linguaggi di programmazione interpretati e WebAssembly è l’ultimo modo di combatterlo.

La cosa migliore di WebAssembly è che non è un linguaggio completamente nuovo. Puoi scrivere nella lingua che preferisci e quindi compilarlo in un file WASM da eseguire nei browser. Le lingue attualmente supportate da WebAssembly sono C / C ++, Elixir, Rust, Python, Go, C # /. Net e Java.

L’assemblaggio Web non è stato inventato nel 2019; è sul mercato già da alcuni anni. Ma si sta sviluppando rapidamente e offre sempre più opzioni. Ora è anche supportato da tutti i principali browser per impostazione predefinita, il che rende una buona cosa averlo sotto la cintura del programmatore.

App Web progressive (PWA)

Un’app Web progressiva è fondamentalmente una pagina Web con funzionalità simile a quella di un’app mobile nativa:

• Può essere “installato” sui dispositivi in ​​un attimo: gli utenti semplicemente appuntano la pagina sulla schermata iniziale del proprio smartphone per accedervi in ​​qualsiasi momento, anche offline.
• È reattivo: si adatta automaticamente alle dimensioni e alla modalità dello schermo del dispositivo.
• È sicuro: i PWA devono essere serviti tramite HTTPS.
• Sembra e funziona come un’app nativa ma occupa molto meno spazio.

Ci sono ancora limiti ai PWA, ovviamente, e non possono allontanare completamente le app native. (Devono, però?) In particolare, essendo essenzialmente pagine Web, le PWA non possono utilizzare la maggior parte delle funzionalità hardware come NFC e Bluetooth. Tuttavia, non tutte le app richiedono questa funzionalità.

Le PWA sono più veloci, più facili ed economiche da sviluppare, motivo per cui quest’anno sono in trend nello sviluppo web e continueranno sicuramente a crescere nel 2020.

Accessibilità (a11y)

Questa è una delle tendenze più importanti nello sviluppo di applicazioni web. Riteniamo che l’accessibilità dovrebbe essere in cima all’elenco di tutti gli sviluppatori di siti Web non solo per i nuovi siti ma anche per gli aggiornamenti a quelli vecchi.

L’accessibilità, o a11y, è un principio secondo cui i sistemi informatici dovrebbero essere convenienti per tutti i tipi di utenti. I siti web dovrebbero funzionare bene su tutti i tipi di dispositivi, sì. Ma dovrebbero anche funzionare bene per gli utenti con tutti i tipi di menomazioni e disabilità . A11y si riferisce generalmente all’accessibilità sia del software che dell’hardware.

Quando si tratta di sviluppo web, l’accessibilità può essere raggiunta tramite:

• dimensioni dei caratteri più grandi o personalizzabili
• pagine opzionali a contrasto elevato
• supporto per sintesi vocale / sintesi vocale
• sottotitoli in video
• trascrizioni per tutti i file audio
• riconoscimento vocale per la navigazione
• testi in linguaggio semplice
• evidenziando parti importanti
• navigazione coerente con il minor numero di passaggi possibile
• autorizzazione semplificata (ma senza sacrificare la sicurezza dei dati)
• navigazione con una tastiera anziché un mouse / touchpad
• HTML semantico

Il nome a11y deriva dal fatto che ci sono 13 lettere in “accessibilità”, quindi ci sono 11 tra “a” e “y”. Ma se guardi da vicino, a11y assomiglia alla parola “alleato” – un amico, un assistente, un partner.

Tendenze JavaScript

Ovviamente c’è poco di nuovo in JavaScript nel suo insieme, ma ci sono molti nuovi framework di frontend che intendono conquistare il mondo. Parliamone un po ‘.

Gatsby.js

Gatsby è un SSG o un generatore di siti statici . E se pensi che i siti statici appartengano al passato, abbiamo notizie per te: sono tra le ultime tendenze tecnologiche.

Uno dei più grandi pro di Gatsby.js è che non richiede server tradizionali; funziona con BYOC (Bring Your Own Content) e può creare un sito Web basato sui dati di un CMS, CSV, API e file markdown. Gatsby utilizza anche GraphQL, un linguaggio di query API di fascia alta che abbiamo menzionato prima, per la creazione di livelli di dati.

Per padroneggiare Gatsby.js è necessario che uno sviluppatore conosca React Native e / o GraphQL, ma non hai bisogno di una conoscenza approfondita fin dall’inizio, puoi iniziare a imparare tutti e tre contemporaneamente.

Gatsby.js è un SSG perfetto per lo sviluppo di siti Web di e-commerce . Questo generatore basato su React ti aiuta a creare siti che si caricano in un batter d’occhio, letteralmente – non stiamo parlando di secondi qui, stiamo parlando di millisecondi. Qualsiasi imprenditore e-commerce sa che a volte un ritardo di un secondo nel caricamento della pagina può fare la differenza nel fatto che il cliente effettui l’acquisto. Questo è vero per altri tipi di siti, anche se forse in misura minore.

Quadri SPA

Probabilmente avrai notato che con la maggior parte dei siti Web esiste la stessa interfaccia di base per tutte o quasi tutte le pagine. Tuttavia, quando si passa a una pagina diversa all’interno del sito Web, l’intera pagina viene ricaricata, inclusi gli elementi uguali. Questo è ciò che accade con le applicazioni Web multipagina.

Le SPA, o applicazioni a pagina singola, sono app Web in cui la pagina non viene ricaricata completamente quando un utente fa clic tra le sezioni; estrae solo i dati necessari invece di richiedere un aggiornamento completo dell’HTML. Questo accorcia i tempi di caricamento. Richiede anche molta meno larghezza di banda.

Oggi le ZPS possono essere implementate con tre framework principali: React, Vue e Angular . React ha la più grande quota di mercato, mentre Vue, essendo il nuovo capretto del blocco, ha il più piccolo. Tuttavia, Vue.js è probabilmente il migliore su misura per funzionare specificamente con le SPA: è davvero piccolo ma scalabile, flessibile e offre opzioni di integrazione di alto livello. Prevediamo che diventerà un giocatore influente l’anno prossimo.

Vue 3

Alla fine di giugno 2019 , Evan You e il team dietro Vue.js hanno pubblicato un RFC (richiesta di commenti) in merito alla nuova iterazione del framework, Vue 3, che ha incontrato un po ‘di negatività all’interno della comunità. Ma si è scoperto che questa negatività era forte ma non così grande. Inoltre, come spesso accade, è nato da una serie di incomprensioni.

Il motivo per cui alcuni sviluppatori web hanno avuto le mutande in una svolta è perché Vue.js ha improvvisamente ottenuto un’API componente basata su funzioni per sostituire quella familiare basata su oggetti . Tuttavia, non era esattamente corretto. La nuova API componente basata sulle funzioni è una sorta di aggiunta e può essere utilizzata insieme all’API basata su oggetti tradizionale, se lo si desidera.

La nuova sintassi nell’API di composizione di Vue 3 ha una logica migliore e consente una migliore strutturazione del codice . Alcuni sviluppatori sostengono addirittura che accorcia leggermente il codice. Al momento della stesura di questo documento, il framework Vue 3 è disponibile come plug-in per Vue 2 utilizzando la libreria di composizione Vue.

Svelte.js

Introdotto da Rich Harris a JSConf EU 2018 , Svelte è allo stesso tempo simile e diverso da Vue. È simile in quanto è anche un framework di componenti. Tuttavia, a differenza di Vue, Svelte è un compilatore di componenti che viene eseguito durante il tempo di compilazione . Ciò consente di caricare solo i componenti necessari per visualizzare la tua app. Non usi un DOM virtuale quando lavori con Svelte.

Svelte ha una sintassi semplice che consente agli sviluppatori di accedere alle variabili dal markup invece di utilizzare wrapper di stato diversi per diversi framework. Questo rende Svelte un framework quasi perfetto per chi è nuovo allo sviluppo web. Per gli sviluppatori più esperti, Svelte significa la possibilità di scrivere codice più velocemente e di conseguenza ottenere siti Web con prestazioni più elevate.

Nell’anno dalla sua presentazione, Svelte ha subito importanti miglioramenti e aggiornamenti , portando a ciò che molti sviluppatori oggi chiamano uno dei framework più semplici e belli esistenti.

Dattiloscritto

TypeScript è un superset di JavaScript e sta guadagnando popolarità nonostante (o forse grazie) al fatto che non è totalmente nuovo. È tra le tendenze della programmazione web da un paio d’anni e, essendo open-source, viene costantemente sviluppato e aggiornato.

I vantaggi di TypeScript includono la tipizzazione statica opzionale . Inoltre, rende le nuove funzionalità di JavaScript compatibili con le versioni precedenti: ES6 ed ES7 possono essere convertiti in ES5 e versioni inferiori utilizzando il compilatore. Ciò significa che il codice scritto per i browser più recenti funzionerà comunque con quelli precedenti.

TypeScript è più leggibile, più flessibile quando si tratta di refactoring, più facile da testare e ha molta documentazione di alto livello per gli sviluppatori. Molti credono che sia il futuro di JavaScript .

Framework CSS

I frame rendono tutto più semplice e questo include il CSS molto diffamato. Vediamo cosa è di tendenza in CSS quest’anno.

Houdini CSS

Houdini (come in Harry Houdini, il famoso illusionista) è un quadro davvero unico tra le ultime tendenze di sviluppo web. Fondamentalmente, Houdini è una raccolta di API che fornisce agli sviluppatori l’ accesso al modello a oggetti CSS . Ciò significa che se hai bisogno di stili che non sono ancora disponibili nei CSS, non è necessario sovrascrivere i CSS con JavaScript. Con il framework CSS Houdini, è possibile scrivere codice che verrà visualizzato dai browser come CSS e analizzato come tale.

Il risultato è che l’analisi richiede molto meno tempo, gli sviluppatori non devono attendere che i provider di browser espandano i CSS e che i design possano diventare più personalizzati e unici.

C’è ancora un problema, però: Houdini non è ancora supportato da tutti i principali browser . Ma il processo è stato avviato e stiamo aspettando il modo in cui utilizziamo i CSS per cambiare completamente.

Bulma

Bulma è una delle tendenze del settore più moderne. È costruito con l’estensione Sass (Syntactically Awesome Style Sheets) e basato sul modulo CSS Layout flessibile Box o Flexbox in breve. Flexbox è un modulo spesso utilizzato per creare siti Web responsive.

Bulma è un framework CSS open source gratuito che offre una gamma di temi creati dalla comunità con il minor numero di stili possibile . È semplice da implementare e può essere personalizzato grazie alla build Sass. Grazie alla semplicità del codice CSS di Bulma, i siti Web creati con esso sono in genere compatibili con tutti i browser e pongono poco o nessun problema. Attualmente, è uno dei framework CSS più popolari tra gli sviluppatori e sembra che manterrà la posizione anche l’anno prossimo.

Tailwind

Il framework CSS di Tailwind è in circolazione da un po ‘di tempo, ma è cresciuto molto negli ultimi mesi.

La particolarità di Tailwind è che non è un UI Kit, che lo distingue dagli altri framework CSS. Non ha componenti dell’interfaccia utente incorporati . Invece, Tailwind offre una serie di widget per lo sviluppo rapido dell’interfaccia utente con le classi di utilità CSS Atomic . Ciò significa che sarai in grado di costruire da zero e esattamente come ti serve, senza restrizioni per temi e stili offerti da altri framework CSS.

Dovrai conoscere Atomic CSS, tuttavia, il che rende Tailwind un po ‘una sfida rispetto ai suoi concorrenti. Sul lato positivo, ti darà l’aspetto più personalizzato.

Progettazione dell’interfaccia utente Motion

Motion UI è la più grande nuova tendenza nel web design e sviluppo. In breve, l’interfaccia utente di Motion significa esattamente ciò che dice il nome: aggiungere azione alle pagine del tuo sito Web. E non include solo elementi visivi. Le microinterazioni fanno parte dell’interfaccia utente di Motion tanto quanto le animazioni. I gesti reattivi possono aiutare i tuoi visitatori a capire il significato dietro un elemento, ad esempio, semplicemente spiegando una spiegazione quando il cursore si posiziona sopra di esso.

L’aggiunta di movimento all’interfaccia del tuo sito Web può raggiungere una serie di obiettivi:

• Aiuta gli utenti a navigare facilmente nel sito
• Attira l’attenzione sulle parti importanti del tuo sito web
• Intrattenere e distrarre gli utenti mentre attendono il passaggio da una schermata all’altra
• Migliora la tua identità di marca

Motion aiuta i proprietari di siti Web a raccontare una storia in pochissime parole. O in parole povere. La chiave è farlo nel modo giusto, non troppo e non troppo poco.

Altre tendenze della tecnologia delle applicazioni web

Vorremmo sottolineare diverse tendenze che non sono esattamente correlate a frontend, backend o design. Queste sono cose semplici che contano sempre di più ogni anno che passa e con lo sviluppo della tecnologia.

Sicurezza dei dati e privacy

Oggi abbiamo interruzioni sempre più brevi tra i nuovi scandali sulla perdita di dati. Ma ci vuole ancora una perdita per qualcuno per provare a riparare un buco. È lo stesso nel mondo fisico e online. Per questo motivo, vengono costantemente sviluppati nuovi protocolli di sicurezza di fascia alta: certificati SSL , controlli di sicurezza , protezione dagli attacchi DDoS e così via e così via.

Nel maggio 2018, l’Unione Europea ha emanato il proprio Regolamento generale sulla protezione dei dati , o GDPR. Secondo il GDPR, i siti Web dovrebbero informare i visitatori su quali informazioni verranno raccolte su di loro (tramite i cookie o fornendo un indirizzo e-mail e compilando un profilo) e come verranno utilizzate tali informazioni. Di conseguenza, abbiamo assistito a un enorme aumento degli investimenti nella sicurezza informatica. Le persone chiedono sicurezza online ora che gestiamo le nostre identità e le nostre finanze su Internet.

La sicurezza dei dati non è più una tendenza futura. È la tendenza di oggi e diventerà più grande con il tempo. Quindi, se sei il proprietario di un sito Web, devi tenere gli occhi aperti.

Velocità di carico

Se avete letto questo articolo nella sua interezza, potreste aver notato il numero di tecnologie, sia backend e frontend, che si concentrano sul caricamento della pagina più veloce , il completamento compito più veloce , più veloce tutto . Siamo sempre di fretta e quando una pagina si carica troppo lentamente, la abbandoniamo e cerchiamo un’alternativa. Dopo tutto, ce ne sono molti. La velocità di caricamento era, è e sarà di tendenza nello sviluppo web nei prossimi anni, e gli sviluppatori web devono tenere in vista tutte le nuove tecnologie volte ad accelerare i siti web.

Questa è la nostra opinione sulle tecnologie web che prevediamo di essere pubblicizzate nel prossimo anno.