Vue.js, il potente strumento di sviluppo front-end #1

Cos'è vue.js secondo i suoi fondatori?

vuejs.org

Vue (pronunciato / vjuː /, like Visualizza) è un quadro progressivo per la creazione di interfacce utente. A differenza di altri framework monolitici, Vue è progettato da zero per essere adottabile in modo incrementale. La libreria principale è focalizzata solo sul livello di visualizzazione ed è facile da raccogliere e integrare con altre librerie o progetti esistenti. D'altra parte, Vue è anche perfettamente in grado di alimentare sofisticate applicazioni a pagina singola se utilizzato in combinazione con utensili moderni e biblioteche di supporto.

Possiamo affermare che VueJS è un framework JavaScript avanzato con un codice open source per lo sviluppo di un'interfaccia utente. È uno dei framework più popolari per semplificare lo sviluppo web. VueJS funziona principalmente con il livello di presentazione. Può essere facilmente integrato in grandi progetti per lo sviluppo di frontend.

Storia di VueJS

Vue è stato creato da Evan You dopo aver lavorato per Google utilizzando AngularJS in una serie di progetti. In seguito ha riassunto il suo processo di pensiero: "Ho pensato, e se potessi semplicemente estrarre la parte che mi è davvero piaciuta di Angular e creare qualcosa di veramente leggero". Il primo commit del codice sorgente nel progetto era datato luglio 2013 e Vue è stato rilasciato per la prima volta il febbraio successivo, nel 2014.

Ecosistema VueJS

Ecosistema

La libreria principale viene fornita con strumenti e librerie sviluppati sia dal team principale che dai collaboratori.

Strumenti ufficiali

  • Devtools - Estensione browser devtools per il debug delle applicazioni Vue.js.
  • Vue CLI - Strumenti standard per lo sviluppo rapido di Vue.js
  • Vue Loader - un webpack loader che consente la scrittura di componenti Vue in un formato chiamato Single-File Components (SFC)

Biblioteche ufficiali

  • Vue Router - Il router ufficiale per Vue.js
  • Vuex - Gestione centralizzata dello stato ispirata a Flux per Vue.js
  • Renderer di Vue Server - Rendering lato server per Vue.js

Perché usare Vue.js?

La modularizzazione della libreria utilizzando un framework è comune nello sviluppo frontend. Sia React che Angular hanno modularizzazione. Ma ciò che differenzia Vue.js dalle altre alternative è il suo "alto disaccoppiamento", la facilità con cui estendere le funzionalità e il funzionamento di tutte le parti una volta inclusi i moduli.

Ad esempio, se vogliamo organizzare e rendere piccoli componenti visivi, tutto ciò di cui abbiamo bisogno è la libreria "principale" di Vue.js; non è necessario includere librerie aggiuntive. Man mano che l'applicazione cresce, abbiamo librerie per gestire percorsi come "vue-router", librerie per gestire lo stato globale come "vuex" o librerie per creare applicazioni web reattive come "bootstrap-vue". Inoltre, se la nostra applicazione deve essere ottimizzata o necessita di una buona SEO, possiamo includere la libreria "vue-server-rendering". Nella figura seguente, possiamo vedere come vengono progressivamente incluse le librerie appena citate, da una piccola SPA ad applicazioni multipagina (MPA).

Vue.js functionality

Il sistema dei componenti di Vue.js è reattivo, il che significa che Vue.js sa come comunicare attraverso eventi asincroni; ad esempio, un componente figlio può comunicare con il suo componente padre tramite eventi. Con Vue.js non ci sono attriti con altre biblioteche o risorse, in altre parole, possiamo usare lo strumento con cui ci troviamo più a nostro agio. Ad esempio, possiamo scrivere solo HTML e JavaScript o se vogliamo possiamo aggiungere CSS, JSX o TypeScript.

Vue.js ha una speciale riga di comando (CLI) creata su Node JS. Questo strumento ci consente di avviare un progetto utilizzando un boilerplate (o modello di base). Inoltre, il team di sviluppo di Vue.js mantiene un'estensione di Chrome che ci consente di vedere come viene visualizzato il nostro albero dei componenti, come vengono lanciati e registrati gli eventi, come viene salvato lo stato interno di ogni componente e come lo stato globale del componente si sta comportando.

Componenti VueJS

I componenti Vue vengono utilizzati per estendere il basic Elementi HTML in modo da incapsulare il codice riutilizzabile JavaScript. Ad un livello elevato, i componenti sono elementi personalizzati a cui il compilatore di Vue associa il comportamento. In Vue, un componente è essenzialmente un'istanza Vue con opzioni predefinite.

Chi utilizza Vue.js?

Più di 700 aziende utilizzano Vue.js. Alcuni dei più importanti sono: Xiaomi, Alibaba e Gitlab. L'elenco completo è disponibile all'indirizzo https://stackshare.io/vue-js/in-stacks.

Lascia un commento

Voglio costruire un