Share
Durante ocho meses, tuve la oportunidad de realizar una pasantía en el equipo YUI en Yahoo, mientras completaba mi título de ingeniero. Hoy, me gustaría compartir las diez cosas principales que aprendí de mi experiencia con YUI.
El Equipo YUI es el principal responsable del desarrollo y mantenimiento de la Biblioteca YUI. La biblioteca es una colección de componentes de interfaz de usuario, herramientas de administración de clases y utilidades escritas en JavaScript y CSS que facilitan a los desarrolladores la creación de aplicaciones web. A diferencia de otras bibliotecas, YUI no se trata solo de manipulación de DOM; Cuenta con un amplio conjunto de herramientas de gestión de clases y un sistema de eventos robusto que facilita el desarrollo en JavaScript..
Además, el Equipo YUI también es responsable de YUI Theater, un recurso muy popular para desarrolladores web, junto con una gran cantidad de herramientas más pequeñas como YUI Builder, YUI Compressor, YUI Test y más.
Mi rol en el equipo fue ayudar principalmente a desarrollar componentes para la biblioteca, aunque también ayudé un poco con YUI Theater.
Cuando entré en Yahoo en mi primer día, no tuve ninguna experiencia en el mundo real con YUI. Estaba familiarizado con JavaScript, jQuery, HTML / CSS y PHP, pero eso era básicamente cuando se trataba de programación web. Estoy seguro de que muchos de ustedes están o han estado en el mismo barco que yo.
Mi primera tarea fue aprender la sintaxis y la arquitectura detrás de YUI3. Afortunadamente, tenía un buen conocimiento de JavaScript en bruto, y esto me ayudó enormemente. Muchos ingenieros de front-end conocen ciertas bibliotecas realmente bien, pero muchos no saben cómo funcionan bajo el capó. Para crear complementos o módulos sobre una biblioteca (como YUI3 o jQuery), es útil tener una comprensión fundamental de cómo funciona esa biblioteca y, en este caso, cómo funciona JavaScript como idioma.
Que aprendí: Tener una comprensión fundamental de JavaScript sin formato (sin bibliotecas) lo obliga a comprender mejor el idioma y lo hace un mejor desarrollador a largo plazo.
Piénsalo. Cada biblioteca de JavaScript es diferente y tiene sus propias idiosincrasias. Lo único en común es que están enraizados en JavaScript. ¿No tiene sentido entender primero la idiosincrasia de JavaScript? Tómate un tiempo para construir algo pequeño sin usar una biblioteca. Estaras contento de haberlo hecho.
El equipo de YUI se basa en Git como su sistema de control de versiones principal y el proyecto se hospeda en Github. Antes de mi pasantía en YUI, usé Git para mis propios proyectos pequeños, y esto generalmente consistía en los siguientes pasos:
Accentsconagua
git pull origin mastergit añadir "" git commit -m "" git push master masterEstoy seguro de que muchos de ustedes han hecho lo que acabo de describir. Generalmente, a medida que el tiempo del proyecto se hace más largo, ¡los compromisos se vuelven más difíciles de entender! Sin embargo, en un gran equipo con una docena de desarrolladores, este método se rompe muy rápido. en primer lugar, dominar en YUI3 (y en muchos otros grandes proyectos) se considera un código estable que ha sido probado en unidades, por lo que los compromisos generalmente no se van hasta una etapa posterior. En general, cada desarrollador trabaja en una rama separada y se fusiona con dominar Una vez que tengan confianza en su código..
Que aprendí: No tienes que ser un gurú, pero comprender los conceptos básicos de Git (ramificación, fusión, revertir y resolver conflictos de combinación) puede hacer mucho para mantener tus repositorios limpios y organizados..
Se pueden hacer muchas cosas con Git y he descubierto que, en lugar de aprenderlas con anticipación, es más útil investigar cuando es necesario hacer algo en particular. Más importante aún, mi experiencia me ha enseñado a tener cuidado al experimentar con Git. Es mejor preguntar a alguien al intentar un nuevo comando o al intentarlo en un repositorio simulado en lugar de desordenar el historial de confirmación del repositorio en vivo. :)
Separar el código en diferentes archivos JavaScript para mantener una arquitectura modular puede ser doloroso para los nuevos desarrolladores. Como resultado, a menudo vemos grandes archivos de JavaScript con cientos de líneas de código en ellos..
...
Esto introduce un acoplamiento estrecho entre objetos y no es una buena práctica cuando se trata de programación orientada a objetos. Peor aún, es posible que tenga variables globales que hagan que su aplicación falle de manera inesperada. Todos hemos sido culpables de esto en el pasado. Por suerte, bibliotecas como YUI pueden ayudarte con esto.
Que aprendí: Al escribir una aplicación web completa en JavaScript, es muy importante contar con un código bien organizado; mantener un proyecto con código de espagueti solo te causará dolores de cabeza y pesadillas.
Uno de los aspectos más importantes de YUI3 es su naturaleza modular. Como desarrollador, solo debes bajar el código que necesitas. Esto reduce el acoplamiento, mantiene el tamaño de los archivos pequeños y mejora la legibilidad de su código.
Por ejemplo, podría hacer esto en un archivo llamado counter.js:
YUI.add ("contador", función (Y) // Escribir código específico para mi objeto de contador, '1.0', requiere: ['nodo']); // Di lo que mi código de objeto contador debe ejecutar. YUI los sacará primero. Y luego en un archivo JS separado, como app.js:
YUI_config = modules: 'counter': fullpath: 'path / to / counter.js', requiere: ['node']; YUI (). Use ('counter', function (Y) // Despliegue el módulo de mi contador. Var counter = new Y.Counter (…); // Crear una instancia de contador); En lugar de tener un gran archivo llamado app.js, Lo hemos dividido en función de la funcionalidad en counter.js y app.js.
La creciente popularidad de NodeJS me dio ganas de comenzar a construir algunas cosas con él. Al ser un ingeniero de front-end, me gusta poder usar JavaScript en el servidor. Aunque NodeJS no es adecuado para todo, vale la pena aprender..
JS en el servidor no tiene las mismas limitaciones que JS del lado del cliente porque no hay DOM, pero una biblioteca como YUI aún puede ayudarlo con la arquitectura del software en el servidor, como la clase y la gestión de objetos, y eventos personalizados..
Que aprendí: YUI 3 no es todo acerca de la manipulación de DOM, sino que también contiene un conjunto sólido de herramientas de gestión de clase / objeto, por no mencionar nuestros potentes eventos personalizados. Todas estas herramientas son inmediatamente útiles en la programación del lado del servidor..
Al estar en el equipo YUI, pude explorar el módulo NodeJS-YUI3 de Dav Glass, que envuelve la funcionalidad YUI para usar en un entorno NodeJS. Recuerde que, aparte de los sitios web, NodeJS es una herramienta útil para crear utilidades de línea de comandos también. Tener una buena arquitectura de software es siempre una gran ventaja!
Si no eres un usuario de YUI3, todavía recomiendo encontrar un conjunto de herramientas que te ayuden a organizar tu JavaScript en el servidor. Debido a la naturaleza asíncrona inherente de JavaScript y su propensión a las devoluciones de llamada, debe tener cuidado o rápidamente terminará con un código de espagueti..
Que aprendí: Mantente enfocado y sigue hackeando.
Hackear es una de mis actividades favoritas cuando intento aprender algo nuevo. Al tratar de aprender una nueva herramienta, no hay nada como sentarse y construir algo con ella..
Similar a jQuery, YUI3 tiene un conjunto distinto de widgets, utilidades y marcos de CSS. En uno de los Yahoo Hack Days, tuve la oportunidad de sentarme y probar algunos de estos. Como soy fanático del cricket, hice una aplicación web móvil llamada Crictainment. Permítanme esbozar algunas de las partes de YUI que me parecieron particularmente útiles para piratear.
Hackear una aplicación web usando YUI es bastante sencillo. Por ejemplo, si desea una vista de desplazamiento que se pueda desplazar con los dedos:
YUI (). Use ("scrollview", function (Y) var scrollview = new Y.ScrollView (srcNode: "# scrollable", height: "20em");); Y en el HTML:
- AC/DC
- Aerosmith
- Bob Dylan
- Bob Seger
...
El módulo scrollview determina si debe ser horizontal o vertical en función del ancho y la altura de su contenedor. Más información sobre el scrollview de YUI3 está aquí..
Otra utilidad útil para hackear algo es la utilidad de animación. Ayuda a mejorar su aplicación con una animación agradable que aprovecha CSS en los navegadores compatibles y, por defecto, las animaciones basadas en temporizador JS en los navegadores más antiguos..
var myAnim = new Y.Anim (node: '#demo', to: width: 0, height: 0); myAnim.on ('end', function () myAnim.get ('node'). addClass ('yui-hidden');); Otra herramienta realmente importante que es excelente para hackear es YQL - Yahoo Query Language. Estoy seguro de que la mayoría de ustedes lo han usado, pero para aquellos que no lo han hecho, piense en él como una forma de acceder a una gran cantidad de API diferentes utilizando una sintaxis estándar. YUI y YQL funcionan realmente bien juntos a través del módulo Y.YQL. Por ejemplo, aquí estamos recibiendo la actividad reciente de Vimeo:
YUI (). Use ('yql', function (Y) Y.YQL ('select * from vimeo.activity.every en donde username = "basictheory"', function (r) // r ahora contiene el resultado de Consulta YQL);); Pruebe esta consulta aquí. Uso YQL regularmente para acceder a diferentes API de una manera consistente.
Independientemente de si está utilizando YUI, jQuery o cualquier otra biblioteca, construir algo con él es una excelente manera de familiarizarse con su caja de herramientas de desarrollo. Al piratear, no se preocupe demasiado por los detalles técnicos, solo establezca un límite de tiempo y cámbielo!
Una de las adiciones más recientes a YUI ha sido el marco de aplicación. Es similar a Backbone.js, pero con la sofisticada infraestructura de eventos de YUI bajo el capó. El marco de aplicación me facilitó la creación de aplicaciones web de estilo MVC.
Al igual que cualquier otra herramienta, construí algo con App Framework para entender cómo funcionaba. Una vez más, no puedo enfatizar los beneficios de piratear productos. Para el Marco de Aplicaciones, construí TopForty con un amigo mío.
El YUI App Framework se basa en el patrón de diseño MVC. Vamos a empezar con el modelo. Si no está familiarizado con MVC, eche un vistazo a este tutorial.
Para TopForty, pudimos obtener una gran variedad JSON de las canciones más comentadas de Twitter. Cada objeto en la matriz se veía así:
"title": "PayPhone", "position": 1, "video_id": "5FlQSQuv_mg", "song_id": 627, "artist": "Maroon 5", "duration": 232, "images": [… ]
Envolvimos esto en una subclase de Y.Model llamada Y.SongModel. Aquí está la definición de la clase:
Y.SongModel = Y.Base.create ('songModel', Y.Model, [], initializer: function (config) ..., ATTRS: title: , artist: , images: valor: [], ahora Reproduciendo: ……); Esto nos permitió escuchar eventos cuando uno de los ATTRS En el modelo cambiado y tomar la acción adecuada. Por ejemplo, si se cambió la canción actual que se está reproduciendo:
// Cuando cambien los atributos del modelo isPlaying, llame a la función handleIsPlayingChange. this.model.after ('isPlayingChange', this.handleIsPlayingChange, this); Cada modelo fue representado visualmente por una Vista, que es esencialmente solo HTML. Para TopForty, tuvimos una SongView que se veía algo como esto:
2Enciende las luces
Futuro
Envolvimos esto en una Y.Ver subclase llamada Y.SongView. Cada vista requiere un hacer() método que se llama al mostrar la vista en la página, y un inicializador () Método donde se suscriben los eventos. Si lo desea, puede establecer una relación entre su vista y una instancia de Modelo o Lista de modelos adjuntando controladores de eventos a ellos de forma personalizada. inicializador () Método como el que vemos a continuación:
Y.SongView = Y.Base.create ('songView', Y.View, [], initializer: function (config) var model = this.get ("model"); model.after ('change', this .render, this); model.after ('destroy', this.destroy, this);, render: function () …, destroy: function () …, showSongOverlay: function () … , ATTRS: container: Y.one ("# songContainer")); Al hacer esto, pudimos tener métodos específicos para la vista de la canción como displayNowPlayingIndicator () y showSongOverlay () sobre el Y.SongView instancia en lugar de funciones separadas.
El enrutador, conocido formalmente como el controlador, es lo que hace que todo se conecte y funcione. Recuerde que en el MVC clásico, todas las acciones de los usuarios tradicionalmente pasan por el controlador. En las aplicaciones web, el enrutador utiliza el historial de HTML5 para cambiar las URL y controla el estado de la aplicación.
Por ejemplo, en TopForty, hacer clic en una canción cambia la URL a la ID de la canción. El enrutador, que carga el video de YouTube para la canción en cuestión, recoge el cambio de URL:
Y.AppRouter = Y.Base.create ('appRouter', Y.Router, [], // Controladores de ruta predeterminados heredados por todas las instancias de CustomRouter. Index: function (req) // ... manejar la / ruta, cargar la interfaz de usuario, etc., loadSongFromUrl: function (req) //… maneja la ruta / song /: songId '… // Obtenga el video de YouTube del modelo con un id de: songId y reprodúzcalo., ATTRS: // Las rutas específicas que nos interesa escuchar: rutas: valor: [ruta: '/', devolución de llamada: 'índice', ruta: '/ song /: songId ", devolución de llamada:' loadSongFromUrl '],); Que aprendí: Aprovechar el patrón de diseño MVC puede ayudarlo a crear cualquier cosa, desde simples vistas no interactivas hasta aplicaciones ricas..
Espero haber podido darte una idea de lo que es posible con el marco de aplicación de YUI. Para un tutorial más completo, recomiendo los siguientes enlaces. Si no eres fanático de App Framework, te recomiendo que busques en las alternativas equivalentes de jQuery. Backbone.js en particular tiene un gran número de seguidores con buena documentación.
Para los desarrolladores, escribir código es a menudo la parte fácil y divertida. La parte difícil es averiguar cómo funciona el código viejo y con errores y tratar de corregir errores pasados. Para minimizar esto, muchas organizaciones, incluyendo Yahoo, enfatizan la importancia del desarrollo impulsado por pruebas (TDT). Con TDD, primero escribe las pruebas y luego agrega la funcionalidad hasta que todas las pruebas pasan. ¿Quieres añadir una nueva característica? Escribe una nueva prueba, luego codifica la característica.
Era nuevo en TDD cuando me uní al equipo de YUI. Desafortunadamente, JS no tiene el mejor conjunto de pruebas. Las interacciones del usuario en particular son difíciles de probar. Además, tenemos que probar en todos los principales navegadores..
Una de las principales formas en que llevamos a cabo la prueba de unidad es a través de la prueba YUI.
Que aprendí: Seguir los principios de desarrollo basados en pruebas te hace más productivo como programador.
YUI Test es un marco de pruebas completo para aplicaciones web y JavaScript. Puede utilizar la sintaxis de JavaScript simple para escribir pruebas unitarias que se pueden ejecutar en navegadores web o en la línea de comandos, así como pruebas funcionales que se ejecutarán en navegadores web.
Así es como lo configuras:
// Cree una nueva instancia de YUI y rellénela con los módulos necesarios. YUI (). Use ('prueba', función (Y) // La prueba está disponible y lista para su uso. Agregue la implementación // código aquí.); Ahora, podemos empezar a escribir algunas pruebas unitarias.!
var testCase = new Y.Test.Case (name: "TestCase Name", // ------------------------------ --------------- // Configuración y desmontaje // --------------------------- ------------------ setUp: function () this.data = name: "Tilo", age: 23;, tearDown: function () delete this .data;, // ------------------------------------------- - // Tests // ------------------------------------------- - testName: function () Y.Assert.areEqual ("Tilo", this.data.name, "Name debe ser 'Tilo'");, testAge: function () Y.Assert.areEqual (23, this.data.age, "La edad debe ser 23");); YUI Test apoya afirmaciones de igualdad (son iguales()) que utiliza ==, afirmación de igualdad (son idénticos()) que utiliza ===, aserciones de valor especial tales como Es falso(), isNotUndefined (), objetos simulados y más.
Después de escribir nuestras pruebas, podemos ejecutarlo como se muestra a continuación. Los resultados de la prueba se pueden generar como XML, JSON, jUnitXML o TAP.
Y.Test.Runner.add (testCase); Y.Test.Runner.run ();
Si no usa la prueba YUI, está bien. Sin embargo, quiero enfatizar la importancia de probar su código. Soy culpable, incluso hoy, de escribir código sin escribir pruebas y probablemente esté bien si es tu propio proyecto personal pequeño. Todos nosotros cortamos esquinas alguna vez. Sin embargo, si está programando para un cliente o una organización, seguir los principios de TDD lo salvará a usted (y a sus clientes) de un dolor de cabeza.
Servir archivos JavaScript sin ningún tipo de paso o pelusa puede ser riesgoso. La minificación a menudo puede comprimir el tamaño del archivo en más del 30%, haciendo que su página se cargue más rápido para el usuario final. Linting es una buena forma de garantizar que su JavaScript cumpla con las buenas prácticas de codificación para minimizar los errores..
Durante mi tiempo en Yahoo, usamos YUI Compressor y YUI Builder para comprimir y construir nuestro código. El paso de compilación incluye concatenación y alineación a través de JSLint. Estoy seguro de que la mayoría de ustedes ha usado JSLint en algún momento, y creo que ayuda a mejorar su estilo de codificación.
Que aprendí: Pregúntese si cierta práctica reduce la posibilidad de errores y, si es así, sígala..
Ahora, no voy a hablar en profundidad acerca de YUI Compressor and Builder porque esas pueden no ser las herramientas de su elección. Normalmente para mis propios proyectos, uso el módulo NPM de JSLint para verificar mi código.
Lo que quiero enfatizar es la necesidad de realizar estos pasos antes de poner el código en producción. Como JavaScript no tiene un paso de compilación, muchos desarrolladores están acostumbrados a llevar su JavaScript a producción, comentarios y todo incluido. Nuevamente, esto está bien para proyectos pequeños, pero tal vez debería considerar minimizar y alinear su código para asegurar que los usuarios obtengan la mejor experiencia.
El equipo de YUI tiene un gran número de desarrolladores amigables, activos y conocedores al igual que la mayoría de los grandes proyectos de código abierto. Como desarrolladores que trabajan en software de código abierto, aprendí que no puedo sentarme debajo de un rock y un código todo el día, incluso si quisiera. Desarrollar consiste tanto en escribir código como en asegurarse de que el código que escribes en realidad ayude a alguien a resolver un problema.
Esto me tomó un tiempo aprender, pero es una lección importante. Al escribir software, el objetivo no es utilizar la tecnología más novedosa o la última pila o el lenguaje más actual. Se trata del usuario. Al escribir OSS, los usuarios suelen ser otros desarrolladores que construyen sobre su producto. Las cosas pequeñas, como las actualizaciones semanales, los tweets y la comunicación por IRC, pueden ayudarlo durante más de horas de codificación..
Que aprendí: No se trata de la tecnología o la pila o el lenguaje, se trata del usuario.
En mi primer mes de internado en YUI, escribí alrededor de 500 líneas de código que tuve que descartar porque la mayoría era repetitiva y no abordaba el objetivo final. Fui culpable de codificar demasiado pronto sin tener en cuenta los requisitos del proyecto. Una buena regla es gastar un tercio de su tiempo en la recopilación de requisitos, un tercio de su tiempo en escribir pruebas y el último tercio en implementar su software.
Quiero concluir compartiendo lo más importante que creo que aprendí en mi pasantía. Considero que es más importante que cualquier conocimiento técnico que obtuve. Al trabajar en una biblioteca que no es la más popular, me di cuenta de la importancia de diversificar mis habilidades y ser flexible como desarrollador. He visto cuánto trabajo se necesita para mantener un proyecto de código abierto y me he ganado mucho respeto por todos los que publican su código bien escrito de forma gratuita.
Que aprendí: Elija una biblioteca porque es la adecuada para el trabajo, no porque sea su favorita. Comprenda que las diferentes piezas de software sirven para diferentes propósitos y, a veces, entender la diferencia es difícil.
