ECMASCRIPT - The future of the language

A little introduction on the current javascript language state, the tooling and some ember related samples on the new added features.

Transcript

1. ES6 El futuro del de lenguaje Una re-introducción práctica
2. Soy Jonathan Samines Desarrollador web e Ingeniero de Software, me encanta aprender sobre los internals de las tecnologías que utilizo, leer un buen libro o ver alguna serie interesante en Netflix. ¿Quién soy yo? @jonathansamines
3. • ECMASCRIPT, la especificación del lenguaje. • ES Harmony, ES6 o ES2015? • Un solo JavaScript. • Lanzamientos continuos y pequeños cada año. • Propuestas mediante etapas (stages). • Objetivos de la Nueva Versión: • Crear un mejor lenguaje. • Lograr una mejor interoperación con el resto del ecosistema. • No romper nada! (No breaking changes) La especificación
4. • Mejoras al lenguaje. Lo que ya hacías, pero mejor! • Código más conciso. Esencial para aplicaciones grandes. • Mejor legibilidad. • Una mejor librería estándar. Extensiones a nativos existentes. • Proporcionar utilidades esenciales. • Corregir comportamientos ambiguos. • Características completamente nuevas. • Introducción de nuevos paradigmas. (promesas, generadores) • Mejores formas de hacer ciertas tareas (observers). ¿Qué hay de nuevo?
5. • Ya lo estás utilizando! • Hay una característica que todavía no está en mi navegador favorito/objetivo/que mi cliente necesita! • R: Babel • Hay un nuevo método para un tipo nativo que quiero usar! • R: Babel (core-js, cualquier otro polyfill) • Quiero usar generadores y proxies justo ahora! * • R: Babel • ¿Puedo depurar mi código usando algo como esto? • R: Si, mediante sourcemaps. ¿Puedo utilizar ES6 hoy? * NO PUEDES TRANSPILAR PROXIES.
6. • ¿Qué es babel? Un transpilador, un ecosistema de extensiones al lenguaje. (Piensa en flow, react, eslint babel- parser) • ¿Qué es un transpilador? Es un compilador, que compila de código fuente a código fuente. • ¿Cómo puedo utilizar babel? Mediante un CLI, un REPL o a través una librería. Babel
7. ¿Cómo esta compuesto babel? babel-preset-es2015 es2015-arrow-functions es2015-classes es2015-for-of babel-preset-react syntax-flow syntax-jsx … babel runtime babel-register HOOK babel-node THE REPL/CLI babel-core THE LIBRARY babel polyfill (core-js) regenerator BABEL APPLICATION 4 3 2 1
8. ¿Puedo utilizar babel en mi proyecto de emberjs? • Ya lo estás utilizando! • Babel es configurado en cada proyecto de ember-cli por defecto, mediante el addon ember-cli-babel. • Preconfigurado con babel@5 • No carga un polyfill por defecto (no se agregan las extensiones a tipos nativos). • Configurado con un resolver personalizado para el sistema de módulos.
9. ES6 en el mundo real • Mejoras al Lenguaje • Destructuring assignment • Rest parameters • Arrow functions • String templates • Default parameters • Method definitions • Shorthand properties
10. Destructuring assignment
11. Spread Operator - Rest Parameters - Default parameters OLD WAY
12. Spread Operator - Rest Parameters - Default parameters NEW WAY
13. Shorthand properties - Method definitions OLD WAY
14. Shorthand properties - Method definitions NEW WAY
15. Arrow Functions - Computed literal properties - String Templates OLD WAY
16. Arrow Functions - Computed literal properties - String Templates NEW WAY
17. Promesas • Representa un valor futuro, esperado o “prometido”. • Se utiliza para modelar operaciones asíncronas. • Alternativa a los callbacks. • Es un valor. • Puede tener el estado “resolved” o “rejected”. • No son dependientes de una implementación. (Promise A+) • Puedes escoger la implementación que desees. • Múltiples implementaciones interoperan bien entre si. • Bluebird, RSVP, then, when.
18. Promesas CREANDO UNA PROMESA app/utils/timeout-promise.js
19. Promesas UTILIZANDO UNA PROMESA app/services/countries-service.js
20. Una mejor librería estándar • Librería estándar mejorada • Array extensions • String extensions • Soporte completo para unicode • Promises • Map/Set • El séptimo tipo • Symbol
21. Características completamente nuevas • Características Increíbles • for…of e iteradores • Generators • Sistema de modulos! • Let, const (block scope!) • const (enlaces inmutables) • Proxies (adiós a Object.observe)
22. ¿Hay aún más? • ES6 tiene muchos features adicionales a los vistos acá. • Solo evaluamos superficialmente algunos features. • ES2016, se nos viene! • Async-await (promesas, generadores) • Array comprehensions • Decoradores (Wow!, data attributes, anotaciones) • Los puedes usar ahora, mediante babel! • https://gist.github.com/jonathansamines/214ac02a5f5da0cc2110
23. Gracias!