Charla en la que hablé sobre cómo hemos llegado al ecosistema actual de JavaScript, pasando por las distintas tecnologías web que hemos ido conociendo.

1. Ecosistema JavaScript
Daniel Pecos Martínez
@danielpecos
Betabeers Castellón
5 de Abril de 2017

2. Infancia

3. Historia de la WWW
● Marzo 1989: Tim Berners-Lee
propone la World Wide Web
● Octubre 1990: HTML, URI y
HTTP implementados. Server
HTTP y browser disponibles.
● 1991: Se abre a personas
externas al CERN
● 1994: Se crea el W3C, con
Tim como director
● 2009: Se crea la World Wide
Web Foundation

5. Web Dinámica
● 1995: Brendan Eich (Netscape) crea Javascript en 10 días
● Inicialmente llamado Mocha, renombrado a LiveScript en su
lanzamiento beta, conviertiéndose en JavaScript en la beta
3 de Netscape Navigator 2
● Netscape comienza a colaborar con Sun Microsystems para
integrar Java en Navigator y complementarlo con JavaScript
● Microsoft incluye VBScript en Explorer en 1996
● JScript, una versión por ingeniería inversa de JavaScript,
fue incluida en Internet Explorer 3. También hubo una
versión server-side

6. Primeros Navegadores
● 1992 - 1996: Mosaic
● 1994 - 2007: Netscape
Navigator
● 1995: Opera
● 1995 - 2016: Internet
Explorer
● 2002: Safari
● 2008: Chrome
● 2015: Edge

7. Evolución de los Navegadores
http://www.evolutionoftheweb.com/

9. Browser Wars
● Explosión en tecnologías web:
– IE3 introdujo soporte para CSS y
extensiones HTML, pero muy
diferentes a las ofrecidas en Netscape
– IE4 creó el concepto de Dynamic
HTML, pero las diferencias de
implementación del DOM (Document
Object Models) permanecían
– Netscape introduce <blink> y
<marquee>
● Múltiples navegadores competían
por el mercado
● IE dominó el mercado gracias a su
inclusión por defecto en Windows

10. Browser Wars

11. Browser Wars

12. Browser Wars

13. AJAX
● Intercambio asíncrono de XML
● Historia
– 1996 Explorer introduce el iframe
– 1998 OWA implementa el primer XMLHTTP
– 1999 IE 5 introduce el primer ActiveX XMLHTTP
● Adoptado por como XMLHttpRequest (XHR) por el resto de browsers
– 2006 W3c publica el primer borrador para XHR, adoptándolo
definitivamente en 2014
● Lógica multi-navegador compleja de conseguir
● Jquery
– https://github.com/jquery/jquery/blob/master/src/ajax.js ~ 900 líneas de
código

14. Adolescencia

15. Estandarización
● ECMAScript es la especificación del lenguaje
de scripting para la web. Creado en 1997
● Existen distintas implementaciones:
– JavaScript
– JScript
– ActionScript
● Es habitual que incluyan características no
definidas en el estándar

16. ECMAScript
Ver. Año Cambios más destacables
1 1997
2 1998
3 1999 Expresiones regulares, más estructuras de control, mejoras en errores
4 -
5 2009 strict mode, JSON e introspección
5.1 2011 Adecuación a estándar ISO
6 2015 clases, módulos, generadores, arrow functions, promesas
7 2016 Operador exponenciación
8 ? async/await

17. RIAs
● Flash
● Java Applets / JavaFX
● Google Web Toolkit
● MS Silverlight
● JavaScript
– YUI
– ExtJS – Sencha Touch

18. Flash
● Creado por Macromedia en
1996 y posteriormente
adquirido por Adobe
● Estándar de facto para
multimedia, juegos y
aplicaciones ricas
● Dispone de un diseñador
gráfico y permite implementar
lógica en ActionScript
● Proporciona acceso a
dispositivos hardware (GPS,
Micrófonos, Cámara, ...)

19. Apps Móviles
● Permiten crear
aplicaciones móviles
usando únicamente
HTML5 y JavaScript
● Desarrollos
multiplataforma
● Acceso mediante JS
a hardware nativo

20. Juventud

21. Single Page Applications
● Backbone (2010)
● Angular (2010)
● Ember (2011)
● Primeros frameworks
que explotan las
características de
HTML5
● Patrón MVC / MVP /
MVVM en frontend
● Acceso REST a
backend

22. JavaScript engine race
● SpiderMonkey
● Rhino
● V8
● Trident / Chakra
● Nashorn
● Nitro / JavaScriptCore

23. Node.js
● Creado por Ryan Dahl en
2009
● Server-side JS runtime,
construido sobre V8 de
Google
● Diseño asíncrono
(eventos), permitiendo un
fácil escalado
● API estándar
● NPM

24. Node.js
● Crecimiento
medio de 530
paquetes / día

25. Explosión de lenguajes *Script
● Se crean multitud de transpilers:
– CoffeeScript
– Dart
– Scala.js
– Elm
– TypeScript
● El lenguaje sigue sin ser del gusto de todos
● Libros como “Javascript, the Good Parts” gozan de
gran éxito

26. Explosión en tooling y librerías
● Grunt / Gulp
● Babel
● Webpack
● Yarn
● PM2
● Forever
● Bower
● Browserify
● Underscore / lodash
● Express
● Moment
● Socket.io
● Mocha / Sinon / Chai / Jasmine
/ Jest
● Cheerio
● Passport
● Mongoose
● q

27. Madurez

28. ES 6 / 7 / 8 / Next
● Revolución en lenguaje
– Módulos
– Introducción de clases
– Promesas / async – await
– Mejores estructuras de control
● Todos los navegadores evergreen implementan características
futuras del lenguaje
● Polyfill implementa mejoras (no sintácticas) sobre versiones
anteriores del lenguaje
● Babel permite usar características (de cualquier tipo) todavía no
disponibles en navegadores

29. Consolidación de SPAs
● Se afianza la tendencia y éxito de las webs SPA
como forma habitual de interacción con el usuario
● Los frameworks generan grandes cantidades de
código → requieren de nuevas técnicas de
optimización
– AOT
– Lazy Loading
– Tree Shaking
– Universal JS

31. React / Angular 2
● Basados en Shadow DOM / WebComponents
● React
– Librería para construcción de UIs
– Complementado por herramientas Flux
– Introducción de DOM virtual
● Angular 2
– Framework de aplicaciones
– 2 way data binding
● TypeScript vs JSX – (Microsoft + Google) vs Facebook
● VSCode es el IDE más usado para Angular 2

32. Apps Nativas JS
● Problema: las aplicaciones híbridas no ofrecen el
rendimiento ni la experiencia de usuario de las apps
nativas
● El desarrollo nativo es mucho más lento y costoso que el
desarrollo web
● → Nuevos frameworks para interfaces de usuario
nativas, con la experiencia del desarrollo en web:
– React Native - Facebook
– Native Script – Angular 2
● Aplicaciones nativas de escritorio: Electron

33. HTTP2
● Creado a partir de SPDY de Google
● Compatible (conceptualmente) con HTTP 1.1
● Proporciona
– Compresión en cabeceras HTTP
– Server Push
– Pipelining
– Multiplexación de la conexión TCP

34. GraphQL
●
Es un lenguaje de query para
APIs
● Desarrollado en 2015 por
Facebook
●
Los clientes piden exactamente
qué datos necesitan
– Permite una evolución simple de
las APIs
●
Fuerte interés por parte de la
comunidad
– Facebook, Github, Pinterest,
Coursera,...

35. WebAssembly
● Es un formato bytecode
portable para compilación
web
– Más compacto que JavaScript
– Más rápido de parsear
– Será usado como target en
multitud de compiladores
● Tiene sus orígenes en
asm.js
– Subconjunto de JS altamente
optimizable

36. ¿Y sobre la interfaz?
● Frameworks
– Bootstrap
– Foundation
● Herramientas
– LESS
– SASS
– PostCSS
● Evolución
– CSS Flex Box
– CSS Grid
– Y muchos más...

37. Tooling habitual para el desarrollo 2017
● Frontend
– Bootstrap
– Foundation
– LESS / SASS /
PostCSS
– React / Angular CLI
– Webpack
– Babel
– Grunt / Gulp
● Backend
– Forever / PM2
– Mocha / Chai / Sinon
– Jasmine
– Jest
– Phantom.js
– Express / Passport
– Restify
– GraphQL

38. Gracias!
Daniel Pecos Martínez
@danielpecos