Se dice que el peor enemigo del programador es la complejidad, en esta plática hablaremos de como desarrollar la parte del cliente de tu aplicación web usando Web Components con Polymer te ayuda a manejar y reducir la complejidad gracias al encapsulamiento y el ocultar información innecesaria. Además se dará una semblanza de cómo usar Polymer facilita el uso de otros web components que permiten realizar cosas asombrosas en un tiempo récord.

1. www.sgcampus.com.mx @sgcampus
www.sgcampus.com.mx
@sgcampus
Héctor Iván Patricio Morneo
Atacando la complejidad con Web
Components y Polymer

2. www.sgcampus.com.mx @sgcampus
Agenda
0. Complejidad en el Desarrollo de Software
2. Web Components
3. Polymer
4. Demo

3. www.sgcampus.com.mx @sgcampus
¿Quién es el peor enemigo de un desarrollador
de software?

4. www.sgcampus.com.mx @sgcampus
¿El usuario?

5. www.sgcampus.com.mx @sgcampus
¿El jefe?

6. www.sgcampus.com.mx @sgcampus
Complejidad
Complejidad

7. www.sgcampus.com.mx @sgcampus

8. www.sgcampus.com.mx @sgcampus
Complejidad
“Controlling complexity is the essence of computer
programming.”
(Brian Kernighan)

9. www.sgcampus.com.mx @sgcampus
Complejidad
“Complexity kills. It sucks the life out of developers, it
makes products difficult to plan, build and test, it
introduces security challenges, and it causes end-
user and administrator frustration.”
(Ray Ozzie)

10. www.sgcampus.com.mx @sgcampus
Reducción de la Complejidad
1. Particionar

11. www.sgcampus.com.mx @sgcampus
Reducción de la Complejidad
2. Jerarquizar

12. www.sgcampus.com.mx @sgcampus
Reducción de la Complejidad
1. Independizar

13. www.sgcampus.com.mx @sgcampus
Reducción de la Complejidad
Componentes

14. www.sgcampus.com.mx @sgcampus
Desarrollo basado en componentes

15. www.sgcampus.com.mx @sgcampus
Reducción de la Complejidad
Reusables

16. www.sgcampus.com.mx @sgcampus
Reducción de la Complejidad
Reemplazables

17. www.sgcampus.com.mx @sgcampus
Reducción de la Complejidad
Extensibles

18. www.sgcampus.com.mx @sgcampus
Reducción de la Complejidad
Encapsulamiento

19. www.sgcampus.com.mx @sgcampus
Ocultar información

20. www.sgcampus.com.mx @sgcampus
Web Components

21. www.sgcampus.com.mx @sgcampus
Web Components

22. www.sgcampus.com.mx @sgcampus
Web Components
“Widgets” reusables
en páginas y
aplicaciones web

23. www.sgcampus.com.mx @sgcampus
Estándares
HTML Templates

24. www.sgcampus.com.mx @sgcampus
Estándares
HTML Imports

25. www.sgcampus.com.mx @sgcampus
Estándares
Custom Elements

26. www.sgcampus.com.mx @sgcampus
Estándares
Shadow DOM

27. www.sgcampus.com.mx @sgcampus
Navegadores

28. www.sgcampus.com.mx @sgcampus

29. www.sgcampus.com.mx @sgcampus

30. www.sgcampus.com.mx @sgcampus

31. www.sgcampus.com.mx @sgcampus
Polymer
Polymer

32. www.sgcampus.com.mx @sgcampus
Librería de Web Components,
desarrollada por Google que
permite fácilmente crear nuevos
y extender los existentes.

33. www.sgcampus.com.mx @sgcampus
Polyfills

34. www.sgcampus.com.mx @sgcampus
Polyfills

35. www.sgcampus.com.mx @sgcampus
Compatibilidad

36. www.sgcampus.com.mx @sgcampus
Catálogo de
Elementos

37. www.sgcampus.com.mx @sgcampus
Componentes

38. www.sgcampus.com.mx @sgcampus

39. www.sgcampus.com.mx @sgcampus

40. www.sgcampus.com.mx @sgcampus

41. www.sgcampus.com.mx @sgcampus
Material Design

42. www.sgcampus.com.mx @sgcampus

43. www.sgcampus.com.mx @sgcampus
Shadow DOM

44. www.sgcampus.com.mx @sgcampus
Sin Shadow DOM

45. www.sgcampus.com.mx @sgcampus
Shadow DOM

46. www.sgcampus.com.mx @sgcampus
Shadow DOM

47. www.sgcampus.com.mx @sgcampus
Shadow DOM

48. www.sgcampus.com.mx @sgcampus
Shady DOM

49. www.sgcampus.com.mx @sgcampus

50. www.sgcampus.com.mx @sgcampus
Trabajando con
Polymer

51. www.sgcampus.com.mx @sgcampus

52. www.sgcampus.com.mx @sgcampus

53. www.sgcampus.com.mx @sgcampus
Polymer Starter Kit

54. www.sgcampus.com.mx @sgcampus

55. www.sgcampus.com.mx @sgcampus
Gulp

56. www.sgcampus.com.mx @sgcampus

57. www.sgcampus.com.mx @sgcampus
Más Detalles
Héctor Iván Patricio Moreno
@hectorip

58. www.sgcampus.com.mx @sgcampus
Más Detalles