Ponencia en el Lima Dev Fest 2015 sobre Material Design aplicado a la web usando distintos stacks front-end.

1. Material Design
Aplicado a la web

3. Dime en qué desarrollas y te diré que usar...

4. Ya sabes hago mi markup con HTML5 pero cuando puedo
uso Jade o Haml para evitar la fatiga.
Mis estilos siguen los estándares del CSS3 pero cuando
me siento productivo uso el rico Sass ó Less. Oie zih!
Para mis scripts hago maravillas con solo jQuery pero para
perder peso a veces me rindo ante Zepto, aunque hay días
que me despierto iluminado y le doy puro Vanilla.
¿Que alternativas tengo?
Pues más que todo hago websites...

5. Materialize por un lado, a casi 1 año
de de su primer release allá por
noviembre del 2014, con +13k de ⭐ en
Github, trae todos los conceptos de
Material Design usando sólo
CSS/Sass y algo Javascript.
Tiene una comunidad bastante activa
y su uso es bastante simple, así que si
de casualidad eres un dev backend y
te estás aventurando al frontend y por
el momento cuentas con las nociones
básicas de frontend podrías usarlo sin
problemas ;)
En ese caso te
podría interesar...

6. ¡Pero no es “by Google”!
¡Queremos algo oficial!

7. También existe Material Design Lite.
Lanzada por el propio equipo de
Google hace poco menos de un año
(junio 2015) incorpora todo la
especificación de Material Design
usando sólo CSS y Vanilla Javascript,
en otras palabras no depende de
ningún framework o biblioteca.
Así que si vives obsesionado con el
peso, odias que cada biblioteca o
framework que uses dependa del
amado/odiado jQuery y no confías en
nadie más que en San Google, ¡MDL es
lo que buscas!
Ok estás de
suerte...

8. Creo firmemente que la web es la plataforma del mañana,
que digo del mañana, ¡de hoy!, y pues jQuery me queda
corto cuando busco más interactividad y sobre todo
cuando tengo que escalar y dar mantenimiento, incluso
luego de estructurar asi bien cool mis archivos y usar
todos los patrones que sé.
Así que cuando me toca desarrollar un web app me decido
por un framework o librería que me de buena base, y sería
bien cool que hayan componentes listos para usar que
incorporen Material Design.
Oye pero también desarrollo web apps!

9. Material ya es tendencia así que
dependiendo de la tech que uses es
probable ya se haya implementado
algo que incorpore la especificación.
En el caso seas hincha acérrimo del
escudo con la “A” y cuando alguien te
muestra algo cool en la web, tú dices
“esto lo hago yo en 2 patadas usando
Angular con ui-router, restangular y un
par de controllers”. ¡Buenas noticias!
Angular Material implementa Material
Design en una serie de componentes
reusables mantenidos internamente
equipos de Google.
Ah pues hubieras
empezado por ahí
<md-button> Flat Button </md-button>
<md-button class="md-raised"> Raised Button </md-
button>
<md-button md-no-ink class="md-raised"> Raised
Button (noink) </md-button>
<md-button ng-disabled="true"> Disabled Button </md-
button>
<md-button>
<md-icon md-svg-src="your/icon.svg"></md-icon>
Register Now
</md-button>
<md-button class="md-fab" aria-label="FAB">
<md-icon md-svg-src="your/icon.svg"></md-icon>
</md-button>

10. Te enamoraste de los web
components y has seguido a Polymer
desde antes que esté listo para
producción, entonces lo más probable
es que ya estés al tanto de la
colección de Paper elements para
Polymer.
Esta colección la puedes usar junto
con la colección de core elements de
Polymer. Suculento.
¿Los componentes
web son lo tuyo? <paper-button>Flat button</paper-button>
<paper-button raised>Raised button</paper-button>
<paper-button noink>No ripple effect</paper-button>
<paper-button>
<core-icon icon="favorite"></core-icon>
Custom button content
</paper-button>
<paper-fab src="star.png"></paper-fab>

11. ¡Y para los que usamos otros
frameworks o librerías!
¡Que no todo es Google hombre!

12. Puede que seas de los que le agarró
un cariño cariño especial a la ardilla
miope y te gusten los bigotes hipster
de handlebars. Descuida amigx dev
apasionado por Ember ¡hay una opción
para ti!
Ember Paper es una librería para
Ember (obvio) que encapsula toda la
especificación de Material Design en
componentes ember. ¿Ahora si nos
entendemos?
Descuida hay para
todos los gustos... {{#paper-button}}Flat Button{{/paper-button}}
{{#paper-button raised=true}}Raised Button{{/paper-button}}
{{#paper-button noink=true raised=true}}Raised Button (noink)
{{/paper-button}}
{{#paper-button disabled=true}}Disabled Button{{/paper-button}}
{{#paper-button icon-button=true}}{{paper-icon icon="more-vert"}}
{{/paper-button}}

13. ¿Eres de los que buscan velocidad,
odian el two way data binding y el
virtual DOM les parece lo más cool no
inventado por Google?
Ok chicx React, no te preocupes que
Material Design está disponible para tí
encapsulado en React components
gracias a Material-UI, eso sí, sería
bueno que además tengas base
usando browserify o webpack dado
que sólo está disponible vía npm. Si no
sabes de lo que hablo, no seas tan
pulpín y ponte a googlear, que no todo
en la vida es bower.
Facebook te gusta
más que Google.
Ok, no hay roche. <FlatButton label="Flat Button" />
<RaisedButton label="Raised Button" />
<FlatButton disabled={true} label="Disabled Button" />
<RaisedButton label="Github">
<FontIcon className="muidocs-icon-custom-github"/>
</RaisedButton>
<FloatingActionButton>
<FontIcon className="muidocs-icon-action-grade" />
</FloatingActionButton>

14. No digas más.

15. Materializa la
web
como ven hay muchas
alternativas

16. “The challenge when choosing a JS framework is to
jump on the right train at the right moment”
- CommitStrip.com

17. Material Design no
nació sólo como una
guía de diseño para
Android, lo puedes
usar hoy en la web.

18. Gracias
Eysenck Gómez
@eyscode
eyscode@gmail.com
eysenck@kodevian.com
www.kodevian.com