chico-ui en escuela davinci

Agenda

•Proyecto

•Instalación y uso

•Familias y componentes

•Diseño

•Citas

•Preguntas?

Natan [email protected]

twitter.com/natos

Sr Frontender

“son un montón de ninjas chiquitos que te parten la cabeza”

•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> <html lang="es" class="no-js">

<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 }

content: {

type: “param”,

callbacks: {

content: {

type: “param”,

callbacks: {

content: {

type: “param”,

callbacks: {

content: {

type: “param”,

callbacks: {

content: {

type: “param”,

callbacks: {

var layer = $(“.rep”).layer({

content: {

type: “param”,

callbacks: {

content: {

type: “param”,

callbacks: {

content: {

type: “param”,

callbacks: {

content: {

type: “param”,

callbacks: {

{{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

•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

•Dropdown

•Tab

Slider

•Carousel

“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”

“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...

chico-ui en escuela davinci

Design