Accentsconagua
Share
Quando si tratta di scegliere il giusto framework JavaScript, è sicuramente un paesaggio selvaggio e confuso. Questa guida ti aiuterà, uno sviluppatore front-end in erba, a navigare in acque torbide quando arriverà il momento di scegliere una struttura adatta a te. Ogni quadro che ho scelto di mostrare descriverà i fondamenti sintetici, la sintassi del linguaggio e includerà anche utili risorse di apprendimento.
Nel nostro mondo di sviluppo un "framework" può essere definito come una libreria JavaScript che visualizza e rende interfacce interattive basate su dati. Esistono per aiutare a rendere i dati a un utente quando viene attivata un'interazione. Tutte queste librerie differiscono leggermente da una all'altra, ma il loro scopo è lo stesso; mostra nuovi dati quando un'interazione ha avuto luogo.
Esaminiamo queste potenti strutture più profonde per aiutarci a setacciare meglio il paesaggio.
Ci sono molte opzioni quando si tratta di scegliere un framework: ciò che segue è un elenco del terreno attuale, inclusi Vue, React, Angular e Ember. Ciascuno è stato selezionato in base alla crescita e alla sostenibilità della comunità, all'attività di GitHub, al tempo in cui il progetto è stato reso disponibile agli sviluppatori e se il progetto è ancora in uso da un grande gruppo di sviluppatori e società di sviluppo.
Primo impegno 27 luglio 2013
Dimensione del file: 27,5 KB minificati
Vue sostiene di essere una struttura progressiva che è accessibile, versatile e performante. Se hai una conoscenza fondamentale del buon vecchio web stack (HTML, CSS, JS) sei già in un'ottima posizione per usare Vue.
"La libreria principale è focalizzata solo sul livello di visualizzazione ed è molto facile da raccogliere e integrare con altre librerie o progetti esistenti. D'altra parte, Vue è anche perfettamente in grado di alimentare sofisticate applicazioni a singola pagina quando viene utilizzato in combinazione con strumenti moderni e librerie di supporto. "- VueJS Introduzione Documenti
Quando si tratta di sintassi, questo è ciò che la libreria offrirà utilizzando la demo "Hello World" a nudo:
Messaggio
var app = new Vue (el: '#app', dati: messaggio: 'Hello Vue!')
La libreria diventerà anche più espressiva usando "valori di attributo" all'interno del tuo markup. Ecco una sintassi più coinvolgente che utilizza questi attributi:
Passa il mouse sopra di me per alcuni secondi per vedere il mio titolo rilegato in modo dinamico!
Sintassi a parte, Vue.js consentirà la gestione dell'input dell'utente, la creazione di modelli di componenti, il binding dei dati alla struttura del DOM con condizionali e loop e un "rendering dichiarativo" ottenuto da una sintassi diretta modellata liberamente sui componenti Web. Spec.
Risorse di apprendimento:
Primo impegno 29 maggio 2013
Dimensione del file: 7.3 KB minificati w / Add-ons: 11,3 KB minificati
React si definisce come una libreria JavaScript per costruire interfacce guidate da dati dinamici. È stato sviluppato dai dipendenti di Facebook ed è anche Open Source su GitHub. Potresti sentirti un po 'volgare quando dico che tu stesso autore HTML in JavaScript, ma sfortunatamente è così che funziona React.
Diamo un'occhiata ad un esempio di sintassi uscito direttamente dalla documentazione del tutorial di React. Questo esempio crea ciò che React chiama "sottoclassi Component" sebbene abbia anche alcuni diversi tipi di componenti. La sintassi per una chiamata componente è simile a XML, come noterai in questo codice HTML:
class ShoppingList estende React.Component render () return ();Lista della spesa per this.props.name
- Oculus
React viene fornito con opzioni aggiuntive come componenti aggiuntivi considerati un utile insieme di moduli di utilità. Questi componenti aggiuntivi includono utility che aiutano quando si tratta di animazioni e transizioni, strumenti di profilazione delle prestazioni, helper di casi di test e molto altro. La documentazione di React consiglia inoltre di utilizzare React con Babel per consentire l'uso di ES6 e JSX nel codice JavaScript. C'è anche una pratica estensione React Devtools per Chrome e Firefox che ti consente di ispezionare un albero di componenti React negli Strumenti di sviluppo del tuo browser.
Risorse di apprendimento:
Primo impegno 18 settembre 2014 (GitHub segnalato)
Versione iniziale (Secondo Wikipedia), 20 ottobre 2010
Dimensione del file: Strumento CLI. Non più un file JS standalone.
Angular è sviluppato dal team di Google. Poiché HTML non è mai stato concepito per essere un linguaggio dinamico, Angular estende il vocabolario HTML consentendo di estendere gli attributi nel markup. Questo in definitiva consente "binding dichiarativi" agli eventi, al fine di visualizzare dati dinamici e stati basati su interazioni. È possibile soddisfare i requisiti di dati di grandi dimensioni costruendo modelli di dati su RxJS, Immutable.js o su un altro modello push. Ed è possibile estendere la lingua del modello con i propri componenti e utilizzare una vasta gamma di componenti esistenti.
"Impara un modo per creare applicazioni con Angular e riutilizzare il codice e le abilità per creare app per qualsiasi obiettivo di distribuzione. Per web, mobile web, mobile nativo e desktop nativo. "
La sintassi Angular non è una novità in termini di attributi HTML e segnaposti di tipo Mustache, con l'eccezione del namespace usando ng- come vedrai nel seguente esempio:
Ciao yourName!
Angular è anche costituito principalmente da componenti che sono una combinazione di modelli HTML e una classe componente che controlla una porzione dello schermo.
// src / app / app.component.ts import Component da '@ angular / core'; @Component (selector: 'my-app', template: 'Ciao nome
') export class AppComponent name =' Angular ';
Caricamento contenuto appComponent qui ...
Il file con l'estensione .ts dall'esempio precedente è scritto in TypeScript. Un linguaggio che inizia dalla stessa sintassi e semantica di JavaScript. È un superset di JavaScript che compila in JavaScript, o ciò che si potrebbe pensare come un "potenziatore del linguaggio", cioè lo zucchero della sintassi. Questo è dove lo strumento CLI ti aiuterà quando verrà il momento di compilare il tuo codice.
Risorse di apprendimento:
Primo impegno 30 aprile 2011
Dimensione del file: ?
Ember è una libreria molto simile alle altre che abbiamo discusso e che si integra anche con Handlebars. Per coloro che non hanno familiarità con Handlebars è un linguaggio modello per costruire pagine statiche, proprio come Jekyll potrebbe avere familiarità con te. Gli sviluppatori possono utilizzare Handlebars per descrivere il markup e utilizzare JavaScript per implementare comportamenti personalizzati per i componenti in base all'interazione.
"Ember è un framework di applicazioni JavaScript per la creazione di applicazioni Web lato-pagina a pagina singola, che utilizza il pattern Model-View-Controller (MVC)."
Ember è costruito con il nodo e utilizza una varietà di moduli Node.js per il funzionamento. Ember ha anche uno strumento di interfaccia a riga di comando (installato tramite npm se lo si desidera) che fornisce una struttura di progetto standard e una serie di strumenti di sviluppo incluso un sistema di aggiunta. Inoltre viene fornito con un server di sviluppo e crea flag di ambiente che possono essere passati tramite la riga di comando.
La sintassi per Ember sembra essere nulla di insolito, basandosi su letterali degli oggetti e sulla notazione dei punti con cui abbiamo familiarità in JavaSript, oltre a Handlebars per le chiamate al modello.
importa Ember da 'ember'; export default Ember.Controller.extend (firstName: 'Trek', lastName: 'Glowacki');
Ciao, nome e cognome
L'esempio sopra riportato è un assaggio molto semplice della sintassi e della struttura dei file. Il codice demo esporterà ed estenderà un controller Ember e compila i nomi dal letterale dell'oggetto nel tuo markup.
Vale anche la pena ricordare che le funzionalità del router di Ember ti consentono di interrompere il web. Per impostazione predefinita, ottieni URL e un pulsante di back-up funzionante con ogni percorso che crei e l'API è facile da usare (e familiare a chi ha esperienza con i framework web sul lato server). Ember.js è gratuito, open source e sarà sempre come si afferma sul loro sito.
Risorse di apprendimento:
La scelta del framework si riduce sempre alla preferenza di codifica personale e alla fiducia nel progetto a lungo termine. Se desideri approfondire X e Y per aiutare a fare la scelta, Vue ha una spiegazione e un confronto decenti sul loro sito che include anche informazioni su altre librerie come Knockout, Polymer e Riot. Potrebbe anche piacere prendere il nostro quiz, che dovrebbe aiutarti a restringere le tue scelte!
