Hello World 2017 - ESlatest

Título: JavaScript - Started from the bottom now we’re here!
Autor: José Moreira
Contacto: fb.me/cusshht

Transcript

1. JavaScript “Started from the bottom now we’re here!” ES5 => ES.next
3. Little bit of history
4. Little bit of history • JavaScript is the original name when the language was developed by Netscape. • JScript is Microsoft's name of their own implementation. • ECMAScript is the name of the language standard developed by ECMA International, from the original JavaScript implementation. Basically, JavaScript is a language based on the ECMAScript standard. But there is a lot of confusion between JavaScript and Java!
5. JavaScript is to Java as: • Catfish is to cat • Dubstep is to dub • Hamster is to ham • Cocktail is to … tail Check more at http://JavaScriptIsNotJava.io/
6. JavaScript and Java differences • Java is an OOP programming language, JavaScript is an OOP scripting language. • It is an Object prototyped-based instead of a Object class-based, unlike Java. • Runs on a JIT Compiler, such as Java.
7. ECMAScript release versions - date • 1st version - June 1997 • 2nd version - June 1998 • 3st version - December 1999 • 4th version - Abandoned • 5th version - December 2009 • 5.1th version - June 2011 • 6th a.k.a. ES2015 - June 2015 • 7th a.k.a. ES2016 - June 2016 • 8th a.k.a. ES2017 - draft • ES.Next - stages non included on draft
8. JavaScript evolved and evolves from syntax hacking
9. Transpiler example
10. Module bundler example
11. Transpilers • CoffeeScript - Write less, do more (that’s jQuery’s slogan but also describes CS) • TypeScript - Javascript that scales • Babeljs - The compiler for writing next generation JavaScript (former 6to5) Transformers/bundlers • Browserify - module bundler • Rollup - the next generation bundler • Webpack - module bundler
12. What’s new between ES5 and ES.next?
14. ES2015 Classes from Prototyping
15. ES5: Class “kind” inheritance function User () {} User.prototype.getName = function () { return this.name } User.prototype.setName = function (name) { this.name = name + ‘yolo’ } function Customer () { User.apply( this, arguments ) console.log( ‘hey’ ) } Customer.prototype = Object.create(User.prototype) Customer.prototype.getVat = function () { return this.vat } Customer.prototype.setVat = function (vat) { this.vat = vat } var user = new User() user instanceof User // true user instanceof Customer // false var customer = new Customer() customer instanceof User // true customer instanceof Customer // true
16. ES2015: Class inheritance class User { get name () => this._name set name (name) => this._name = name + ‘yolo’ } class Customer extends User { constructor () { super() console.log(‘hey’) } get vat () => this._vat set vat (vat) => this._vat = vat } var user = new User() user instanceof User // true user instanceof Customer // false var customer = new Customer() customer instanceof User // true customer instanceof Customer // true
17. ES2017 From callbacks to async/await
18. JS is a Blocking-IO language for ( var i = 0; i < 5; i++ ) { console.log( Date.now() ) } // end-less loops while (true) {} for () > 1493675295495 > 1493675295495 > 1493675295495 > 1493675295495 > 1493675295495 Notes: • Browser also blocks IO if you do sync requests. • Javascript Async handler (ticking system) is also blocking...
19. But it is designed to be non-blocking ES5: Callbacks // functions can be created on the run function generateFunction ( returns ) { return function () { return returns } } // generateFunction(‘hello’) // returns [Function] // which allows you to generate callbacks with scopes function doSomethingAfter ( delay, cb ) { setTimeout( cb, delay ) } var yolo = function () { console.log( Date.now() ) } yolo() doSomethingAfter( 5000, yolo )
20. Problem: Callback hell / Spaghetti code
21. Promises (was later included on ES6/ES2015)
22. Problem: Promises over Promises hell function () { return doSomething .then(function () { return doAnathingMore() }) .then(function () { return doSomethingMoreComplex() .spread(function ( value ) { return increase(value) .then(function (increased) { return increased.save() }) }) }) .then(function () { // You got it already }) }
23. Es7: async / await Uses promises, but with simpler flow syntax! function generateFunction ( file ) { return getFile( file ) .then(function (buffer) { return postToServer(buffer) }) .then(function () { return warnInterface() }) .catch(function ( error ) { if ( error.message = ‘Not Found’ ) throw error }) } async function generateFunction ( file ) { try { const buffer = await getFile( file ) await postToServer(buffer) await warnInterface() } catch ( error ) { if ( error.message = ‘Not Found’ ) throw error } }
24. Destructuring Assignment
25. Es5: “full-path” references var first_name = userdata.name.first_name var last_name = userdata.name.last_name var profile_picture = userdata.profile.src var cover_picture = userdata.cover.src var hashed_password = userdata.password.hash var otherdata = Object.assign(userdata) delete otherdata.name delete otherdata.profile delete otherdata.cover delete otherdata.password const { name: { first_name, last_name }, profile: { src as profile_picture }, cover: { src as cover_picture }, password: { hash as hashed_password }, ...otherdata } = userdata ES6/ES2015: Object destructuring
26. ES6/ES2015: Import destructuring var Sequelize = require('sequelize') var BOOLEAN = Sequelize.BOOLEAN var DATE = Sequelize.DATE var NOW = Sequelize.NOW var INTEGER = Sequelize.INTEGER var STRING = Sequelize.STRING var NULL = Sequelize.NULL import Sequelize, { BOOLEAN, DATE, NOW, INTEGER, STRING, NULL } from 'sequelize' ES5: require destructuring
27. ES6/ES2015: Array destructuring var userdata = [ 'José', 'Moreira', 'Male', '26' ] var first_name = userdata[0] var last_name = userdata[1] var gender = userdata[2] var age = userdata[3] var userdata = [ 'José', 'Moreira', 'Male', '26' ] const [ first_name, last_name, gender, age ] = user_data ES5: Array destructuring
28. ES7/ES2016: Restructuring var userdata = [ 'José', 'Moreira', 'Male', '26' ] var first_name = userdata[0] var last_name = userdata[1] var gender = userdata[2] var age = userdata[3] var user = { name: first_name + ' ' + last_name, gender: gender, age: age } var userdata = [ 'José', 'Moreira', 'Male', '26' ] const [ first_name, last_name, gender, age ] = user_data const user = { name: first_name + ' ' + last_name, gender, age } ES5: Restructuring
29. There’s MUCH more! JSX / React, Generators, Object spread, arrow functions, etc...
30. But wait, do all browsers support it already?
31. Not all of them! But you can use Babel!
32. QA time! PS: I’m giving away stickers for questions. *smile emoji here*