Este documento resume la historia de la web desde la Web 1.0 hasta la Web 4.0 actual, explica conceptos como los web components, Shadow DOM, virtual DOM e incremental DOM, y analiza diferentes tipos de frameworks para el desarrollo web como MPA y SPA, señalando sus ventajas e inconvenientes.

1. Shadows of the browser
Ana Encinar

2. 2
1. Historia
2. Web components
3. Shadow DOM
4. Virtual DOM
5. Incremental DOM
6. Frameworks
Shadows of the browser

3. HISTORIA DE LA WEB

4. 4
• Web 1.0
• Web 2.0
• Web 3.0
• Web 4.0
Historia

5. 5
• Web 1.0
• Años 60
• Texto plano/HTML
• Netscape  1994
• Internet Explorer  1995
Historia

6. 6
• Javascript (Mocha, LiveScript) 1995
• Mozilla  1997
• Mozilla Firefox  2005
Historia – web 1.0 - Netscape

7. 7
• Internet Explorer  1995
• JScript  1996
Historia – web 1.0 - Internet Explorer

8. 8
• ECMAScript  1997
• European Computer Manufacturers 'Association
Historia – web 1.0 - ECMAScript

9. 9
Historia – web 1.0 - ECMAScript

10. 10
• Web 2.0 (2004)
• Sitios web dinámicos
• Interacción del usuario, cambia concepto usabilidad
• Redes sociales
Historia

11. 11
Historia

12. 12
• Web 3.0
• Data Web ( RDF,SPARQL...)
• Web semántica
• Inteligencia artificial
• 3D
Historia

13. 13
• Web 4.0 (In progress)
• Mejora del procesamiento del lenguaje natural
• Speech to text
• Integración con dispositivos(smartwatch…)
Historia

14. 14
Historia

15. WEB COMPONENTS

16. 16
Web Components
• Están basados en estándares reutilizables
• Custom Elements
• Shadow DOM
• HTML Templates
• HTML imports
• <script type=“module”>
• Aíslan funcionalidad
• Son desarrollados y diseñados de forma atómica

17. 17
Web Components
• Ejemplo

18. 18
Web Components

19. 19
Web Components
• define (tagName, constructor , options)
• Obtener un elemento definido
• Promesas que esperan por que se defina un elemento

20. 20
Web Components

21. SHADOW DOM

22. 22
• DOM aislado
• CSS con ámbito
• Composición
• Simplicidad
• Productividad
Shadow DOM

23. 23
• DOM aislado
Shadow DOM

24. 24
• Composición
• Light DOM
• Shadow DOM
Shadow DOM

25. VIRTUAL DOM

26. 26
Concepto de virtual DOM
Virtual DOM

27. 27
Virtual DOM - performance

28. 28
Virtual DOM

29. 29
Virtual DOM - desventajas
• Problemas de memoria en móviles

30. INCREMENTAL DOM

31. 31
¿Por qué?
Incremental DOM

32. FRAMEWORKS

33. 33
Frameworks

34. 34
Frameworks

35. 35
MPA
• Mejor a nivel de SEO
• No hay limitaciones de contenido
• Problemas de seguridad
• Descarga de recursos/página
Frameworks
SPA
• Más rápido (recursos en cliente)
• Desarrollo simplificado
• Reutilización de código sencilla
• Almacenamiento en cache
• Descarga lenta
Tipos de frameworks

36. 36
Frameworks pros y contras
VENTAJAS DESVENTAJAS
POO Curvas de aprendizaje
MVC Desconocimiento del core del framework
Funcionalidades ya hechas Menor rendimiento
Seguridad (librerías) Cambios constantes (código,
versiones…)
Agilidad de desarrollos Código sin uso
Patrones Mal uso de los patrones