Post on 06-Aug-2015
Agenda
•Proyecto
•Instalación y uso
•Familias y componentes
•Diseño
•Citas
•Preguntas?
Natan Santolonatan.santolo@mercadolibre.com
twitter.com/natos
Sr Frontender
“son un montón de ninjas chiquitos que te parten la cabeza”
Brief
•Herramienta para desarrollo de Frontend
•Desarrollado en HTML, CSS, JS y PHP
•Componentes reutilizables y configurables
•Código abierto
Proyecto
Objetivos
•Proveer una solución de Frontend para agilizar y unificar la producción
•Normalizar la identidad y la interacción de los componentes
•A largo plazo, lograr consistencia en los productos de MercadoLibre
Equipo
•Tres recursos fulltime
•Entregables todas las semanas
•Filosofía ágil
•Open sourced
Diseño
Máximas para tomar desiciones
•Simplicidad (sintaxis js)
•Re-utilización (snippets, css)
•Estandarización (json, {argumentos})
•Automatización (tests, packer)
•Código funcionando (todos los viernes)
•Escalar después (validator)
Buenas prácticas
• JavaScript no obstrusivo
•Pruebas unitarias (casi TDD)
•Progressive Enhancement & Gracefull Degradation
•Optimización de sprites (con data URI)
•Minificación y compresión de recursos
Patrones y herramientas
• Namespaces (window.ui, ui.foo)
• Closures and Callbacks
• Instances Map (en el DOM)
• Parasitic Inheritance
• Power Constructor (by Douglas Crockford)
• Public Objects: Exponen métodos y propiedades
• Packer-o-matic
Packer-o-matic
•Unifica en un archivo cada tipo de recurso
•Componentes a demanda ?get=
•Minifica el código vs Modo debug
•Próximamente:• Ofuscación de código
Estructura
jQueryjQuery
Core JSCore JS Core CSSCore CSS
ComponentesComponentes
jQueryjQuery
Core JSCore JS Core CSSCore CSS
ComponentesComponentes
Oye Oye Chico!Chico!
Core CSS
• Reset
• Layout general
• Sprite general
• Tipografías
• Próximamente:
• Sistema de grillas
• Skinning (ML, MP, MS, ...)
Core JS•Inicia el SDK
•Crea componentes
•Obtiene recursos necesarios
•Provee herramientas internas (ui.utils)
•Sintaxis jQuery ;)
•Ej: $( query ).component( config );
Componentes
•Unidad funcional y visual mínima empaquetada
•Constan de 3 partes:• Estructura: esqueleto de contenido (HTML) !Important
• Presentación: estilos visuales (CSS)
• Funcionalidad: comportamiento (JS)
•Son configurables ;)
Instalación y uso
Dependencias
•jQuery
•Browser sniffing (IE conditional classes on <html>)
•Script para PNGs transparentes
Instalación
•Incluir dependencias (jQuery, Browser sniffing, PNGfix)
•Incluir los recursos de Chico-UI (JS y CSS)
•HTML snippets
•Configurar componentes
<!doctype html><!--[if IE]><![endif]--><!--[if lt IE 7 ]> <html lang="es" class="no-js ie6"> <![endif]--><!--[if IE 7 ]> <html lang="es" class="no-js ie7"> <![endif]--><!--[if IE 8 ]> <html lang="es" class="no-js ie8"> <![endif]--><!--[if IE 9 ]> <html lang="es" class="no-js ie9"> <![endif]--><!--[if (gt IE 9)|!(IE)]><!--> <html lang="es" class="no-js"> <!--<![endif]-->
<head><meta charset="utf-8"><title>Chico UI</title><link rel="stylesheet" type="text/css" href="chico.css"><script src="libs/js/jquery-1.4.4.js"></script><script src="chico.js"></script></head>
<!doctype html><!--[if IE]><![endif]--><!--[if lt IE 7 ]> <html lang="es" class="no-js ie6"> <![endif]--><!--[if IE 7 ]> <html lang="es" class="no-js ie7"> <![endif]--><!--[if IE 8 ]> <html lang="es" class="no-js ie8"> <![endif]--><!--[if IE 9 ]> <html lang="es" class="no-js ie9"> <![endif]--><!--[if (gt IE 9)|!(IE)]><!--> <html lang="es" class="no-js"> <!--<![endif]-->
<head><meta charset="utf-8"><title>Chico UI</title><link rel="stylesheet" type="text/css" href="chico.css"><script src="libs/js/jquery-1.4.4.js"></script><script src="chico.js"></script></head>
<!doctype html><!--[if IE]><![endif]--><!--[if lt IE 7 ]> <html lang="es" class="no-js ie6"> <![endif]--><!--[if IE 7 ]> <html lang="es" class="no-js ie7"> <![endif]--><!--[if IE 8 ]> <html lang="es" class="no-js ie8"> <![endif]--><!--[if IE 9 ]> <html lang="es" class="no-js ie9"> <![endif]--><!--[if (gt IE 9)|!(IE)]><!--> <html lang="es" class="no-js"> <!--<![endif]-->
<head><meta charset="utf-8"><title>Chico UI</title><link rel="stylesheet" type="text/css" href="chico.css"><script src="libs/js/jquery-1.4.4.js"></script><script src="chico.js"></script></head>
<!doctype html><!--[if IE]><![endif]--><!--[if lt IE 7 ]> <html lang="es" class="no-js ie6"> <![endif]--><!--[if IE 7 ]> <html lang="es" class="no-js ie7"> <![endif]--><!--[if IE 8 ]> <html lang="es" class="no-js ie8"> <![endif]--><!--[if IE 9 ]> <html lang="es" class="no-js ie9"> <![endif]--><!--[if (gt IE 9)|!(IE)]><!--> <html lang="es" class="no-js"> <!--<![endif]-->
<head><meta charset="utf-8"><title>Chico UI</title><link rel="stylesheet" type="text/css" href="chico.css"><script src="libs/js/jquery-1.4.4.js"></script><script src="chico.js"></script></head>
<!doctype html><!--[if IE]><![endif]--><!--[if lt IE 7 ]> <html lang="es" class="no-js ie6"> <![endif]--><!--[if IE 7 ]> <html lang="es" class="no-js ie7"> <![endif]--><!--[if IE 8 ]> <html lang="es" class="no-js ie8"> <![endif]--><!--[if IE 9 ]> <html lang="es" class="no-js ie9"> <![endif]--><!--[if (gt IE 9)|!(IE)]><!--> <html lang="es" class="no-js"> <!--<![endif]-->
<head><meta charset="utf-8"><title>Chico UI</title><link rel="stylesheet" type="text/css" href="chico.css"><script src="libs/js/jquery-1.4.4.js"></script><script src="chico.js"></script></head>
<!doctype html><!--[if IE]><![endif]--><!--[if lt IE 7 ]> <html lang="es" class="no-js ie6"> <![endif]--><!--[if IE 7 ]> <html lang="es" class="no-js ie7"> <![endif]--><!--[if IE 8 ]> <html lang="es" class="no-js ie8"> <![endif]--><!--[if IE 9 ]> <html lang="es" class="no-js ie9"> <![endif]--><!--[if (gt IE 9)|!(IE)]><!--> <html lang="es" class="no-js"> <!--<![endif]-->
<head><meta charset="utf-8"><title>Chico UI</title><link rel="stylesheet" type="text/css" href="chico.css"><script src="libs/js/jquery-1.4.4.js"></script><script src="chico.js"></script></head>
<!doctype html><!--[if IE]><![endif]--><!--[if lt IE 7 ]> <html lang="es" class="no-js ie6"> <![endif]--><!--[if IE 7 ]> <html lang="es" class="no-js ie7"> <![endif]--><!--[if IE 8 ]> <html lang="es" class="no-js ie8"> <![endif]--><!--[if IE 9 ]> <html lang="es" class="no-js ie9"> <![endif]--><!--[if (gt IE 9)|!(IE)]><!--> <html lang="es" class="no-js"> <!--<![endif]-->
<head><meta charset="utf-8"><title>Chico UI</title><link rel="stylesheet" type="text/css" href="chico.css"><script src="libs/js/jquery-1.4.4.js"></script><script src="chico.js"></script></head>
<!doctype html><!--[if IE]><![endif]--><!--[if lt IE 7 ]> <html lang="es" class="no-js ie6"> <![endif]--><!--[if IE 7 ]> <html lang="es" class="no-js ie7"> <![endif]--><!--[if IE 8 ]> <html lang="es" class="no-js ie8"> <![endif]--><!--[if IE 9 ]> <html lang="es" class="no-js ie9"> <![endif]--><!--[if (gt IE 9)|!(IE)]><!--> <html lang="es" class="no-js"> <!--<![endif]-->
<head><meta charset="utf-8"><title>Chico UI</title><link rel="stylesheet" type="text/css" href="chico.css"><script src="libs/js/jquery-1.4.4.js"></script><script src="chico.js"></script></head>
<!doctype html><!--[if IE]><![endif]--><!--[if lt IE 7 ]> <html lang="es" class="no-js ie6"> <![endif]--><!--[if IE 7 ]> <html lang="es" class="no-js ie7"> <![endif]--><!--[if IE 8 ]> <html lang="es" class="no-js ie8"> <![endif]--><!--[if IE 9 ]> <html lang="es" class="no-js ie9"> <![endif]--><!--[if (gt IE 9)|!(IE)]><!--> <html lang="es" class="no-js"> <!--<![endif]-->
<head><meta charset="utf-8"><title>Chico UI</title><link rel="stylesheet" type="text/css" href="chico.css"><script src="libs/js/jquery-1.4.4.js"></script><script src="chico.js"></script></head>
<!doctype html><!--[if IE]><![endif]--><!--[if lt IE 7 ]> <html lang="es" class="no-js ie6"> <![endif]--><!--[if IE 7 ]> <html lang="es" class="no-js ie7"> <![endif]--><!--[if IE 8 ]> <html lang="es" class="no-js ie8"> <![endif]--><!--[if IE 9 ]> <html lang="es" class="no-js ie9"> <![endif]--><!--[if (gt IE 9)|!(IE)]><!--> <html lang="es" class="no-js"> <!--<![endif]-->
<head><meta charset="utf-8"><title>Chico UI</title><link rel="stylesheet" type="text/css" href="chico.css"><script src="libs/js/jquery-1.4.4.js"></script><script src="chico.js"></script></head>
<!doctype html><!--[if IE]><![endif]--><!--[if lt IE 7 ]> <html lang="es" class="no-js ie6"> <![endif]--><!--[if IE 7 ]> <html lang="es" class="no-js ie7"> <![endif]--><!--[if IE 8 ]> <html lang="es" class="no-js ie8"> <![endif]--><!--[if IE 9 ]> <html lang="es" class="no-js ie9"> <![endif]--><!--[if (gt IE 9)|!(IE)]><!--> <html lang="es" class="no-js"> <!--<![endif]-->
<head><meta charset="utf-8"><title>Chico UI</title><link rel="stylesheet" type="text/css" href="chico.css"><script src="libs/js/jquery-1.4.4.js"></script><script src="chico.js"></script></head>
<!doctype html><!--[if IE]><![endif]--><!--[if lt IE 7 ]> <html lang="es" class="no-js ie6"> <![endif]--><!--[if IE 7 ]> <html lang="es" class="no-js ie7"> <![endif]--><!--[if IE 8 ]> <html lang="es" class="no-js ie8"> <![endif]--><!--[if IE 9 ]> <html lang="es" class="no-js ie9"> <![endif]--><!--[if (gt IE 9)|!(IE)]><!--> <html lang="es" class="no-js"> <!--<![endif]-->
<head><meta charset="utf-8"><title>Chico UI</title><link rel="stylesheet" type="text/css" href="chico.css"><script src="libs/js/jquery-1.4.4.js"></script><script src="chico.js"></script></head>
Paso a paso
•Incluir dependencias (jQuery, Browser sniffing, PNGfix)
•Incluir los recursos de Chico-UI (JS y CSS)
•HTML snippets
•Configurar componentes
$(“.rep”).layer({
content: {
type: “param”,
data: “<h2>Reputación</h2>”
},
callbacks: {
show: function(){ // El layer esta prendido }
}
});
$(“.rep”).layer({
content: {
type: “param”,
data: “<h2>Reputación</h2>”
},
callbacks: {
show: function(){ // El layer esta prendido }
}
});
$(“.rep”).layer({
content: {
type: “param”,
data: “<h2>Reputación</h2>”
},
callbacks: {
show: function(){ // El layer esta prendido }
}
});
$(“.rep”).layer({
content: {
type: “param”,
data: “<h2>Reputación</h2>”
},
callbacks: {
show: function(){ // El layer esta prendido }
}
});
$(“.rep”).layer({
content: {
type: “param”,
data: “<h2>Reputación</h2>”
},
callbacks: {
show: function(){ // El layer esta prendido }
}
});
$(“.rep”).layer({
content: {
type: “param”,
data: “<h2>Reputación</h2>”
},
callbacks: {
show: function(){ // El layer esta prendido }
}
});
var layer = $(“.rep”).layer({
content: {
type: “param”,
data: “<h2>Reputación</h2>”
},
callbacks: {
show: function(){ // El layer esta prendido }
}
});
var layer = $(“.rep”).layer({
content: {
type: “param”,
data: “<h2>Reputación</h2>”
},
callbacks: {
show: function(){ // El layer esta prendido }
}
});
var layer = $(“.rep”).layer({
content: {
type: “param”,
data: “<h2>Reputación</h2>”
},
callbacks: {
show: function(){ // El layer esta prendido }
}
});
var layer = $(“.rep”).layer({
content: {
type: “param”,
data: “<h2>Reputación</h2>”
},
callbacks: {
show: function(){ // El layer esta prendido }
}
});
{{uid: 0,uid: 0,type: “ui.layer”,type: “ui.layer”,element: HTMLElement,element: HTMLElement,show(),show(),hide()hide()
}}
layer.show()layer.show()
{{uid: 0,uid: 0,type: “ui.layer”,type: “ui.layer”,element: HTMLElement,element: HTMLElement,show(),show(),hide()hide()
}}
layer.show()layer.show()
Familias
Familias
•Controllers
•Floats
•Navs
•Slider
Controllers
•Tab Navigator
•Validator
Floats•Tooltip
•Helper
•Contextual Layer
•Modal Window
Modal config
•content
•type: param | DOM | ajax
•[ data ] : string
•[ callbacks ]
•[ show ] : function
•[ hide ] : function
Layer config• [ event ] : “click”
• content
• type: param | DOM | ajax
•data: string
• [ callbacks ]
• [ show ] : function
• [ hide ] : function
Navs
•Dropdown
•Tab
Slider
•Carousel
Citas
“es una luz en el fondo del tunel, en la busqueda de consistencia entre las UI`s
de Meli”- Tato
“agiliza muchísimo los tiempos de implementación, optimizando los tiempos
de diseñadores y programadores, ahorrando tambien tiempo con
definiciones que ya están resueltas en chico”- Diego
“Con Chico Ui pude dedicarle más tiempo al diseño del los productos y no tener que
preocuparme por el funcionamiento e interacción de componentes ya
estandarizados y que sabemos que funcionan”
- Fer
“Chico UI es un proyecto opensource que agrupa los componentes que se utilizan
dentro en ML.”- Guille
“es una herramienta que simplifica el proceso de implementacion de una interfaz, agregando funcionalidad”
- Lean
“paquetito de codigo que me deja implementar componentes con solo un
par de lineas en mi html”
- Nati
“unos hiper nionios haciendo algo copado para ml”
- Jess
Gracias!!!
•Chico-UI Team: Guille, Lean y Naty!
•GMP Team!
•User Experience Team!
•Damian y Michel...
•A mi mamá y a mi papá, obvio...