20170405 - Ecosistema Javascript
0 recomendaciones•260 vistas
El documento detalla la evolución del ecosistema JavaScript desde sus inicios en 1995, incluyendo hitos importantes como la creación de ECMAScript y la introducción de tecnologías como AJAX y Node.js. También aborda el desarrollo de frameworks y herramientas que han revolucionado tanto el frontend como el backend, además de mencionar la competencia entre navegadores y el auge de aplicaciones de una sola página (SPA). Finalmente, analiza nuevas tecnologías y paradigmas, como GraphQL y WebAssembly, consolidando la relevancia continua de JavaScript en el desarrollo web moderno.
20170405 - Ecosistema Javascript
- 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