Why
is Awesome
that's the React logo!
Adam MIskiewicz
Interactive Director/Founder @ Chalk + cHISEL
INTRO....WHAT'S REACT?
WHY IS REACT AWESOME?
IS IT BECAUSE IT'S FAST?
is it ACTUALLY fast tho?
paul lewis says "not really".
I PROMISE, IT'S fast enough.
"BUT NOT FOR MY APP", you say.
How do you make it fast?
shouldComponentUpdate()THE END
(FOR THIS TALK)
Ok fine.
the virtual dom!
ReALLY, REALLY COOL.
You should watch this: https://www.youtube.com/watch?v=-DX3vJiqxm4
...But it's kind of a commodity.
So if react isn't awesome because of it's speed or the fancy schmancy vDOM...
why iS It awesome?
ENCOURAGES Good Programming Practices
React and it's ecosystem have,
Without question,
made me a better developer
HOW HAS IT DONE THIS?
Functional programming
UI iS hard because of state Management.
React components* are:
-
IDEMPOTENT
-
COMPOSABLE
* Well-written React Components
Immutability
Shared mutable state is the root of all evil
- Lots of people
IMMUTABLE DATA STRUCTURES AND REACT ARE GOOD GOOD FRIENDS
shouldComponentUpdate()
COMPOSITION > INHERITANCE
Object-oriented programming is an exceptionally bad idea which could only have originated in California
- Edsger W. Dijkstra
Don't
class MyComponent extends React.Component {
render() {
return <div>Stuff with {this.props.aProp}</div>
}
}
class MyOtherMorePowerfulComponent extends MyComponent {
render() {
super();
...[i don't even know what to do here cuz it's bad and I don't do bad stuff].
}
}DO
class MyComponent extends React.Component {
render() {
return <div>Stuff with {this.props.aProp}</div>
}
}
export default wrapComponent(MyComponent);
function wrapComponent(component) {
return class MyHOC extends React.Component {
render() {
return <MyComponent anotherPropINeedToSend="blah!" {...this.props} />
}
}
}Don't ALWAYS FOLLOW THE MANTRA...
BUT FOLLOW IT MOST OF THE TIME.
+ HOT RELOADING
it's not just AMazing. It's useful .
It'd be hard to do this in ember, angular, etc.
May be impossible with their current architectures, but I'm not sure.
Demo
Universal/Isomorphic
let's just call it universal, K?
Render it on the server!1!1!!!1!111!
JSX
NOT A TEMPLATING LANGUAGE
React.createElement(props, [child, child...])
DECLARATIVE LANGUAGE
TO DESCRIBE TREE STRUCTURES AND ATTRIBUTES
CAN RENDER TO ANYTHING
I'm ACTUALLY NOT EXAGGERATING.
DOM REALLY IS JUST AN IMPLEMENTATION DETAIL
Another video to watch, yay!
SO, SOME REALLY AWESOME STUFF...
NATIVE MOBILE APPS
not the actual Gibson logo. Couldn't find that. This ones cooler cuz it's from Family Guy.
GET's EVEN COOLER...
return React.createElement(
ReactTHREE.Scene,
{
width: window.innerWidth,
height: window.innerHeight,
camera: 'camera',
antialias: true,
background: 0xEEEEEE
},
CameraElement,
RobotRobbyElement,
RobotMechElement,
AmbientLight,
DirectionalLight
)
React-Art
OR REALLY REALLY BATSHIT CRAZY
Ecosystem
Flux...
Or better yet, Redux
Relay/GraphQL
React-motion
Developer Experience (or DX )
Incremental adoption
STABLE.
Facebook.com runs off of Master.
ENTIRE CLASSES OF PROBLEMS DISAPPEAR.
Fin
@skevy on
adam@chalkchisel.com
Why React is Awesome
By Adam Miskiewicz
