organiza tu front con dart y polymer
Post on 14-Apr-2017
332 Views
Preview:
TRANSCRIPT
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
@dovaleac @madriddug
Organización, claridad, estructura
BACK
FRONT
C Java JVMJava 5, Java 6 Groovy, Scala...
JSDart
@dovaleac @madriddug
Benchmarks
Benchmarks provenientes de https://www.github.com/UnixPickle/benchmarks
DartLenguaje OO moderno pensado para el front
@dovaleac @madriddug
Características de Dart
● OO moderno
● Código más limpio y claro
● Ejecución rápida
● Front + Back + Mobile
● Uso de bibliotecas JS
@dovaleac @madriddug
Todo en uno
Javascript
jQuery
Backbone
require
Phantom
Dart
@dovaleac @madriddug
Front en desarrollo
● DartVM
● Navegador Dartium
● WebStorm
@dovaleac @madriddug
Front en producción
● Dart2js
● pub build
● Tree-shaking
● Código JS fácil de debuggear
● Velocidad similar a la de JS
@dovaleac @madriddug
PolymerModularizando la web
@dovaleac @madriddug
Shadow DOM
● Zona del HTML accesible para el browser
● Inaccesible para el programador
● Oculta detalles de la implementación
@dovaleac @madriddug
WebComponents
● Encapsulan HTML, CSS y JS
● Plantillas
● Se pueden importar
● Modularización
@dovaleac @madriddug
Comunicando WebComponents
@dovaleac @madriddug
Comunicando WebComponentsObservando una variable (hijo emisor)
@dovaleac @madriddug
Comunicando WebComponentsObservando una variable (padre)
@dovaleac @madriddug
Comunicando WebComponentsObservando una variable (hijo receptor)
@dovaleac @madriddug
Comunicando WebComponents
@dovaleac @madriddug
Comunicando WebComponentsReaccionando al cambio en una variable (hijo emisor)
@dovaleac @madriddug
Comunicando WebComponentsReaccionando al cambio en una variable (padre)
@dovaleac @madriddug
Comunicando WebComponentsReaccionando al cambio en una variable (hijo receptor)
@dovaleac @madriddug
Iron elements
● iron-selector, iron-input
● iron-ajax
● iron-flex-layout
@dovaleac @madriddug
@dovaleac @madriddug
ConclusionesUso recomendable de Dart
● Backfront aprovecha sus capacidades
● Polymer 0.5
● Polymer 1.0
● Angular
@dovaleac @madriddug
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
@dovaleac @madriddug
ConclusionesCosas que yo no haría
● Usar Dart para el back
● Un WebComponent por página
● WebComponents no reusables
@dovaleac @madriddug
Gracias!!!
@dovaleac @madriddug
top related