Share
Les développeurs sont un groupe difficile, presque au point de superstition et de magie vaudou, quand il s'agit de leurs outils. Si vous prenez en compte le nombre incalculable de choses que nous utilisons pour construire des applications (Node, Grunt, Fiddler, LESS, EC2, etc.), il n’est pas surprenant que, une fois que nous trouvons un joli combo, nous le gardons comme un écureuil avec son dernier écrou. Et cela a du sens, car votre environnement de développement est très important pour votre réussite..
Ce que je pense qui fait de Visual Studio un excellent IDE pour le développement Web est une extension appelée Web Essentials..
Votre seul outil qui, à mon avis, a toujours été une préférence incroyablement personnelle et basée sur les opinions est votre IDE ou votre éditeur. Tout ce qui compte, des frappes de touche au support linguistique en passant par les plugins et les thèmes. Tout cela doit bien s'inscrire dans votre style de développement et, plus important encore, il doit vous aider à résoudre les problèmes auxquels vous êtes confronté sans vous faire sauter à travers des cerceaux.
Visual Studio est l’un des meilleurs IDE disponibles, intégrant facilement une multitude de fonctionnalités permettant aux développeurs de réussir. Mais il n'a pas vraiment été considéré comme un éditeur de "développeur Web", car il ciblait traditionnellement la plate-forme Microsoft avec de nombreuses fonctionnalités facilitant considérablement le codage de cette plate-forme. Et, bon nombre de ces fonctionnalités ne s'appliquaient pas vraiment aux développeurs qui ne ciblaient pas une plate-forme Microsoft.
Alors que Microsoft adopte sans réserve les technologies HTML5, CSS3 et JavaScript pour le développement d'applications Web et Windows 8, de nombreux changements ont été apportés à Visual Studio 2012 qui en font un outil formidable pour la création Web. C’est ce que j’ai l’intention de couvrir, et j'espère que vous le verrez sous un jour très différent..
L'une des meilleures fonctionnalités de l'explorateur de solutions est que je peux rechercher un actif spécifique dans l'ensemble de la solution..
Je me souviens avoir regardé Visual Studio moi-même il y a de nombreuses années sans vraiment le prendre au sérieux. Ce n'était pas parce que ce n'était pas un IDE puissant. Nous nous sommes sentis carrément ciblés sur la création d'applications et de sites .NET - et en fait, c'était le cas. Ce n'est pas une mauvaise chose, car si vous demandez à n'importe quel développeur .NET, Visual Studio répond parfaitement à leurs besoins en fournissant un environnement d'édition riche avec des fonctionnalités intégrées que d'autres éditeurs n'ont tout simplement pas par défaut. Et pour les fonctionnalités qui manquaient, l'écosystème d'extension est aussi complet que vous le trouverez. Je peux donc totalement comprendre pourquoi les développeurs .NET aiment Visual Studio.
Cependant, s’agissant du Web, des technologies telles que HTML, CSS et JavaScript ont été adoptées après coup, essentiellement par des citoyens de seconde zone. Et le support jQuery, qui était particulièrement important pour moi, était une autre chose que Visual Studio ne supportait pas. Avoir un support intégré pour les technologies et les infrastructures de base, mais critiques, du Web était une exigence clé et sans eux, Visual Studio était pour moi DOA.
Heureusement, Microsoft a clairement indiqué que ces technologies étaient extrêmement importantes pour leur direction, ce qui a donné lieu à une tonne de mises à jour qui ont commencé à guider Visual Studio vers un meilleur support pour les développeurs Web, en particulier les développeurs front-end. Cela comprenait la prise en charge de HTML5, CSS3 et JavaScript ainsi que la livraison de jQuery avec Visual Studio, toutes les mises à jour importantes qui m'ont amené à reconsidérer l'EDI pour le développement Web lorsque j'ai rejoint Microsoft..
Une des premières choses que j'ai faites lorsque j'ai commencé à utiliser Visual Studio en 2010 a été de créer un modèle basé sur HTML5 Boilerplate. Je l'ai fait parce que je sentais que les modèles par défaut de Visual Studio ne correspondaient pas à ce que je voulais et Boilerplate est à peu près identique au modèle goto de la plupart des nouveaux fichiers. Cela a très bien fonctionné pour moi car j'ai tendance à avoir besoin de créer beaucoup de pages de validation de principe uniques et devoir créer un projet complet ne serait pas idéal..
Visual Studio 2012 résout maintenant ce problème en vous permettant de créer un squelette HTML très simple, plus proche de ce que souhaiteraient la plupart des développeurs Web:
Cela se fait via un simple "Fichier-> Nouveau fichier" et en choisissant "Page HTML" parmi les options du modèle. La même chose peut être faite pour les feuilles de style ou les fichiers JavaScript, bien que les modèles soient nus.
Ce modèle est beaucoup moins complet que HTML5 Boilerplate, mais il est important de noter qu'il s'agit d'un point de départ non-Microsoft (important pour le développement Web)..
Et comme je l'ai décrit dans mon article de blog, vous pouvez créer vos propres modèles avec des fonctionnalités étendues..
Je sais ce que vous dites: "Oui, c'est mignon Rey, mais montre-nous quelque chose de plus qu'un squelette HTML."J'y arrive. Patience, sauterelle.
Je pense que Visual Studio brille vraiment dans la gestion d’une grande quantité de code de site Web. J'ai téléchargé le projet d'infrastructure TodoMVC d'Addy Osmani et Sindre Sorhus, car il s'agit d'un assez gros ensemble de fichiers à utiliser. Pour aspirer le site, il suffit de faire "Fichier-> Ouvrir le site Web…" et de choisir un répertoire:
Cela me donne ce que l'on appelle une "solution" qui aide à organiser tous les actifs de mon site Web et les affiche sous forme d'arborescence:
L'une des meilleures fonctionnalités de l'Explorateur de solutions est que je peux rechercher un actif spécifique dans l'ensemble de la solution. Donc si je veux trouver où se trouve jQuery, je peux simplement entrer le terme "jQuery" et il retournera une liste de tous les répertoires et fichiers qui le correspondent:
L'éditeur lui-même présente les fonctionnalités que j'attend d'un IDE, avec des éléments de base tels que les numéros de ligne et le code qui permet de travailler en mode conception et de placer facilement vos fichiers en mode écran divisé. Un élément essentiel pour moi est une bonne compréhension du code afin que, lors de la création du code, les attributs me soient présentés. Il est déjà assez difficile de se souvenir de la syntaxe de tous les langages de programmation, aussi un petit assistant pour vous dire les attributs est une aubaine. VS le propose via Intellisense, qui prend désormais en charge HTML5, CSS3 et JavaScript.
Ainsi, non seulement je vois les attributs disponibles pour un élément, mais cela me montre également les méthodes que je peux utiliser. Notez que dans cet exemple, j'obtiens Intellisense pour l'élément vidéo HTML5. Je ne suis pas un partisan du code en ligne mais le fait qu'il soit là reste très utile.
Pour CSS, vous obtenez toujours Intellisense, qui comprend la liste complète des propriétés, en plus d’une description de ce que chacun fait:
Et une fois que vous avez sélectionné une propriété, elle fournit des conseils de code pour vous aider à vous rappeler comment formater vos déclarations:
Bien entendu, en plus de ces fonctionnalités, VS possède des fonctionnalités intelligentes pour rendre les tâches telles que la sélection des couleurs triviales:
JavaScript et le DOM ont également reçu de l'amour dans Visual Studio, un langage de premier ordre dans l'EDI; plus de plugins pour le rendre utilisable. Encore une fois, en se concentrant sur Intellisense, VS offre une prise en charge complète des objets, méthodes et propriétés JavaScript et DOM:
La prise en charge de jQuery est incluse depuis un certain temps et la prise en charge d’Intellisense pour d’autres frameworks populaires est disponible sur Internet. Et Visual Studio 2012 est maintenant livré avec jQuery Mobile pour permettre aux développeurs de créer des sites mobiles..
Voici quelque chose que vous n'avez peut-être pas su. Visual Studio vous permet non seulement de tester tous les principaux navigateurs que vous avez installés sur votre système, mais fournit également un outil appelé Inspecteur de page similaire aux outils de débogage Web de la plupart des navigateurs. Avec Page Inspector, vous pouvez voir votre page en temps réel et apporter des modifications en direct à CSS et au DOM. Une fois que vous êtes satisfait de ces modifications, vous pouvez les enregistrer dans vos fichiers source. Par exemple, remarquez comment j'ai modifié le texte du tweet dans la capture d'écran suivante en le mettant à jour dans le balisage:
L'avantage évident est que vous n'avez pas besoin de quitter votre éditeur pour tester votre page et y apporter des modifications. Et comme les changements se produisent en direct, il suffit de récupérer le code affecté et de le coller dans votre code source. Cela est possible car Visual Studio exploite le moteur de rendu Trident d'Internet Explorer ainsi qu'une version intégrée d'Internet Information Server (IIS) pour vous permettre d'exécuter votre site de manière dynamique. C'est vrai, Visual Studio est livré avec un serveur Web (et ce depuis un certain temps)..
Ce sont sans doute des fonctionnalités utiles, mais le flux de travail d'un développeur Web est plus complexe que la simple édition de quelques pages ou de styles CSS. Et honnêtement, de nombreuses fonctionnalités sont disponibles pour les éditeurs de code, bien que via des plugins de communauté..
Visual Studio a fait de JavaScript un langage de premier ordre.
Ce qui, à mon avis, fait de Visual Studio un excellent IDE pour le développement Web est une extension appelée Web Essentials. C'est la pièce manquante d'un environnement de codage par ailleurs solide, car il ajoute un certain nombre de fonctionnalités essentielles. Cette extension étend Visual Studio en prenant en charge des fonctionnalités telles que:
Et il y a tellement plus. Mads Kristensen, le créateur de Web Essentials, a fait un travail remarquable en analysant ce que les développeurs Web utilisent et en intégrant cela dans l'extension..
Par exemple, assurer la compatibilité des navigateurs est une partie essentielle de nos travaux, mais compte tenu du nombre de propriétés à garder en mémoire, il peut être un peu intimidant de savoir ce qui fonctionne où. Web Essentials vous permet de connaître le niveau de prise en charge des propriétés CSS par le navigateur:
Et pour aller plus loin, il vous indiquera même quand il vous manque des préfixes de fournisseur, un facteur important pour garantir que votre site fonctionne avec tous les principaux navigateurs:
En plus de vous permettre d'insérer les préfixes du fournisseur en fonction des préférences de votre propre navigateur cible:
Bien que cela ne fasse qu'ajouter les préfixes de fournisseur manquants pour cette propriété spécifique, Web Essentials inclut la possibilité de le faire sur toute la page et peut également ajouter la version manquante sans préfixe de la propriété pour vous aider à protéger votre code pour l'avenir..
Étant donné que nous parlons de la prise en charge des navigateurs, le fait de prendre en charge les anciennes versions d’IE est un peu fastidieux et il est impossible de se souvenir de toutes les astuces nécessaires pour bien rendre une page. Oui, Web Essentials offre la possibilité de mettre en place des hacks spécifiques pour que vos pages fonctionnent correctement:
Le crâne et les os croisés sont assez appropriés.
Préprocesseurs CSS sont à la mode et à juste titre. La possibilité de faire des déclarations de variable et de créer des mixins en CSS est un avantage énorme, en particulier lors de la gestion de feuilles de style volumineuses. MOINS est l'une des solutions les plus populaires. En fait, j’ai mené une enquête dans laquelle LESS était l’un des cadres les plus populaires. Web Essentials apporte LESS à Visual Studio afin que vous puissiez afficher la sortie CSS en temps réel via une fenêtre d'aperçu:
La fenêtre d’aperçu, ainsi que la prise en charge complète de l’éditeur et la possibilité de définir les options du compilateur, sont une aubaine pour les développeurs qui souhaitent utiliser Visual Studio et ont besoin de la prise en charge de LESS..
Je n'ai fait qu'effleurer la surface des fonctionnalités CSS de Web Essentials. Il y a tellement de richesse dans cet article.
Visual Studio est l'un des meilleurs IDE disponibles.
Comme je l'ai mentionné, Visual Studio a fait de JavaScript un langage de premier ordre. Certains besoins de flux de travail critiques manquent cependant, et Web Essentials les comble. Par exemple, tous les développeurs doivent imbriquer leur code JavaScript. C'est juste une bonne pratique et aide à prévenir les erreurs de langage commun. JSHint est un fork très populaire de JSLint créé par Anton Kovalyov et est largement utilisé par les développeurs pour analyser leur code pour détecter les problèmes potentiels. Web Essentials comprend JSHint, ce qui vous permet de modifier votre code à tout moment. Il peut également être configuré pour filtrer tout votre code au moment de la compilation..
Depuis que j'ai mentionné le temps de création, Web Essentials inclut également la possibilité de réduire au minimum la taille de vos fichiers à tout moment. Mais cela va encore plus loin en mettant à jour les fichiers minifiés lorsque le fichier source d'origine est mis à jour et en créant une carte source pour faciliter le débogage ultérieurement..
De nombreux développeurs préfèrent utiliser des langages spécifiques à un domaine, tels que CoffeeScript et TypeScript. Pour certains, le langage préconisé de CoffeeScript le rend extrêmement attrayant par rapport au codage en JavaScript. Eh bien, ces développeurs peuvent être commentés dans VS grâce à Web Essentials. Mads a ajouté un support pour les deux DSL, en ajoutant un support de prévisualisation similaire à celui que j'ai mentionné précédemment à propos de LESS. Lorsque vous tapez sur votre code TypeScript ou CoffeeScript, vous pouvez voir le code JavaScript résultant en temps réel. Et une fois que vous êtes prêt, Web Essentials peut réduire le code pour vous:
Mads a également ajouté des fonctionnalités HTML soignées. Si vous aimez le codage zen (je l'ai toujours trouvé un peu étrange), alors Web Essentials saura vous couvrir. Si je tape ceci dans VS et appuie sur la touche Tab:
div # contentRegion.address
Je vais avoir le code suivant:
C'est très cool. Pas ma tasse de thé mais cool quand même.
Et pendant son séjour, il a ajouté la prise en charge des moteurs de gabarit côté client tels que Handlebars & JSRender, Markdown et un générateur Lorem Ipsum..
Je commence vraiment à me demander si Mads dort.
J'espère avoir montré que Visual Studio seul prend vraiment en charge les langages HTML, CSS et JavaScript. L'équipe de Microsoft a travaillé d'arrache-pied pour en faire un IDE de classe mondiale pour les développeurs Web. Pour moi, l'élément essentiel qui en fait mon choix pour le développement Web est l'extension Web Essentials. Il me fournit les fonctionnalités supplémentaires dont j'ai besoin pour gérer mon flux de travail. Bien sûr, chaque développeur a des besoins différents et je ne prétends pas avoir répondu à tous les vôtres. J'espère cependant que j'ai présenté et démontré suffisamment de fonctionnalités pour montrer que VS est plus que capable pour le développement Web.
Accentsconagua