Diving into React.js/Flux Hasitha Liyanage ([email protected])

// the old way of updating UI based on AJAX $.ajax({ url: "foo.com/users", }).done(function(data) { data.forEach(function(item) { $(item.id).html(item.title); }); });



Then and now Page refreshes Server side rendering Manual UI updates Client side MVC

AJAX/SPA Client side templating Reactive UIs Web Components Flux

{currentPage}




Model

Controller

View

Widget User Comments

// imagine: the inside of 'custom tags' // widget.js var Widget = createComponent({ render: function() { return (
{this.data.name}
); } }); // index.html

What is React.js? A Reactive, Component Based JavaScript UI Library

var Hello = React.createClass({ render: function() { return
Hello {this.props.name}
; // JSX! } }); ReactDOM.render( , document.getElementById('container') ); http://facebook.github.io/react/

var Timer = React.createClass({ render: function() { return (
Seconds Elapsed: {this.state.secondsElapsed}
); }, getInitialState: function() { return {secondsElapsed: 0}; }, componentDidMount: function() { this.interval = setInterval(this.tick, 1000); }, componentWillUnmount: function() { clearInterval(this.interval); }, tick: function() { this.setState({secondsElapsed: this.state.secondsElapsed + 1}); } }); // http://facebook.github.io/react/

Flux

Unlike Angular and Ember, React only provides the V in MVC

View

View

View

Controller

Controller

Controller

Model

Model

Model

"Store" A slight but very important abstraction on top of a "model"

Post Store Action View (Component)

createPost editPost addComment favorite

Event + Read Data

This cleanly splits view logic and storage logic, but doesn't help MVC spaghettification

View

Store

Actions

View

Store Dispatcher

Events

View

Store

View

Store Read state

// from the create view Dispatcher.dispatch({ actionType: CREATE_WIDGET, name: 'My Widget', size: 10 }); // in the widget store function onAction(action) { switch(action.actionType) { case CREATE_WIDGET: // write to storage, send to server etc. this.emit('change'); break; } }

Points to remember: A component knows nothing about its environment except what it receives via props

this.state = your data (private) this.props = others' data (read-only)

A component should know nothing about storage logic (only view logic)

A store should know nothing about display logic (only storage logic)

The only way to mutate the store is by sending it actions

Components should listen to change events of relevant stores and re-read data on change

Questions? Or, @h_liyan [email protected] [email protected] [email protected] [email protected]

Diving into React.js/Flux - GitHub

the old way of updating UI based on AJAX. $.ajax({ url: "foo.com/users",. }).done(function(data) { data.forEach(function(item) {. $(item.id).html(item.title);. }); }); ...

95KB Sizes 9 Downloads 351 Views

Recommend Documents

"into the past" "specialization" - GitHub
Agent. Agent. Agent. Entity. Agent. Data. DDS. Data. DDS netcdf_handler. 3.9.3 ascii. 4.1.3 dap_module. 3.9.2 netcdf_handler ascii dap_module.

Channel.fromPath ifEmpty map into alignments datasetsA ... - GitHub
Page 1. Channel.fromPath. ifEmpty map into alignments. datasetsA default_alignments. datasetsB create_strap_alignments. alternativeAlignmentDirectories_A.

Robotic Mapping into the Fourth Dimension - GitHub
... for Autonomous Systems Research. School of Computer Science .... the time-scale in a local map is data-driven (choose the time-scale that best fits the data) ...

NOAA Diving Manual
... increasingly difficult to do anything on your phone nowadays without sharing ... Snapchat filters Facebook status updates If you’re away from home and in ... of chemtrail conspiracy theorists NASA’s plan to create red and blue green

LOFAR Imager: taking Direction Dependent Effects into ... - GitHub
Grid the data. Gridding in practice ... Beam is variable in frequency and time. - Beam can be ... Big field of view : station, direction, time and frequency dependent.

Incorporating Commercial and Private Data into an Open ... - GitHub
Additionally, pharmaceutical companies have built up their own private ... Open PHACTS Discovery Platform9 [10] (Section 4), that will integrate pharma-.

Scuba Diving Plan copy.pdf
There was a problem previewing this document. Retrying... Download. Connect more apps... Try one of the apps below to open or edit this item. Scuba Diving Plan copy.pdf. Scuba Diving Plan copy.pdf. Open. Extract. Open with. Sign In. Main menu.

Robotic Mapping into the Fourth Dimension - continued - GitHub
P,Q – input point clouds, S – resulting point cloud, d – distance threshold ... Security, assistive care, etc. .... Spatio-temporal information-driven Next Best View.

Download-This-Diving-Snorkeli.pdf
Connect more apps... Try one of the apps below to open or edit this item. Download-This-Diving-Snorkeli.pdf. Download-This-Diving-Snorkeli.pdf. Open. Extract.

20150627 SCUBA Diving waiver.pdf
20150627 SCUBA Diving waiver.pdf. 20150627 SCUBA Diving waiver.pdf. Open. Extract. Open with. Sign In. Main menu. Displaying 20150627 SCUBA Diving ...

PADI Youth Diving Responsibility and risks Acknowledgment.pdf ...
There was a problem previewing this document. Retrying... Download. Connect more apps... Try one of the apps below to open or edit this item. PADI Youth ...

IMCAD010 Diving Operations from DP Vessels.pdf
There was a problem previewing this document. Retrying... Download. Connect more apps... Try one of the apps below to open or edit this item. Main menu.

Maldives Diving Vacation 3 Nights 6 Dive Package
08:45 Meet at the dive shop. 09:00 Departure. 13:00 Back to the Hotel. Start your rasdhoo atoll adventure from north rasdhoo atoll and we will start with easy ...

Springboard and Platform Diving - 2nd Edition
... A Celebration of the Game That Connects Us All - Lee Gutkind - Book,Download PDF The San Francisco 49ers: The First Fifty Years - Glenn Dickey - Book.

[PDF Online] Lonely Planet Diving Snorkeling Hawaii
... in srv users serverpilot apps jujaitaly public index php on line 447Retrouvez toutes ... adventures for all, from snorkelers to divers, from the novice to the expert.