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

0ec58a040e1e4e959c8566484b4bba19?s=128

Yuichiro MASUI

May 08, 2015
Tweet

More Decks by Yuichiro MASUI

Other Decks in Programming

Transcript

  1. React + Firebase Yuichiro MASUI @masuidrive Toreta, Inc. CTO

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

    • Toreta, Inc CTO / co-founder • Ruby, Javascript, Obj-C and many languages • Programming lover
  3. None
  4. None
  5. None
  6. None
  7. None
  8. None
  9. None
  10. None
  11. RubyConf Taiwan 2014

  12. Questions If you have questions in this session, please tweet

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

    Realtime Database • Simple Login • Hosting
  15. Firebase • Founded in 2011 (YC11) • Acquired by Google

    in 2014
  16. Realtime database • NoSQL - JSON friendly database • Libraries:

    Javascript (Browser/Node), iOS, Android • REST API • A lot of examples and tutorials
  17. 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” } }
  18. 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”
  19. 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”
  20. 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”
  21. 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”
  22. Realtime database • NoSQL - JSON friendly database • Libraries:

    Javascript (Browser/Node), iOS, Android • REST API • A lot of examples and tutorials
  23. Realtime database Hello!!

  24. Realtime database Hello!! database

  25. Database with notifications ClientA ClientB Firebase ClientC

  26. Database with notifications ClientA ClientB Firebase ClientC Set(A: 1)

  27. Database with notifications ClientA ClientB Firebase ClientC Set(A: 1) Added(A:

    1) Added(A: 1)
  28. API • Set / Get / Remove • Query •

    Auth • Events
  29. First step • Sign up • Log in

  30. Second Step • Create database • Web Dashboard • CRUD

  31. Third Step • Manipulate database through from JS • Create

    app with client side JS only
  32. Role on database • Javascript based ACL on each data

  33. Authenticate • Email / password • Social media login •

    Google+, Facebook, GitHub, Twitter
  34. Why Firebase? • Almost web app is front end of

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

    • DOM manipulation is too complex
  36. 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
  37. 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)
  38. Client side logic Browser Server User Event (onSubmit) React.js Server

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

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

    provide Flux architecture framework • One direction flow
  42. 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);
  43. 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);
  44. 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);
  45. 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);
  46. 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);
  47. 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) {
  48. 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) {
  49. 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) {
  50. 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) {
  51. 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) {
  52. .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>; } });
  53. .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>; } });
  54. .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>; } });
  55. .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>; } });
  56. One direction flow • Can’t read DOM. Only write. $(“#count”).val($(“#count”).val()

    + 1); $(“#item”).toggle(“visible”);
  57. 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}); }
  58. 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}); }
  59. 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}); }
  60. 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>; }
  61. <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< iv>;
  62. ` <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< iv>;
  63. 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>; }
  64. 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>; }
  65. 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>; }
  66. 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>; }
  67. Components directory • React.rock • react-components • Official wiki

  68. Components directory • React.rock • react-components • Official wiki

  69. Components directory • React.rock • react-components • Official wiki

  70. Components directory • React.rock • react-components • Official wiki

  71. Sample App • Keep collaborate journals app • React +

    FireBase • https://bit.ly/gcpug0508 • http://github.com/masuidrive/journals • Not for production yet. Keep develop now.
  72. 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