Build your backend with GraphQL and Serverless in Redux style

What if it was possible to build backend features for our react apps in the same way that we use redux in our react apps? In this live-coding demo, I will show you how we’ll add backend business logic using the redux abstractions of dispatching actions, writing reducers as pure functions and subscribing to updated state. Our backend will be completely serverless and using open-source and managed services so that we’re not actually deploying and maintaining any servers. We will use GraphQL mutations from our React app to dispatch actions. These will trigger serverless functions which are pure and return the modified state, which will be persisted safely on a cloud managed database. Portions of your app that are subscribed to the state using GraphQL subscriptions (live-queries) will automatically update! You will witness the raw awesomeness of being able to use JavaScript and GraphQL in a pattern that you are comfortable with to build backend features from scratch.

Presented at React India 2019

Transcript

1. shahidh_k
   Build your backend with GraphQL and
   Serverless in Redux style
   React India 2019
   1
   

   View Slide

2. shahidh_k 2
   I’m Shahidh
   

   View Slide

3. shahidh_k
   Redux is awesome!
   3
   

   View Slide

4. shahidh_k 4
   UI - 1 Dispatch
   Reducer
   State update
   UI - 2
   UI - 3
   State on the UI
   

   View Slide

5. shahidh_k
   Serverless
   5
   

   View Slide

6. shahidh_k
   Serverless
   $ cat index.js
   exports.function = (req, res) => {
   res.json({"message": "Hello World"});
   }
   6
   $ serverless functions deploy hello_world --trigger-http
   https://serverless.functions.net/hello_world
   $ curl https://serverless.functions.net/hello_world
   {"message": "Hello World"}
   

   View Slide

7. shahidh_k
   GraphQL
   7
   

   View Slide

8. shahidh_k
   REST vs GraphQL
   Product Brand Category
   GET
   PUT
   POST
   PATCH
   DELETE
   GET
   PUT
   POST
   PATCH
   DELETE
   GET
   PUT
   POST
   PATCH
   DELETE
   ProductWithBrand
   8
   

   View Slide

9. shahidh_k 9
   UI - 1
   GraphQL
   Mutation
   Serverless
   Function
   GraphQL
   Subscription
   UI - 2
   UI - 3
   State on the UI State on the backend
   

   View Slide

10. shahidh_k
    Demo App:
    Sanitize Text /
    Filter bad words
    10
    

    View Slide

11. shahidh_k 11
    Type bad
    content
    GraphQL
    Mutation
    Serverless
    Function
    GraphQL
    Subscription
    Show clean
    content
    State on the UI State on the backend
    *BREAKING NEWS: Speaker uses own project!
    

    View Slide

12. shahidh_k
    Demo Time
    12
    

    View Slide

13. shahidh_k
    Cool! Something complex?
    13
    

    View Slide

14. shahidh_k
    Food ordering app
    14
    https://serverless-demo.hasura.app/
    

    View Slide

15. shahidh_k
    Order state machine
    is_validated | false
    is_paid | false
    is_approved | false
    is_agent_assigned | false
    is_validated | true
    is_paid | false
    is_approved | false
    is_agent_assigned | false
    is_validated | true
    is_paid | true
    is_approved | false
    is_agent_assigned | false
    is_validated | true
    is_paid | true
    is_approved | true
    is_agent_assigned | false
    is_validated | true
    is_paid | true
    is_approved | true
    is_agent_assigned | true
    Checks
    payment
    Validate
    order
    Restaurant
    approval
    Agent
    assignment
    15
    

    View Slide

16. shahidh_k 16
    Thanks
    github.com/shahidhk/dangerous-tweets
    

    View Slide