Embed Size (px)
Citation preview
The Ecosystem:Making Sense of the Madness
JS
www.popart.com
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
The JS Ecosystem: Making Sense of the Madness - @EthanRBrown - http://jseco.zepln.com/
KNOWTHE
BIGPICTURE
The JS Ecosystem: Making Sense of the Madness - @EthanRBrown - http://jseco.zepln.com/
JS
webpack
Babel
Express
Node
IoT
TypeScriptClojureScript
WebAssembly
Angular
React
Vue
ReactNative
NativeScript
Elm
JS
webpack
Babel
Express
Node
IoT
TypeScriptClojureScript
WebAssembly
Angular
React
Vue
ReactNative
NativeScript
Elm
JS
webpack
Babel
Express
Node
IoT
ReactNative
NativeScript
TypeScriptClojureScript
WebAssembly
Angular
React
Vue
Elm
JS
webpack
Babel
Express
Node
IoT
TypeScriptClojureScript
Elm
WebAssembly
Angular
React
Vue
ReactNative
NativeScript
JS
webpack
Babel
Express
Node
IoT
TypeScriptClojureScript
WebAssembly
Angular
React
Vue
ReactNative
NativeScript
Elm
JS
webpack
Babel
Express
Node
IoT
TypeScriptClojureScript
WebAssembly
Angular
React
Vue
ReactNative
NativeScript
Elm
JS
webpack
Babel
Express
Node
IoT
TypeScriptClojureScript
WebAssembly
Angular
React
Vue
ReactNative
NativeScript
Elm
KNOW
JS
(i mean really know it)
The JS Ecosystem: Making Sense of the Madness - @EthanRBrown - http://jseco.zepln.com/
What are the three ways that arrow functions (=>) are different from functions declared with the function keyword?
Q1
The JS Ecosystem: Making Sense of the Madness - @EthanRBrown - http://jseco.zepln.com/
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
The JS Ecosystem: Making Sense of the Madness - @EthanRBrown - http://jseco.zepln.com/
Object Spread
const b = {
...a,
x: "override",
}
Q3const c = {
x: "default",
...a,
}
The JS Ecosystem: Making Sense of the Madness - @EthanRBrown - http://jseco.zepln.com/
Destructuring
const { foo, bar, baz } = obj
const { target: { value } } = evt
const [ a, b, ...rest ] = arr
Q4
The JS Ecosystem: Making Sense of the Madness - @EthanRBrown - http://jseco.zepln.com/
Computed Property Names / Property Shorthand
const name = "Daenerys"
const chars = {
[name]: { name, role: "Ultimate Bada**" },
}
Q5
The JS Ecosystem: Making Sense of the Madness - @EthanRBrown - http://jseco.zepln.com/
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
The JS Ecosystem: Making Sense of the Madness - @EthanRBrown - http://jseco.zepln.com/
String Templates
`Hello, ${name}, you were born
in ${new Date.getFullYear() - age}!`
Q7
The JS Ecosystem: Making Sense of the Madness - @EthanRBrown - http://jseco.zepln.com/
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
The JS Ecosystem: Making Sense of the Madness - @EthanRBrown - http://jseco.zepln.com/
Class Fields
class Thing {
foo = 33
static baz = 15
bloop() { return 'bloop' }
bloz = () => 'bloz'
}
Q9
The JS Ecosystem: Making Sense of the Madness - @EthanRBrown - http://jseco.zepln.com/
for...of
for(let x of nums) {
console.log(x)
}
for(let x in nums) {
console.log(x)
}
What's the difference?Q10
The JS Ecosystem: Making Sense of the Madness - @EthanRBrown - http://jseco.zepln.com/
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
The JS Ecosystem: Making Sense of the Madness - @EthanRBrown - http://jseco.zepln.com/
Don't Worry About
● Generators (primary use case replaced by async/await)
● Symbols
● OOP
The JS Ecosystem: Making Sense of the Madness - @EthanRBrown - http://jseco.zepln.com/
KNOWYOUR
PARADIGMS
The JS Ecosystem: Making Sense of the Madness - @EthanRBrown - http://jseco.zepln.com/
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
The JS Ecosystem: Making Sense of the Madness - @EthanRBrown - http://jseco.zepln.com/
IMMUTABILITY
● Natural fit for functional programming
● Identity comparison is fast and cheap in JavaScript
● Natural safety net encourages experimentation
The JS Ecosystem: Making Sense of the Madness - @EthanRBrown - http://jseco.zepln.com/
CHOOSEYOUR
STACK
The JS Ecosystem: Making Sense of the Madness - @EthanRBrown - http://jseco.zepln.com/
SIMPLE COMPLEX
FLEXIBLE
RIGID
Ember
Junior Developers
React + "Everything"
Thank you Ryan Stevens of Lending Club! https://youtu.be/CIVhvhdISRI
The JS Ecosystem: Making Sense of the Madness - @EthanRBrown - http://jseco.zepln.com/
SIMPLE COMPLEX
FLEXIBLE
RIGID
Ember
Senior Developers
React + "Everything"
Thank you Ryan Stevens of Lending Club! https://youtu.be/CIVhvhdISRI
The JS Ecosystem: Making Sense of the Madness - @EthanRBrown - http://jseco.zepln.com/
THANK YOU
The JS Ecosystem: Making Sense of the Madness - @EthanRBrown - http://jseco.zepln.com/
