Share
Pendant huit mois, j'ai eu l'opportunité de faire un stage avec l'équipe YUI chez Yahoo, alors que je terminais mes études d'ingénieur. Aujourd'hui, j'aimerais partager les dix principales choses que j'ai apprises de mon expérience avec YUI.
L’équipe YUI est principalement responsable du développement et de la maintenance de la bibliothèque YUI. La bibliothèque est un ensemble de composants d'interface utilisateur, d'outils de gestion de classes et d'utilitaires écrits en JavaScript et CSS permettant aux développeurs de créer facilement des applications Web. Contrairement à d'autres bibliothèques, YUI ne concerne pas seulement la manipulation du DOM; il dispose d'un riche ensemble d'outils de gestion de classes et d'un système d'événements robuste qui facilite le développement en JavaScript.
En outre, l’équipe YUI est également responsable de YUI Theater, une ressource très populaire pour les développeurs Web, ainsi que d’une myriade d’outils plus petits, tels que YUI Builder, YUI Compressor, YUI Test, etc..
Mon rôle au sein de l'équipe était principalement d'aider à développer des composants pour la bibliothèque, même si j'ai un peu aidé avec le théâtre YUI..
Lorsque je suis entré dans Yahoo le premier jour, je n'avais aucune expérience réelle avec YUI. Je connaissais bien JavaScript, jQuery, HTML / CSS et PHP, mais c’était à peu près ce qu’il était dans la programmation Web. Je suis sûr que beaucoup d'entre vous sont ou ont été dans le même bateau que moi.
Ma première tâche a été d’apprendre la syntaxe et l’architecture de YUI3. Heureusement, j'avais une bonne compréhension de JavaScript brut, ce qui m'a énormément aidé. Beaucoup d'ingénieurs débutants connaissent très bien certaines bibliothèques, mais beaucoup ne savent pas comment elles fonctionnent sous le capot. Pour créer des plugins ou des modules au-dessus d'une bibliothèque (telle que YUI3 ou jQuery), il est utile de comprendre de manière fondamentale le fonctionnement de cette bibliothèque et, dans ce cas, le fonctionnement de JavaScript en tant que langage..
Ce que j'ai appris: Avoir une compréhension fondamentale de JavaScript brut (pas de bibliothèques) vous oblige à mieux comprendre le langage et à devenir un meilleur développeur à long terme.
Penses-y. Chaque bibliothèque JavaScript est différente et a ses propres particularités. Le seul point commun est qu'ils sont enracinés dans JavaScript. Ne comprend-il pas d’abord les particularités de JavaScript? Prenez le temps de construire quelque chose de petit sans utiliser de bibliothèque. Vous serez heureux de l'avoir fait.
L'équipe YUI s'appuie sur Git en tant que système de contrôle de version principalement, et le projet est hébergé sur Github. Avant mon stage chez YUI, j’utilisais Git pour mes propres petits projets, qui se déroulaient généralement comme suit:
Accentsconagua
git pull origine mastergit add "" git commit -m "" maître d'origine git pushJe suis sûr que beaucoup d'entre vous ont fait ce que je viens de décrire. Généralement, à mesure que le projet prend du temps, les commits deviennent plus difficiles à comprendre! Cependant, dans une grande équipe avec une douzaine de développeurs, cette méthode est très rapide. d'abord, maîtriser dans YUI3 (et de nombreux autres grands projets) est considéré comme un code stable ayant fait l'objet de tests unitaires, de sorte que les commits n'y vont généralement pas avant une étape ultérieure. En règle générale, chaque développeur travaille sur une branche distincte et se fond dans maîtriser une fois qu'ils ont confiance en leur code.
Ce que j'ai appris: Vous n'êtes pas obligé d'être un gourou, mais comprendre les bases de Git (créer des branches, fusionner, inverser et résoudre des conflits de fusion) peut vous aider à garder vos pensions propres et organisées..
Il y a beaucoup de choses possibles à faire avec Git et j'ai trouvé que, plutôt que de les apprendre à l'avance, il est plus utile de rechercher si vous devez faire quelque chose de particulier. Plus important encore, mon expérience m'a appris à faire attention lorsque j'expérimente avec Git. Il est préférable de demander à quelqu'un d'essayer une nouvelle commande ou de l'essayer sur un repo fictif au lieu de gâcher l'historique de commit du repo réel. :)
Séparer le code en différents fichiers JavaScript afin de maintenir une architecture modulaire peut s'avérer pénible pour les nouveaux développeurs. Par conséquent, nous voyons souvent de gros fichiers JavaScript contenant des centaines de lignes de code..
…
Cela introduit un couplage étroit entre les objets et n’est pas une bonne pratique en matière de programmation orientée objet. Pire encore, vous pouvez avoir des variables globales qui font que votre application échoue de manière inattendue. Nous avons tous été coupables de cela dans le passé. Heureusement, des bibliothèques comme YUI peuvent vous aider avec ceci.
Ce que j'ai appris: Lors de l'écriture d'une application Web entière en JavaScript, il est très important d'avoir un code bien organisé. maintenir un projet codé spaghetti ne vous causera que des maux de tête et des cauchemars.
L'un des aspects les plus importants de YUI3 est sa nature modulaire. En tant que développeur, vous ne récupérez que le code dont vous avez besoin. Cela réduit le couplage, réduit la taille des fichiers et améliore la lisibilité de votre code..
Par exemple, vous pouvez le faire dans un fichier appelé counter.js:
YUI.add ("compteur", fonction (Y) // Écrire un code spécifique à mon objet compteur, "1.0", requiert: ["noeud"]); // Dites ce que mon code d'objet compteur doit exécuter. YUI va tirer ces premiers. Et puis dans un fichier JS séparé, tel que app.js:
YUI_config = modules: 'compteur': chemin complet: 'chemin / vers / compteur.js', requiert: ['noeud']; YUI (). Use ('compteur', fonction (Y) // Déroulez mon module compteur. Var counter = new Y.Counter (…); // Créez une instance de compteur); Au lieu d'avoir un gros fichier appelé app.js, nous avons divisé en fonction de la fonctionnalité dans counter.js et app.js.
La popularité croissante de NodeJS m'a donné envie de commencer à construire quelque chose avec. En tant qu'ingénieur front-end, j'aime bien pouvoir utiliser JavaScript sur le serveur. Bien que NodeJS ne soit pas adapté à tout, cela vaut la peine d'apprendre.
JS sur le serveur n'a pas les mêmes limitations que JS côté client car il n'y a pas de DOM, mais une bibliothèque telle que YUI peut toujours vous aider avec l'architecture logicielle sur le serveur, comme la gestion de classes et d'objets et les événements personnalisés..
Ce que j'ai appris: YUI 3 ne concerne pas uniquement la manipulation du DOM - il contient également un ensemble robuste d’outils de gestion de classe / objet, sans oublier nos puissants événements personnalisés. Tous ces outils sont immédiatement utiles pour la programmation côté serveur.
En tant que membre de l'équipe YUI, j'ai pu explorer le module NodeJS-YUI3 de Dav Glass, qui résume les fonctionnalités de YUI pour une utilisation dans un environnement NodeJS. N'oubliez pas que, mis à part les sites Web, NodeJS est également un outil utile pour créer des utilitaires de ligne de commande. Avoir une bonne architecture logicielle est toujours un gros plus!
Si vous n'êtes pas un utilisateur de YUI3, je vous recommande néanmoins de trouver un ensemble d'outils pour vous aider à organiser votre JavaScript sur le serveur. En raison de la nature asynchrone inhérente de JavaScript et de sa propension aux rappels, vous devez faire attention ou vous allez rapidement vous retrouver avec du code spaghetti..
Ce que j'ai appris: Restez concentré et continuez à bidouiller.
Le piratage est l'une de mes choses préférées à faire lorsque j'essaie d'apprendre quelque chose de nouveau. Lorsque vous essayez d'apprendre un nouvel outil, rien de tel que de vous asseoir et de construire quelque chose avec lui.
Semblable à jQuery, YUI3 dispose d'un ensemble distinct de widgets, d'utilitaires et de frameworks CSS. Lors d'un des Yahoo Hack Days, j'ai eu l'occasion de m'asseoir et d'essayer certaines de ces solutions. En tant que fan de cricket, j'ai créé une application Web mobile appelée Crictainment. Permettez-moi de décrire brièvement certaines des parties de YUI que je trouve particulièrement utiles pour le piratage..
Pirater une application web en utilisant YUI est assez simple. Par exemple, si vous voulez une vue à défilement pouvant être scannée avec vos doigts:
YUI (). Use ("scrollview", fonction (Y) var scrollview = new Y.ScrollView (srcNode: "# scrollable", height: "20em"); Et dans le HTML:
- AC DC
- Aerosmith
- Bob Dylan
- Bob Seger
…
Le module scrollview détermine s'il doit être horizontal ou vertical en fonction de la largeur et de la hauteur de son conteneur. Plus d'informations sur le scrollview YUI3 sont ici.
Un autre utilitaire utile lorsque vous piratez quelque chose est l’utilitaire Animation. Il est utile d’alimenter votre application avec une belle animation qui exploite CSS sur des navigateurs capables, et utilise par défaut des animations basées sur un minuteur JS sur des navigateurs plus anciens..
var myAnim = new Y.Anim (node: '#demo', to: width: 0, height: 0); myAnim.on ('end', function () myAnim.get ('node'). addClass ('yui-hidden');); Un autre outil vraiment important pour le piratage est: YQL - Langage de requêtes Yahoo. Je suis sûr que la plupart d'entre vous l'ont utilisé, mais pour ceux qui ne l'ont pas encore fait, considérez cela comme un moyen d'accéder à une multitude d'API différentes à l'aide d'une syntaxe standard. YUI et YQL fonctionnent très bien ensemble grâce au module Y.YQL. Par exemple, nous obtenons ici l'activité récente de Vimeo:
YUI (). Use ('yql', fonction (Y) Y.YQL ('select * from vimeo.activity.everyone où username = "basictheory"', fonction (r) // r contient maintenant le résultat du Requête YQL);); Essayez cette requête ici. J'utilise régulièrement YQL pour accéder aux différentes API de manière cohérente.
Que vous utilisiez YUI, jQuery ou toute autre bibliothèque, créer quelque chose avec celle-ci est un excellent moyen de vous familiariser avec votre boîte à outils de développement. Lors du piratage, ne vous inquiétez pas trop des détails techniques - fixez simplement un délai et construisez-le.!
L'un des ajouts les plus récents à YUI a été App Framework. C'est similaire à Backbone.js, mais avec l'infrastructure d'événement sophistiquée de YUI sous le capot. L'App Framework m'a facilité la construction d'applications Web de style MVC..
Comme tout autre outil, j'ai construit quelque chose avec App Framework pour comprendre son fonctionnement. Encore une fois, je ne peux pas souligner les avantages du piratage sur les produits. Pour l'application Framework, j'ai construit TopForty avec un de mes amis.
YUI App Framework est construit sur le modèle de conception MVC. Commençons par le modèle. Si vous n'êtes pas familier avec MVC, jetez un coup d'œil à ce tutoriel.
Pour TopForty, nous avons pu obtenir un grand tableau JSON des chansons les plus parlées sur Twitter. Chaque objet du tableau ressemblait à ceci:
"title": "PayPhone", "position": 1, "video_id": "5FlQSQuv_mg", "song_id": 627, "artist": "Maroon 5", "duration": 232, "images": [… ]
Nous avons résumé cela dans une sous-classe Y.Model appelée Y.SongModel. Voici la définition de la classe:
Y.SongModel = Y.Base.create ('songModel', Y.Model, [], initializer: function (config) …, ATTRS: titre: , artiste: , images: valeur: [], nowPlaying: ……); Cela nous a permis d’écouter des événements chaque fois qu’un des ATTRS dans le modèle changé et prendre les mesures appropriées. Par exemple, si la chanson en cours de lecture a été modifiée:
// Lorsque l'attribut isPlaying du modèle change, appelez la fonction handleIsPlayingChange. this.model.after ('isPlayingChange', this.handleIsPlayingChange, this); Chaque modèle était représenté visuellement par une vue, qui consiste essentiellement en HTML. Pour TopForty, nous avons eu un SongView qui ressemblait à ceci:
2Allume la lumière
Futur
Nous avons conclu cela dans un Y.View sous-classe appelée Y.SongView. Chaque vue nécessite un rendre() méthode appelée lors de l’affichage de la vue sur la page, et une initialiseur () méthode où les événements sont abonnés. Si vous le souhaitez, vous pouvez établir une relation entre votre vue et une instance de modèle ou de liste de modèles en y attachant des gestionnaires d'événements. initialiseur () méthode comme nous voyons ci-dessous:
Y.SongView = Y.Base.create ('songView', Y.View, [], initializer: function (config) var model = this.get ("model"); model.after ("change", cela .render, this); model.after ('destroy', this.destroy, this);, render: function () …, destroy: function () …, showSongOverlay: function () … , ATTRS: conteneur: Y.one ("# songContainer")); Ce faisant, nous avons pu avoir des méthodes spécifiques à songview telles que displayNowPlayingIndicator () et showSongOverlay () sur le Y.SongView par exemple plutôt que comme des fonctions séparées.
Le routeur, anciennement appelé contrôleur, est ce qui permet de tout connecter et de fonctionner. Rappelez-vous que dans MVC classique, toutes les actions de l'utilisateur passent généralement par le contrôleur. Dans les applications Web, le routeur utilise l'historique HTML5 pour modifier les URL et contrôle l'état de l'application..
Par exemple, dans TopForty, un clic sur une chanson change l'URL en identifiant de la chanson. Le changement d'URL est capté par le routeur, qui charge la vidéo YouTube pour la chanson en question:
Y.AppRouter = Y.Base.create ('appRouter', Y.Router, [], // Gestionnaires de route par défaut hérités de toutes les instances de CustomRouter. Index: function (req) // ... gère le / route, charge en haut l’interface utilisateur, etc., loadSongFromUrl: function (req) //… manipule la route / song /: songId 'route… // Récupère la vidéo youtube du modèle avec l’id de: songId et la lit., ATTRS: // Les routes spécifiques que nous sommes intéressés à écouter: routes: valeur: [chemin: '/', rappel: 'index', chemin: '/ song /: songId ", callback:' loadSongFromUrl '],); Ce que j'ai appris: L'utilisation du modèle de conception MVC peut vous aider à créer n'importe quoi, des simples vues non interactives aux applications riches..
J'espère avoir pu vous donner un aperçu de ce qu'il est possible de faire avec YUI App Framework. Pour une procédure plus complète, je vous recommande les liens suivants. Si vous n'êtes pas fan de l'App Framework, je vous recommande de rechercher les alternatives jQuery équivalentes. Backbone.js en particulier a un public nombreux avec une bonne documentation.
Pour les développeurs, écrire du code est souvent la partie la plus facile et la plus amusante. La partie difficile consiste à déterminer l’âge du code qui fonctionne et à essayer de corriger les erreurs passées. Pour minimiser cela, beaucoup d'organisations, y compris Yahoo, soulignent l'importance du développement piloté par les tests (TDD). Avec TDD, vous écrivez d’abord les tests, puis ajoutez les fonctionnalités jusqu’à ce que tous vos tests soient réussis. Voulez-vous ajouter une nouvelle fonctionnalité? Ecrire un nouveau test, puis coder la fonctionnalité.
J'étais nouveau chez TDD quand j'ai rejoint l'équipe YUI. Malheureusement, JS ne dispose pas de la meilleure suite de tests. Les interactions des utilisateurs en particulier sont difficiles à tester. De plus, nous devons tester tous les principaux navigateurs.
L'un des principaux moyens de mener des tests unitaires est le test YUI..
Ce que j'ai appris: Suivre les principes de développement basés sur les tests vous rend plus productif en tant que programmeur.
YUI Test est un framework de test complet pour JavaScript et les applications Web. Vous pouvez utiliser la syntaxe JavaScript simple pour écrire des tests unitaires pouvant être exécutés dans des navigateurs Web ou sur la ligne de commande, ainsi que des tests fonctionnels devant être exécutés dans des navigateurs Web..
Voici comment vous le configurez:
// Crée une nouvelle instance YUI et la remplit avec les modules requis. YUI (). Use ('test', fonction (Y) // Le test est disponible et prêt à être utilisé. Ajoutez une implémentation // code ici.); Maintenant, nous pouvons commencer à écrire des tests unitaires!
var testCase = new Y.Test.Case (name: "Nom de TestCase", // ------------------------------ --------------- // Configuration et démontage // --------------------------- ------------------ setUp: function () this.data = name: "Tilo", age: 23;, tearDown: function () delete this .Les données; , //------------------------------------------- - // Tests // ----------------------------------------------- - testName: function () Y.Assert.areEqual ("Tilo", this.data.name, "Le nom doit être 'Tilo'");, testAge: function () Y.Assert.areEqual (23, this.data.age, "L'âge devrait être de 23 ans");); YUI Test supporte les assertions d'égalité (sont égaux()) qui utilise ==, affirmation de la similitude (sont identiques()) qui utilise ===, des assertions spéciales telles que c'est faux(), isNotUndefined (), objets fictifs et plus.
Après avoir écrit nos tests, nous pouvons le lancer comme indiqué ci-dessous. Les résultats du test peuvent être générés en tant que XML, JSON, jUnitXML ou TAP..
Y.Test.Runner.add (testCase); Y.Test.Runner.run ();
Si vous n'utilisez pas YUI Test, c'est bien. Cependant, je tiens à souligner l'importance de tester votre code. Même aujourd'hui, je suis coupable d'écrire du code sans écrire de test et c'est probablement bien si c'est votre propre petit projet personnel. Nous avons tous coupé les coins parfois. Toutefois, si vous programmez pour un client ou une organisation, le respect des principes de TDD vous épargnera (ainsi que vos clients) d’un mal de tête..
Servir des fichiers JavaScript sans minification ni peluches peut être risqué. La minimisation peut souvent compresser la taille du fichier de plus de 30%, ce qui accélère le chargement de la page pour l'utilisateur final. Les peluches sont un bon moyen d’assurer que votre JavaScript respecte les bonnes pratiques de codage afin de minimiser les erreurs..
Pendant mon temps chez Yahoo, nous avons utilisé YUI Compressor et YUI Builder pour compresser et construire notre code. L'étape de construction inclut la concaténation et le lintérisation de JSLint. Je suis sûr que la plupart d'entre vous ont déjà utilisé JSLint à un moment donné, et je pense que cela contribue à améliorer votre style de codage..
Ce que j'ai appris: Demandez-vous si une certaine pratique réduit vos risques d'erreurs et, si oui, suivez-la.
Maintenant, je ne vais pas parler en détail de YUI Compressor and Builder, car ceux-ci ne sont peut-être pas les outils de votre choix. Habituellement, pour mes propres projets, j'utilise le module JSLint NPM pour vérifier mon code..
Ce que je veux souligner, c'est la nécessité de suivre ces étapes avant de passer du code à la production. Comme JavaScript n’a pas d’étape de compilation, de nombreux développeurs sont habitués à utiliser leur code JavaScript pour la production, les commentaires et tout ce qui est inclus. Encore une fois, cela ne pose pas de problème pour les petits projets, mais vous devriez peut-être envisager de réduire et de lisser votre code afin de garantir aux utilisateurs une expérience optimale..
L’équipe YUI compte un grand nombre de développeurs sympathiques, actifs et compétents, comme la plupart des grands projets open source. En tant que développeurs travaillant sur des logiciels à code source ouvert, j'ai appris que je ne pouvais pas rester sous un rocher et coder toute la journée, même si je le voulais. Développer consiste autant à écrire du code qu'à s'assurer que le code que vous écrivez aide réellement quelqu'un à résoudre un problème.
Cela m'a pris du temps à apprendre, mais c'est une leçon importante. Lors de la rédaction d'un logiciel, l'objectif n'est pas d'utiliser la technologie la plus cool, la dernière pile ou le langage le plus en vogue. C'est à propos de l'utilisateur. Lors de la rédaction de logiciels libres, les utilisateurs sont souvent d’autres développeurs qui s’appuient sur votre produit. De petites choses telles que les mises à jour hebdomadaires, les tweets et la communication IRC peuvent en réalité vous aider plus que des heures de codage..
Ce que j'ai appris: Il ne s'agit pas de la technologie, de la pile ou de la langue, mais de l'utilisateur.
Au cours de mon premier mois d’internat chez YUI, j’ai écrit environ 500 lignes de code que j’ai dû mettre au rebut car la plupart étaient répétitives et n’atteignaient pas l’objectif final. J'étais coupable d'avoir codé trop tôt sans comprendre les exigences du projet. Une bonne règle consiste à passer un tiers de votre temps à rassembler les exigences, un tiers de votre temps à écrire des tests et le dernier tiers à mettre en œuvre votre logiciel..
Je souhaite terminer en partageant la chose la plus importante que je pense avoir apprise lors de mon stage. Je considère que c'est plus important que les connaissances techniques que j'ai acquises. En travaillant sur une bibliothèque qui n’est pas la plus populaire, j’ai compris l’importance de la diversification de mes compétences et de la souplesse dont je dispose en tant que développeur. J'ai vu tout le travail nécessaire pour maintenir un projet open-source et j'ai beaucoup de respect pour tous ceux qui publient gratuitement leur code bien écrit..
Ce que j'ai appris: Choisissez une bibliothèque parce que c'est la bonne pour le travail, pas parce que c'est votre préférée. Comprendre que différents logiciels ont des objectifs différents et qu'il est parfois difficile de comprendre la différence.
