Upgrade to Pro — share decks privately, control downloads, hide ads and more …

React + Firebase

React + Firebase

The presentation for GCPUG for Taiwan.
gcpugtw.kktix.cc/events/bfa4bc0a

Yuichiro MASUI

May 08, 2015
Tweet

More Decks by Yuichiro MASUI

Other Decks in Programming

Transcript

  1. Nice to meet u. I’m Ichi • Yuichiro MASUI @masuidrive

    • Toreta, Inc CTO / co-founder • Ruby, Javascript, Obj-C and many languages • Programming lover
  2. Questions If you have questions in this session, please tweet

    with #GCPUG My hearing skill is poor :-p
  3. Firebase • One of BaaS (Backend as a Service) •

    Realtime Database • Simple Login • Hosting
  4. Realtime database • NoSQL - JSON friendly database • Libraries:

    Javascript (Browser/Node), iOS, Android • REST API • A lot of examples and tutorials
  5. Realtime database • NoSQL - JSON friendly database • Libraries:

    Javascript (Browser/Node), iOS, Android • REST API • A lot of examples and tutorials { key1: “VAL1”, key2: “VAL2”, key3: { key4: “VAL4” } }
  6. Realtime database • NoSQL - JSON friendly database • Libraries:

    Javascript (Browser/Node), iOS, Android • REST API • A lot of examples and tutorials { key1: “VAL1”, key2: “VAL2”, key3: { key4: “VAL4” } } GET “/key1”
  7. Realtime database • NoSQL - JSON friendly database • Libraries:

    Javascript (Browser/Node), iOS, Android • REST API • A lot of examples and tutorials { key1: “VAL1”, key2: “VAL2”, key3: { key4: “VAL4” } } GET “/key1” “VAL1”
  8. Realtime database • NoSQL - JSON friendly database • Libraries:

    Javascript (Browser/Node), iOS, Android • REST API • A lot of examples and tutorials { key1: “VAL1”, key2: “VAL2”, key3: { key4: “VAL4” } } GET “/key1” “VAL1” GET “/key3/key4”
  9. Realtime database • NoSQL - JSON friendly database • Libraries:

    Javascript (Browser/Node), iOS, Android • REST API • A lot of examples and tutorials { key1: “VAL1”, key2: “VAL2”, key3: { key4: “VAL4” } } GET “/key1” “VAL1” GET “/key3/key4” “VAL4”
  10. Realtime database • NoSQL - JSON friendly database • Libraries:

    Javascript (Browser/Node), iOS, Android • REST API • A lot of examples and tutorials
  11. Why Firebase? • Almost web app is front end of

    DB • Browser Javascript API • Security and role
  12. But • Hard to build realtime web app on Javascript

    • DOM manipulation is too complex
  13. DOM is global variables <div id=“item-1”> <span id=“item-1-text” class=“hidden”>foo</span> </div>

    DOM has state <button id=“add-item”>Add</a> Divided operations
 from DOM <div id=“item-1”> <span id=“item-1-text”>foo</span> </div> Anybody can change DOM
  14. Client side logic Synchronous web app Browser Logic = Controller

    HTTP request Server User HTML generator (render) HTML generator (template engine) Generated state (setState) Generated state (template variables)
  15. Client side logic Browser Server User Event (onSubmit) React.js Server

    side logic HTML generator (render) Generated state (setState)
  16. React.js • Javascript library for building UI • Born from

    Facebook in ~2013 • Expanded to other companies • HipChat, AirBnB, Codecademy…
  17. Building UI • Just UI library • Components • Facebook

    provide Flux architecture framework • One direction flow
  18. var App = React.createClass({ getInitialState: function(){ return({items:[”abc”, ”def”]}); }, render:

    function() { return <div><ul> {this.state.items.map(function(item) { return <li>{item}</li> })} </ul></div>; } }); React.render(<App />, document.body);
  19. var App = React.createClass({ getInitialState: function(){ return({items:[”abc”, ”def”]}); }, render:

    function() { return <div><ul> {this.state.items.map(function(item) { return <li>{item}</li> })} </ul></div>; } }); React.render(<App />, document.body);
  20. var App = React.createClass({ getInitialState: function(){ return({items:[”abc”, ”def”]}); }, render:

    function() { return <div><ul> {this.state.items.map(function(item) { return <li>{item}</li> })} </ul></div>; } }); React.render(<App />, document.body);
  21. var App = React.createClass({ getInitialState: function(){ return({items:[”abc”, ”def”]}); }, render:

    function() { return <div><ul> {this.state.items.map(function(item) { return <li>{item}</li> })} </ul></div>; } }); React.render(<App />, document.body);
  22. var App = React.createClass({ mixins: [ReactFireMixin], getInitialState: function(){ return({items:[]}); },

    componentWillMount: function() { fb = new Firebase(this.props.url); this.bindAsArray(fb, "data"); this.firebaseRefs[“data"] .on("child_added", this.add.bind(this)); }, add: function(snapshot) { this.setState({ items: this.state.items.concat([snapshot.val()]) }); }, render: function() { return <div><ul> {this.state.items.map(function(item){ return <li>{item}</li> })} </ul></div>; } }); React.render(<App url=“https://demo.firebaseio.com/”/>, document.body);
  23. var App = React.createClass({ mixins: [ReactFireMixin], getInitialState: function(){ return({items:[]}); },

    componentWillMount: function() { fb = new Firebase(this.props.url); this.bindAsArray(fb, "data"); this.firebaseRefs[“data"] .on("child_added", this.add.bind(this)); }, add: function(snapshot) {
  24. var App = React.createClass({ mixins: [ReactFireMixin], getInitialState: function(){ return({items:[]}); },

    componentWillMount: function() { fb = new Firebase(this.props.url); this.bindAsArray(fb, "data"); this.firebaseRefs[“data"] .on("child_added", this.add.bind(this)); }, add: function(snapshot) {
  25. var App = React.createClass({ mixins: [ReactFireMixin], getInitialState: function(){ return({items:[]}); },

    componentWillMount: function() { fb = new Firebase(this.props.url); this.bindAsArray(fb, "data"); this.firebaseRefs[“data"] .on("child_added", this.add.bind(this)); }, add: function(snapshot) {
  26. var App = React.createClass({ mixins: [ReactFireMixin], getInitialState: function(){ return({items:[]}); },

    componentWillMount: function() { fb = new Firebase(this.props.url); this.bindAsArray(fb, "data"); this.firebaseRefs[“data"] .on("child_added", this.add.bind(this)); }, add: function(snapshot) {
  27. var App = React.createClass({ mixins: [ReactFireMixin], getInitialState: function(){ return({items:[]}); },

    componentWillMount: function() { fb = new Firebase(this.props.url); this.bindAsArray(fb, "data"); this.firebaseRefs[“data"] .on("child_added", this.add.bind(this)); }, add: function(snapshot) {
  28. .on("child_added", this.add.bind(this)); }, add: function(snapshot) { this.setState({ items: this.state.items.concat([snapshot.val });

    }, render: function() { return <div><ul> {this.state.items.map(function(item){ return <li>{item}</li> })} </ul></div>; } });
  29. .on("child_added", this.add.bind(this)); }, add: function(snapshot) { this.setState({ items: this.state.items.concat([snapshot.val });

    }, render: function() { return <div><ul> {this.state.items.map(function(item){ return <li>{item}</li> })} </ul></div>; } });
  30. .on("child_added", this.add.bind(this)); }, add: function(snapshot) { this.setState({ items: this.state.items.concat([snapshot.val });

    }, render: function() { return <div><ul> {this.state.items.map(function(item){ return <li>{item}</li> })} </ul></div>; } });
  31. .on("child_added", this.add.bind(this)); }, add: function(snapshot) { this.setState({ items: this.state.items.concat([snapshot.val });

    }, render: function() { return <div><ul> {this.state.items.map(function(item){ return <li>{item}</li> })} </ul></div>; } });
  32. One direction flow • Can’t read value of <input/> <input

    value={this.state.email} onChange={handle} /> handle: function(event) { this.setState({email: event.target.value}); }
  33. One direction flow • Can’t read value of <input/> <input

    value={this.state.email} onChange={handle} /> handle: function(event) { this.setState({email: event.target.value}); }
  34. One direction flow • Can’t read value of <input/> <input

    value={this.state.email} onChange={handle} /> handle: function(event) { this.setState({email: event.target.value}); }
  35. handleUpdateText: function(e) { this.setState({ newText: e.target.value }); }, handlePost: function(e)

    { this.firebaseRefs[“data”].push(this.state.newText); this.setState({newText: “”}); }, render: function() { return <div> <ul> {this.state.items.map(function(item){ return <li>{item}</li> })} </ul> <textarea value={this.state.newText} onChange={this.handleUpdateText} /> <button onClick={this.handlePost}>Post</button> </div>; }
  36. handleUpdateText: function(e) { this.setState({ newText: e.target.value }); }, handlePost: function(e)

    { this.firebaseRefs[“data”].push(this.state.newText); this.setState({newText: “”}); }, render: function() { return <div> <ul> {this.state.items.map(function(item){ return <li>{item}</li> })} </ul> <textarea value={this.state.newText} onChange={this.handleUpdateText} /> <button onClick={this.handlePost}>Post</button> </div>; }
  37. handleUpdateText: function(e) { this.setState({ newText: e.target.value }); }, handlePost: function(e)

    { this.firebaseRefs[“data”].push(this.state.newText); this.setState({newText: “”}); }, render: function() { return <div> <ul> {this.state.items.map(function(item){ return <li>{item}</li> })} </ul> <textarea value={this.state.newText} onChange={this.handleUpdateText} /> <button onClick={this.handlePost}>Post</button> </div>; }
  38. handleUpdateText: function(e) { this.setState({ newText: e.target.value }); }, handlePost: function(e)

    { this.firebaseRefs[“data”].push(this.state.newText); this.setState({newText: “”}); }, render: function() { return <div> <ul> {this.state.items.map(function(item){ return <li>{item}</li> })} </ul> <textarea value={this.state.newText} onChange={this.handleUpdateText} /> <button onClick={this.handlePost}>Post</button> </div>; }
  39. handleUpdateText: function(e) { this.setState({ newText: e.target.value }); }, handlePost: function(e)

    { this.firebaseRefs[“data”].push(this.state.newText); this.setState({newText: “”}); }, render: function() { return <div> <ul> {this.state.items.map(function(item){ return <li>{item}</li> })} </ul> <textarea value={this.state.newText} onChange={this.handleUpdateText} /> <button onClick={this.handlePost}>Post</button> </div>; }
  40. Sample App • Keep collaborate journals app • React +

    FireBase • https://bit.ly/gcpug0508 • http://github.com/masuidrive/journals • Not for production yet. Keep develop now.
  41. Wrap up • Firebase is realtime database provider • Can

    build app with Javascript only • React.js is smart library and architecture for realtime web • React.js and Firebase have good combination