ES6 patterns in the wild

Code to Run
(wild code)
Code we write Code we import

Code to Run
(wild code)
Code we write Code we import
$$

Code to Teach
Tutorials
Documentation
Style Guides
Stack Overflow
Books
Conferences

Code to Teach
Tutorials
Documentation
Style Guides
Stack Overflow
Books
Conferences
Good Stuff

Syntax
SELECT ID, NAME, AGE, AMOUNT
FROM CUSTOMERS, ORDERS
WHERE CUSTOMERS.ID = ORDERS.CUSTOMER_ID;

Joe Morgan
Read
Read
Critically

{
donuts: [
“chocolate”,
],
filter: null
}
state.donuts.map(donut => {
return (
<h2> {{donut}} </h2>
)
})
<h2> Chocolate </h2>
State Component

{
donuts: [
“chocolate”,
],
filter: null
}
return (
<h2> {{donut}} </h2>
)
})
State Component
dispatch(addDonut(‘maple’))

{
donuts: [
“chocolate”,
“maple”,
],
filter: null
}
return (
<h2> {{donut}} </h2>
)
})
State Component

updated state
{
donuts: [
“chocolate”,
“maple”,
],
filter: null
}
return (
<h2> {{donut}} </h2>
)
})
State Component

updated state
{
donuts: [
“chocolate”,
“maple”,
],
filter: null
}
return (
<h2> {{donut}} </h2>
)
})
<h2> Maple </h2>
State Component

Redux
Functional
Array Methods
High Order Functions
Curry/Partially Applied
Functions

updated state
{
donuts: [
“chocolate”,
“maple”,
],
filter: null
}
state.donuts.map(donut =>
{
return (
<h2> {{donut}} </h2>
)
}
<h2> Maple </h2>
State Component
Middleware
Middleware

import compose from './compose'
export default function applyMiddleware(...middlewares) {
return (createStore) => (reducer, preloadedState, enhancer) => {
var store = createStore(reducer, preloadedState, enhancer)
var dispatch = store.dispatch
var chain = []
var middlewareAPI = {
getState: store.getState,
dispatch: (action) => dispatch(action)
}
chain = middlewares.map(middleware => middleware(middlewareAPI))
dispatch = compose(...chain)(store.dispatch)
return {
...store,
dispatch
}
}
}

}
}
}
Arrow Functions

}
}
}

return function(createStore) {
return function (reducer, preloadedState, enhancer) {
dispatch: function (action) {
return dispatch(action);
}
}
chain = middlewares.map(function(middleware) {
return middleware(middlewareAPI)
})
}
}
}

chain = middlewares.map((middleware) => {return middleware(middlewareAPI)})

var namer = {
name: 'bill',
say: function() {
var that = this
console.log(this.name);
setTimeout(function() {
console.log(that.name);
},200);
}
}

const namer = {
name: 'bill',
say: function() {
setTimeout(() => {
},200);
}
}

i. Reading Code is a Skill: Intuition

Redux
Rest/Spread
// Lots of stuff
}
}

// Lots of stuff
}
}
(I actually didn’t realize they had different names)

Redux
Rest/Spread
Rest:
list => array

// Lots of stuff
}
}

export default function applyMiddleware(...middlewares)
examples/real-world/src/store/configureStore.dev.js
applyMiddleware(thunk, api, createLogger())
examples/real-world/src/store/configureStore.prod.js
applyMiddleware(thunk, api)

Redux
Rest/Spread
Spread:
array => list

examples/real-world/src/store/configureStore.dev.js
compose(thunk, api, createLogger())(store.dispatch)
examples/real-world/src/store/configureStore.prod.js
compose(thunk, api)(store.dispatch)

Redux
Rest/Spread
Convert items to arrays

// Lots of stuff
}
}
}

Redux
Rest/Spread
Converting array to a new array
without mutations

describe('combineReducers', () => {
it('returns a composite reducer that maps the state keys
to given reducers', () => {
const reducer = combineReducers({
...
action.type === 'push' ? [ ...state, action.value ] :
state
})

const family = [
{
name: 'Joe',
age: 34
},
{
name: 'Theo',
age: 1
},
{
name: 'Dyan',
age: 34
},
]
const sortName = (a,b) => {
return a.name > b.name ? 1 : -1
}
const sortAge = (a, b) => {
if(a.age === b.age) {
return 0;
}
return a.age > b.age ? 1 : -1
}

const family = [
{
name: 'Joe',
age: 34
},
{
name: 'Theo',
age: 1
},
{
name: 'Dyan',
age: 34
},
]
}
return 0;
}
}
> family.sort(sortAge);

const family = [
{
name: 'Theo',
age: 1
},
{
name: 'Joe',
age: 34
},
{
name: 'Dyan',
age: 34
},
]
}
return 0;
}
}
[
{
name: 'Theo',
age: 1
},
{
name: 'Joe',
age: 34
},
{
name: 'Dyan',
age: 34
},
]

const family = [
{
name: 'Theo',
age: 1
},
{
name: 'Joe',
age: 34
},
{
name: 'Dyan',
age: 34
},
]
}
return 0;
}
}

const family = [
{
name: 'Theo',
age: 1
},
{
name: 'Joe',
age: 34
},
{
name: 'Dyan',
age: 34
},
]
}
return 0;
}
}
> family.sort(sortName);

const family = [
{
name: 'Dyan',
age: 34
},
{
name: 'Joe',
age: 34
},
{
name: 'Theo',
age: 1
},
]
}
return 0;
}
}
[
{
name: 'Dyan',
age: 34
},
{
name: 'Joe',
age: 34
},
{
name: 'Theo',
age: 1
},
]

const family = [
{
name: 'Dyan',
age: 34
},
{
name: 'Joe',
age: 34
},
{
name: 'Theo',
age: 1
},
]
}
return 0;
}
}

const family = [
{
name: 'Dyan',
age: 34
},
{
name: 'Joe',
age: 34
},
{
name: 'Theo',
age: 1
},
]
}
return 0;
}
}
> family.sort(sortAge);

const family = [
{
name: 'Theo',
age: 1
},
{
name: 'Dyan',
age: 34
},
{
name: 'Joe',
age: 34
},
]
}
return 0;
}
}
[
{
name: 'Theo',
age: 1
},
{
name: 'Dyan',
age: 34
},
{
name: 'Joe',
age: 34
},
]

const family = [
{
name: 'Theo',
age: 1
},
{
name: 'Dyan',
age: 34
},
{
name: 'Joe',
age: 34
},
]
}
return 0;
}
}

const family = [
{
name: 'Joe',
age: 34
},
{
name: 'Theo',
age: 1
},
{
name: 'Dyan',
age: 34
},
]
}
return 0;
}
}
> [...family].sort(sortAge);

const family = [
{
name: 'Joe',
age: 34
},
{
name: 'Theo',
age: 1
},
{
name: 'Dyan',
age: 34
},
]
}
return 0;
}
}
[
{
name: 'Theo',
age: 1
},
{
name: 'Joe',
age: 34
},
{
name: 'Dyan',
age: 34
},
]

ii. Your code will reflect your reading

data structures
architecture
community standards

It’s ok to take ideas
from others

Redux
Object Spread
Not part of ES6

//.babelrc
{
"plugins": [
...
"transform-object-rest-spread",
],
...
}

Favor Array Methods
(map, reduce, find, filter)

Collecting items to arrays
+
Arrow Functions
=
Happiness

Khan Academy
Consumer code. Not a library.

Khan Academy
Object Oriented
Complexity hidden behind interface
Popular in typescript (angular 2) world

export default class Expression extends Node {
constructor(...nodes) {
super();
this.type = 'Expression';
this.children = new List(this, ...nodes);
}
toString() {
return `${this.type}:${this.children.toString()}`;
}
toJSON() {
return {
...super.toJSON(),
children: [...f(this.children).map(child => child.toJSON())],
};
}
clone(uniqueId = false) {
...

iii. Feature Popularity: Frequency
The more useful the feature the more frequent it will pop up.

iii. Feature Popularity: Frequency
In Shakespeare:
The top 10 most frequently occuring words make up 21.4%
of all words.
 
The top 100 most frequently occuring words make up 53.9%
of all words.

super();
}
toString() {
}
get last() {
return this.children.last;
}
set last(value) {
this.children.last = value;
}
}

const e = new Expression({id:1}, {id:2}, {id:3})
e = {
children: {
first: {
id: 1,
next: {
id: 2,
next: {
id: 3
}
}
},
last: {
id: 3
}
}
}

e = {
children: {
first: {
id: 1,
next: {
id: 2,
next: {
id: 3
}
}
},
last: {
id: 3
}
}
}
Linked List

get last() {
return this.children.last;
}
set last(value) {
}
}

Get/Set treats methods like
properties (popular in
typescript)

e = {
children: {
first: {
id: 1,
next: {
id: 2,
next: {
id: 3
}
}
},
last: {
id: 3
}
}
}
e.last;
// { id: 3 }

e = {
children: {
first: {
id: 1,
next: {
id: 2,
next: {
id: 3
}
}
},
last: {
id: 3
}
}
}
e.last = { id.4 }

e = {
children: {
first: {
id: 1,
next: {
id: 2,
next: {
id: 3
}
}
},
last: {
id: 4
}
}
}
e.last = { id.4 }

get last() {
return Object.assign(
{}, { name:'last' }, this.children.last
);
}
set last(value) {
}
}

e = {
children: {
first: {
id: 1,
next: {
id: 2,
next: {
id: 3
}
}
},
last: {
id: 3
}
}
}
e.last
{
name: ‘last’,
id: 3, 
}

super();
}
toString() {
}
get first() {
return this.children.first;
}
set first(value) {
this.children.first = value;
}
}

toString() {
}
}

toString() {
return this.type + ':' + this.children.toString();
}
}

export default class List extends Node {
...
toString() {
let first = true;
for (let node of this) {
if (!first) {
result += ", ";
} else {
first = false;
}
result += node.id;
}
return result;
}
}

export default class List extends Node {
...
toString() {
let first = true;
for (let node of this) {
// Do Stuff with node.id
}
}
}

const presentation = [
'ES6 Patterns in the Wild',
'Joe Morgan',
]
for(let metadata of presentation) {
console.log(metadata);
}

const presentation = [
'ES6 Patterns in the Wild',
'Joe Morgan',
]
}
// ES 6 Patterns in the Wild
// Joe Morgan

const presentation = {
title: 'ES6 Patterns in the Wild',
author: 'Joe Morgan',
}
}

}
}
> TypeError: presentation[Symbol.iterator] is not a function

export default class List {
...
*[Symbol.iterator]() {
let node = this.first;
while (node != this.last) {
let current = node;
node = node.next;
yield current;
}
if (this.last) {
yield this.last;
}
}
}

iii. Feature Popularity:
Not all features end up being popular

e = [{id:1}, {id:2}, {id:3}]

Khan Academy
Create Simple Interfaces

canUseCollections = (
...
typeof Map === 'function' &&
isNative(Map) &&
...
);
if (canUseCollections) {
var itemMap = new Map();
var rootIDSet = new Set();
setItem = function(id, item) {
itemMap.set(id, item);
};
getItem = function(id) {
return itemMap.get(id);
};
...
}
else {
var itemByKey = {};
var rootByKey = {};
var getKeyFromID = () => {}
var getIDFromKey = () => {}
setItem = function(id, item) {
var key = getKeyFromID(id);
itemByKey[key] = item;
};
getItem = function(id) {
var key = getKeyFromID(id);
return itemByKey[key];
};
...
}

}
> presentation.title
// 'ES6 Patterns in the Wild'

const presentation = new Map();
presentation.set('title', 'ES6 Patterns in
the Wild');
presentation.set('author', 'Joe Morgan');
> presentation.get('title');

const presentation = new Map()
.set('title', 'ES6 Patterns in the Wild')
.set('author', 'Joe Morgan');

const presentation = new Map([
['title', 'ES6 Patterns in the Wild'],
['author', 'Joe Morgan']
]);

React
As ES6 becomes native there
are advantages beyond style

Build a Library of Readable Code

Lurk Around Github
Advanced Search

var data = [1,2,3,4];
var updated = [];
for(var i = 0; i < data.length; i++) {
updated.push(i*i);
}
return updated;

const data = [1,2,3,4];
return data.map(n => n*n);

Perfection is finally attained not
when there is no longer anything
to add, but when there is no
longer anything to take away

Joe Morgan
@joesmorgan
thejoemorgan.com

Joe Morgan
@joesmorgan
thejoemorgan.com
https://github.com/jsmapr1

ES6 patterns in the wild

More Related Content

What's hot (20)

Similar to ES6 patterns in the wild (20)

More from Joe Morgan (6)

Recently uploaded (20)

ES6 patterns in the wild