Share
Gli sviluppatori sono un gruppo esigente, quasi al punto di superstizione e magia voodoo, quando si tratta dei loro strumenti. Se prendi in considerazione il numero infinito di cose che usiamo per creare app (Node, Grunt, Fiddler, LESS, EC2 ecc.), Non c'è da meravigliarsi perché, una volta trovata una bella combinazione, la custodiamo come uno scoiattolo con il suo ultimo Noce. E ha senso, dal momento che il tuo ambiente di sviluppo è dannatamente importante per il tuo successo.
Quello che penso rende Visual Studio un ottimo IDE per lo sviluppo web è un'estensione chiamata Web Essentials.
L'unico strumento che, a mio parere, è sempre stato una preferenza follemente personale e supponente è il tuo IDE o editore. Tutto ciò che conta è, dalle battiture e supporto linguistico a plugin e temi. Tutto deve scorrere bene nel tuo stile di sviluppo e, soprattutto, deve aiutarti a risolvere i problemi che stai affrontando senza farti saltare attraverso i cerchi.
Visual Studio è uno dei migliori IDE disponibili, incorporando facilmente una vasta gamma di funzionalità che rendono gli sviluppatori di grande successo. Ma non è stato visto come un editor di "sviluppatori web" perché tradizionalmente puntava sulla piattaforma Microsoft con molte caratteristiche che rendevano la codifica di quella piattaforma incredibilmente facile. E, beh, molte di queste funzionalità non si applicavano realmente agli sviluppatori che non avevano come target una piattaforma Microsoft.
Con Microsoft che abbracciano con tutto il cuore HTML5, CSS3 e JavaScript per lo sviluppo di applicazioni Web e Windows 8, c'è stato un sacco di cambiamenti con Visual Studio 2012 che lo rendono uno strumento fantastico per la creazione di siti web. Questo è ciò che ho intenzione di affrontare successivamente, e spero che lo vedrai in una luce molto diversa.
Una delle migliori funzionalità di Solution Explorer è la possibilità di cercare una risorsa specifica all'interno dell'intera soluzione.
Ricordo di aver guardato Visual Studio molti anni fa e di non prenderlo sul serio. Non è stato perché non era un IDE potente. E 'stato semplicemente mirato alla creazione di applicazioni e siti .NET - e infatti lo è stato. Non è una cosa negativa, perché se chiedi a uno sviluppatore .NET, Visual Studio è ape per le sue esigenze fornendo un ricco ambiente di editing con funzionalità integrate che gli altri editor semplicemente non hanno per impostazione predefinita. E per quelle funzionalità che mancavano, l'ecosistema di estensione è completo come lo troverete. Quindi ho capito perché gli sviluppatori di .NET amano Visual Studio.
Per quanto riguarda il web, tecnologie come HTML, CSS e JavaScript sono state un ripensamento, fondamentalmente cittadini di seconda classe. E il supporto di jQuery, che era particolarmente importante per me, era un'altra cosa che Visual Studio non supportava. Avere un supporto integrato per le tecnologie e i framework di base, ma fondamentali, del web era un requisito chiave e senza di loro Visual Studio, per me, era DOA.
Fortunatamente, Microsoft ha chiarito che queste tecnologie erano incredibilmente importanti per la loro direzione, e questo ha dato il via a un sacco di aggiornamenti che hanno iniziato a modellare il percorso di Visual Studio verso un migliore supporto per gli sviluppatori web, in particolare gli sviluppatori front-end. Questo includeva il supporto per HTML5, CSS3 e JavaScript così come la spedizione di jQuery con Visual Studio, tutti gli aggiornamenti importanti che mi hanno fatto riconsiderare l'IDE per lo sviluppo web quando sono entrato in Microsoft.
Una delle prime cose che ho fatto quando ho iniziato a utilizzare Visual Studio nel 2010 è stata la creazione di un modello basato su HTML5 Boilerplate. L'ho fatto perché pensavo che i modelli predefiniti di Visual Studio non corrispondessero a quello che volevo, e Boilerplate è praticamente il modello goto per la maggior parte dei nuovi file. Questo ha funzionato alla grande per me perché ho la tendenza a dover creare molte pagine di prova fuori dal concetto e dover creare un progetto in piena regola non sarebbe l'ideale.
Visual Studio 2012 ora lo risolve consentendo di creare uno scheletro HTML molto semplice che è più vicino a ciò che la maggior parte degli sviluppatori Web vorrebbe:
Ciò avviene tramite un semplice "File-> Nuovo file" e scegliendo "Pagina HTML" dalle opzioni del modello. Lo stesso può essere fatto per fogli di stile o file JavaScript, sebbene i modelli siano barebone.
Questo modello è molto meno completo di HTML5 Boilerplate, ma la cosa importante da ricordare è che è un punto di partenza non Microsoft (che è importante per il mio sviluppo web).
E come ho descritto nel post del mio blog, puoi creare i tuoi modelli con funzionalità estese.
So cosa stai dicendo: "Sì, è carino Rey, ma mostraci qualcosa di più di uno scheletro HTML."Sto arrivando. Pazienza, cavalletta.
Gestire una grande quantità di codice del sito Web è dove penso che Visual Studio brilli davvero. Ho scaricato il progetto di framework TodoMVC di Addy Osmani e Sindre Sorhus perché è un insieme piuttosto grande di file con cui lavorare. Per succhiare il sito, è semplice come fare "File-> Apri sito Web ..." e scegliere una directory:
Questo mi dà quella che viene chiamata una "Soluzione" che aiuta a organizzare tutte le risorse per il mio sito Web e le visualizza in uno stile treeview:
Una delle migliori funzionalità di Solution Explorer è la possibilità di cercare una risorsa specifica all'interno dell'intera soluzione. Quindi, se volessi scoprire dove si trova jQuery, posso semplicemente inserire il termine "jquery" e restituirò un elenco di tutte le directory e i file corrispondenti:
L'editor stesso ha le caratteristiche che mi aspetto da un IDE, con elementi basilari come numeri di linea e codice collasso, con la possibilità di lavorare effettivamente in una modalità di progettazione e di mettere facilmente i file in modalità schermo diviso. Una cosa che è assolutamente necessaria per me è una buona conoscenza del codice in modo tale che mentre sto creando il codice, posso avere gli attributi presentati a me. È abbastanza difficile ricordare tutta la sintassi dei linguaggi di programmazione, quindi un piccolo aiuto per dirti che gli attributi sono una manna dal cielo. VS offre questo tramite Intellisense che ora supporta HTML5, CSS3 e JavaScript.
Quindi non solo vedo gli attributi disponibili per un elemento, ma mi mostrano anche i metodi che posso usare. Si noti che in questo esempio, ottengo Intellisense per l'elemento video HTML5. Non sono un sostenitore del codice inline ma il fatto che ci sia è ancora molto utile.
Per i CSS, ottieni comunque Intellisense che include l'elenco completo delle proprietà oltre a una descrizione di ciò che ciascuno fa:
E una volta selezionata una proprietà, fornisce suggerimenti sul codice per aiutarti a ricordare come formattare le tue affermazioni:
Naturalmente, insieme a queste funzionalità, VS ha funzioni intelligenti per rendere banali compiti come il picking dei colori:
JavaScript e il DOM hanno anche ricevuto l'amore in Visual Studio, essendo un linguaggio di prima classe nell'IDE; non più plugin per renderlo utilizzabile. Ancora una volta, concentrandosi su Intellisense, VS offre pieno supporto per oggetti, metodi e proprietà JavaScript e DOM:
Il supporto di jQuery è stato incluso da qualche tempo e il supporto di Intellisense per altri framework popolari può essere trovato su Internet. E Visual Studio 2012 ora viene fornito con jQuery Mobile per consentire agli sviluppatori di creare siti mobili.
Ecco qualcosa che potresti non aver saputo. Visual Studio ti consente non solo di testare contro tutti i principali browser che hai installato sul tuo sistema, ma fornisce anche uno strumento chiamato Page Inspector che è simile agli strumenti di debug web trovati nella maggior parte dei browser. Con Page Inspector puoi vedere la tua pagina in tempo reale e apportare modifiche in tempo reale ai CSS e al DOM. Una volta che sei soddisfatto di queste modifiche, puoi salvarle nuovamente nei tuoi file sorgente. Ad esempio, nota come ho modificato il testo del tweet nello screenshot seguente aggiornandolo all'interno del markup:
L'ovvio vantaggio di questo è che non è necessario abbandonare l'editor per testare la tua pagina e apportare modifiche. E poiché i cambiamenti stanno accadendo dal vivo, si tratta semplicemente di prendere il codice interessato e incollarlo nel codice sorgente. Ciò è possibile perché Visual Studio sfrutta il motore di rendering Trident di Internet Explorer e una versione integrata di Internet Information Server (IIS) per consentirti di eseguire il tuo sito in modo dinamico. Esatto, Visual Studio viene fornito con un server Web (e lo è già da tempo).
Queste sono senza dubbio funzioni utili, ma il flusso di lavoro di uno sviluppatore web è più complesso della semplice modifica di un paio di pagine o stili CSS. E onestamente, molte delle funzionalità sono disponibili per gli editor di codice, anche se tramite plugin di comunità.
Visual Studio ha reso JavaScript un linguaggio di prima classe.
Quello che penso rende Visual Studio un ottimo IDE per lo sviluppo web è un'estensione chiamata Web Essentials. È il pezzo mancante di un ambiente di codifica altrimenti solido perché aggiunge un numero di funzionalità che sono essenziali. Questa estensione estende Visual Studio supportando funzionalità come:
E c'è molto di più. Mads Kristensen, il creatore di Web Essentials, ha fatto un lavoro stellare di distillazione di ciò che gli sviluppatori web stanno usando e di portarlo nell'estensione.
Ad esempio, garantire la compatibilità del browser è una parte fondamentale del nostro lavoro, ma con così tante proprietà da ricordare, può essere un po 'scoraggiante ricordare cosa funziona dove. Web Essentials ti aiuta a vedere il livello di supporto del browser per le proprietà CSS:
E per fare un ulteriore passo avanti, ti dirà anche quando ti mancano i prefissi dei fornitori, una considerazione importante per garantire che il tuo sito funzioni su tutti i principali browser:
Oltre a consentire di inserire i prefissi del fornitore in base alle preferenze del browser di destinazione:
Mentre questo aggiungerà solo i prefissi dei fornitori mancanti per questa specifica proprietà, Web Essentials include la possibilità di farlo a tutta pagina e può anche aggiungere la versione mancante non prefissata della proprietà per aiutare il codice a prova di futuro.
Dal momento che stiamo parlando del supporto del browser, il dover supportare versioni precedenti di IE è un po 'trascinante, e ricordare tutti gli hack necessari a rendere bene il rendering di una pagina è impossibile. Sì, Web Essentials offre la possibilità di inserire specifici hack per far funzionare correttamente le tue pagine:
Il cranio e le ossa incrociate sono piuttosto appropriati.
I preprocessori CSS sono di gran moda e giustamente. La possibilità di creare dichiarazioni variabili e creare mixin in CSS è un enorme vantaggio, soprattutto quando si gestiscono fogli di stile di grandi dimensioni. MENO è una delle soluzioni più popolari. In effetti, ho fatto un sondaggio in cui LESS era uno dei framework più popolari in uso. Web Essentials porta LESS a Visual Studio in modo che, mentre scrivi, puoi visualizzare l'output CSS in tempo reale, tramite una finestra di anteprima:
La finestra di anteprima, insieme al supporto completo dell'editor e alla possibilità di impostare le opzioni del compilatore, è un vantaggio per gli sviluppatori che desiderano utilizzare Visual Studio e hanno bisogno del supporto di LESS.
Ho solo scalfito la superficie delle funzionalità CSS di Web Essentials. C'è solo tanta ricchezza in questo articolo.
Visual Studio è uno dei migliori IDE disponibili.
Come ho detto, Visual Studio ha reso JavaScript un linguaggio di prima classe. Tuttavia, mancano alcune esigenze critiche del flusso di lavoro e Web Essentials le riempie. Ad esempio, ogni sviluppatore dovrebbe mostrare il proprio codice JavaScript. È solo una buona pratica e aiuta a prevenire errori di linguaggio comuni. JSHint è un fork molto popolare di JSLint creato da Anton Kovalyov ed è ampiamente utilizzato dagli sviluppatori per analizzare il loro codice per potenziali problemi. Web Essentials include JSHint, che consente di filtrare il codice in qualsiasi momento. Può anche essere configurato per filtrare tutto il codice al momento della compilazione.
Poiché ho menzionato il tempo di compilazione, Web Essentials include anche la possibilità di ridimensionare i file in qualsiasi momento. Ma ci vuole un ulteriore passo aggiornando i file minificati quando il file sorgente originale viene aggiornato, e crea anche una mappa sorgente per facilitare il debugging in un secondo momento.
Molti sviluppatori amano usare linguaggi specifici del dominio come CoffeeScript e TypeScript. Per alcuni, il linguaggio supponente di CoffeeScript lo rende estremamente attraente rispetto alla codifica in plain ole JavaScript. Bene, questi sviluppatori possono essere giudicati in VS grazie a Web Essentials. Mads ha aggiunto il supporto per entrambi i DSL, aggiungendo un supporto di anteprima simile che ho menzionato in precedenza riguardo a LESS. Mentre digiti il codice TypeScript o CoffeeScript, puoi vedere il codice JavaScript risultante in tempo reale. E quando tutto è pronto, Web Essentials può ridimensionare il codice per te:
Mads ha aggiunto anche le caratteristiche HTML. Se ti piacciono i codici Zen (l'ho sempre trovato un po 'strano), allora i Web Essentials ti hanno coperto. Se scrivo questo in VS e premo il tasto Tab:
div # contentRegion.address
Otterrò il seguente codice:
È molto bello Non è la mia tazza di tè, ma comunque cool.
E mentre era lì, ha aggiunto il supporto per i motori di template client-side come Handlebars e JSRender, Markdown e un generatore Lorem Ipsum.
Sto davvero cominciando a chiedermi se Mads dorme.
Spero di aver dimostrato che Visual Studio ha un ottimo supporto per HTML, CSS e JavaScript. Il team di Microsoft ha lavorato sodo per renderlo un IDE di livello mondiale per gli sviluppatori web. Per me, l'elemento essenziale che lo rende la mia scelta per lo sviluppo web è l'estensione Web Essentials. Mi fornisce quel tocco in più di funzionalità di cui ho bisogno per gestire il mio flusso di lavoro. Certo, ogni sviluppatore ha esigenze diverse e non sto professando di aver indirizzato tutto il tuo. Spero, tuttavia, di aver delineato e dimostrato abbastanza caratteristiche per dimostrare che VS è più che capace di sviluppo web.
Accentsconagua