React + Firebase

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

Transcript

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

   View Slide

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
   

   View Slide

3. View Slide

4. View Slide

5. View Slide

6. View Slide

7. View Slide

8. View Slide

9. View Slide

10. View Slide

11. RubyConf Taiwan 2014
    

    View Slide

12. Questions
    If you have questions in this session,
    please tweet with #GCPUG
    My hearing skill is poor :-p
    

    View Slide

13. View Slide

14. Firebase
    • One of BaaS (Backend as a Service)
    • Realtime Database
    • Simple Login
    • Hosting
    

    View Slide

15. Firebase
    • Founded in 2011 (YC11)
    • Acquired by Google in 2014
    

    View Slide

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

    View Slide

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”
    }
    }
    

    View Slide

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”
    

    View Slide

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”
    

    View Slide

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”
    

    View Slide

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”
    

    View Slide

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

    View Slide

23. Realtime database
    Hello!!
    

    View Slide

24. Realtime database
    Hello!!
    database
    

    View Slide

25. Database with notifications
    ClientA
    ClientB
    Firebase
    ClientC
    

    View Slide

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

    View Slide

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

    View Slide

28. API
    • Set / Get / Remove
    • Query
    • Auth
    • Events
    

    View Slide

29. First step
    • Sign up
    • Log in
    

    View Slide

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

    View Slide

31. Third Step
    • Manipulate database through from JS
    • Create app with client side JS only
    

    View Slide

32. Role on database
    • Javascript based ACL on each data
    

    View Slide

33. Authenticate
    • Email / password
    • Social media login
    • Google+, Facebook, GitHub, Twitter
    

    View Slide

34. Why Firebase?
    • Almost web app is front end of DB
    • Browser Javascript API
    • Security and role
    

    View Slide

35. But
    • Hard to build realtime web app on Javascript
    • DOM manipulation is too complex
    

    View Slide

36. DOM is global variables
    
    class=“hidden”>foo
    
    DOM has state
    Add
    Divided operations

    from DOM
    
    foo
    
    Anybody can change DOM
    

    View Slide

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)
    

    View Slide

38. Client side logic
    Browser
    Server
    User
    Event (onSubmit)
    React.js
    Server side logic
    HTML generator (render)
    Generated state (setState)
    

    View Slide

39. View Slide

40. React.js
    • Javascript library for building UI
    • Born from Facebook in ~2013
    • Expanded to other companies
    • HipChat, AirBnB, Codecademy…
    

    View Slide

41. Building UI
    • Just UI library
    • Components
    • Facebook provide Flux architecture framework
    • One direction flow
    

    View Slide

42. var App = React.createClass({
    getInitialState: function(){
    return({items:[”abc”, ”def”]});
    },
    render: function() {
    return
    {this.state.items.map(function(item) {
    return {item}
    })}
    ;
    }
    });
    React.render(, document.body);
    

    View Slide

43. var App = React.createClass({
    getInitialState: function(){
    return({items:[”abc”, ”def”]});
    },
    render: function() {
    return
    {this.state.items.map(function(item) {
    return {item}
    })}
    ;
    }
    });
    React.render(, document.body);
    

    View Slide

44. var App = React.createClass({
    getInitialState: function(){
    return({items:[”abc”, ”def”]});
    },
    render: function() {
    return
    {this.state.items.map(function(item) {
    return {item}
    })}
    ;
    }
    });
    React.render(, document.body);
    

    View Slide

45. var App = React.createClass({
    getInitialState: function(){
    return({items:[”abc”, ”def”]});
    },
    render: function() {
    return
    {this.state.items.map(function(item) {
    return {item}
    })}
    ;
    }
    });
    React.render(, document.body);
    

    View Slide

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
    {this.state.items.map(function(item){
    return {item}
    })}
    ;
    }
    });
    React.render(, document.body);
    

    View Slide

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) {
    

    View Slide

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) {
    

    View Slide

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) {
    

    View Slide

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) {
    

    View Slide

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) {
    

    View Slide

52. .on("child_added", this.add.bind(this));
    },
    add: function(snapshot) {
    this.setState({
    items: this.state.items.concat([snapshot.val
    });
    },
    render: function() {
    return
    {this.state.items.map(function(item){
    return {item}
    })}
    ;
    }
    });
    

    View Slide

53. .on("child_added", this.add.bind(this));
    },
    add: function(snapshot) {
    this.setState({
    items: this.state.items.concat([snapshot.val
    });
    },
    render: function() {
    return
    {this.state.items.map(function(item){
    return {item}
    })}
    ;
    }
    });
    

    View Slide

54. .on("child_added", this.add.bind(this));
    },
    add: function(snapshot) {
    this.setState({
    items: this.state.items.concat([snapshot.val
    });
    },
    render: function() {
    return
    {this.state.items.map(function(item){
    return {item}
    })}
    ;
    }
    });
    

    View Slide

55. .on("child_added", this.add.bind(this));
    },
    add: function(snapshot) {
    this.setState({
    items: this.state.items.concat([snapshot.val
    });
    },
    render: function() {
    return
    {this.state.items.map(function(item){
    return {item}
    })}
    ;
    }
    });
    

    View Slide

56. One direction flow
    • Can’t read DOM. Only write.
    $(“#count”).val($(“#count”).val() + 1);
    $(“#item”).toggle(“visible”);
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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
    
    {this.state.items.map(function(item){
    return {item}
    })}
    
    onChange={this.handleUpdateText} />
    Post
    ;
    }
    

    View Slide

61. 
    {this.state.items.map(function(item){
    return {item}
    })}
    
    onChange={this.handleUpdateText} />
    Post<
    iv>;
    

    View Slide

62. `
    
    {this.state.items.map(function(item){
    return {item}
    })}
    
    onChange={this.handleUpdateText} />
    Post<
    iv>;
    

    View Slide

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
    
    {this.state.items.map(function(item){
    return {item}
    })}
    
    onChange={this.handleUpdateText} />
    Post
    ;
    }
    

    View Slide

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
    
    {this.state.items.map(function(item){
    return {item}
    })}
    
    onChange={this.handleUpdateText} />
    Post
    ;
    }
    

    View Slide

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
    
    {this.state.items.map(function(item){
    return {item}
    })}
    
    onChange={this.handleUpdateText} />
    Post
    ;
    }
    

    View Slide

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
    
    {this.state.items.map(function(item){
    return {item}
    })}
    
    onChange={this.handleUpdateText} />
    Post
    ;
    }
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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.
    

    View Slide

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
    

    View Slide