Upload
leonidas-esteban-gonzalez
View
1.505
Download
0
Embed Size (px)
DESCRIPTION
Presentación de Mejorando.la Conferencia México 2014
Citation preview
LAS HERRAMIENTAS DE UN FRONTEND
Hola soy @LeonidasEsteban
Estoy aprendiendo Frontend con @LeonidasEsteban
Odio la sintaxis de CSS
Aprende a usar un pre-procesador de CSS
npm install stylus
Haz modular tu código
Mientras más encapsules tu aplicación será más fácil editar, quitar, agregar nuevos modulos.
Olvidate de escribir repetitivamente las mismas clases
body color red .container color blue a display block
Uso de variables
Crea tus propias utilidades (Mixins)
Olvídate de prefijos propietarios por cada navegador
de:border-radius .5ema:-webkit-border-radius: .5em;-moz-border-radius: .5em;-o-border-radius: .5em;-ms-border-radius: .5em;
Escribe solo una vez el código
• Compila tus archivos .styl al buen .css: “stylus nombre-del-archivo.styl” => “nombre-del-archivo.css”
• ¿Quieres que tu archivo css este comprimido ? stylus -c nombre-del-archivos.styl
• ¿quieres que use algun plugin intermediario ? stylus -u nib
• ¿quieres que el archivo compile cada vez que guardas cambios? stylus -w nombre-del-archivo.styl
• ¿quieres exportar el archivo css en alguna otra carpeta que no sea la misma del .styl? stylus -o
stylus -u nib -w -c -o css/ stylus/nombre-del-archivo.styl
¿Te convencí y quieres ya mismo trabajar en stylus? ah que ¿ya empezaste un proyecto y esta en css puro ? OMG OMG …
stylus -C nombre-del-archivo.css
http://css2stylus.com/
¿no lo lograste instalar? ¿las variables de entorno te jugaron una mala pasada ?
http://alphapixels.com/prepros/ https://incident57.com/codekit/
Bootstraping: Construye cosas complejas de una forma muy sencilla
http://foundation.zurb.com/ http://getbootstrap.com/ http://purecss.io/
¿Qué tienen en común?
• Sistemas de grillas
• Elementos de formulario
• Botones
• Modulos
¿Qué los diferencia a cada uno?
El nombre!
Elige cómo te gustaría que se vea tu app según lo que ves en cada una de sus respectivos websites y enjoy
Juega con tu código hasta obtener lo que necesitas
agregar, editar y borrar html y hasta ver shadow DOM
Consulta variables, depura funciones y aprende javascript con la consola
Prueba responsive design
http://www.responsinator.com/
consulta carga de la página, peticiones http y request ajax
Preguntale que tan cool estás haciendo tu trabajo o si no te gusta Chrome usa https://developers.google.com/speed/pagespeed/
Aprende a usar un motor de templates
http://underscorejs.org/
http://jade-lang.com/
http://mustache.github.io/
Las single pages están de moda, entonces aprende a usar un framework MV*(lol)
• Backbone.js
• Simple y flexible y usa jquery <3
• perfecto para iniciar
• Angular.js
• Pretende extender el comportamiento de HTML con directivas
• Las reglas y los data-binding definen como se comporta la aplicación
• Ember.js
• Sigue las convenciones y todo estará bien
• Debes hacer las cosas como ember quiere que las hagas
Ordena el llamado de dependencia con requirejs o browserify
!
• Browserify está básado en commonjs y Requirejs en AMD (asynchronous module definition)
!
• Commonjs: encapsula todo el código en modulos para crear nuestras propios componentes y librerias
!
• AMD: API para cargar dependencias de modulos de forma asincrona
Automatiza tareas con Grunt o Gulp
“Estoy aprendiendo Frontend con @LeonidasEsteban”
Gracias