SlideShare a Scribd company logo
ECMAScript 2015
@jsoverson
var that = this;
function Klass() {



}

function Klass() {



}





Klass.prototype.myMethod = function(){}
function Klass() {



}



Klass.prototype = Parent.prototype;



Klass.prototype.myMethod = function(){}
Klass.prototype.myMethod() {
console.log('In my Method!');
}
if (typeof exports === 'object' &&

typeof define !== 'function') {

var define = function (factory) {

factory(require, exports, module);

};

}



define(function (require, exports, module) {

var b = require('b');



exports.action = function () {};

});
ES2015 to the rescue!
Me
1. What is ES2015?
2. How can I use it?
3. What’s next?
ES2015
used to be known as
ES6
You can play around here
http://bit.ly/es6console
function (x) { return x * 2 }
x => x * 2
Becomes
[1,2,3].map(x => x * 2)

.reduce((p,n) => p + n)
➤
{
update : function(data) {/*…*/},
retrieve : function() {
fetch('http://example.com')

.then(res => this.update(res))
}
}
function JavaScrap(name) {

Person.call(this, name);

this.shout('i <3 js');

}



JavaScrap.prototype =

Object.create(Person.prototype);



JavaScrap.prototype.shout = function(msg) {

this.say(msg.toUpperCase());

};
Becomes…
class JavaScrap extends Person {

constructor(name) {

super(name);

this.shout('i <3 js');

}
shout(msg) {

this.say(msg.toUpperCase());

}

} ➤
"My name is " + name + ".n" +
"I will be " + (age + 1) + " next year."
`My name is ${name}.
I will be ${age + 1} next year.`
Becomes
➤
RESOURCE SLIDE!
Exploring ES6 by @rauschma : http://exploringjs.com/ (online)
Six steps for approaching ES6, telerik : Six Steps for approaching ES6
ES6 in depth : https://hacks.mozilla.org/category/es6-in-depth/
ES6 Features : https://github.com/lukehoban/es6features
ES6 console : http://jsoverson.github.io/es6repl/
Babel repl : https://babeljs.io/repl/
ES6 features (dot org) : http://es6-features.org/
ES6 compatibility : https://kangax.github.io/compat-table/es6/
You Don’t Know JS : ES6 & Beyond by @getify
Learning ES2015 would be impossible in 20 minutes. This talk is about getting stuff done.
1. What is ES2015?
2. How can I use it?
3. What’s next?
Reality Check : ES 2015 vs ES 5
Source to Source compiling
a.k.a.
Transpiling
npm install eslint
wat? Where’s Babel ?
If you can’t lint, if you can’t test,
then you’re just toying around.
class Greeter {

constructor(greeting = 'Hello', target = 'World') {

this.greeting = greeting;

this.target = target;

}
getGreeting() {

return `${this.greeting} ${this.target}`;

}

}



export default Greeter;
$ ./node_modules/.bin/eslint src
src/index.js
4:1 error Unexpected reserved word
✖ 1 problem (1 error, 0 warnings)
./node_modules/.bin/eslint —-init
$ ./node_modules/.bin/eslint —-init
? What style of indentation do you use? Spaces
? What quotes do you use for strings? Single
? What line endings do you use? Unix
? Do you require semicolons? Yes
? Are you using ECMAScript 6 features? Yes
? Where will your code run? Node, Browser
? Do you use JSX? No
? What format do you want your config file to be in? JSON
Successfully created .eslintrc file in ./es6-linting
$ ./node_modules/.bin/eslint src
src/index.js
12:2 error Illegal export declaration
✖ 1 problem (1 error, 0 warnings)
.eslintrc :
"ecmaFeatures": {

"modules": true

}
See: Specifying Language options in eslint
$ ./node_modules/.bin/eslint src
$
No output means we’re good!
package.json :
"scripts": {

"lint": "eslint src/"

},

$ npm run lint
Enables you to run :
Note: no “./node_modules/.bin/” prefix
npm install mocha
import assert from 'assert';

import Greeter from '../src/';



describe('test index', () => {

let greeter;

before(() => {

greeter = new Greeter();

});


it('should instantiate with defaults', () => {

assert.equal(greeter.greeting, 'Hello');

assert.equal(greeter.target, 'World');

});


it('should provide a greeting', () => {

var greeting = greeter.getGreeting();

assert.equal(greeting, 'Hello World');

});

});
$ ./node_modules/.bin/mocha test/
test/index.spec.js:2
import assert from 'assert';
^^^^^^
SyntaxError: Unexpected reserved word
at Module._compile (module.js:439:25)
at Object.Module._extensions..js (module.js:474:10)
at Module.load (module.js:356:32)
at Function.Module._load (module.js:312:12)
npm install babel
$ ./node_modules/.bin/mocha --require babel/register
test index
✓ should instantiate with defaults
✓ should provide a greeting
2 passing (7ms)
Enables you to run :
package.json :
"scripts": {

"unit": "mocha --require babel/register”,
"test": "$npm_package_scripts_lint && $npm_package_scripts_unit"

},

$ npm run unit
$ npm run test
$ npm test “test” is a special, first-class script
Note: npm script values as variables
npm install istanbul
$ ./n_m/.b/istanbul cover ./n_m/.b/_mocha -- --require babel/register
test index
✓ should instantiate with defaults
✓ should provide a greeting
2 passing (5ms)
=============================================================================
Writing coverage object [./coverage/coverage.json]
Writing coverage reports at [./coverage]
=============================================================================
=============================== Coverage summary ============================
Statements : 100% ( 31/31 ), 2 ignored
Branches : 77.78% ( 14/18 ), 4 ignored
Functions : 100% ( 7/7 )
Lines : 100% ( 15/15 )
=============================================================================
Enables you to run :
package.json :
"scripts": {

"coverage": "istanbul cover _mocha -- --require babel/register"

},

$ npm run coverage
➤
Building your distributable
Enables you to run :
package.json :
"scripts": {

"build": "babel --out-dir dist src",

"watch": "$npm_package_scripts_build --watch"

},

$ npm run build
$ npm run watch
package.json :
"scripts": {

"build": "babel --out-dir dist src",

"watch": "$npm_package_scripts_build --watch",

"lint": "eslint src/",

"unit": "mocha --require babel/register",

"test": "$npm_package_scripts_lint && $npm_package_scripts_unit",

"coverage": "istanbul cover _mocha -- --require babel/register"

},

1. What is ES2015?
2. How can I use it?
3. What’s next?
ES2015 is here and marks a transition.
Thanks
-jsoverson

More Related Content

What's hot

«Objective-C Runtime в примерах» — Алексей Сторожев, e-Legion
«Objective-C Runtime в примерах» — Алексей Сторожев, e-Legion«Objective-C Runtime в примерах» — Алексей Сторожев, e-Legion
«Objective-C Runtime в примерах» — Алексей Сторожев, e-Legion
e-Legion
 
EMF Tips n Tricks
EMF Tips n TricksEMF Tips n Tricks
EMF Tips n Tricks
Kaniska Mandal
 
JavaScript Design Patterns
JavaScript Design PatternsJavaScript Design Patterns
JavaScript Design Patterns
Derek Brown
 
Min-Maxing Software Costs - Laracon EU 2015
Min-Maxing Software Costs - Laracon EU 2015Min-Maxing Software Costs - Laracon EU 2015
Min-Maxing Software Costs - Laracon EU 2015
Konstantin Kudryashov
 
Frontin like-a-backer
Frontin like-a-backerFrontin like-a-backer
Frontin like-a-backer
Frank de Jonge
 
Yii, frameworks and where PHP is heading to
Yii, frameworks and where PHP is heading toYii, frameworks and where PHP is heading to
Yii, frameworks and where PHP is heading to
Alexander Makarov
 
Practical JavaScript Programming - Session 1/8
Practical JavaScript Programming - Session 1/8Practical JavaScript Programming - Session 1/8
Practical JavaScript Programming - Session 1/8
Wilson Su
 
async/await Revisited
async/await Revisitedasync/await Revisited
async/await Revisited
Riza Fahmi
 
5 Tips for Better JavaScript
5 Tips for Better JavaScript5 Tips for Better JavaScript
5 Tips for Better JavaScript
Todd Anglin
 
Essentials and Impactful Features of ES6
Essentials and Impactful Features of ES6Essentials and Impactful Features of ES6
Essentials and Impactful Features of ES6
Riza Fahmi
 
AngularJS with TypeScript and Windows Azure Mobile Services
AngularJS with TypeScript and Windows Azure Mobile ServicesAngularJS with TypeScript and Windows Azure Mobile Services
AngularJS with TypeScript and Windows Azure Mobile Services
Rainer Stropek
 
Rails-like JavaScript Using CoffeeScript, Backbone.js and Jasmine
Rails-like JavaScript Using CoffeeScript, Backbone.js and JasmineRails-like JavaScript Using CoffeeScript, Backbone.js and Jasmine
Rails-like JavaScript Using CoffeeScript, Backbone.js and Jasmine
Raimonds Simanovskis
 
Rich Model And Layered Architecture in SF2 Application
Rich Model And Layered Architecture in SF2 ApplicationRich Model And Layered Architecture in SF2 Application
Rich Model And Layered Architecture in SF2 Application
Kirill Chebunin
 
meet.js - QooXDoo
meet.js - QooXDoomeet.js - QooXDoo
meet.js - QooXDoo
Radek Benkel
 
Class-based views with Django
Class-based views with DjangoClass-based views with Django
Class-based views with Django
Simon Willison
 
Rails on Oracle 2011
Rails on Oracle 2011Rails on Oracle 2011
Rails on Oracle 2011
Raimonds Simanovskis
 
Min-Maxing Software Costs
Min-Maxing Software CostsMin-Maxing Software Costs
Min-Maxing Software Costs
Konstantin Kudryashov
 
Bottom Up
Bottom UpBottom Up
Bottom Up
Brian Moschel
 
Headless Js Testing
Headless Js TestingHeadless Js Testing
Headless Js Testing
Brian Moschel
 
Types End-to-End @ samsara
Types End-to-End @ samsaraTypes End-to-End @ samsara
Types End-to-End @ samsara
Stephen Wan
 

What's hot (20)

«Objective-C Runtime в примерах» — Алексей Сторожев, e-Legion
«Objective-C Runtime в примерах» — Алексей Сторожев, e-Legion«Objective-C Runtime в примерах» — Алексей Сторожев, e-Legion
«Objective-C Runtime в примерах» — Алексей Сторожев, e-Legion
 
EMF Tips n Tricks
EMF Tips n TricksEMF Tips n Tricks
EMF Tips n Tricks
 
JavaScript Design Patterns
JavaScript Design PatternsJavaScript Design Patterns
JavaScript Design Patterns
 
Min-Maxing Software Costs - Laracon EU 2015
Min-Maxing Software Costs - Laracon EU 2015Min-Maxing Software Costs - Laracon EU 2015
Min-Maxing Software Costs - Laracon EU 2015
 
Frontin like-a-backer
Frontin like-a-backerFrontin like-a-backer
Frontin like-a-backer
 
Yii, frameworks and where PHP is heading to
Yii, frameworks and where PHP is heading toYii, frameworks and where PHP is heading to
Yii, frameworks and where PHP is heading to
 
Practical JavaScript Programming - Session 1/8
Practical JavaScript Programming - Session 1/8Practical JavaScript Programming - Session 1/8
Practical JavaScript Programming - Session 1/8
 
async/await Revisited
async/await Revisitedasync/await Revisited
async/await Revisited
 
5 Tips for Better JavaScript
5 Tips for Better JavaScript5 Tips for Better JavaScript
5 Tips for Better JavaScript
 
Essentials and Impactful Features of ES6
Essentials and Impactful Features of ES6Essentials and Impactful Features of ES6
Essentials and Impactful Features of ES6
 
AngularJS with TypeScript and Windows Azure Mobile Services
AngularJS with TypeScript and Windows Azure Mobile ServicesAngularJS with TypeScript and Windows Azure Mobile Services
AngularJS with TypeScript and Windows Azure Mobile Services
 
Rails-like JavaScript Using CoffeeScript, Backbone.js and Jasmine
Rails-like JavaScript Using CoffeeScript, Backbone.js and JasmineRails-like JavaScript Using CoffeeScript, Backbone.js and Jasmine
Rails-like JavaScript Using CoffeeScript, Backbone.js and Jasmine
 
Rich Model And Layered Architecture in SF2 Application
Rich Model And Layered Architecture in SF2 ApplicationRich Model And Layered Architecture in SF2 Application
Rich Model And Layered Architecture in SF2 Application
 
meet.js - QooXDoo
meet.js - QooXDoomeet.js - QooXDoo
meet.js - QooXDoo
 
Class-based views with Django
Class-based views with DjangoClass-based views with Django
Class-based views with Django
 
Rails on Oracle 2011
Rails on Oracle 2011Rails on Oracle 2011
Rails on Oracle 2011
 
Min-Maxing Software Costs
Min-Maxing Software CostsMin-Maxing Software Costs
Min-Maxing Software Costs
 
Bottom Up
Bottom UpBottom Up
Bottom Up
 
Headless Js Testing
Headless Js TestingHeadless Js Testing
Headless Js Testing
 
Types End-to-End @ samsara
Types End-to-End @ samsaraTypes End-to-End @ samsara
Types End-to-End @ samsara
 

Viewers also liked

NY Web Performance - DNS as a Web Performance Tool
NY Web Performance - DNS as a Web Performance ToolNY Web Performance - DNS as a Web Performance Tool
NY Web Performance - DNS as a Web Performance Tool
NS1
 
Design+Performance
Design+PerformanceDesign+Performance
Design+Performance
Steve Souders
 
Bend dynamics and perceptions with conflict resolution and emotional safety tips
Bend dynamics and perceptions with conflict resolution and emotional safety tipsBend dynamics and perceptions with conflict resolution and emotional safety tips
Bend dynamics and perceptions with conflict resolution and emotional safety tips
Jenn Turner
 
do u webview?
do u webview?do u webview?
do u webview?
Steve Souders
 
ReactJS for Beginners
ReactJS for BeginnersReactJS for Beginners
ReactJS for Beginners
Oswald Campesato
 
Functional Reactive Programming in Javascript
Functional Reactive Programming in JavascriptFunctional Reactive Programming in Javascript
Functional Reactive Programming in Javascript
Brian Lonsdorf
 
HTTPS: What, Why and How (SmashingConf Freiburg, Sep 2015)
HTTPS: What, Why and How (SmashingConf Freiburg, Sep 2015)HTTPS: What, Why and How (SmashingConf Freiburg, Sep 2015)
HTTPS: What, Why and How (SmashingConf Freiburg, Sep 2015)
Guy Podjarny
 
Intel XDK - Philly JS
Intel XDK - Philly JSIntel XDK - Philly JS
Intel XDK - Philly JS
Ian Maffett
 
React For Vikings
React For VikingsReact For Vikings
React For Vikings
FITC
 

Viewers also liked (9)

NY Web Performance - DNS as a Web Performance Tool
NY Web Performance - DNS as a Web Performance ToolNY Web Performance - DNS as a Web Performance Tool
NY Web Performance - DNS as a Web Performance Tool
 
Design+Performance
Design+PerformanceDesign+Performance
Design+Performance
 
Bend dynamics and perceptions with conflict resolution and emotional safety tips
Bend dynamics and perceptions with conflict resolution and emotional safety tipsBend dynamics and perceptions with conflict resolution and emotional safety tips
Bend dynamics and perceptions with conflict resolution and emotional safety tips
 
do u webview?
do u webview?do u webview?
do u webview?
 
ReactJS for Beginners
ReactJS for BeginnersReactJS for Beginners
ReactJS for Beginners
 
Functional Reactive Programming in Javascript
Functional Reactive Programming in JavascriptFunctional Reactive Programming in Javascript
Functional Reactive Programming in Javascript
 
HTTPS: What, Why and How (SmashingConf Freiburg, Sep 2015)
HTTPS: What, Why and How (SmashingConf Freiburg, Sep 2015)HTTPS: What, Why and How (SmashingConf Freiburg, Sep 2015)
HTTPS: What, Why and How (SmashingConf Freiburg, Sep 2015)
 
Intel XDK - Philly JS
Intel XDK - Philly JSIntel XDK - Philly JS
Intel XDK - Philly JS
 
React For Vikings
React For VikingsReact For Vikings
React For Vikings
 

Similar to ES2015 workflows

2013-06-15 - Software Craftsmanship mit JavaScript
2013-06-15 - Software Craftsmanship mit JavaScript2013-06-15 - Software Craftsmanship mit JavaScript
2013-06-15 - Software Craftsmanship mit JavaScript
Johannes Hoppe
 
2013-06-24 - Software Craftsmanship with JavaScript
2013-06-24 - Software Craftsmanship with JavaScript2013-06-24 - Software Craftsmanship with JavaScript
2013-06-24 - Software Craftsmanship with JavaScript
Johannes Hoppe
 
Es6 hackathon
Es6 hackathonEs6 hackathon
Es6 hackathon
Justin Alexander
 
Ecmascript 2015 – best of new features()
Ecmascript 2015 – best of new features()Ecmascript 2015 – best of new features()
Ecmascript 2015 – best of new features()
Miłosz Sobczak
 
JSUG - Tech Tips1 by Christoph Pickl
JSUG - Tech Tips1 by Christoph PicklJSUG - Tech Tips1 by Christoph Pickl
JSUG - Tech Tips1 by Christoph Pickl
Christoph Pickl
 
What's New in JavaScript
What's New in JavaScriptWhat's New in JavaScript
What's New in JavaScript
Dan Cohn
 
A few good JavaScript development tools
A few good JavaScript development toolsA few good JavaScript development tools
A few good JavaScript development tools
Simon Kim
 
JavaScript Proven Practises
JavaScript Proven PractisesJavaScript Proven Practises
JavaScript Proven Practises
Robert MacLean
 
HTML5 for the Silverlight Guy
HTML5 for the Silverlight GuyHTML5 for the Silverlight Guy
HTML5 for the Silverlight Guy
David Padbury
 
Cappuccino @ JSConf 2009
Cappuccino @ JSConf 2009Cappuccino @ JSConf 2009
Cappuccino @ JSConf 2009
tolmasky
 
Node.js System: The Landing
Node.js System: The LandingNode.js System: The Landing
Node.js System: The Landing
Haci Murat Yaman
 
Unit testing in iOS featuring OCUnit, GHUnit & OCMock
Unit testing in iOS featuring OCUnit, GHUnit & OCMockUnit testing in iOS featuring OCUnit, GHUnit & OCMock
Unit testing in iOS featuring OCUnit, GHUnit & OCMock
Robot Media
 
JavaScript and UI Architecture Best Practices
JavaScript and UI Architecture Best PracticesJavaScript and UI Architecture Best Practices
JavaScript and UI Architecture Best Practices
Siarhei Barysiuk
 
JavaScript Core
JavaScript CoreJavaScript Core
JavaScript Core
François Sarradin
 
Javantura v3 - ES6 – Future Is Now – Nenad Pečanac
Javantura v3 - ES6 – Future Is Now – Nenad PečanacJavantura v3 - ES6 – Future Is Now – Nenad Pečanac
Javantura v3 - ES6 – Future Is Now – Nenad Pečanac
HUJAK - Hrvatska udruga Java korisnika / Croatian Java User Association
 
The why and how of moving to PHP 5.4/5.5
The why and how of moving to PHP 5.4/5.5The why and how of moving to PHP 5.4/5.5
The why and how of moving to PHP 5.4/5.5
Wim Godden
 
PHPunit and you
PHPunit and youPHPunit and you
PHPunit and you
markstory
 
ES6 in Production [JSConfUY2015]
ES6 in Production [JSConfUY2015]ES6 in Production [JSConfUY2015]
ES6 in Production [JSConfUY2015]
Guillermo Paz
 
IaC and Immutable Infrastructure with Terraform, Сергей Марченко
IaC and Immutable Infrastructure with Terraform, Сергей МарченкоIaC and Immutable Infrastructure with Terraform, Сергей Марченко
IaC and Immutable Infrastructure with Terraform, Сергей Марченко
Sigma Software
 
Painless Javascript Unit Testing
Painless Javascript Unit TestingPainless Javascript Unit Testing
Painless Javascript Unit Testing
Benjamin Wilson
 

Similar to ES2015 workflows (20)

2013-06-15 - Software Craftsmanship mit JavaScript
2013-06-15 - Software Craftsmanship mit JavaScript2013-06-15 - Software Craftsmanship mit JavaScript
2013-06-15 - Software Craftsmanship mit JavaScript
 
2013-06-24 - Software Craftsmanship with JavaScript
2013-06-24 - Software Craftsmanship with JavaScript2013-06-24 - Software Craftsmanship with JavaScript
2013-06-24 - Software Craftsmanship with JavaScript
 
Es6 hackathon
Es6 hackathonEs6 hackathon
Es6 hackathon
 
Ecmascript 2015 – best of new features()
Ecmascript 2015 – best of new features()Ecmascript 2015 – best of new features()
Ecmascript 2015 – best of new features()
 
JSUG - Tech Tips1 by Christoph Pickl
JSUG - Tech Tips1 by Christoph PicklJSUG - Tech Tips1 by Christoph Pickl
JSUG - Tech Tips1 by Christoph Pickl
 
What's New in JavaScript
What's New in JavaScriptWhat's New in JavaScript
What's New in JavaScript
 
A few good JavaScript development tools
A few good JavaScript development toolsA few good JavaScript development tools
A few good JavaScript development tools
 
JavaScript Proven Practises
JavaScript Proven PractisesJavaScript Proven Practises
JavaScript Proven Practises
 
HTML5 for the Silverlight Guy
HTML5 for the Silverlight GuyHTML5 for the Silverlight Guy
HTML5 for the Silverlight Guy
 
Cappuccino @ JSConf 2009
Cappuccino @ JSConf 2009Cappuccino @ JSConf 2009
Cappuccino @ JSConf 2009
 
Node.js System: The Landing
Node.js System: The LandingNode.js System: The Landing
Node.js System: The Landing
 
Unit testing in iOS featuring OCUnit, GHUnit & OCMock
Unit testing in iOS featuring OCUnit, GHUnit & OCMockUnit testing in iOS featuring OCUnit, GHUnit & OCMock
Unit testing in iOS featuring OCUnit, GHUnit & OCMock
 
JavaScript and UI Architecture Best Practices
JavaScript and UI Architecture Best PracticesJavaScript and UI Architecture Best Practices
JavaScript and UI Architecture Best Practices
 
JavaScript Core
JavaScript CoreJavaScript Core
JavaScript Core
 
Javantura v3 - ES6 – Future Is Now – Nenad Pečanac
Javantura v3 - ES6 – Future Is Now – Nenad PečanacJavantura v3 - ES6 – Future Is Now – Nenad Pečanac
Javantura v3 - ES6 – Future Is Now – Nenad Pečanac
 
The why and how of moving to PHP 5.4/5.5
The why and how of moving to PHP 5.4/5.5The why and how of moving to PHP 5.4/5.5
The why and how of moving to PHP 5.4/5.5
 
PHPunit and you
PHPunit and youPHPunit and you
PHPunit and you
 
ES6 in Production [JSConfUY2015]
ES6 in Production [JSConfUY2015]ES6 in Production [JSConfUY2015]
ES6 in Production [JSConfUY2015]
 
IaC and Immutable Infrastructure with Terraform, Сергей Марченко
IaC and Immutable Infrastructure with Terraform, Сергей МарченкоIaC and Immutable Infrastructure with Terraform, Сергей Марченко
IaC and Immutable Infrastructure with Terraform, Сергей Марченко
 
Painless Javascript Unit Testing
Painless Javascript Unit TestingPainless Javascript Unit Testing
Painless Javascript Unit Testing
 

More from Jarrod Overson

Practical WebAssembly with Apex, wasmRS, and nanobus
Practical WebAssembly with Apex, wasmRS, and nanobusPractical WebAssembly with Apex, wasmRS, and nanobus
Practical WebAssembly with Apex, wasmRS, and nanobus
Jarrod Overson
 
AppSecCali - How Credential Stuffing is Evolving
AppSecCali - How Credential Stuffing is EvolvingAppSecCali - How Credential Stuffing is Evolving
AppSecCali - How Credential Stuffing is Evolving
Jarrod Overson
 
How Credential Stuffing is Evolving - PasswordsCon 2019
How Credential Stuffing is Evolving - PasswordsCon 2019How Credential Stuffing is Evolving - PasswordsCon 2019
How Credential Stuffing is Evolving - PasswordsCon 2019
Jarrod Overson
 
JSconf JP - Analysis of an exploited npm package. Event-stream's role in a su...
JSconf JP - Analysis of an exploited npm package. Event-stream's role in a su...JSconf JP - Analysis of an exploited npm package. Event-stream's role in a su...
JSconf JP - Analysis of an exploited npm package. Event-stream's role in a su...
Jarrod Overson
 
Analysis of an OSS supply chain attack - How did 8 millions developers downlo...
Analysis of an OSS supply chain attack - How did 8 millions developers downlo...Analysis of an OSS supply chain attack - How did 8 millions developers downlo...
Analysis of an OSS supply chain attack - How did 8 millions developers downlo...
Jarrod Overson
 
Deepfakes - How they work and what it means for the future
Deepfakes - How they work and what it means for the futureDeepfakes - How they work and what it means for the future
Deepfakes - How they work and what it means for the future
Jarrod Overson
 
The State of Credential Stuffing and the Future of Account Takeovers.
The State of Credential Stuffing and the Future of Account Takeovers.The State of Credential Stuffing and the Future of Account Takeovers.
The State of Credential Stuffing and the Future of Account Takeovers.
Jarrod Overson
 
How to Reverse Engineer Web Applications
How to Reverse Engineer Web ApplicationsHow to Reverse Engineer Web Applications
How to Reverse Engineer Web Applications
Jarrod Overson
 
The life of breached data and the attack lifecycle
The life of breached data and the attack lifecycleThe life of breached data and the attack lifecycle
The life of breached data and the attack lifecycle
Jarrod Overson
 
The Life of Breached Data & The Dark Side of Security
The Life of Breached Data & The Dark Side of SecurityThe Life of Breached Data & The Dark Side of Security
The Life of Breached Data & The Dark Side of Security
Jarrod Overson
 
Shape Security @ WaffleJS October 16
Shape Security @ WaffleJS October 16Shape Security @ WaffleJS October 16
Shape Security @ WaffleJS October 16
Jarrod Overson
 
Graphics Programming for Web Developers
Graphics Programming for Web DevelopersGraphics Programming for Web Developers
Graphics Programming for Web Developers
Jarrod Overson
 
The Dark Side of Security
The Dark Side of SecurityThe Dark Side of Security
The Dark Side of Security
Jarrod Overson
 
Maintainability SFJS Sept 4 2014
Maintainability SFJS Sept 4 2014 Maintainability SFJS Sept 4 2014
Maintainability SFJS Sept 4 2014
Jarrod Overson
 
Idiot proofing your code
Idiot proofing your codeIdiot proofing your code
Idiot proofing your code
Jarrod Overson
 
Riot on the web - Kenote @ QCon Sao Paulo 2014
Riot on the web - Kenote @ QCon Sao Paulo 2014Riot on the web - Kenote @ QCon Sao Paulo 2014
Riot on the web - Kenote @ QCon Sao Paulo 2014
Jarrod Overson
 
Managing JavaScript Complexity in Teams - Fluent
Managing JavaScript Complexity in Teams - FluentManaging JavaScript Complexity in Teams - Fluent
Managing JavaScript Complexity in Teams - Fluent
Jarrod Overson
 
Real World Web components
Real World Web componentsReal World Web components
Real World Web components
Jarrod Overson
 
Managing JavaScript Complexity
Managing JavaScript ComplexityManaging JavaScript Complexity
Managing JavaScript Complexity
Jarrod Overson
 
Continuous Delivery for the Web Platform
Continuous Delivery for the Web PlatformContinuous Delivery for the Web Platform
Continuous Delivery for the Web Platform
Jarrod Overson
 

More from Jarrod Overson (20)

Practical WebAssembly with Apex, wasmRS, and nanobus
Practical WebAssembly with Apex, wasmRS, and nanobusPractical WebAssembly with Apex, wasmRS, and nanobus
Practical WebAssembly with Apex, wasmRS, and nanobus
 
AppSecCali - How Credential Stuffing is Evolving
AppSecCali - How Credential Stuffing is EvolvingAppSecCali - How Credential Stuffing is Evolving
AppSecCali - How Credential Stuffing is Evolving
 
How Credential Stuffing is Evolving - PasswordsCon 2019
How Credential Stuffing is Evolving - PasswordsCon 2019How Credential Stuffing is Evolving - PasswordsCon 2019
How Credential Stuffing is Evolving - PasswordsCon 2019
 
JSconf JP - Analysis of an exploited npm package. Event-stream's role in a su...
JSconf JP - Analysis of an exploited npm package. Event-stream's role in a su...JSconf JP - Analysis of an exploited npm package. Event-stream's role in a su...
JSconf JP - Analysis of an exploited npm package. Event-stream's role in a su...
 
Analysis of an OSS supply chain attack - How did 8 millions developers downlo...
Analysis of an OSS supply chain attack - How did 8 millions developers downlo...Analysis of an OSS supply chain attack - How did 8 millions developers downlo...
Analysis of an OSS supply chain attack - How did 8 millions developers downlo...
 
Deepfakes - How they work and what it means for the future
Deepfakes - How they work and what it means for the futureDeepfakes - How they work and what it means for the future
Deepfakes - How they work and what it means for the future
 
The State of Credential Stuffing and the Future of Account Takeovers.
The State of Credential Stuffing and the Future of Account Takeovers.The State of Credential Stuffing and the Future of Account Takeovers.
The State of Credential Stuffing and the Future of Account Takeovers.
 
How to Reverse Engineer Web Applications
How to Reverse Engineer Web ApplicationsHow to Reverse Engineer Web Applications
How to Reverse Engineer Web Applications
 
The life of breached data and the attack lifecycle
The life of breached data and the attack lifecycleThe life of breached data and the attack lifecycle
The life of breached data and the attack lifecycle
 
The Life of Breached Data & The Dark Side of Security
The Life of Breached Data & The Dark Side of SecurityThe Life of Breached Data & The Dark Side of Security
The Life of Breached Data & The Dark Side of Security
 
Shape Security @ WaffleJS October 16
Shape Security @ WaffleJS October 16Shape Security @ WaffleJS October 16
Shape Security @ WaffleJS October 16
 
Graphics Programming for Web Developers
Graphics Programming for Web DevelopersGraphics Programming for Web Developers
Graphics Programming for Web Developers
 
The Dark Side of Security
The Dark Side of SecurityThe Dark Side of Security
The Dark Side of Security
 
Maintainability SFJS Sept 4 2014
Maintainability SFJS Sept 4 2014 Maintainability SFJS Sept 4 2014
Maintainability SFJS Sept 4 2014
 
Idiot proofing your code
Idiot proofing your codeIdiot proofing your code
Idiot proofing your code
 
Riot on the web - Kenote @ QCon Sao Paulo 2014
Riot on the web - Kenote @ QCon Sao Paulo 2014Riot on the web - Kenote @ QCon Sao Paulo 2014
Riot on the web - Kenote @ QCon Sao Paulo 2014
 
Managing JavaScript Complexity in Teams - Fluent
Managing JavaScript Complexity in Teams - FluentManaging JavaScript Complexity in Teams - Fluent
Managing JavaScript Complexity in Teams - Fluent
 
Real World Web components
Real World Web componentsReal World Web components
Real World Web components
 
Managing JavaScript Complexity
Managing JavaScript ComplexityManaging JavaScript Complexity
Managing JavaScript Complexity
 
Continuous Delivery for the Web Platform
Continuous Delivery for the Web PlatformContinuous Delivery for the Web Platform
Continuous Delivery for the Web Platform
 

Recently uploaded

National Security Agency - NSA mobile device best practices
National Security Agency - NSA mobile device best practicesNational Security Agency - NSA mobile device best practices
National Security Agency - NSA mobile device best practices
Quotidiano Piemontese
 
“Building and Scaling AI Applications with the Nx AI Manager,” a Presentation...
“Building and Scaling AI Applications with the Nx AI Manager,” a Presentation...“Building and Scaling AI Applications with the Nx AI Manager,” a Presentation...
“Building and Scaling AI Applications with the Nx AI Manager,” a Presentation...
Edge AI and Vision Alliance
 
Nordic Marketo Engage User Group_June 13_ 2024.pptx
Nordic Marketo Engage User Group_June 13_ 2024.pptxNordic Marketo Engage User Group_June 13_ 2024.pptx
Nordic Marketo Engage User Group_June 13_ 2024.pptx
MichaelKnudsen27
 
Best 20 SEO Techniques To Improve Website Visibility In SERP
Best 20 SEO Techniques To Improve Website Visibility In SERPBest 20 SEO Techniques To Improve Website Visibility In SERP
Best 20 SEO Techniques To Improve Website Visibility In SERP
Pixlogix Infotech
 
Project Management Semester Long Project - Acuity
Project Management Semester Long Project - AcuityProject Management Semester Long Project - Acuity
Project Management Semester Long Project - Acuity
jpupo2018
 
Artificial Intelligence for XMLDevelopment
Artificial Intelligence for XMLDevelopmentArtificial Intelligence for XMLDevelopment
Artificial Intelligence for XMLDevelopment
Octavian Nadolu
 
Salesforce Integration for Bonterra Impact Management (fka Social Solutions A...
Salesforce Integration for Bonterra Impact Management (fka Social Solutions A...Salesforce Integration for Bonterra Impact Management (fka Social Solutions A...
Salesforce Integration for Bonterra Impact Management (fka Social Solutions A...
Jeffrey Haguewood
 
Let's Integrate MuleSoft RPA, COMPOSER, APM with AWS IDP along with Slack
Let's Integrate MuleSoft RPA, COMPOSER, APM with AWS IDP along with SlackLet's Integrate MuleSoft RPA, COMPOSER, APM with AWS IDP along with Slack
Let's Integrate MuleSoft RPA, COMPOSER, APM with AWS IDP along with Slack
shyamraj55
 
How to use Firebase Data Connect For Flutter
How to use Firebase Data Connect For FlutterHow to use Firebase Data Connect For Flutter
How to use Firebase Data Connect For Flutter
Daiki Mogmet Ito
 
UI5 Controls simplified - UI5con2024 presentation
UI5 Controls simplified - UI5con2024 presentationUI5 Controls simplified - UI5con2024 presentation
UI5 Controls simplified - UI5con2024 presentation
Wouter Lemaire
 
GraphRAG for Life Science to increase LLM accuracy
GraphRAG for Life Science to increase LLM accuracyGraphRAG for Life Science to increase LLM accuracy
GraphRAG for Life Science to increase LLM accuracy
Tomaz Bratanic
 
WeTestAthens: Postman's AI & Automation Techniques
WeTestAthens: Postman's AI & Automation TechniquesWeTestAthens: Postman's AI & Automation Techniques
WeTestAthens: Postman's AI & Automation Techniques
Postman
 
HCL Notes and Domino License Cost Reduction in the World of DLAU
HCL Notes and Domino License Cost Reduction in the World of DLAUHCL Notes and Domino License Cost Reduction in the World of DLAU
HCL Notes and Domino License Cost Reduction in the World of DLAU
panagenda
 
Driving Business Innovation: Latest Generative AI Advancements & Success Story
Driving Business Innovation: Latest Generative AI Advancements & Success StoryDriving Business Innovation: Latest Generative AI Advancements & Success Story
Driving Business Innovation: Latest Generative AI Advancements & Success Story
Safe Software
 
Your One-Stop Shop for Python Success: Top 10 US Python Development Providers
Your One-Stop Shop for Python Success: Top 10 US Python Development ProvidersYour One-Stop Shop for Python Success: Top 10 US Python Development Providers
Your One-Stop Shop for Python Success: Top 10 US Python Development Providers
akankshawande
 
Fueling AI with Great Data with Airbyte Webinar
Fueling AI with Great Data with Airbyte WebinarFueling AI with Great Data with Airbyte Webinar
Fueling AI with Great Data with Airbyte Webinar
Zilliz
 
Deep Dive: AI-Powered Marketing to Get More Leads and Customers with HyperGro...
Deep Dive: AI-Powered Marketing to Get More Leads and Customers with HyperGro...Deep Dive: AI-Powered Marketing to Get More Leads and Customers with HyperGro...
Deep Dive: AI-Powered Marketing to Get More Leads and Customers with HyperGro...
saastr
 
Energy Efficient Video Encoding for Cloud and Edge Computing Instances
Energy Efficient Video Encoding for Cloud and Edge Computing InstancesEnergy Efficient Video Encoding for Cloud and Edge Computing Instances
Energy Efficient Video Encoding for Cloud and Edge Computing Instances
Alpen-Adria-Universität
 
June Patch Tuesday
June Patch TuesdayJune Patch Tuesday
June Patch Tuesday
Ivanti
 
5th LF Energy Power Grid Model Meet-up Slides
5th LF Energy Power Grid Model Meet-up Slides5th LF Energy Power Grid Model Meet-up Slides
5th LF Energy Power Grid Model Meet-up Slides
DanBrown980551
 

Recently uploaded (20)

National Security Agency - NSA mobile device best practices
National Security Agency - NSA mobile device best practicesNational Security Agency - NSA mobile device best practices
National Security Agency - NSA mobile device best practices
 
“Building and Scaling AI Applications with the Nx AI Manager,” a Presentation...
“Building and Scaling AI Applications with the Nx AI Manager,” a Presentation...“Building and Scaling AI Applications with the Nx AI Manager,” a Presentation...
“Building and Scaling AI Applications with the Nx AI Manager,” a Presentation...
 
Nordic Marketo Engage User Group_June 13_ 2024.pptx
Nordic Marketo Engage User Group_June 13_ 2024.pptxNordic Marketo Engage User Group_June 13_ 2024.pptx
Nordic Marketo Engage User Group_June 13_ 2024.pptx
 
Best 20 SEO Techniques To Improve Website Visibility In SERP
Best 20 SEO Techniques To Improve Website Visibility In SERPBest 20 SEO Techniques To Improve Website Visibility In SERP
Best 20 SEO Techniques To Improve Website Visibility In SERP
 
Project Management Semester Long Project - Acuity
Project Management Semester Long Project - AcuityProject Management Semester Long Project - Acuity
Project Management Semester Long Project - Acuity
 
Artificial Intelligence for XMLDevelopment
Artificial Intelligence for XMLDevelopmentArtificial Intelligence for XMLDevelopment
Artificial Intelligence for XMLDevelopment
 
Salesforce Integration for Bonterra Impact Management (fka Social Solutions A...
Salesforce Integration for Bonterra Impact Management (fka Social Solutions A...Salesforce Integration for Bonterra Impact Management (fka Social Solutions A...
Salesforce Integration for Bonterra Impact Management (fka Social Solutions A...
 
Let's Integrate MuleSoft RPA, COMPOSER, APM with AWS IDP along with Slack
Let's Integrate MuleSoft RPA, COMPOSER, APM with AWS IDP along with SlackLet's Integrate MuleSoft RPA, COMPOSER, APM with AWS IDP along with Slack
Let's Integrate MuleSoft RPA, COMPOSER, APM with AWS IDP along with Slack
 
How to use Firebase Data Connect For Flutter
How to use Firebase Data Connect For FlutterHow to use Firebase Data Connect For Flutter
How to use Firebase Data Connect For Flutter
 
UI5 Controls simplified - UI5con2024 presentation
UI5 Controls simplified - UI5con2024 presentationUI5 Controls simplified - UI5con2024 presentation
UI5 Controls simplified - UI5con2024 presentation
 
GraphRAG for Life Science to increase LLM accuracy
GraphRAG for Life Science to increase LLM accuracyGraphRAG for Life Science to increase LLM accuracy
GraphRAG for Life Science to increase LLM accuracy
 
WeTestAthens: Postman's AI & Automation Techniques
WeTestAthens: Postman's AI & Automation TechniquesWeTestAthens: Postman's AI & Automation Techniques
WeTestAthens: Postman's AI & Automation Techniques
 
HCL Notes and Domino License Cost Reduction in the World of DLAU
HCL Notes and Domino License Cost Reduction in the World of DLAUHCL Notes and Domino License Cost Reduction in the World of DLAU
HCL Notes and Domino License Cost Reduction in the World of DLAU
 
Driving Business Innovation: Latest Generative AI Advancements & Success Story
Driving Business Innovation: Latest Generative AI Advancements & Success StoryDriving Business Innovation: Latest Generative AI Advancements & Success Story
Driving Business Innovation: Latest Generative AI Advancements & Success Story
 
Your One-Stop Shop for Python Success: Top 10 US Python Development Providers
Your One-Stop Shop for Python Success: Top 10 US Python Development ProvidersYour One-Stop Shop for Python Success: Top 10 US Python Development Providers
Your One-Stop Shop for Python Success: Top 10 US Python Development Providers
 
Fueling AI with Great Data with Airbyte Webinar
Fueling AI with Great Data with Airbyte WebinarFueling AI with Great Data with Airbyte Webinar
Fueling AI with Great Data with Airbyte Webinar
 
Deep Dive: AI-Powered Marketing to Get More Leads and Customers with HyperGro...
Deep Dive: AI-Powered Marketing to Get More Leads and Customers with HyperGro...Deep Dive: AI-Powered Marketing to Get More Leads and Customers with HyperGro...
Deep Dive: AI-Powered Marketing to Get More Leads and Customers with HyperGro...
 
Energy Efficient Video Encoding for Cloud and Edge Computing Instances
Energy Efficient Video Encoding for Cloud and Edge Computing InstancesEnergy Efficient Video Encoding for Cloud and Edge Computing Instances
Energy Efficient Video Encoding for Cloud and Edge Computing Instances
 
June Patch Tuesday
June Patch TuesdayJune Patch Tuesday
June Patch Tuesday
 
5th LF Energy Power Grid Model Meet-up Slides
5th LF Energy Power Grid Model Meet-up Slides5th LF Energy Power Grid Model Meet-up Slides
5th LF Energy Power Grid Model Meet-up Slides
 

ES2015 workflows

  • 2. var that = this;
  • 5. function Klass() {
 
 }
 
 Klass.prototype = Parent.prototype;
 
 Klass.prototype.myMethod = function(){}
  • 7. if (typeof exports === 'object' &&
 typeof define !== 'function') {
 var define = function (factory) {
 factory(require, exports, module);
 };
 }
 
 define(function (require, exports, module) {
 var b = require('b');
 
 exports.action = function () {};
 });
  • 8. ES2015 to the rescue!
  • 9. Me
  • 10. 1. What is ES2015? 2. How can I use it? 3. What’s next?
  • 11. ES2015 used to be known as ES6
  • 12. You can play around here http://bit.ly/es6console
  • 13. function (x) { return x * 2 } x => x * 2 Becomes
  • 14. [1,2,3].map(x => x * 2)
 .reduce((p,n) => p + n) ➤
  • 15. { update : function(data) {/*…*/}, retrieve : function() { fetch('http://example.com')
 .then(res => this.update(res)) } }
  • 16. function JavaScrap(name) {
 Person.call(this, name);
 this.shout('i <3 js');
 }
 
 JavaScrap.prototype =
 Object.create(Person.prototype);
 
 JavaScrap.prototype.shout = function(msg) {
 this.say(msg.toUpperCase());
 }; Becomes…
  • 17. class JavaScrap extends Person {
 constructor(name) {
 super(name);
 this.shout('i <3 js');
 } shout(msg) {
 this.say(msg.toUpperCase());
 }
 } ➤
  • 18. "My name is " + name + ".n" + "I will be " + (age + 1) + " next year." `My name is ${name}. I will be ${age + 1} next year.` Becomes ➤
  • 19. RESOURCE SLIDE! Exploring ES6 by @rauschma : http://exploringjs.com/ (online) Six steps for approaching ES6, telerik : Six Steps for approaching ES6 ES6 in depth : https://hacks.mozilla.org/category/es6-in-depth/ ES6 Features : https://github.com/lukehoban/es6features ES6 console : http://jsoverson.github.io/es6repl/ Babel repl : https://babeljs.io/repl/ ES6 features (dot org) : http://es6-features.org/ ES6 compatibility : https://kangax.github.io/compat-table/es6/ You Don’t Know JS : ES6 & Beyond by @getify Learning ES2015 would be impossible in 20 minutes. This talk is about getting stuff done.
  • 20. 1. What is ES2015? 2. How can I use it? 3. What’s next?
  • 21. Reality Check : ES 2015 vs ES 5
  • 22. Source to Source compiling a.k.a. Transpiling
  • 25. If you can’t lint, if you can’t test, then you’re just toying around.
  • 26. class Greeter {
 constructor(greeting = 'Hello', target = 'World') {
 this.greeting = greeting;
 this.target = target;
 } getGreeting() {
 return `${this.greeting} ${this.target}`;
 }
 }
 
 export default Greeter;
  • 27. $ ./node_modules/.bin/eslint src src/index.js 4:1 error Unexpected reserved word ✖ 1 problem (1 error, 0 warnings)
  • 29. $ ./node_modules/.bin/eslint —-init ? What style of indentation do you use? Spaces ? What quotes do you use for strings? Single ? What line endings do you use? Unix ? Do you require semicolons? Yes ? Are you using ECMAScript 6 features? Yes ? Where will your code run? Node, Browser ? Do you use JSX? No ? What format do you want your config file to be in? JSON Successfully created .eslintrc file in ./es6-linting
  • 30. $ ./node_modules/.bin/eslint src src/index.js 12:2 error Illegal export declaration ✖ 1 problem (1 error, 0 warnings)
  • 31. .eslintrc : "ecmaFeatures": {
 "modules": true
 } See: Specifying Language options in eslint
  • 32. $ ./node_modules/.bin/eslint src $ No output means we’re good!
  • 33. package.json : "scripts": {
 "lint": "eslint src/"
 },
 $ npm run lint Enables you to run : Note: no “./node_modules/.bin/” prefix
  • 35. import assert from 'assert';
 import Greeter from '../src/';
 
 describe('test index', () => {
 let greeter;
 before(() => {
 greeter = new Greeter();
 }); 
 it('should instantiate with defaults', () => {
 assert.equal(greeter.greeting, 'Hello');
 assert.equal(greeter.target, 'World');
 }); 
 it('should provide a greeting', () => {
 var greeting = greeter.getGreeting();
 assert.equal(greeting, 'Hello World');
 });
 });
  • 36. $ ./node_modules/.bin/mocha test/ test/index.spec.js:2 import assert from 'assert'; ^^^^^^ SyntaxError: Unexpected reserved word at Module._compile (module.js:439:25) at Object.Module._extensions..js (module.js:474:10) at Module.load (module.js:356:32) at Function.Module._load (module.js:312:12)
  • 38. $ ./node_modules/.bin/mocha --require babel/register test index ✓ should instantiate with defaults ✓ should provide a greeting 2 passing (7ms)
  • 39. Enables you to run : package.json : "scripts": {
 "unit": "mocha --require babel/register”, "test": "$npm_package_scripts_lint && $npm_package_scripts_unit"
 },
 $ npm run unit $ npm run test $ npm test “test” is a special, first-class script Note: npm script values as variables
  • 41. $ ./n_m/.b/istanbul cover ./n_m/.b/_mocha -- --require babel/register test index ✓ should instantiate with defaults ✓ should provide a greeting 2 passing (5ms) ============================================================================= Writing coverage object [./coverage/coverage.json] Writing coverage reports at [./coverage] ============================================================================= =============================== Coverage summary ============================ Statements : 100% ( 31/31 ), 2 ignored Branches : 77.78% ( 14/18 ), 4 ignored Functions : 100% ( 7/7 ) Lines : 100% ( 15/15 ) =============================================================================
  • 42. Enables you to run : package.json : "scripts": {
 "coverage": "istanbul cover _mocha -- --require babel/register"
 },
 $ npm run coverage ➤
  • 44. Enables you to run : package.json : "scripts": {
 "build": "babel --out-dir dist src",
 "watch": "$npm_package_scripts_build --watch"
 },
 $ npm run build $ npm run watch
  • 45. package.json : "scripts": {
 "build": "babel --out-dir dist src",
 "watch": "$npm_package_scripts_build --watch",
 "lint": "eslint src/",
 "unit": "mocha --require babel/register",
 "test": "$npm_package_scripts_lint && $npm_package_scripts_unit",
 "coverage": "istanbul cover _mocha -- --require babel/register"
 },

  • 46. 1. What is ES2015? 2. How can I use it? 3. What’s next?
  • 47. ES2015 is here and marks a transition.