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. 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