organiza tu front con dart y polymer

Organiza tu front con Dart y PolymerPablo González Doval@dovaleacMADRID · NOV 27-28 · 2015

Pablo González Doval

@dovaleac

● Head of Development at

● Co-organizer@madriddug

https://github.com/pgdoval

Organización, claridad, estructura

BACK

FRONT

C Java JVMJava 5, Java 6 Groovy, Scala...

@dovaleac @madriddug

<html><head>

<script type = “text/javascript”>

function cambiaColor(){document.getElementById(“saludo”).color = “#F00”;

}</script>

</head><body>

<div id = “saludo” onHover = “cambiaColor()”>Hola Codemotion

</div></body>

Codemotion


Organización, claridad, estructura

BACK

FRONT

C Java JVMJava 5, Java 6 Groovy, Scala...

JSDart


Benchmarks

Benchmarks provenientes de https://www.github.com/UnixPickle/benchmarks

DartLenguaje OO moderno pensado para el front


Características de Dart

● OO moderno

● Código más limpio y claro

● Ejecución rápida

● Front + Back + Mobile

● Uso de bibliotecas JS


Todo en uno

Javascript

jQuery

Backbone

require

Phantom

Dart


Front en desarrollo

● DartVM

● Navegador Dartium

● WebStorm


Front en producción

● Dart2js

● pub build

● Tree-shaking

● Código JS fácil de debuggear

● Velocidad similar a la de JS


PolymerModularizando la web


Shadow DOM

● Zona del HTML accesible para el browser

● Inaccesible para el programador

● Oculta detalles de la implementación


WebComponents

● Encapsulan HTML, CSS y JS

● Plantillas

● Se pueden importar

● Modularización


Comunicando WebComponents


Comunicando WebComponentsObservando una variable (hijo emisor)


Comunicando WebComponentsObservando una variable (padre)


Comunicando WebComponentsObservando una variable (hijo receptor)


Comunicando WebComponents


Comunicando WebComponentsReaccionando al cambio en una variable (hijo emisor)


Comunicando WebComponentsReaccionando al cambio en una variable (padre)


Comunicando WebComponentsReaccionando al cambio en una variable (hijo receptor)


Iron elements

● iron-selector, iron-input

● iron-ajax

● iron-flex-layout


ConclusionesUso recomendable de Dart

● Backfront aprovecha sus capacidades

● Polymer 0.5

● Polymer 1.0

● Angular


ConclusionesUso recomendable de Polymer

● Buscar WebComponents reusables

● Background personal de WebComponents

● Separación de roles: senior vs junior

● Separación de roles: programador vs artista


ConclusionesCosas que yo no haría

● Usar Dart para el back

● Un WebComponent por página

● WebComponents no reusables


Gracias!!!


organiza tu front con dart y polymer

Software