Oltre jQuery: una guida esperta ai framework JavaScript

La caratteristica distintiva di un programmatore veramente buono è la pigrizia. Ciò non significa stupido o ignorante, però. Il programmatore pigro davvero bravo non scrive (quindi ha bisogno di eseguire il debug e testare) 100 righe di codice quando 10 lo faranno. Nel mondo JavaScript, lo sviluppatore veramente pigro farà affidamento su un framework efficiente, ben testato e ben supportato per evitare di reinventare costantemente soluzioni a problemi comuni.

I framework "frammentano" gran parte delle funzionalità dettagliate del linguaggio JavaScript in chiamate ai metodi, riducendo la quantità di codice che il programmatore pigro deve scrivere, testare ed eseguire il debug. Ci sono due ostacoli da superare prima di cogliere questo vantaggio: scegliere una struttura per il tuo scopo e impararla.

Una volta appresa una struttura, il corso ovvio è seguirla per tutto ciò che si sviluppa in modo da non dover imparare qualcos'altro, ma non è sempre utile. In effetti, uno degli indizi che dice che stai usando la struttura sbagliata per il tuo compito attuale è che ti ritrovi a fare molto lavoro. Quindi sii davvero pigro e continua ad imparare.

Un po 'di storia JavaScript

La storia di JavaScript risale al lavoro di sviluppo svolto da Brendan Eich sul linguaggio Mocha per la società di browser Web Netscape nel 1995. Mocha fu rilasciato come LiveScript nello stesso anno e rinominato JavaScript quando Sun concesse a Netscape una licenza di marchio. Cercare di legare il leggero interprete JavaScript simile a C al pesante Java non correlato - un linguaggio compilato con token orientato agli oggetti - per mezzo di un nome simile sembrava una buona idea per scopi di marketing nel 1995, ma nel corso degli anni quella scelta è stata non ha causato fine alla confusione.

Lo sviluppo di JavaScript nel decennio successivo è stato caratterizzato da disaccordi tra gli implementatori del browser e da uno sforzo per gli standard ECMA piuttosto debole. Ciò che ha cambiato questo malessere e ha ridato energia al linguaggio è stata l'ascesa di HTML dinamico e Ajax a metà degli anni 2000, seguita rapidamente dall'introduzione di librerie JavaScript open source come Prototype, jQuery, Dojo e MooTools, che avevano lo scopo di creare HTML dinamico e Ajax più facili da usare e per fornire "widget" per JavaScript che migliorerebbero la funzionalità dei controlli del modulo HTML.

Sebbene Netscape abbia rilasciato un server JavaScript poco dopo JavaScript per il browser, il linguaggio non è decollato per l'uso di back-end fino all'ascesa di Node.js a partire dal 2009. Parte di ciò che ha reso Node.js attraente è stato l'uso di Google motore JavaScript V8 altamente ottimizzato per i moduli di libreria, con codice di base in C ++ abbastanza portabile.

Questo tour dei framework JavaScript è un tentativo di dare un senso alle principali librerie JavaScript odierne in tre categorie: quelle che vengono eseguite nei server Node.js, quelle che funzionano nei browser e quelle che supportano le app mobili native o ibride.

Framework Node.js.

Node.js è una tecnologia server basata su JavaScript e C ++ che ha attirato un po 'di attenzione e supporto sin dalla sua introduzione (con una standing ovation) da parte dell'autore Ryan Dahl alla European JSConf nel novembre 2009. Node.js si distingue per un architettura basata sugli eventi in grado di I / O asincrono, un footprint di memoria ridotto e un throughput e una scalabilità elevati per le applicazioni Web.

Sebbene Node.js abbia tutti i pezzi necessari per implementare un server Web, la scrittura di quel livello richiede un po 'di lavoro. TJ Holowaychuk ha rilasciato Express 1.0 Beta nel luglio 2010 e presto è diventato il server back-end "predefinito" per Node.js e parte dello stack MEAN, con il database MongoDB e il framework front-end Angular.JS.

Tuttavia, diversi sviluppatori e organizzazioni hanno esigenze diverse. Express ha generato direttamente o indirettamente Locomotive, Hapi, Koa, Kraken e Sails.js. Meteor è abbastanza diverso, anche se funziona anche su Node.js.

Esprimere. Express è un framework per applicazioni Web Node.js minimale e flessibile, che fornisce un robusto set di funzionalità per la creazione di applicazioni Web a pagina singola, multipagina e ibride. L'API Express si occupa dell'applicazione Web, delle richieste e delle risposte HTTP, del routing e del middleware. A partire da Express 4.x, il middleware supportato per Express risiede in una serie di repository separati.

Sono emersi diversi fork di Express e componenti aggiuntivi per Express, tra cui Locomotive, Hapi e Koa. Koa è stato creato da uno dei principali contributori di Express.

Express è più vecchio dei suoi rampolli e ha un'impronta più ampia. Tuttavia, ha anche una comunità più ampia e una maggiore stabilità. Vedo costantemente Express incorporato in altri framework e strumenti senza commenti, come se fosse l'unica scelta possibile per costruire un server Web su Node.js. Su GitHub, il framework ha più di 23.000 stelle e 4.000 fork.

Hapi. Hapi è un framework incentrato sulla configurazione semplice da usare con supporto integrato per la convalida dell'input, la memorizzazione nella cache, l'autenticazione e altre funzionalità essenziali per la creazione di applicazioni Web e di servizi. Hapi consente agli sviluppatori di concentrarsi sulla scrittura di logica applicativa riutilizzabile in modo altamente modulare e prescrittivo. È stato sviluppato da Walmart Labs ed è una buona scelta per grandi team e grandi progetti.

Hapi è stato originariamente costruito sopra Express, ma è stato successivamente ridisegnato per essere autonomo. Si basa sull'idea che "la configurazione è migliore del codice" e "la logica aziendale deve essere isolata dal livello di trasporto". Nell'esempio sopra, nota come appare chiara e pulita la configurazione delle rotte del server nel codice.

Koa. Koa è un nuovo framework Web progettato dal team dietro Express, ma indipendente dal codice Express. Koa mira ad essere una base più piccola, più espressiva e più solida per applicazioni Web e API. Koa utilizza i generatori ES6 per il middleware piuttosto che utilizzare i callback Node.js. Quella che segue è un'applicazione Koa "hello, world" che utilizza un generatore, che esegue un yield nextpassaggio del controllo al generatore successivo:

La differenza tra i generatori di middleware, utilizzati da Koa, e i callback, utilizzati da Express e Connect, è che si ottiene una maggiore flessibilità con i generatori. Ad esempio, Connect passa semplicemente il controllo attraverso una serie di funzioni finché una non ritorna, mentre Koa fornisce il controllo "a valle", quindi il controllo fluisce di nuovo "a monte". Nell'esempio sopra, x-response-time "avvolge" il generatore di risposte, con l' yield nextistruzione che contrassegna la chiamata. La resa è più flessibile rispetto alle chiamate di funzione esplicite, in quanto semplifica l'inserimento di un altro generatore nella sequenza, ad esempio un logger Web tra il timer e la risposta.

Kraken. Kraken, un progetto open source di PayPal, è un livello sicuro e scalabile che estende Express fornendo struttura e convenzione, proprio come Locomotive. Sebbene Kraken sia il pilastro principale del suo framework, i seguenti moduli possono essere utilizzati anche in modo indipendente: Lusca (sicurezza), Kappa (NPM proxy), Makara (LinkedIn Dust.js I18N) e Adaro (LinkedIn Dust.js Templating).

Kraken si affida yoper generare progetti, come mostrato nello screenshot a sinistra. Come Locomotive, organizza i suoi progetti in directory convenzionali simili a Rails, inclusi modelli, controller e configurazione. Quando viene generato, Kraken si collega a Express come middleware standard, definito come un app, che quindi ha i suoi metodi app.use()e app.listen()chiamati. Ogni percorso in un server Kraken risiede nel proprio file nella cartella dei controller.

Locomotiva. Come framework Web per Node.js, Locomotive supporta pattern MVC, rotte RESTful e convenzioni sulla configurazione (come Rails), integrandosi perfettamente con qualsiasi database e motore di template. Locomotive si basa su Express and Connect, che è un semplice framework collante per middleware utilizzato da numerosi framework Node.js.

Locomotive aggiunge a Express una struttura simile a Ruby on Rails, che puoi vedere nell'immagine sopra, che altrimenti manca a Express. Le viste Locomotive sono spesso file JavaScript incorporati (html.ejs), come mostrato qui, ma Locomotive supporta anche Jade e altri motori di template compatibili per Express. La funzionalità REST è controllata dalle rotte, come di solito accade nei server basati su Express. Puoi utilizzare qualsiasi database e livello ORM (mappatura relazionale oggetto) che desideri con Locomotive. La guida dimostra l'utilizzo di MongoDB con Mongoose, oltre a lavorare con Passport per l'autenticazione dell'utente.

Meteora. Meteor ti offre un modo radicalmente più semplice per creare app mobili e Web in tempo reale, interamente in JavaScript, da un'unica base di codice. Piuttosto che inviare HTML via cavo, Meteor invia i dati dal server affinché il client possa eseguire il rendering. Oltre a funzionare in modalità stand-alone, Meteor può integrarsi con AngularJS e React. Meteor non ha niente a che fare con Express, anche se è anche costruito su Node.js e supporta i modelli di Manubri, Blaze e Jade.

Meteor consente la prototipazione rapida e produce codice multipiattaforma (Web, Android, iOS). Si integra con MongoDB, utilizzando il protocollo dati distribuito e un modello di pubblicazione-sottoscrizione per propagare automaticamente le modifiche ai dati ai client senza richiedere allo sviluppatore di scrivere alcun codice di sincronizzazione. Sul client, Meteor dipende da jQuery e può essere utilizzato con qualsiasi libreria di widget dell'interfaccia utente JavaScript.

Meteor è sviluppato dal Meteor Development Group, una startup incubata da Y Combinator. Meteor è ora abbastanza maturo da supportare una mezza dozzina di tutorial. Il progetto ha attirato più di 32.000 stelle su GitHub.

Meteor stesso è un software open source gratuito, ma il gruppo Meteor lo monetizza vendendo abbonamenti Meteor Galaxy DevOps, che includono lo spazio del server AWS e il supporto Meteor di base, e un abbonamento a supporto Premium separato.

Sails.js. Con Sails, puoi creare app Node.js. personalizzate di livello aziendale. È progettato per emulare il familiare pattern MVC (model-view-controller) di framework come Ruby on Rails, ma con supporto per i requisiti delle app moderne: API basate sui dati con un'architettura scalabile e orientata ai servizi. È particolarmente utile per creare app di chat, dashboard in tempo reale o giochi multiplayer, ma puoi usarlo per qualsiasi progetto di applicazione Web. Sails supporta WebSocket e invia automaticamente messaggi socket ai percorsi della tua app.

Come Rails, Sails valuta la convenzione rispetto alla configurazione, fornisce generatori e scaffold per la creazione rapida di API REST da schemi e utilizza un modello di progettazione MVC / record attivo. Sails è costruito su Express e utilizza Waterline per il suo ORM, con supporto per i join ORM. Waterline supporta database SQL e NoSQL.

Sails è un framework back-end progettato per essere compatibile con qualsiasi framework Web front-end, come Angular o Backbone, o dispositivo mobile, come iOS o Android, che ti piace o che devi supportare. C'è un libro in lavorazione su Sails.js, ancora solo parzialmente completo.

Framework HTML5 / JavaScript

Tradizionalmente pensiamo alle librerie e ai framework JavaScript come in esecuzione nei browser. Come ho accennato in precedenza, alcuni di questi - jQuery, Dojo e MooTools - sono nati a metà degli anni 2000 principalmente per rendere più facile la scrittura di HTML dinamico e Ajax. Alcuni di questi da allora si sono espansi in ulteriori aree di funzionalità, come i widget dell'interfaccia utente e le interfacce dei dispositivi mobili.

Altri sono nati più recentemente. AngularJS è un framework front-end che estende HTML con markup per viste dinamiche e data binding. Backbone.js e Ember sono progettati per lo sviluppo di applicazioni Web a pagina singola. React serve per creare un'interfaccia utente o una vista, in genere per applicazioni a pagina singola.

Altri quadri ancora perseguono aree di specializzazione più ristrette. D3 esegue la visualizzazione dei dati e le animazioni. Socket.IO implementa app Web in tempo reale. Knockout è un modo di alto livello per collegare un modello di dati a un'interfaccia utente Web. Polymer offre un leggero strato di "addolcimento" sopra le API dei componenti Web per aiutare a creare i propri componenti Web. Il carattere di sottolineatura è una libreria di utilità generale.

Come ci si potrebbe aspettare, si ha l'imbarazzo della ricchezza tra cui scegliere per lo sviluppo Web lato client.

AngularJS.  AngularJS (o semplicemente Angular, tra gli amici) è un framework Ajax JavaScript model-view-qualunque (MVW) che estende l'HTML con markup per viste dinamiche e data binding. Angular è particolarmente utile per lo sviluppo di applicazioni Web a pagina singola e per il collegamento di moduli HTML a modelli e controller JavaScript.

Lo strano pattern model-view-qualunque è un tentativo di includere i pattern model-view-controller, model-view-viewmodel (MVVM) e model-view-presenter (MVP) sotto un unico moniker. Mentre i programmatori amano discutere le differenze tra questi tre modelli strettamente correlati, gli sviluppatori di Angular hanno deciso di rinunciare alla discussione.

Fondamentalmente, Angular sincronizza automaticamente i dati dalla tua interfaccia utente (vista) con i tuoi oggetti JavaScript (modello) attraverso il data binding bidirezionale. Per aiutarti a strutturare meglio la tua applicazione e renderla facile da testare, Angular insegna al browser come eseguire l'iniezione delle dipendenze e l'inversione del controllo.

Angular è stato creato da Google e open source con licenza MIT. Il repository su GitHub ha più di 47.000 stelle e 22.000 fork. Made with Angular mette in mostra centinaia di siti Web creati con Angular, molti dei quali proprietà Web di alto profilo.