View
1.384
Download
1
Category
Preview:
DESCRIPTION
Conferencia dictada para el XXII Coneisc
Citation preview
Flujos de Trabajo para un desarrollador web frontend
Hola soy @LeonidasEsteban
Estoy aprendiendo Frontend con @LeonidasEsteban
¿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.
HTML, CSS y Javascript
Herramientas
Editor de código
Será tu fiel compañero en esas noches de ideas geniales que debas llevar a la web
Sublime Text
• Escribe código en modo sin distracciones (Distraction free mode)
• Muevete ágilmente entre los archivos de tu proyecto ⌘P
• Personalizable
• Multiplataforma
Plugins
• Package control
• Emmet
• Sublime Linter
Control de versiones
Porque siempre es buena idea tener un historial de todo lo que hacemos
• 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.
Git flow
http://danielkummer.github.io/git-flow-cheatsheet/
• git flow feature start “nombre del feature”
nuevas rama del feature
• git flow feature finish “nombre del feature”
merge de la rama con dev
!
• 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
• 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
• “Red social de desarrolladores”
• Crear nuevos repositorios y organizaciones
• Revisar commits visualmente
• Editar archivos
• Muchos proyectos open source ya están en Github
¿no sabes git?
Descarga un .zip del proyecto ;)
HTML
Define semánticamente el contenido de tu website
El problemamala declaración de clases
La soluciónModulos, utilidades y jerarquía semántica
• u-utilityName
• ComponentName
• ComponentName--modifierName
• ComponentName-descendentName
• ComponentName.is-stateOfComponent
5 Simples convenciones
CSS
Pon lindo todo el contenido de la web
http://foundation.zurb.com/ http://getbootstrap.com/ http://purecss.io/
Crea CSS profesional
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)
Javascript
Controla absolutamente todo lo que ocurre en tu website
Construye aplicaciones mantenibles con un MVC
Backbone - Angular - Ember
npm install -g browserify
battle.js
Programemos Pokemon
Requerimientos
Modelos
Vistas
Colecciones
http://leonidasesteban.com/pokemonbattle/
Porque el frontend es divertido
battle.js to bundle.js
browserify battle.js -o bundle.js
gulpfile.js
Compila
> gulp watch watchify
Leonidas Esteban - @LeonidasEsteban
Muchas, muchas gracias.
Recommended