flujos de trabajo para un desarrollador web frontend
DESCRIPTION
Conferencia dictada para el XXII ConeiscTRANSCRIPT
![Page 1: Flujos de trabajo para un desarrollador web frontend](https://reader033.vdocuments.net/reader033/viewer/2022052412/558ed8941a28ab34628b458f/html5/thumbnails/1.jpg)
Flujos de Trabajo para un desarrollador web frontend
![Page 2: Flujos de trabajo para un desarrollador web frontend](https://reader033.vdocuments.net/reader033/viewer/2022052412/558ed8941a28ab34628b458f/html5/thumbnails/2.jpg)
Hola soy @LeonidasEsteban
Estoy aprendiendo Frontend con @LeonidasEsteban
![Page 3: Flujos de trabajo para un desarrollador web frontend](https://reader033.vdocuments.net/reader033/viewer/2022052412/558ed8941a28ab34628b458f/html5/thumbnails/3.jpg)
¿Qué es un frontend?
Un desarrollador que mezcla la programación y el diseño potenciando los efectos visuales y las interacciones de la web.
![Page 4: Flujos de trabajo para un desarrollador web frontend](https://reader033.vdocuments.net/reader033/viewer/2022052412/558ed8941a28ab34628b458f/html5/thumbnails/4.jpg)
HTML, CSS y Javascript
![Page 5: Flujos de trabajo para un desarrollador web frontend](https://reader033.vdocuments.net/reader033/viewer/2022052412/558ed8941a28ab34628b458f/html5/thumbnails/5.jpg)
Herramientas
![Page 6: Flujos de trabajo para un desarrollador web frontend](https://reader033.vdocuments.net/reader033/viewer/2022052412/558ed8941a28ab34628b458f/html5/thumbnails/6.jpg)
Editor de código
Será tu fiel compañero en esas noches de ideas geniales que debas llevar a la web
![Page 7: Flujos de trabajo para un desarrollador web frontend](https://reader033.vdocuments.net/reader033/viewer/2022052412/558ed8941a28ab34628b458f/html5/thumbnails/7.jpg)
Sublime Text
![Page 8: Flujos de trabajo para un desarrollador web frontend](https://reader033.vdocuments.net/reader033/viewer/2022052412/558ed8941a28ab34628b458f/html5/thumbnails/8.jpg)
• Escribe código en modo sin distracciones (Distraction free mode)
• Muevete ágilmente entre los archivos de tu proyecto ⌘P
• Personalizable
• Multiplataforma
![Page 9: Flujos de trabajo para un desarrollador web frontend](https://reader033.vdocuments.net/reader033/viewer/2022052412/558ed8941a28ab34628b458f/html5/thumbnails/9.jpg)
Plugins
• Package control
• Emmet
• Sublime Linter
![Page 10: Flujos de trabajo para un desarrollador web frontend](https://reader033.vdocuments.net/reader033/viewer/2022052412/558ed8941a28ab34628b458f/html5/thumbnails/10.jpg)
Control de versiones
Porque siempre es buena idea tener un historial de todo lo que hacemos
![Page 11: Flujos de trabajo para un desarrollador web frontend](https://reader033.vdocuments.net/reader033/viewer/2022052412/558ed8941a28ab34628b458f/html5/thumbnails/11.jpg)
![Page 13: Flujos de trabajo para un desarrollador web frontend](https://reader033.vdocuments.net/reader033/viewer/2022052412/558ed8941a28ab34628b458f/html5/thumbnails/13.jpg)
• add : agrega los archivos .
• commit : agrega una descripción.
• push : sube los cambios.
• pull : descarga los nuevos cambios.
• branch : ten múltiples ramas de tu proyecto.
• merge : mezcla las ramas cuando lo necesites.
• stash : si no quieres hacer un commit y debes cambiar de rama es lo más útil.
![Page 14: Flujos de trabajo para un desarrollador web frontend](https://reader033.vdocuments.net/reader033/viewer/2022052412/558ed8941a28ab34628b458f/html5/thumbnails/14.jpg)
Git flow
http://danielkummer.github.io/git-flow-cheatsheet/
![Page 15: Flujos de trabajo para un desarrollador web frontend](https://reader033.vdocuments.net/reader033/viewer/2022052412/558ed8941a28ab34628b458f/html5/thumbnails/15.jpg)
• git flow feature start “nombre del feature”
nuevas rama del feature
• git flow feature finish “nombre del feature”
merge de la rama con dev
!
![Page 16: Flujos de trabajo para un desarrollador web frontend](https://reader033.vdocuments.net/reader033/viewer/2022052412/558ed8941a28ab34628b458f/html5/thumbnails/16.jpg)
• git flow release start “nombre del release”
crear rama a partir de dev
• git flow release finish “nombre del release”
merge de rama en dev y master
![Page 17: Flujos de trabajo para un desarrollador web frontend](https://reader033.vdocuments.net/reader033/viewer/2022052412/558ed8941a28ab34628b458f/html5/thumbnails/17.jpg)
• git flow hotfix start “nombre del hotfix” //nueva rama con el nombre del feature
• git flow hotfix finish “nombre del hotfix” //merge de la rama con dev y master
![Page 19: Flujos de trabajo para un desarrollador web frontend](https://reader033.vdocuments.net/reader033/viewer/2022052412/558ed8941a28ab34628b458f/html5/thumbnails/19.jpg)
• “Red social de desarrolladores”
• Crear nuevos repositorios y organizaciones
• Revisar commits visualmente
• Editar archivos
• Muchos proyectos open source ya están en Github
![Page 21: Flujos de trabajo para un desarrollador web frontend](https://reader033.vdocuments.net/reader033/viewer/2022052412/558ed8941a28ab34628b458f/html5/thumbnails/21.jpg)
¿no sabes git?
Descarga un .zip del proyecto ;)
![Page 22: Flujos de trabajo para un desarrollador web frontend](https://reader033.vdocuments.net/reader033/viewer/2022052412/558ed8941a28ab34628b458f/html5/thumbnails/22.jpg)
HTML
Define semánticamente el contenido de tu website
![Page 23: Flujos de trabajo para un desarrollador web frontend](https://reader033.vdocuments.net/reader033/viewer/2022052412/558ed8941a28ab34628b458f/html5/thumbnails/23.jpg)
El problemamala declaración de clases
![Page 24: Flujos de trabajo para un desarrollador web frontend](https://reader033.vdocuments.net/reader033/viewer/2022052412/558ed8941a28ab34628b458f/html5/thumbnails/24.jpg)
La soluciónModulos, utilidades y jerarquía semántica
![Page 26: Flujos de trabajo para un desarrollador web frontend](https://reader033.vdocuments.net/reader033/viewer/2022052412/558ed8941a28ab34628b458f/html5/thumbnails/26.jpg)
• u-utilityName
• ComponentName
• ComponentName--modifierName
• ComponentName-descendentName
• ComponentName.is-stateOfComponent
5 Simples convenciones
![Page 27: Flujos de trabajo para un desarrollador web frontend](https://reader033.vdocuments.net/reader033/viewer/2022052412/558ed8941a28ab34628b458f/html5/thumbnails/27.jpg)
CSS
Pon lindo todo el contenido de la web
![Page 28: Flujos de trabajo para un desarrollador web frontend](https://reader033.vdocuments.net/reader033/viewer/2022052412/558ed8941a28ab34628b458f/html5/thumbnails/28.jpg)
http://foundation.zurb.com/ http://getbootstrap.com/ http://purecss.io/
![Page 29: Flujos de trabajo para un desarrollador web frontend](https://reader033.vdocuments.net/reader033/viewer/2022052412/558ed8941a28ab34628b458f/html5/thumbnails/29.jpg)
Crea CSS profesional
![Page 30: Flujos de trabajo para un desarrollador web frontend](https://reader033.vdocuments.net/reader033/viewer/2022052412/558ed8941a28ab34628b458f/html5/thumbnails/30.jpg)
npm install stylus
![Page 31: Flujos de trabajo para un desarrollador web frontend](https://reader033.vdocuments.net/reader033/viewer/2022052412/558ed8941a28ab34628b458f/html5/thumbnails/31.jpg)
Haz modular tu código
Mientras más encapsules tu aplicación será más fácil editar, quitar, agregar nuevos modulos.
![Page 32: Flujos de trabajo para un desarrollador web frontend](https://reader033.vdocuments.net/reader033/viewer/2022052412/558ed8941a28ab34628b458f/html5/thumbnails/32.jpg)
Olvidate de escribir repetitivamente las mismas clases
body color red .container color blue a display block
![Page 33: Flujos de trabajo para un desarrollador web frontend](https://reader033.vdocuments.net/reader033/viewer/2022052412/558ed8941a28ab34628b458f/html5/thumbnails/33.jpg)
Uso de variables
![Page 34: Flujos de trabajo para un desarrollador web frontend](https://reader033.vdocuments.net/reader033/viewer/2022052412/558ed8941a28ab34628b458f/html5/thumbnails/34.jpg)
Crea tus propias utilidades (Mixins)
![Page 35: Flujos de trabajo para un desarrollador web frontend](https://reader033.vdocuments.net/reader033/viewer/2022052412/558ed8941a28ab34628b458f/html5/thumbnails/35.jpg)
Javascript
Controla absolutamente todo lo que ocurre en tu website
![Page 37: Flujos de trabajo para un desarrollador web frontend](https://reader033.vdocuments.net/reader033/viewer/2022052412/558ed8941a28ab34628b458f/html5/thumbnails/37.jpg)
![Page 38: Flujos de trabajo para un desarrollador web frontend](https://reader033.vdocuments.net/reader033/viewer/2022052412/558ed8941a28ab34628b458f/html5/thumbnails/38.jpg)
![Page 39: Flujos de trabajo para un desarrollador web frontend](https://reader033.vdocuments.net/reader033/viewer/2022052412/558ed8941a28ab34628b458f/html5/thumbnails/39.jpg)
Construye aplicaciones mantenibles con un MVC
![Page 40: Flujos de trabajo para un desarrollador web frontend](https://reader033.vdocuments.net/reader033/viewer/2022052412/558ed8941a28ab34628b458f/html5/thumbnails/40.jpg)
Backbone - Angular - Ember
![Page 41: Flujos de trabajo para un desarrollador web frontend](https://reader033.vdocuments.net/reader033/viewer/2022052412/558ed8941a28ab34628b458f/html5/thumbnails/41.jpg)
npm install -g browserify
![Page 42: Flujos de trabajo para un desarrollador web frontend](https://reader033.vdocuments.net/reader033/viewer/2022052412/558ed8941a28ab34628b458f/html5/thumbnails/42.jpg)
battle.js
Programemos Pokemon
![Page 43: Flujos de trabajo para un desarrollador web frontend](https://reader033.vdocuments.net/reader033/viewer/2022052412/558ed8941a28ab34628b458f/html5/thumbnails/43.jpg)
Requerimientos
![Page 44: Flujos de trabajo para un desarrollador web frontend](https://reader033.vdocuments.net/reader033/viewer/2022052412/558ed8941a28ab34628b458f/html5/thumbnails/44.jpg)
Modelos
![Page 45: Flujos de trabajo para un desarrollador web frontend](https://reader033.vdocuments.net/reader033/viewer/2022052412/558ed8941a28ab34628b458f/html5/thumbnails/45.jpg)
Vistas
![Page 46: Flujos de trabajo para un desarrollador web frontend](https://reader033.vdocuments.net/reader033/viewer/2022052412/558ed8941a28ab34628b458f/html5/thumbnails/46.jpg)
Colecciones
![Page 47: Flujos de trabajo para un desarrollador web frontend](https://reader033.vdocuments.net/reader033/viewer/2022052412/558ed8941a28ab34628b458f/html5/thumbnails/47.jpg)
![Page 48: Flujos de trabajo para un desarrollador web frontend](https://reader033.vdocuments.net/reader033/viewer/2022052412/558ed8941a28ab34628b458f/html5/thumbnails/48.jpg)
http://leonidasesteban.com/pokemonbattle/
Porque el frontend es divertido
![Page 49: Flujos de trabajo para un desarrollador web frontend](https://reader033.vdocuments.net/reader033/viewer/2022052412/558ed8941a28ab34628b458f/html5/thumbnails/49.jpg)
battle.js to bundle.js
browserify battle.js -o bundle.js
![Page 51: Flujos de trabajo para un desarrollador web frontend](https://reader033.vdocuments.net/reader033/viewer/2022052412/558ed8941a28ab34628b458f/html5/thumbnails/51.jpg)
gulpfile.js
![Page 52: Flujos de trabajo para un desarrollador web frontend](https://reader033.vdocuments.net/reader033/viewer/2022052412/558ed8941a28ab34628b458f/html5/thumbnails/52.jpg)
Compila
> gulp watch watchify
![Page 54: Flujos de trabajo para un desarrollador web frontend](https://reader033.vdocuments.net/reader033/viewer/2022052412/558ed8941a28ab34628b458f/html5/thumbnails/54.jpg)
Leonidas Esteban - @LeonidasEsteban
Muchas, muchas gracias.