JavaScript Making Sense of the Madness - schd.wsschd.ws/hosted_files/nina17/b8/JavaScript- Making Sense of the... · FUNCTIONAL PROGRAMMING No more side-effects! ... Identity comparison

The Ecosystem:Making Sense of the Madness

JS

www.popart.com

Ethan BrownDirector of Engineering

@[email protected]

UNDERGRAD

VCUMBA

PSUBOOKSLOCATION

PDX

PLEASEFOLLOW

ALONG

https://jseco.zepln.com

The JS Ecosystem: Making Sense of the Madness - @EthanRBrown - http://jseco.zepln.com/

I mean, OOP was good back in the days, and it still has its uses today, but now everyone is realising modifying states is equivalent to kicking babies, so now everyone is moving to immutable objects and functional programming. Haskell guys had been calling it for years, -and don’t get me started with the Elm guys

https://hackernoon.com/how-it-feels-to-learn-javascript-in-2016-d3a717dd577f


KNOWTHE

BIGPICTURE


JS

webpack

Babel

Express

Node

IoT

TypeScriptClojureScript

WebAssembly

Angular

React

Vue

ReactNative

NativeScript

Elm

JS

webpack

Babel

Express

Node

IoT


WebAssembly

Angular

React

Vue

ReactNative

NativeScript

Elm

JS

webpack

Babel

Express

Node

IoT

ReactNative

NativeScript


WebAssembly

Angular

React

Vue

Elm

JS

webpack

Babel

Express

Node

IoT


Elm

WebAssembly

Angular

React

Vue

ReactNative

NativeScript

JS

webpack

Babel

Express

Node

IoT


WebAssembly

Angular

React

Vue

ReactNative

NativeScript

Elm

JS

webpack

Babel

Express

Node

IoT


WebAssembly

Angular

React

Vue

ReactNative

NativeScript

Elm

JS

webpack

Babel

Express

Node

IoT


WebAssembly

Angular

React

Vue

ReactNative

NativeScript

Elm

KNOW

JS

(i mean really know it)


What are the three ways that arrow functions (=>) are different from functions declared with the function keyword?

Q1


Array Spread / Rest Parameters

const newNames = [

...names.slice(0, 7),

"Summer",

...names.slice(7)

]

const maxAge = Math.max(...ages)

function strPad(prefix, suffix, ...strings) {

return strings.map(s => prefix + s + suffix)

}

Q2


Object Spread

const b = {

...a,

x: "override",

}

Q3const c = {

x: "default",

...a,

}


Destructuring

const { foo, bar, baz } = obj

const { target: { value } } = evt

const [ a, b, ...rest ] = arr

Q4


Computed Property Names / Property Shorthand

const name = "Daenerys"

const chars = {

[name]: { name, role: "Ultimate Bada**" },

}

Q5


Promises

return Promise.resolve()

.then(() => new Promise((resolve, reject) =>

readFile('file.txt', (err, data) => err ?

reject(err) : resolve(data))

))

.catch(err => console.error(err))

Q6


String Templates

`Hello, ${name}, you were born

in ${new Date.getFullYear() - age}!`

Q7


async / await

async function foo() {

const stuff = await fetch('/stuff').then(res => res.json())

const [things, facts] = Promise.all([

fetch(`/things?subject=${stuff.topic}`),

fetch(`/facts?subject=${stuff.topic}`),

])

console.log(things, facts)

} Q8


Class Fields

class Thing {

foo = 33

static baz = 15

bloop() { return 'bloop' }

bloz = () => 'bloz'

}

Q9


for...of

for(let x of nums) {

console.log(x)

}

for(let x in nums) {

console.log(x)

}

What's the difference?Q10


export / import

export default Foo

export { Foo }

export { default as Foo } from './Foo'

export { default as Bar } from './Bar'

import Foo from './Foo'

import { Foo } from './Foo'

import { Foo, Bar } from './dir'

Q11


Don't Worry About

● Generators (primary use case replaced by async/await)

● Symbols

● OOP


KNOWYOUR

PARADIGMS


FUNCTIONAL PROGRAMMING

● No more side-effects!

● Better composability

● Better testabilityλThe JS Ecosystem: Making Sense of the Madness - @EthanRBrown - http://jseco.zepln.com/

ONE-WAY DATA BINDING● Application state easier to manage

● Encourages "whole-application thinking"

● Time-travel debugging


IMMUTABILITY

● Natural fit for functional programming

● Identity comparison is fast and cheap in JavaScript

● Natural safety net encourages experimentation


CHOOSEYOUR

STACK


SIMPLE COMPLEX

FLEXIBLE

RIGID

Ember

Junior Developers

React + "Everything"

Thank you Ryan Stevens of Lending Club! https://youtu.be/CIVhvhdISRI


SIMPLE COMPLEX

FLEXIBLE

RIGID

Ember

Senior Developers

React + "Everything"

Thank you Ryan Stevens of Lending Club! https://youtu.be/CIVhvhdISRI


THANK YOU


JavaScript Making Sense of the Madness - schd.wsschd.ws/hosted_files/nina17/b8/JavaScript- Making Sense of the... · FUNCTIONAL PROGRAMMING No more side-effects! ... Identity comparison

Documents