ARMGDN

Apollo, React, MobX, GraphQL, Db and Node

Building modern web apps with

ARMGDN

@VladimirNovick

Developer Advocate

Web / Mobile / VR / AR / IoT

vnovick.com

hasura.io

GDE, author, consultant

What all these technologies are about

X

QL

ReactJS

React is everywhere

MobX

State management solution applying functional reactive programming  principles

MobX State Tree

Opinionated, transactional, MobX powered state container combining the best features of the immutable and mutable world for an optimal DX

GraphQL

What is GraphQL?

RESTfull API

The core idea is to have a URL for every resource

Description of resource is coupled to implementation

https://swapi.co/

Overfetching

Underfetching

chaining requests to server to get needed data

GraphQL

A query language for your API

How to Consume GraphQL API

Apollo Client

Integrate Apollo with MobX State tree

DB/Node

What about our GraphQL Backend

Let's talk about architecture

3factor.app

  • Real-time GraphQL

  • Reliable eventing

  • Async serverless

 

3factor.app

Factor 1: Real-time GraphQL

  • Hasura

  • AppSync

  • graphql-yoga

  • apollo server

Factor 2: Reliable eventing

  • Debezium

  • Hasura event triggers

  • Event sourcing

Factor 3: Async serverless

  • AWS Lambda

  • Google Cloud Functions

  • Azure Functions

  • Zeit

  • OpenFaas, Kubeless, Knative (for Kubernetes)

What is Hasura

open source and free engine that gives you auto-generates real-time GraphQL API on top of new or existing Postgres database

Features

  • Can be deployed to any cloud or run locally
  • Compatible with all Authentication solutions
  • Can run on top of new or existing Postgres database
  • Supports Postgres addons (PostGIS, TimescaleDB)
  • Auto-generates GraphQL api
  • GraphQL queries are compiled to performant SQL statements using native Postgres features

Features

  • Comes with hasura-cli which has awesome tools like migrations and more
  • Can work with custom SQL statements
  • Has configurable access controls for data
  • Can be connected to your own GraphQL server (does schema stitching)
  • Has eventing system which enables to trigger serverless functions

How to get started?

  • Go to hasura.io

  • Click on Get started with Heroku

  • Click on

  • Enter your app name

Hasura Console overview

  • GraphiQL - run your queries in in-browser IDE
  • Data - manage your data, access control, relations, permissions
  • Remote Schemas - stitch GraphQL schema of your custom GraphQL server
  • Event Triggers - connect your serverless functions

GraphiQL tab - use for development

  • Set endpoint headers
  • Execute queries mutations and subscriptions
  • Analyse queries

Data tab - data management interface

  • View and insert data into db
  • create and modify tables
  • Create relationships
  • set permissions and access control
  • execute custom sql statements

Remote Schemas tab

stitch your custom GraphQL server schema

Event triggers

  • connect custom webhooks to database events to execute serverless functions
  • set retry logic
  • forward custom headers to webhook

 

Run hasura locally on top of existing postgres

What about supported Databases?

  • Postgres
  • Postgres extensions (PostGis, TimeScaleDB)
  • MySQL (Coming soon) https://www.producthunt.com/upcoming/hasura-graphql-engine-on-mysql
  • NoSQL databases( through json2graphql tool)
  • Migration from Firebase(through firebase2graphql tool)

Where is NodeJS in all of these?

Serverless functions for your business logic

In any programming language, your cloud provider supports

Demo time

Thank You

  @VladimirNovick

vnovick.com