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