React + Firebase

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

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
11. RubyConf Taiwan 2014
12. Questions If you have questions in this session, please tweet with #GCPUG My hearing skill is poor :-p
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)
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