React JS

This Guy

• Software Engineer at feature[23]

• I can haz degrees in muzak and puterz

• I beer, fish, and party on guitars

• I currently dig FRP, IOT, and JS (the good parts…)

• A JavaScript library for building User Interfaces*

• It was created by the engineering team at facebook• https://code.facebook.com/projects/

• A (Smart) View Engine of sorts

• It is not a client-side, MVC/MVVM/MW*, framework

So, What Is React?

What Does React Do?

• React renders your UI

• React responds to user interactions

• React reduces complexity

• React tackles performance issues for you, behind the scenes

This Sounds Familiar• It is… and isn’t• http://www.todomvc.com

• Two-way data binding is great… and isn’t• Cascading effects and interdependent data• State over time

• Templates are great… until they aren’t• Constrained Template Engines/Languages• Cohesion over Coupling• Templates don’t respect state

• Frameworks are great… and aren’t• Just a View Engine, and just JavaScript• Truly reusable and plays nicely with existing frameworks and libraries• No esoteric concepts

React Concepts Notions

• Components• Manage their own state• Handle interactions through explicit and declarative events• Separate responsibilities

• Higher maintainability• Great for debugging• Great for testing

• Props• Data that is passed to a component• Immutable

• State• Immutable… sort of• this.setState()• “Re-render” entire app on state change

• This sounds horribly inefficient…No esoteric concepts?!?!

…these aren’t new concepts

Virtual DOM(this is)

• A virtual, in memory, representation of the real DOM• Changes in the real DOM trigger changes to the state of your React

Component• When state changes, React creates a new representation of the virtual DOM

based on what has changed.• React diffs between the original representation and the new representation

of the Virtual DOM.• React determines the minimal set of operations necessary to update the real

DOM and batch processes them as a patch to the real DOM.• In effect, you have “re-rendered” your application, but you haven’t lost any

state in the real DOM (scroll position, timers, etc.)

Why a Virtual DOM?

• Because the real DOM is slow and clunky• …and you don’t know all the implications of changing DOM or Style

• http://www.csstriggers.com

• Because “re-rendering” your entire application every time state changes would be unbelievably slow (a la 1990s style page refreshes) in the modern web.• But those 90s people had some things right• Wrapping state around a stateless protocol is...

• Diffing Immutable Data Structures is fast• http://en.wikipedia.org/wiki/Hash_array_mapped_trie• You only update the path/parts that changed

• Browser Compatibility and Normalization• Fix all the things! (that the DOM is horrible at)

Heuristics

• Accepted rules to allow for O(N) diffing computation• Versus O(N3)

• Keys• Seriously, a lack of keys will cause crazy behavior• Without keys, React won’t be able to know about dynamic DOM updates

• Single Node• Components must return a single node• Can return any number of nodes within that• Use parentheses (just do it)

• Component Levels• Components should never move vertically

JSX

• Completely Optional

• XML-usg syntactic sugar

• Easier to reason about for engineers

• Easier for designers to contribute

• Give it a try

JSX

JSX

Gotchas

• Including JSX Transformer• <script type=“text/jsx”></script>• <div style={wtf}></div>• <div className={wtf}></div>

• ClassSet makes up for this annoyance

• Components must return a single element• Auto-binding of this and closures• KEYS

• Seriously, these are crucial• Must be unique

Why Use It?

• Portable/Agnostic

• Performance

• Maintenance

• Comprehensible

• Testable

Demo

Resources

• YouTubez• David Nolen: Immutability, Interactivity, and JavaScript • Tom Occhino and Jordan Walke: Introduction to ReactJS• Pete Hunt: Rethinking Best Practices• Steven Luscher: Developing User Interfaces with ReactJS• Just look up ‘ReactJS’ on YouTube, there are some other great videos

• Links• ReactJS• ReactJS.NET• Flux• Virtual DOM

Flux