Share
Quand vous y réfléchissez, la phrase "développement moderne" est relativement nouvelle! Comparé aux plateformes et aux industries concurrentes, le Web en est encore à ses balbutiements. Cela dit, il suffit de lire un fil Twitter spécifique au développement ou de dire bonjour sur quelques canaux IRC applicables pour comprendre à quel point nos techniques et nos processus progressent dans l'ère moderne du développement frontal..
Codez manuellement du code HTML (en majuscules, bien sûr), ajoutez une touche de CSS en ligne, insérez votre GIF animé préféré et vous avez terminé.!
Il est amusant de se souvenir de l'époque, il n'y a pas si longtemps, lorsque la création d'un site Web simple impliquait à peine plus qu'un éditeur de texte (peut-être même Notepad) et un peu de compréhension de HTML et de CSS. Pas un fan d'Internet Explorer 7? À l'époque, à la fin des années 90, Internet Explorer 3 était en train de se mettre en forme, si vous pouvez l'imaginer! Bien que l’écosystème ne soit pas aussi mature qu’aujourd’hui, le processus était plus simple. Codez manuellement du code HTML (en majuscules, bien sûr), ajoutez une touche de CSS en ligne, insérez votre GIF animé préféré, et vous avez terminé! Envoyez ce mauvais garçon dans Geocities et attendez que le trafic vienne!
Ahh, c'étaient les jours. Heureusement, le Web a énormément mûri depuis. En fait, en tant que communauté, nous avons convenu d’une pléthore de meilleures pratiques et d’outils. Nous utilisons le contrôle de version pour collaborer sur des projets open source. Nous adoptons un développement basé sur des tests pour JavaScript (en utilisant des outils tels que Mocha et Jasmine). Nous évitons de "réinventer la roue", en concentrant nos efforts sur des bibliothèques hautement testées, telles que jQuery. Nous nous sommes libérés du code des spaghettis invraisemblable en soulignant la nécessité de disposer de frameworks dédiés, tels que Backbone et Ember. Nous avons même appliqué les principes de la programmation orientée objet à notre CSS (OOCSS)! Oui, mesdames et messieurs, le moment est propice pour devenir développeur front-end!
Dans un océan d'outils, de bibliothèques et de cadres, lesquels devriez-vous utiliser??
Bien que tout cela puisse sembler accablant au début (ne vous inquiétez pas, cela devrait être le cas; nous avons tous ressenti la même chose à un moment ou à un autre), chacun des éléments énumérés ci-dessus est une condition préalable à la création d'applications modernes intégrant plusieurs navigateurs. La seule question est: dans un océan d'outils, de bibliothèques et de frameworks, lesquels devriez-vous utiliser? Ou, plus simplement, comment séparez-vous l’abandonware de la crème de la crème? Cet article fournit une position quelque peu opionée sur les outils que vous devriez utiliser, ainsi que quelques alternatives pour chaque catégorie..
Mettons les choses ainsi: si vous ne connaissez pas les tenants et les aboutissants de votre éditeur de code, vous le faites mal. Si vous occupez un poste nécessitant pratiquement huit heures par jour de travail au sein d'un seul éditeur de code (soyons honnêtes, c'est bien plus que cela), ne devriez-vous pas consacrer les ressources nécessaires à l'optimisation de votre flux de travail? Même une réduction de cinq secondes d'une tâche de votre flux de travail quotidien peut vous faire gagner un temps considérable, tout au long de l'année..
Si vous vous êtes stagné sur vos lauriers dans le même éditeur au cours de la dernière décennie, il est peut-être temps d'envisager d'autres solutions..
Même il y a quelques années, vous auriez du mal à trouver un développeur qui sache ce qu'est Sublime Text. Aujourd'hui, il s'agit sans conteste de l'éditeur de code le plus évangélisé de notre secteur. La raison en est évidente; Alors que les éditeurs concurrents, tels que TextMate et Coda, sont soit tombés à l’eau ou déçus de sa base d’utilisateurs par des mises à jour accablantes, l’équipe Sublime Text (composée d’une seule personne, croyez-le ou non) concentre l'essentiel de ses efforts sur l'aspect le plus important de votre flux de travail de développement: vitesse. Et, mon garçon, mon garçon est rapide à Sublime. En appuyant simplement sur une touche, vous basculez facilement de fichier en fichier avec une telle finesse et une telle finesse que vous en avez marre de parcourir manuellement une arborescence de fichiers, comme vous le faisiez autrefois..
Comme dans la plupart des choses de la vie, la popularité de Sublime a une raison. Bien que pas gratuit, c'est le meilleur éditeur de code disponible aujourd'hui. Période.
"Il y a une raison à la popularité de Sublime."
Si Sublime Text offre l'éditeur de code traditionnel pinnacle, LightTable espère révolutionner complètement l'expérience de codage. Bien qu’il reste encore dans un état alpha, les progrès réalisés jusqu’à présent ont été incroyablement prometteurs. Imaginez avoir la possibilité d'évaluer votre JavaScript en temps réel, sans jamais quitter l'éditeur. Ce niveau de rétroaction en temps réel est sans précédent. Combinez la vitesse et la configurabilité de Vim avec l'élégance à laquelle nous nous attendons des applications modernes; LightTable offre cela et plus encore. Pourrait-il dépasser Sublime Text en 2013? Nous devrons attendre et voir! Jusque-là, gardez un œil attentif sur celui-ci!
"LightTable pourrait-il dépasser Sublime Text en 2013? Il faudra attendre et voir!"
Il y a certes eu un mouvement d'abandon des IDE complètes au cours des dernières années, néanmoins, beaucoup continuent à défendre leurs avantages. Heureusement, il existe une variété d'options à choisir! Plus particulièrement, l'équipe JetBrains a réalisé un travail remarquable au cours des dernières années en maintenant divers IDE spécifiques à une plate-forme, notamment WebStorm, PHPStorm et RubyMine..
Si vous préférez un tel IDE, placez l'offre de JetBrains en haut de votre liste "à réviser". Vous ne serez pas déçu.
"Si vous êtes un de ceux qui préfèrent un tel IDE, placez l'offre de JetBrains en haut de votre liste" à réviser "."
Vous pensez peut-être à vous-même: "Pourquoi Vim serait-il inclus dans une liste d'outils modernes?" Bien que Vim, ou à l'origine Vi, existe bel et bien depuis des décennies, la vérité est qu'il s'agit en réalité d'un éditeur moderne qui reste en développement actif. En termes d'extensibilité et de rapidité, il est difficile de dépasser Vim. Gardez cependant à l'esprit que si vous lui en donnez la chance, vous devriez prévoir des mois d'entraînement. C'est un éditeur notoirement difficile à utiliser. Cependant, une fois que vous avez validé ces associations de touches en mémoire, vous serez imparable!
"Vim est un éditeur notoirement difficile à utiliser."
Brackets est unique en ce sens qu’il s’agit d’un éditeur de code open-source développé par Adobe, qui pousse HTML, CSS et JavaScript à l’extrême: c’est construit avec ces mêmes technologies! Par conséquent, tant que vous avez une compréhension relativement élémentaire de JavaScript, vous disposez déjà des outils nécessaires pour étendre l'éditeur à votre guise. Les développeurs front-end font la même chose tous les jours, en fait.
Bien qu'il ait encore besoin d'être peaufiné, Brackets est en plein développement. Attendez-vous à ce que celui-ci soit récompensé cette année par Sublime Text!
"Attendez-vous à voir Brackets donner à Sublime Text le temps de courir pour son argent cette année!"
Au fur et à mesure que l'industrie évolue, nous commençons à voir l'adoption généralisée d'une nouvelle méthodologie permettant de fournir des expériences très réactives sur le Web: les SPA, ou applications Web d'une seule page. Tandis que, dans le passé, un effort aussi ambitieux aurait nécessité une quantité écrasante de code, heureusement, grâce à divers cadres, le processus est plus simple que jamais! Les outils suivants vont relancer votre processus.
Actuellement le champion en titre des frameworks JavaScript (du moins en terme de popularité), Backbone fournit une structure à votre code jQuery spaghetti!
Bien que cela puisse nécessiter un peu de réflexion, votre compréhension du framework MVC (ou MV *) côté client (en particulier si vous venez d’un framework côté serveur, tel que Rails ou Laravel), vous comprenez parfaitement l'essentiel, vous vous retrouverez à écrire du code élégant, modulaire, élégant.
En espérant un cours accéléré dans Backbone? Découvrez Tuts + Premium et CodeSchool; ils vous ont préparé en un temps record.
"Backbone fournit une structure à votre code jQuery spaghetti négligé!"
Ember est le successeur spirituel de SproutCore, un puissant framework JavaScript qui a tenté de porter l'interface utilisateur de Cocoa sur le Web. La raison du changement de nom provient du fait que la base de code a été complètement réécrite à partir de zéro, dans le but de rompre avec une quantité considérable de code hérité et de fausses façons de penser..
Comme le disent les équipes Ember, le succès de Backbone leur a prouvé que la communauté de développement souhaitait réellement créer des applications réactives côté client. Cependant, elles possédaient également des années d'expérience dans la création d'interfaces utilisateur personnalisées avec HTML et CSS. La tentative de SproutCore de remplacer cela, en faveur d'une interface utilisateur semblable à celle de Cocoa, n'était pas la bonne voie.
De cet échec est né Ember, un nouveau cadre qui fait son chemin dans la communauté du développement à une vitesse record. Si Backbone ne vous convient pas, passez à Ember.
"Si Backbone ne vous convient pas, passez à Ember."
Angular, développé et soutenu par Google, emprunte un chemin différent en fournissant les outils nécessaires pour étendre le vocabulaire HTML pour vos applications, selon les besoins. Alors que certains estiment que ce type de liaison de données crée un code complexe et non séparé, d'autres défendent sa flexibilité et sa facilité de développement..
Comme le dit l'équipe angulaire, HTML n'a pas été conçu pour gérer les vues dynamiques. Angular comble cette lacune flagrante. Quelle est votre opinion?
"HTML n'a pas été conçu pour gérer les vues dynamiques. L'angle comble ce vide criant."
Knockout, l'un des frameworks JavaScript modernes d'origine, qui a précédé Angular, préconise également une approche de liaison de données pour la création d'applications réactives avec un minimum de code..
Bien que, là encore, d'innombrables développeurs se soient opposés à cette approche, force est de constater qu'elle a ses mérites. Ce qui peut nécessiter des centaines de lignes de code dans Backbone peut être accompli avec seulement quelques dizaines dans Knockout. La seule question est: pouvez-vous dormir la nuit, avec toutes ces liaisons de données dans votre code HTML? Il n'y a pas de réponse correcte à cette question. Seule préférence.
"Ce qui peut nécessiter des centaines de lignes de code dans Backbone peut être accompli avec seulement quelques douzaines dans Knockout."
Meteor est un nouveau JavaScript full-stack, optimisé par Node.js. Il est garanti que votre approche de l'écriture d'applications Web hautement réactives et dynamiques sera révolutionnée..
Imaginez que vous rédigiez l'intégralité de votre application en JavaScript. pas seulement du côté client, mais aussi de la couche de persistance! Avec chaque API proposée dans une seule langue, imaginez la commodité et la flexibilité que cela pourrait offrir.!
Bien que le framework n’ait pas encore atteint la version 1.0, tant que le développement reste actif, vous devez absolument étudier cette nouvelle approche pour écrire des applications..
"Imaginez que vous rédigiez l'intégralité de votre application uniquement en JavaScript."
Comme indiqué précédemment, le monde frontal a énormément évolué au cours des cinq dernières années. À un moment donné, la communauté a eu le béguin pour écrire même une seule ligne de code JavaScript. Aujourd'hui, faites des progrès rapides, et non seulement les bibliothèques et les frameworks JavaScript semblent interminables, mais les tests (et même le modèle TDD) sont passés au premier plan..
Tandis qu'il existe une variété de cadres de test parmi lesquels choisir, notamment Jasmine et QUnit, selon l'auteur, expérimentez d'abord Mocha, créé par la même personne qui est à l'origine de Stylus et du cadre Express: TJ Holowaychuk..
"Mocha a été construit par la même personne qui se cache derrière Stylus et le framework Express: TJ Holowaychuk."
Pendant des années, la communauté front-end a débattu de la nécessité d'un prétraitement CSS. La langue est simple. pourquoi est-ce que nous le compliquons? Heureusement, au fil du temps et au fur et à mesure que la pile Web évoluait, la majorité des développeurs front-end ont accepté le fait que, jusqu'à ce que le langage lui-même arrive à maturité, le prétraitement est une nécessité pour tous les sites Web, sauf les plus triviaux . Ne vous inquiétez pas: bon nombre de ces avantages du préprocesseur s'introduisent lentement mais sûrement dans la langue. Ces choses prennent simplement du temps.
Comme son site Web le dit si hardiment, Sass rend le CSS encore plus amusant. Variables, imbrication, mixins… Sass a tout. Plus important encore, si votre objectif est d’apprendre le préprocesseur le plus répandu, ainsi que divers frameworks basés sur celui-ci, tels que Compass, Sass devrait être votre choix..
Sass peut même s'adapter à vos besoins. Si le style spécifique à l'indent de l'original .toupet la syntaxe vous semble étrangère, puis passez simplement à l’autre .scss formater et continuer à écrire vos feuilles de style de la même manière que vous le faites depuis des années.
Il est fort probable que si vous rejoignez une équipe de développement dans un avenir proche, Sass sera leur préprocesseur de choix et celui qu'il vous sera demandé d'apprendre..
"Sass rend CSS amusant à nouveau."
La plupart du temps, vous constaterez que les trois préprocesseurs CSS les plus populaires, Sass, LESS et Stylus, sont plus ou moins identiques. Seules des différences de syntaxe modérées séparent les trois. Dans le passé, LESS était l’option la plus accessible pour les concepteurs Web, car elle offrait une syntaxe lisible de type CSS (quelque chose que Sass n’offrait pas à l’origine). En prime, il suffit d'importer un seul fichier JavaScript pour profiter de la flexibilité des feuilles de style dynamiques.
"Traditionnellement, LESS a plus attiré les concepteurs Web que Sass."
Un nouveau venu sur la scène, Stylus offre peut-être la plus grande flexibilité parmi les trois préprocesseurs de cette liste. Préférez les points-virgules? Garde les. Déteste utiliser des deux points pour séparer les propriétés et les valeurs? Retirez-les! La clé réside dans le fait que Stylus vous offre la possibilité de personnaliser vos feuilles de style comme bon vous semble. La configurabilité à son meilleur!
Le seul inconvénient (et un inconvénient majeur) est qu'en raison de son âge, il est plus que probable que les membres de votre équipe de développement, ou les contributeurs communautaires si vous développez une application open source, ne seront probablement pas encore familier avec Stylus.
"La configurabilité à son meilleur."
CoffeeScript, comme beaucoup pourraient le dire, rend JavaScript maniable. Il commence par supprimer les bits laids. Points-virgules? Disparu. Bretelles? Ceux qui sont dépouillés aussi. Parenthèse? Rendons-les optionnels. Il fournit ensuite un certain nombre de fonctionnalités qui, à toutes fins utiles, se traduisent par le sucre syntatique. Portée lexicale, splats, compréhension des tableaux, CoffeeScript offre tout cela, tout en compilant finalement en JavaScript.
Grâce à l’adoption accrue et aux améliorations apportées aux cartes source, de nombreux inconvénients liés à l’utilisation d’un tel préprocesseur deviennent rapidement inutiles. Si vous vous interrogez sur la nécessité d'un autre préprocesseur, ne craignez rien; À l'instar de Sass, de nombreuses innovations de CoffeeScript seront intégrées à la future version d'ECMAScript..
"CoffeeScript rend le JavaScript gérable."
Pour ceux qui ne peuvent pas se connecter avec la syntaxe Ruby-like de CoffeeScript, TypeScript est une excellente alternative. Il vous permet de continuer à écrire dans un dialecte de JavaScript tout en intégrant les derniers ajouts à ECMAScript 6. Semblable à CoffeeScript, votre code est finalement compilé en JavaScript simple qui peut être exécuté dans le navigateur..
"TypeScript vous permet de continuer à écrire dans un dialecte de JavaScript tout en intégrant les derniers ajouts à ECMAScript 6."
CodeKit, créé par le toujours drôle Bryan Jones, a explosé sur le monde frontal en 2012 et est maintenant utilisé par des sites tels que BarackObama.com et Engadget. Comme les stéroïdes pour les développeurs Web, il fusionne divers compilateurs, minificateurs et optimisations dans une superbe application Mac. Si le terminal ressemble à une boîte noire pour vous, limitant votre capacité à adopter et à exploiter les préprocesseurs mentionnés précédemment, alors CodeKit est votre solution..
"CodeKit a explosé sur le monde frontal en 2012."
LiveReload est assez similaire à CodeKit. En fait, abstraction faite de certaines différences d'interface utilisateur et de quelques-unes des fonctionnalités uniques de CodeKit, les deux applications vous permettront également de vous rendre du point A à Z, pour ainsi dire..
Comme CodeKit, LiveReload vous permet de surveiller les modifications apportées à un système de fichiers et d'effectuer le prétraitement et la compilation nécessaires en réponse. Il mettra également à jour automatiquement le navigateur lors de l'enregistrement de chaque fichier.
Contrairement à CodeKit, LiveReload est disponible pour Mac et Windows. En traduction, si vous utilisez Windows, LiveReload est, par défaut, votre seul choix. Ne t'inquiète pas c'est un bon!
"LiveReload est disponible pour Mac et Windows."
Avant le succès de jQuery, il est fort probable que vous ayez vu JavaScript sous le même jour que Voldemort. Abstenez-vous de prononcer son nom et évitez-le à tout prix. Alors que jQuery n'était pas la première bibliothèque à fournir une solution aux divers problèmes de navigateur croisés qui existaient à l'époque, c'était en fait la première bibliothèque à proposer une solution qui séduisait le concepteur front-end quotidien. Depuis lors, de nombreux développeurs ont emboîté le pas avec leurs propres excellentes bibliothèques..
Qu'y a-t-il à noter à propos de jQuery qui n'a pas déjà été dit? jQuery a rendu JavaScript accessible et a suscité une nouvelle génération de développeurs enthousiastes du côté client. C'est peut-être le plus grand compliment que l'on puisse faire à une bibliothèque. Bien que ce ne soit certainement pas la solution à tous les problèmes, il n’existe pas de meilleur outil pour manipuler le DOM.
"Lorsqu'il s'agit de manipuler le DOM, il n'y a pas de meilleur outil."
Avez-vous déjà senti que JavaScript manquait à de nombreuses fonctions natives évidentes, telles que trouver, cueillir, ou mélanger? Si oui, vous ne seriez certainement pas le premier. Heureusement, la bibliothèque populaire Underscore fournit cette fonctionnalité manquante. Pensez-y comme une ceinture utilitaire offrant quelques douzaines de fonctions d’aide que vous auriez, sinon, coder à partir de zéro, comme pour chaque nouveau projet.
Si vous utilisez Backbone, vous connaissez probablement déjà Underscore, car il s'agit d'une dépendance difficile du framework..
"Avez-vous déjà senti que JavaScript manquait à de nombreuses fonctions évidentes pour les langues autochtones?"
d3js.org
D3 est une fantastique bibliothèque de visualisation de données basée sur JavaScript qui vous permet de lier des données au DOM, puis de transformer le document. Pour en savoir plus, reportez-vous au référentiel GitHub de D3 pour une galerie complète d’exemples permettant de visualiser divers ensembles de données..
"D3 est une fantastique bibliothèque de visualisation de données basée sur JavaScript."
Une fois que vous optimisez votre flux de travail de codage, il devient rapidement évident que des outils et des fonctionnalités supplémentaires peuvent être nécessaires. Ces outils incluent tout, des chargeurs de modules aux testeurs.
À un moment donné, vous allez sûrement commencer à vous éloigner de l'idée d'imbriquer tout votre JavaScript dans un seul fichier. Lorsque ce jour arrivera, vous rencontrerez rapidement RequireJS, un chargeur de fichiers / modules. Malheureusement, le passage à une approche modulaire de l'écriture de JavaScript est un processus plus difficile que l'on pourrait espérer. Une fois que vous avez compris le concept d’AMD, vous devez ensuite décoder la logistique: comment configurer RequireJS? Qu'en est-il des bibliothèques non-AMD? Qu'en est-il de la gestion de la dépendance? Qu'en est-il de la configuration et de l'optimisation? Certes, il faut apprendre, mais cela en vaut la peine.
"RequireJS est facilement le chargeur de modules le plus populaire disponible à ce jour."
Un obstacle important aux tests est le simple fait qu'il faut parfois beaucoup de temps pour être opérationnel. Plus cela prend de temps, plus il est probable que le développeur ne se souciera tout simplement pas. C'est pourquoi Testem est si fantastique. les tests sont aussi faciles que possible et, surtout, amusants!
Grunt est essentiellement un outil de ligne de commande basé sur des tâches simple permettant de créer des applications JavaScript. Considérez-le comme un outil capable d'exécuter une variété d'opérations petites mais communes. Compilation, minification, exécution de tests, déploiement - chacun de ces éléments peut et doit être automatisé. Avec Grunt, les processus longs tels que celui-ci peuvent être traduits en une seule commande.
Nous en avons tous fait l'expérience. votre site Web s'affiche à merveille dans Chrome et Firefox, mais vous le visualisez ensuite dans Internet Explorer et vous comprenez que vous allez consacrer plusieurs heures à la prise en charge de plusieurs navigateurs..
Normaliser permet à tous les navigateurs de rendre les éléments de la manière la plus cohérente possible. Avez-vous déjà éprouvé l’ennui de déboguer une incohérence de hauteur d’entrée de trois pixels, d’un navigateur à l’autre? Avec Normalize, vous ne vous en occuperez plus jamais!
"Normaliser fait en sorte que tous les navigateurs affichent les éléments de la manière la plus cohérente possible."
Boilerplate HTML5 est le produit de nombreuses années d'expérience et de bricolage. Il s'agit du projet ultime, utilisé par des sociétés telles que Google, Microsoft et la NASA. La meilleure partie est que, même si vous n'adhérez jamais pleinement au projet, il reste une ressource fantastique, ne serait-ce que pour le copier-coller..
"Le produit d'années et d'années d'expérience et de bricolage."
Alors que le monde du développement prêche souvent la nécessité d'un code réutilisable, la vérité est que, lorsqu'il s'agit de CSS, ce conseil est le plus souvent ignoré. Combien de fois vous êtes-vous retrouvé à écrire le style nécessaire pour un article de blog ou une boîte de message? Si seulement quelqu'un fournissait un paquet propre avec ces composants réutilisables, nous pourrions échafauder de nouvelles applications avec une vitesse incroyable!
Entrez Bootstrap. Développé par l'équipe de Twitter, Bootstrap fournit une pléthore de composants et de classes (basés sur CSS et JavaScript) afin de minimiser la quantité de code passe-partout à écrire pour chaque nouveau projet. Cela inclut tout, d'une feuille de style de réinitialisation à de beaux boutons en passant par des boîtes modales activées par JavaScript. Bootstrap est un choix fantastique, particulièrement pour les non-designers..
"Bootstrap est un choix fantastique, en particulier pour les non-designers."
Si Twitter Bootstrap ne vous fascine pas vraiment, alors votre deuxième choix sera certainement Foundation 4, de la part de Zurb. Semblable à Bootstrap, Foundation propose une grille flexible, des plugins JavaScript et divers composants CSS pour un échafaudage rapide. La vérité est que vous ne pouvez pas vous tromper avec l’un ou l’autre choix. En fin de compte, il s’agit d’une chose: les préférences personnelles. Lequel se sent juste pour toi?
"Si Twitter Bootstrap ne vous séduit pas vraiment, alors votre deuxième choix devrait être définitivement Foundation 4."
C’est vrai: au fur et à mesure que notre écosystème mûrit, il devient nécessaire de poursuivre la formation et d’expérimenter les derniers outils et cadres. Mais, hé, nous nous sommes inscrits pour ça; pas de soucis permis! Nous avons l’occasion unique d’être, dans le grand schéma des choses, l’équipe de développement phare de l’innovation la plus révolutionnaire de notre histoire: Internet.
Accentsconagua