Build Efficient Xamarin Apps with GraphQL

 

#TampaCC - 2019

Agenda

GraphQL Concepts

Setting up GraphQL server

Demo

GraphQL with Xamarin Mobile Apps

   Hello👋

I'm Siva

Architect @ Computer Enterprises Inc

#Mobile #IoT #Cloud

Orlando

@ksivamuthu

GraphQL

  • New API Standard by Facebook that provides a more efficient, powerful and flexible alternative to REST
  • Query language for APIs.
  • Declarative way of fetching and updating data.

@ksivamuthu

It's a spec

@ksivamuthu

REST APIs

/api/v1/parks

/api/v1/parks/1

/api/v1/parks/1/rides

/api/v1/parks/1/rides/1/waittimes

/api/v1/rides/1

/api/v1/parks-and-rides-with-waittimes-for-mobile-app

Underfetching

@ksivamuthu

Required Fields in UI

Fields from REST Service

Overfetching

@ksivamuthu

{
  id : "ride-1",
  name: "Xam Monkeys - Dancing on the floor",
  waitingTime: "30m"
}
{
    name: "Xam Monkeys - Dancing on the floor",
    fastpass_booth: false,
    created_at: "2009-07-13T19:14:06.000-04:00",
    updated_at: "2019-09-10T00:01:35.000-04:00",
    short_name: "Xam Monkeys",
    open_emh_morning: false,
    open_emh_evening: false,
    single_rider: false,
    time_zone: "Eastern Time (US & Canada)",
    seasonal: false,
    open_very_merry: false,
    open_not_so_scary: false,
    category_code: "scheduled_show",
    duration: 25,
    scheduled_code: null,
    what_it_is: "Live Hollywood-style musical",
    scope_and_scale_code: "major_attraction",
    when_to_go: "Anytime; evenings are cooler",
    average_wait_per_hundred: null,
    average_wait_assumes: null,
    loading_speed: null,
    probable_wait_time: null,
    special_needs: null,
    height_restriction: null,
    intense: false,
    extinct_on: null,
    opened_on: "1991-11-22",
    frightening: false,
    physical_considerations: false,
    handheld_captioning: true,
    video_captioning: false,
    reflective_captioning: false,
    assistive_listening: true,
    audio_description: true,
    wheelchair_transfer_code: "may_remain_in_wheelchair",
    no_service_animals: false,
    sign_language: false,
    service_animal_check: false,
    not_to_be_missed: false,
    rider_swap: false,
    ultimate_code: "core",
    ultimate_task: "View full show.",
    park_entrance: false,
    relative_open: null,
    relative_close: null,
    close_at_dusk: null,
    crowd_calendar_version: 4,
    match_name: "BT-BST-LF-ON-STJ",
    crazy_threshold: 150,
    fastpass_only: false,
    allow_showtimes_after_close: false,
    disconnected_fastpass_booth: false,
    arrive_before: 20,
    arrive_before_fp: 15,
    allow_time_restriction: false,
    relative_open_to_sunset: null,
    relative_close_to_sunset: null,
    closing_round_code: null,
    walking_time_proxy_id: null,
    flexible_duration: false,
    operator_id: 80010848,
    operator_type: "Entertainment",
    hide_app: false,
    showtime_proxy_id: null,
    sort_name: "beauty and the beast live on stage",
    extinct_on_uncertain: null,
    opened_on_uncertain: null,
    opened_on_known: null,
    ignore_scrapes: false
}

How GraphQL solves these problems?

Magic !!!

@ksivamuthu

What you want is what you get !!!

@ksivamuthu

@ksivamuthu

Strongly typed Schema

GraphQL Benefits

  • GraphQL is a Specification
  • Platform / Protocol / Language agnostic
  • No more Over- and Under-fetching
  • GraphQL versioning - Rapid Product Iterations on the Frontend
  • Insightful Analytics on the Backend
  • Benefits of Schema and Type system
  • GraphQL Schema Stitching

@ksivamuthu

GraphQL Downsides

  • Single point of failure
  • Lack of built-in caching
  • Complex queries handling
  • Takes a while to understand

@ksivamuthu

https://graphql.org/users/​​

Growing users

@ksivamuthu

Demo

Setting up GraphQL Server

Xamarin + GraphQL

Reference

Action Items

- Explore GraphQL .NET Server and Client SDKs

- Explore Hasura - GraphQL with Postgres

- Build Xamarin apps with GraphQL

- Be Kind & Spread Your Awesomeness ...

- Follow me on social medias

ksivamuthu

ksivamuthu

Thank you !!!