Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.
Organiza tu front
con Dart y Polymer
Pablo 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 JVM
Java 5, Java 6 Groovy, Scala...
@dovaleac @madriddug
<html>
<head>
<script type = “text/javascript”>
function cambiaColor(){
document.getElementById(“saludo”).color = “#F00”;
...
Organización, claridad, estructura
BACK
FRONT
C Java JVM
Java 5, Java 6 Groovy, Scala...
JS
Dart
@dovaleac @madriddug
Benchmarks
Benchmarks provenientes de https://www.github.com/UnixPickle/benchmarks
Dart
Lenguaje 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 bibli...
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
@do...
Polymer
Modularizando la web
@dovaleac @madriddug
Shadow DOM
● Zona del HTML accesible para el browser
● Inaccesible para el programador
● Oculta detalles de la implementac...
WebComponents
● Encapsulan HTML, CSS y JS
● Plantillas
● Se pueden importar
● Modularización
@dovaleac @madriddug
Comunicando WebComponents
@dovaleac @madriddug
Comunicando WebComponents
Observando una variable (hijo emisor)
@dovaleac @madriddug
Comunicando WebComponents
Observando una variable (padre)
@dovaleac @madriddug
Comunicando WebComponents
Observando una variable (hijo receptor)
@dovaleac @madriddug
Comunicando WebComponents
@dovaleac @madriddug
Comunicando WebComponents
Reaccionando al cambio en una variable (hijo emisor)
@dovaleac @madriddug
Comunicando WebComponents
Reaccionando al cambio en una variable (padre)
@dovaleac @madriddug
Comunicando WebComponents
Reaccionando al cambio en una variable (hijo receptor)
@dovaleac @madriddug
Iron elements
● iron-selector, iron-input
● iron-ajax
● iron-flex-layout
@dovaleac @madriddug
@dovaleac @madriddug
Conclusiones
Uso recomendable de Dart
● Backfront aprovecha sus capacidades
● Polymer 0.5
● Polymer 1.0
● Angular
@dovalea...
Conclusiones
Uso recomendable de Polymer
● Buscar WebComponents reusables
● Background personal de WebComponents
● Separac...
Conclusiones
Cosas que yo no haría
● Usar Dart para el back
● Un WebComponent por página
● WebComponents no reusables
@dov...
Gracias!!!
@dovaleac @madriddug
Organiza tu front con dart y polymer
Prochain SlideShare
Chargement dans…5
×

Organiza tu front con dart y polymer

Diapositivas de la presentación de Codemotion. El código está en https://github.com/pgdoval , son los proyectos dart_modular_example, basic_polymer_dart, Backend_tagcloud_polymer y polymerjs_tagcloud

  • Identifiez-vous pour voir les commentaires

Organiza tu front con dart y polymer

  1. 1. Organiza tu front con Dart y Polymer Pablo González Doval @dovaleacMADRID · NOV 27-28 · 2015
  2. 2. Pablo González Doval @dovaleac ● Head of Development at ● Co-organizer@madriddug https://github.com/pgdoval
  3. 3. Organización, claridad, estructura BACK FRONT C Java JVM Java 5, Java 6 Groovy, Scala... @dovaleac @madriddug
  4. 4. <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
  5. 5. Organización, claridad, estructura BACK FRONT C Java JVM Java 5, Java 6 Groovy, Scala... JS Dart @dovaleac @madriddug
  6. 6. Benchmarks Benchmarks provenientes de https://www.github.com/UnixPickle/benchmarks
  7. 7. Dart Lenguaje OO moderno pensado para el front @dovaleac @madriddug
  8. 8. 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
  9. 9. Todo en uno Javascript jQuery Backbone require Phantom Dart @dovaleac @madriddug
  10. 10. Front en desarrollo ● DartVM ● Navegador Dartium ● WebStorm @dovaleac @madriddug
  11. 11. Front en producción ● Dart2js ● pub build ● Tree-shaking ● Código JS fácil de debuggear ● Velocidad similar a la de JS @dovaleac @madriddug
  12. 12. Polymer Modularizando la web @dovaleac @madriddug
  13. 13. Shadow DOM ● Zona del HTML accesible para el browser ● Inaccesible para el programador ● Oculta detalles de la implementación @dovaleac @madriddug
  14. 14. WebComponents ● Encapsulan HTML, CSS y JS ● Plantillas ● Se pueden importar ● Modularización @dovaleac @madriddug
  15. 15. Comunicando WebComponents @dovaleac @madriddug
  16. 16. Comunicando WebComponents Observando una variable (hijo emisor) @dovaleac @madriddug
  17. 17. Comunicando WebComponents Observando una variable (padre) @dovaleac @madriddug
  18. 18. Comunicando WebComponents Observando una variable (hijo receptor) @dovaleac @madriddug
  19. 19. Comunicando WebComponents @dovaleac @madriddug
  20. 20. Comunicando WebComponents Reaccionando al cambio en una variable (hijo emisor) @dovaleac @madriddug
  21. 21. Comunicando WebComponents Reaccionando al cambio en una variable (padre) @dovaleac @madriddug
  22. 22. Comunicando WebComponents Reaccionando al cambio en una variable (hijo receptor) @dovaleac @madriddug
  23. 23. Iron elements ● iron-selector, iron-input ● iron-ajax ● iron-flex-layout @dovaleac @madriddug
  24. 24. @dovaleac @madriddug
  25. 25. Conclusiones Uso recomendable de Dart ● Backfront aprovecha sus capacidades ● Polymer 0.5 ● Polymer 1.0 ● Angular @dovaleac @madriddug
  26. 26. Conclusiones Uso 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
  27. 27. Conclusiones Cosas que yo no haría ● Usar Dart para el back ● Un WebComponent por página ● WebComponents no reusables @dovaleac @madriddug
  28. 28. Gracias!!! @dovaleac @madriddug

×