SlideShare a Scribd company logo
1 of 39
Download to read offline
ES6
Everywhere
Adam Klein
The “future” is here
Classes & Inheritance
Promises
Modules
Arrow functions
Default parameters
and more…
ES 2015
Adam Klein
- Developing for >18 years
- Development, Consulting & Training

in Angular, React & Node
- International clients
CTO @ 500Tech
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaa
Browser Compatibility
Meaningless
Transpilers will always precede the slowest browser
http://kangax.github.io/compat-table/es6/
Babel JS transpiler
Compatibility
Speed
Debugging
Plugins
JSX
Output code
Babel JS
$ npm i -g babel
playgrounds:
codepen.io (choose babel preprocessor)
babeljs.io/repl
$ babel file.js // see transpiled
$ babel-node file.js // run
ES6
Classes
class Point {
constructor(x, y) {
this.x = x;
this.y = y;
}
move(x, y) {
this.x += x;
this.y += y;
}
}
Inheritance
class AxisPoint extends Point {
constructor(x) {
super(x, 0);
}
move(x) {
super.move(x, 0);
}
}
transpiled code
modules
// tree.ctrl.js
import BaseCtrl from ‘base';
class TreeCtrl extends BaseCtrl {
}
// base.ctrl.js
export default class BaseCtrl {
}
Arrow functions
and lexical ‘this’
var self = this;
http.get(‘/people').then(function(people)
{
self.people = people;
});
constructor() {
http.get('/people').then((people) => {
this.people = people;
});
}
people.map(function(p) {
return p.name;
});
people.map(p => p.name);
Sugar!
Default parameters
http(url, method='GET', headers={})
http(url, method, headers) {
method = method || 'GET';
headers = headers || {};
}
More cool features
I bet you didn’t know
Rest & Spread
// rest
function format(str, ...args) {
args.forEach(...);
}
// spread
let arr1 = [1,2,3];
Math.max(...arr1);
// spread in array literal
let arr2 = [4,5,6];
let arr3 = [...arr1, ...arr2];
“Named” parameters
function connect(
{host = ‘localhost',
port = 9000,
username,
password} = {})
connect({port: 9002, username: ‘adam'});
connect();
ES7
function connect(
{host = ‘localhost',
port = 9000,
username,
password,
...opts} = {}) {
}
string templates
(String Interpolation)
let name = 'Adam Klein'
template = `<div>
<h1>Hello ${name}</h1>
<a>Have a good day!</a>
</div>
`
ES6 in Angular
Using in Angular
class Auth {
constructor($http) {
this.$http = $http;
}
get(x) {
return this.$http.get('...');
}
}
export Auth;
Registering with Angular
import { Auth } from './auth';
import angular from 'angular';
angular.module('Demo.services', [])
.service('Auth', Auth);
Magic assignment
class HomeController {
constructor($scope, $q, $timeout, Auth, Modal)
{
this.$scope = $scope;
this.$q = $q;
this.$timeout = $timeout;
this.Auth = Auth;
this.Modal = Modal;
}
}
Object.assign(this,{$scope, $q, $timeout, Auth, Modal});
Destructuring
{$scope, $q, $timeout, Auth, Modal} ==
{
$scope: $scope,
$q: $q,
$timeout, $timeout,
Auth: Auth,
Modal: Modal
}
Webpack
simple config file
super fast dev server (in-memory transpilation)
import whatever (js, css, html, json)
possibility to pack chunks for lazy loading
‘Kick’ - Angular best practices
Great way to see angular + webpack + ES6 in action
$ npm i -g kick (requires node >= 4.0)
$ kick n app
$ kick g service Auth
$ kick g state users
$ kick start
$ kick tdd
$ kick bundle
* disclaimer - WIP
www.angular-kick.com
Debugging
source maps
debug in inspector normally
Tests using ES6
webpack + karma
configured in kick
share mocks between dev & unit-tests & integration tests
Config files using ES6 (node 4.2.1)
webpack config file
gulpfile
karma config file
etc.
Angular 2
https://github.com/500tech/angular2-webpack-es6
React
https://github.com/500tech/react-webpack-es6
Component = class
import React, { Component } from 'react';
import { Row, Col } from 'react-bootstrap';
export class Root extends Component {
render() {
return (
<Row>
<Col md={ 8 }>
Office Radio
{ this.props.children }
</Col>
</Row>
);
}
}
Node
Node 4.2.1
https://nodejs.org/en/docs/es6/

Classes

Promises
Arrow functions
let & const
Template strings
more…
Babel-node
use for development
$ babel-node server.js
$ babel-node-debug server.js
production
$ babel src —out-dir dist
Express hello world ES6
https://github.com/500tech/nodejs-express-es6
Check the slides:
Follow us:
http://blog.500tech.com
Keep in touch:
@500techil
Questions?
http://www.slideshare.net/500tech/es6-everywhere
adam@500tech.com
THANK YOU

More Related Content

What's hot

Introduction to asynchronous DB access using Node.js and MongoDB
Introduction to asynchronous DB access using Node.js and MongoDBIntroduction to asynchronous DB access using Node.js and MongoDB
Introduction to asynchronous DB access using Node.js and MongoDB
Adrien Joly
 
IRC HTTP Stream in YAPC::Asia 2009
IRC HTTP Stream in YAPC::Asia 2009IRC HTTP Stream in YAPC::Asia 2009
IRC HTTP Stream in YAPC::Asia 2009
Yusuke Wada
 
I18n
I18nI18n
I18n
soon
 
Rackspace Hack Night - Vagrant & Packer
Rackspace Hack Night - Vagrant & PackerRackspace Hack Night - Vagrant & Packer
Rackspace Hack Night - Vagrant & Packer
Marc Cluet
 

What's hot (20)

Don't Fear the Walking Dead @ PHPUGHH
Don't Fear the Walking Dead @ PHPUGHHDon't Fear the Walking Dead @ PHPUGHH
Don't Fear the Walking Dead @ PHPUGHH
 
ECMAScript 6 and the Node Driver
ECMAScript 6 and the Node DriverECMAScript 6 and the Node Driver
ECMAScript 6 and the Node Driver
 
Introduction to asynchronous DB access using Node.js and MongoDB
Introduction to asynchronous DB access using Node.js and MongoDBIntroduction to asynchronous DB access using Node.js and MongoDB
Introduction to asynchronous DB access using Node.js and MongoDB
 
I'm Not a Software Developer - What Can I do on AWS
I'm Not a Software Developer - What Can I do on AWSI'm Not a Software Developer - What Can I do on AWS
I'm Not a Software Developer - What Can I do on AWS
 
Into the ZF2 Service Manager
Into the ZF2 Service ManagerInto the ZF2 Service Manager
Into the ZF2 Service Manager
 
clara-rules
clara-rulesclara-rules
clara-rules
 
IRC HTTP Stream in YAPC::Asia 2009
IRC HTTP Stream in YAPC::Asia 2009IRC HTTP Stream in YAPC::Asia 2009
IRC HTTP Stream in YAPC::Asia 2009
 
Optimizing AngularJS Application
Optimizing AngularJS ApplicationOptimizing AngularJS Application
Optimizing AngularJS Application
 
Svelte JS introduction
Svelte JS introductionSvelte JS introduction
Svelte JS introduction
 
Integrating React.js Into a PHP Application
Integrating React.js Into a PHP ApplicationIntegrating React.js Into a PHP Application
Integrating React.js Into a PHP Application
 
Python for AngularJS
Python for AngularJSPython for AngularJS
Python for AngularJS
 
I18n
I18nI18n
I18n
 
A reviravolta do desenvolvimento web
A reviravolta do desenvolvimento webA reviravolta do desenvolvimento web
A reviravolta do desenvolvimento web
 
Locarise,reagent and JavaScript Libraries
Locarise,reagent and JavaScript LibrariesLocarise,reagent and JavaScript Libraries
Locarise,reagent and JavaScript Libraries
 
Rackspace Hack Night - Vagrant & Packer
Rackspace Hack Night - Vagrant & PackerRackspace Hack Night - Vagrant & Packer
Rackspace Hack Night - Vagrant & Packer
 
Игорь Фесенко "Web Apps Performance & JavaScript Compilers"
Игорь Фесенко "Web Apps Performance & JavaScript Compilers"Игорь Фесенко "Web Apps Performance & JavaScript Compilers"
Игорь Фесенко "Web Apps Performance & JavaScript Compilers"
 
An Introduction to Windows PowerShell
An Introduction to Windows PowerShellAn Introduction to Windows PowerShell
An Introduction to Windows PowerShell
 
Testing Services Effectively
Testing Services Effectively Testing Services Effectively
Testing Services Effectively
 
PowerShell: Automation for everyone
PowerShell: Automation for everyonePowerShell: Automation for everyone
PowerShell: Automation for everyone
 
CocoaHeads Paris - CATransaction: What the flush?!
CocoaHeads Paris - CATransaction: What the flush?!CocoaHeads Paris - CATransaction: What the flush?!
CocoaHeads Paris - CATransaction: What the flush?!
 

Viewers also liked (8)

Apuntes 2do parcial
Apuntes 2do parcialApuntes 2do parcial
Apuntes 2do parcial
 
Comercializacion de cicadas
Comercializacion de cicadasComercializacion de cicadas
Comercializacion de cicadas
 
Trabajo del 4 de febrero
Trabajo del 4 de febrero Trabajo del 4 de febrero
Trabajo del 4 de febrero
 
Microbiologia Campylobacter, Helicobacter
Microbiologia Campylobacter, Helicobacter Microbiologia Campylobacter, Helicobacter
Microbiologia Campylobacter, Helicobacter
 
Presentación pep 2011
Presentación pep 2011Presentación pep 2011
Presentación pep 2011
 
Boletim 2015
Boletim 2015Boletim 2015
Boletim 2015
 
Ciencia y tegnologia
Ciencia y tegnologiaCiencia y tegnologia
Ciencia y tegnologia
 
Iluminacion
IluminacionIluminacion
Iluminacion
 

Similar to Es6 everywhere

Practical AngularJS
Practical AngularJSPractical AngularJS
Practical AngularJS
Wei Ru
 

Similar to Es6 everywhere (20)

Full Stack Scala
Full Stack ScalaFull Stack Scala
Full Stack Scala
 
Integration made easy with Apache Camel
Integration made easy with Apache CamelIntegration made easy with Apache Camel
Integration made easy with Apache Camel
 
A Gentle Introduction to Angular Schematics - Angular SF 2019
A Gentle Introduction to Angular Schematics - Angular SF 2019A Gentle Introduction to Angular Schematics - Angular SF 2019
A Gentle Introduction to Angular Schematics - Angular SF 2019
 
Intro to Asynchronous Javascript
Intro to Asynchronous JavascriptIntro to Asynchronous Javascript
Intro to Asynchronous Javascript
 
Use Angular Schematics to Simplify Your Life - Develop Denver 2019
Use Angular Schematics to Simplify Your Life - Develop Denver 2019Use Angular Schematics to Simplify Your Life - Develop Denver 2019
Use Angular Schematics to Simplify Your Life - Develop Denver 2019
 
A Gentle Introduction to Angular Schematics - Devoxx Belgium 2019
A Gentle Introduction to Angular Schematics - Devoxx Belgium 2019A Gentle Introduction to Angular Schematics - Devoxx Belgium 2019
A Gentle Introduction to Angular Schematics - Devoxx Belgium 2019
 
How Bitbucket Pipelines Loads Connect UI Assets Super-fast
How Bitbucket Pipelines Loads Connect UI Assets Super-fastHow Bitbucket Pipelines Loads Connect UI Assets Super-fast
How Bitbucket Pipelines Loads Connect UI Assets Super-fast
 
Serverless in-action
Serverless in-actionServerless in-action
Serverless in-action
 
Amazon EC2 Container Service Live Demo - Microservices Web Day
Amazon EC2 Container Service Live Demo - Microservices Web DayAmazon EC2 Container Service Live Demo - Microservices Web Day
Amazon EC2 Container Service Live Demo - Microservices Web Day
 
Scala at Netflix
Scala at NetflixScala at Netflix
Scala at Netflix
 
iOS build that scales
iOS build that scalesiOS build that scales
iOS build that scales
 
(2018) Webpack Encore - Asset Management for the rest of us
(2018) Webpack Encore - Asset Management for the rest of us(2018) Webpack Encore - Asset Management for the rest of us
(2018) Webpack Encore - Asset Management for the rest of us
 
Kraken at DevCon TLV
Kraken at DevCon TLVKraken at DevCon TLV
Kraken at DevCon TLV
 
Running Vue Storefront in production (PWA Magento webshop)
Running Vue Storefront in production (PWA Magento webshop)Running Vue Storefront in production (PWA Magento webshop)
Running Vue Storefront in production (PWA Magento webshop)
 
Practical AngularJS
Practical AngularJSPractical AngularJS
Practical AngularJS
 
Cross Site Scripting (XSS) Defense with Java
Cross Site Scripting (XSS) Defense with JavaCross Site Scripting (XSS) Defense with Java
Cross Site Scripting (XSS) Defense with Java
 
Burn down the silos! Helping dev and ops gel on high availability websites
Burn down the silos! Helping dev and ops gel on high availability websitesBurn down the silos! Helping dev and ops gel on high availability websites
Burn down the silos! Helping dev and ops gel on high availability websites
 
Node.js vs Play Framework (with Japanese subtitles)
Node.js vs Play Framework (with Japanese subtitles)Node.js vs Play Framework (with Japanese subtitles)
Node.js vs Play Framework (with Japanese subtitles)
 
Self Service Agile Infrastructure for Product Teams - Pop-up Loft Tel Aviv
Self Service Agile Infrastructure for Product Teams - Pop-up Loft Tel AvivSelf Service Agile Infrastructure for Product Teams - Pop-up Loft Tel Aviv
Self Service Agile Infrastructure for Product Teams - Pop-up Loft Tel Aviv
 
[Coscup 2012] JavascriptMVC
[Coscup 2012] JavascriptMVC[Coscup 2012] JavascriptMVC
[Coscup 2012] JavascriptMVC
 

More from Adam Klein

More from Adam Klein (10)

Angular Course - Flux & Redux
Angular Course - Flux & ReduxAngular Course - Flux & Redux
Angular Course - Flux & Redux
 
Redux "Bad" Practices - A List of 13 Bad Practices and How to Avoid Them
Redux "Bad" Practices - A List of 13 Bad Practices and How to Avoid ThemRedux "Bad" Practices - A List of 13 Bad Practices and How to Avoid Them
Redux "Bad" Practices - A List of 13 Bad Practices and How to Avoid Them
 
Tales of an open source library
Tales of an open source libraryTales of an open source library
Tales of an open source library
 
Clean up your code
Clean up your codeClean up your code
Clean up your code
 
Ruby for devops
Ruby for devopsRuby for devops
Ruby for devops
 
Lean startups for non-tech entrepreneurs
Lean startups for non-tech entrepreneursLean startups for non-tech entrepreneurs
Lean startups for non-tech entrepreneurs
 
Data models in Angular 1 & 2
Data models in Angular 1 & 2Data models in Angular 1 & 2
Data models in Angular 1 & 2
 
Client side unit tests - using jasmine & karma
Client side unit tests - using jasmine & karmaClient side unit tests - using jasmine & karma
Client side unit tests - using jasmine & karma
 
Mobile Apps using AngularJS
Mobile Apps using AngularJSMobile Apps using AngularJS
Mobile Apps using AngularJS
 
3rd party
3rd party3rd party
3rd party
 

Recently uploaded

Microsoft BitLocker Bypass Attack Method.pdf
Microsoft BitLocker Bypass Attack Method.pdfMicrosoft BitLocker Bypass Attack Method.pdf
Microsoft BitLocker Bypass Attack Method.pdf
Overkill Security
 

Recently uploaded (20)

The Ultimate Prompt Engineering Guide for Generative AI: Get the Most Out of ...
The Ultimate Prompt Engineering Guide for Generative AI: Get the Most Out of ...The Ultimate Prompt Engineering Guide for Generative AI: Get the Most Out of ...
The Ultimate Prompt Engineering Guide for Generative AI: Get the Most Out of ...
 
(Explainable) Data-Centric AI: what are you explaininhg, and to whom?
(Explainable) Data-Centric AI: what are you explaininhg, and to whom?(Explainable) Data-Centric AI: what are you explaininhg, and to whom?
(Explainable) Data-Centric AI: what are you explaininhg, and to whom?
 
Microsoft BitLocker Bypass Attack Method.pdf
Microsoft BitLocker Bypass Attack Method.pdfMicrosoft BitLocker Bypass Attack Method.pdf
Microsoft BitLocker Bypass Attack Method.pdf
 
Six Myths about Ontologies: The Basics of Formal Ontology
Six Myths about Ontologies: The Basics of Formal OntologySix Myths about Ontologies: The Basics of Formal Ontology
Six Myths about Ontologies: The Basics of Formal Ontology
 
Continuing Bonds Through AI: A Hermeneutic Reflection on Thanabots
Continuing Bonds Through AI: A Hermeneutic Reflection on ThanabotsContinuing Bonds Through AI: A Hermeneutic Reflection on Thanabots
Continuing Bonds Through AI: A Hermeneutic Reflection on Thanabots
 
Introduction to use of FHIR Documents in ABDM
Introduction to use of FHIR Documents in ABDMIntroduction to use of FHIR Documents in ABDM
Introduction to use of FHIR Documents in ABDM
 
UiPath manufacturing technology benefits and AI overview
UiPath manufacturing technology benefits and AI overviewUiPath manufacturing technology benefits and AI overview
UiPath manufacturing technology benefits and AI overview
 
Event-Driven Architecture Masterclass: Challenges in Stream Processing
Event-Driven Architecture Masterclass: Challenges in Stream ProcessingEvent-Driven Architecture Masterclass: Challenges in Stream Processing
Event-Driven Architecture Masterclass: Challenges in Stream Processing
 
ADP Passwordless Journey Case Study.pptx
ADP Passwordless Journey Case Study.pptxADP Passwordless Journey Case Study.pptx
ADP Passwordless Journey Case Study.pptx
 
Microsoft CSP Briefing Pre-Engagement - Questionnaire
Microsoft CSP Briefing Pre-Engagement - QuestionnaireMicrosoft CSP Briefing Pre-Engagement - Questionnaire
Microsoft CSP Briefing Pre-Engagement - Questionnaire
 
How to Check GPS Location with a Live Tracker in Pakistan
How to Check GPS Location with a Live Tracker in PakistanHow to Check GPS Location with a Live Tracker in Pakistan
How to Check GPS Location with a Live Tracker in Pakistan
 
The Zero-ETL Approach: Enhancing Data Agility and Insight
The Zero-ETL Approach: Enhancing Data Agility and InsightThe Zero-ETL Approach: Enhancing Data Agility and Insight
The Zero-ETL Approach: Enhancing Data Agility and Insight
 
ERP Contender Series: Acumatica vs. Sage Intacct
ERP Contender Series: Acumatica vs. Sage IntacctERP Contender Series: Acumatica vs. Sage Intacct
ERP Contender Series: Acumatica vs. Sage Intacct
 
Human Expert Website Manual WCAG 2.0 2.1 2.2 Audit - Digital Accessibility Au...
Human Expert Website Manual WCAG 2.0 2.1 2.2 Audit - Digital Accessibility Au...Human Expert Website Manual WCAG 2.0 2.1 2.2 Audit - Digital Accessibility Au...
Human Expert Website Manual WCAG 2.0 2.1 2.2 Audit - Digital Accessibility Au...
 
JavaScript Usage Statistics 2024 - The Ultimate Guide
JavaScript Usage Statistics 2024 - The Ultimate GuideJavaScript Usage Statistics 2024 - The Ultimate Guide
JavaScript Usage Statistics 2024 - The Ultimate Guide
 
Working together SRE & Platform Engineering
Working together SRE & Platform EngineeringWorking together SRE & Platform Engineering
Working together SRE & Platform Engineering
 
Design Guidelines for Passkeys 2024.pptx
Design Guidelines for Passkeys 2024.pptxDesign Guidelines for Passkeys 2024.pptx
Design Guidelines for Passkeys 2024.pptx
 
AI in Action: Real World Use Cases by Anitaraj
AI in Action: Real World Use Cases by AnitarajAI in Action: Real World Use Cases by Anitaraj
AI in Action: Real World Use Cases by Anitaraj
 
Frisco Automating Purchase Orders with MuleSoft IDP- May 10th, 2024.pptx.pdf
Frisco Automating Purchase Orders with MuleSoft IDP- May 10th, 2024.pptx.pdfFrisco Automating Purchase Orders with MuleSoft IDP- May 10th, 2024.pptx.pdf
Frisco Automating Purchase Orders with MuleSoft IDP- May 10th, 2024.pptx.pdf
 
2024 May Patch Tuesday
2024 May Patch Tuesday2024 May Patch Tuesday
2024 May Patch Tuesday
 

Es6 everywhere