CASE STUDY
GraphQL for
Native Apps


The MyAXA App
MARCH 22ND, 2019
We will discuss thebest practices, 

architecture patterns and
lessons learned in adopting the
GraphQLAPI query language
in the context of 

theMyAXAnative app.
INTRO
Principal Software Architect @ frog
Emanuele Di Saverio
CS Engineering graduate ’06 from
Rome, started writing embedded
software when Symbian S40 was a
thing. Software Architect for Mobile and
Web, specialising in UX - in the frog pond
since 2011. Former Agile enthusiast, now
just agile, wrote a book about Android.
INTRO
Software Architect
Team Lead iOS @ AXA Italy
Andrea Baldon
Software engineer and architect with
many years spent on coding mobile
apps, deploy backend and frontend sites
plus a bunch of things on IOT and voice
control apps. Actually working on
Disruption technology for AXA
Insurance company.
@hazam
/emanueledisaverio
@ultranano
/baldonandrea
Howmanyofyou

haveaproductleveraging
GraphQLinProduction?
What’sMyAXA
GRAPHQL FOR NATIVE APPS
What’sMyAXA
INTRO
<SECTION>
It’s a completely new way

to explore insurance!

MyAXA is the official app available on
iOS and Android dedicated to customers
who have signed insurance policies with
the AXA Italy Group.
WHAT'S MYAXA
SolutionOverview
GRAPHQL FOR NATIVE APPS
A (very) Conceptual
Architecture
SOLUTION OVERVIEW
AXA Core IT
An App is never just an App
The MyAXA app needs to be joined by a
dedicated middleware layer, cloud-native and
flexible enough to serve mobile-optimized
content.
<SOAP/>
MessageQueues
ETLs
Batch
REST
Proxies
A (very) Conceptual
Architecture
SOLUTION OVERVIEW
AXA Core IT
An App is never just an App
Middleware
The MyAXA app needs to be joined by a
dedicated middleware layer, cloud-native and
flexible enough to serve mobile-optimized
content.
ETLs
Batch
Proxies <SOAP/>
MessageQueues
REST
(Anti-corruption layer, Facade)
Taking the fast track
GraphQL soundness and schema-centricity
enables complex tooling to be developed,
resulting in
• tremendous speedup of FE development
• DRY and modular BE development
This is what we were looking for, and we found it.
An ā€œagileā€ tool
The most surprising outcome that we didn’t expect
was the flexibility of the tool, and how it affects the
team dynamics, communication and workflow.
The discoverability, flexibility and tooling had direct
impact over team members interactions and
communications.
SOLUTION OVERVIEW
<tl;dr>

GraphQL is custom API Gateway
for all clients,
with one codebase.
Introto

GraphQL
GRAPHQL FOR NATIVE APPS
INTRO TO GRAPHQL
Open from the start
Facebook took care in open-sourcing the whole
spec in 2015, of this new tech they were using
internally, including Relay, they client side library.
There are many implementations of the spec, for
every language.
If you really want to, you would build one yourself.
INTRO TO GRAPHQL
GraphQL is a Specification
https://facebook.github.io/graphql
Relevant Players
The companies really fueling the GraphQL
community are Meteor, Facebook, GraphCool,
Gatsby.
Case studies grow every day!
We’re going to reference the apollo
ecosystem as one of the most widespread and
well documented.
https://www.apollographql.com/
INTRO TO GRAPHQL
The Schema
Types and Operations
GraphQL implementation revolves around
the full specification of
• the data types involved
• the queries
• the data manipulations (Mutations)
Everything is strongly typed - allowing you
be loose everywhere else.
Remote Procedure Call
e.g. gRPC, SOAP, Thrift, Corba
INTRO TO GRAPHQL
GraphQL implements an

API paradigm
Resource-Based Query Language
e.g. REST + HATEOAS, FTP, ODATA e.g. Cipher, SparQL, LINQ, SQL, GraphQL
We scratch our heads to
decompose data to serve UX
FE developers scavenge
the right data
P. Sturgeon - https://philsturgeon.uk/2018/05/21/picking-an-api-paradigm-implementation/
We try decouple tangled
systems
INTRO TO GRAPHQL
Life with
REST
INTRO TO GRAPHQL
GraphQL

equivalent
INTRO TO GRAPHQL
GraphQL is designed to work as
an Evolving Gateway towards
multiple clients
5MonthsLater
GRAPHQL FOR NATIVE APPS
Promises
Kept&Broken
The curse of the multi-model
While at the business level, the model is one, at the
technical level you usually have 3 (or more)
implementations on your app:
• the on-the wire one, between client and server
• the persisted one, to save data on SQLite for example
• the runtime one, used to manipulate data in app
And you have to manage them all!
PROMISES
One Schema to
Rule them All
JSON

Model
Model.swift
SQL
Schema
GraphQL SchemaGraphQL Schema
The GraphQL schema is flexible, opt-in, standard and
strongly typed.
• flexible it has been designed with change in mind as
key feature, so you don’t risk to be locked in
• opt-in clients needs to explicitly write query and ask for
a given field on some type - no way to * !
• strongly typed and standardization allow for powerful
tooling to automate the 3 models
PROMISES
One Schema to
Rule them All
JSON

Model
Model.swift
SQL
Schema
Caveats
• GraphQL schema dictates how you write your code,
it’s not just data spec
• May not translate in a smooth way to all languages -
optionals and fragments
We group here considerations regarding how well the
GraphQL technology and his related implementation
libraries Apollo works with the target technology.
As a powerful abstraction, we expected some impedance
mismatch when analyzing the details and low level
implementation.
And we found some.
PROMISES
Mechanical Sympathy
Minimize Payloads
Query language allows the client to be in control of the
payload, so it can, at any time request only the minimum
amount of data needed on a given Fragment /
ViewController.
No more overfetching!
PROMISES
Mechanical Sympathy:

Network Efficiency 

just what you need
PROMISES
The Big Cookie
R. Meier - Google I/O 2012 - Making Good Apps Great
Mobile is Different
When working over 3G or 4G connections, the
Round Trip Time dominates over bandwidth.
GZIP works better with long payloads, and radio has
ā€œwarmup cyclesā€ to exploit.
It’s much better to have ā€œbig data syncā€ requests.
Network queries tend to be more like ā€œget all the
dataā€
Mechanical Sympathy:

Network Efficiency 

just what you need
Protocol Agnostic
GraphQL is not designed with a specific transport
protocol, but most of the implementations rely on HTTP.
All queries are exposed through a single endpoint
(typically /graph) and through POST with the query
content in the body.
The whole set of HTTP semantic is bypassed.
Caching is a casualty
GraphQL requests are opaque - so they can;’t be cached by
any proxy along the connection.
This means that client apps have to use a client side cache.
PROMISES
Mechanical Sympathy: 

HTTP Caching
PROMISES
Mechanical Sympathy: 

HTTP Caching
A Step Behind in Internet - friendliness
1990s
CORBA
Treat remote objects
as if they were local
2000s
SOAP
Standardize Remote
Method Innovation
2010s
REST
Going back to true
WWW sematics
2015
GraphQL
…we actually don’t
care about HTTP.
Another Casualty
For similar reasons, the HTTP Status-Code based
information is not available - all application-level errors
are 200s, and details are always in the payload.
The actual format is rich and articulated, including
support for partial errors (i.e. errors on only some
branch of the query tree), but overall, doesn’t play well
with what used to be key tenets of HTTP - let alone other
libraries and infrastructure.
PROMISES
Mechanical Sympathy: 

Error Handling
More than just queries
PROMISES
You can use GraphQL for 

all kinds of services
The standard includes support for Mutations:
specific requests that can CRUD data.
Most of the tooling also support Subscriptions:
pub/sub for data changes (i.e. over WebSockets).
Now we can use it for everything, right?
More than just queries A Query Language is for Querying
While we could implement everything, there is no advantage
in implementing ā€œbusiness-rocessā€ style services over
GraphQL. Examples:
• Logins, Registrations
• Payments, Enrollments
• Wizards
Moreover, support for binary payloads (file down/upload,
streaming) not supported *.
PROMISES
You can use GraphQL for 

all kinds of services
The standard includes support for Mutations:
specific requests that can CRUD data.
Most of the tooling also support Subscriptions:
pub/sub for data changes (i.e. over WebSockets).
Now we can use it for everything, right?
PROMISES
The service 

evolves smoothly and
indefinitely
Grow your Schema
The strategy that is suggested for evolving GraphQL
schema is to:
• Always add fields, never change or delete
• Mark obsolete fields with @Deprecated and keep
supporting them
• monitor service usage, and remove only when usage of
old field is ~0%
As we started our journey, we added the REST-style version
prefix /v1 to our /graph, as an added ā€œsafety netā€ for
backward compat.
So far has not been used.
Caveats
• Cost of mistakes during domain modeling is relevant -
actually stays in the schema forever.
• Need for ā€œgraphql awareā€ logging and report (example:
Apollo Engine Optics)
PROMISES
The service

evolves smoothly and
indefinitely
Definitely Works
Schema as Communication tool
Having the schema as a pivotal artifact affects greatly
the team workflow.
The back-end team can spend less time documenting
and tailoring the services to serve the UX (BFF-style).
This frees us from waterfall-ish contraints, as the back-
end is built on business objects and not on querying
constraints.
This also assumes a thick-client approach, with App
developers expert in the problem domain.
PROMISES
Team Workflow skyrockets
UI
DESIGN
REST
ENDPTS
APP DEVCONCEPT
with REST
UI
DESIGN
SCHEMA
DEV
APP DEVCONCEPT
with GraphQL
Schema is a Tooling Platform
The apollo-ios and apollo-android libraries implement the
GraphQL standard and a series of convenience features:
• Model Code generation in Java / Swift
• Local Cache, which is a full fledged instance of
Repository +ORM
• Watcher query, custom Scalars and Datatypes
They a bit lagging in respect to server counterpart (i.e
binary support)
Definitely Works
Proper tooling saved many weeks of ā€œmonkeyā€ coding,
Caveats
• The apollo native libraries are developed by a much looser
community (forget project governance structures).
• There is the possibility to roll-your-own component - but this
way you miss most of the value
• Code generated is not perfect (as always)
PROMISES
Development Time To Market
skyrockets
Whatabout

yournextapp?
GRAPHQL FOR NATIVE APPS
Do you need to expose a
heterogenous setof services and
data sources,
to clients of all sorts?
Are you serving mostly
textualand 

authenticateddata?
How about 

ā€œtransactionalā€ services?
Do you hate HTTP?
Can you live 

without server-definedcaching, 

without networkcaching, 

without HTTPsemantics?
Are you developing a digital product in a
context where 

fast turnaroundis key, and being 

flexible and robustto accomodate
new features?
GRAPHQL FOR NATIVE APPS


BeyondGraphQL
The native app is the User eXperience touch-point of a
wide array of technologies:
MyAXA
Technologies
GRAPHQL FOR NATIVE APPS
āž” ChatBots, Telemedicine
āž” Video/Image Recognition
āž” Microservices (Kubernetes + AWS)
āž” IoT for Car and Home
https://group.axa.com/en/careers
Thank you!
https://www.frogdesign.com/careers

GraphQL for Native Apps

  • 1.
    CASE STUDY GraphQL for NativeApps 
 The MyAXA App MARCH 22ND, 2019
  • 2.
    We will discussthebest practices, 
 architecture patterns and lessons learned in adopting the GraphQLAPI query language in the context of 
 theMyAXAnative app. INTRO
  • 3.
    Principal Software Architect@ frog Emanuele Di Saverio CS Engineering graduate ’06 from Rome, started writing embedded software when Symbian S40 was a thing. Software Architect for Mobile and Web, specialising in UX - in the frog pond since 2011. Former Agile enthusiast, now just agile, wrote a book about Android. INTRO Software Architect Team Lead iOS @ AXA Italy Andrea Baldon Software engineer and architect with many years spent on coding mobile apps, deploy backend and frontend sites plus a bunch of things on IOT and voice control apps. Actually working on Disruption technology for AXA Insurance company. @hazam /emanueledisaverio @ultranano /baldonandrea
  • 4.
  • 5.
  • 6.
  • 7.
    <SECTION> It’s a completelynew way
 to explore insurance!
 MyAXA is the official app available on iOS and Android dedicated to customers who have signed insurance policies with the AXA Italy Group. WHAT'S MYAXA
  • 8.
  • 9.
    A (very) Conceptual Architecture SOLUTIONOVERVIEW AXA Core IT An App is never just an App The MyAXA app needs to be joined by a dedicated middleware layer, cloud-native and flexible enough to serve mobile-optimized content. <SOAP/> MessageQueues ETLs Batch REST Proxies
  • 10.
    A (very) Conceptual Architecture SOLUTIONOVERVIEW AXA Core IT An App is never just an App Middleware The MyAXA app needs to be joined by a dedicated middleware layer, cloud-native and flexible enough to serve mobile-optimized content. ETLs Batch Proxies <SOAP/> MessageQueues REST (Anti-corruption layer, Facade)
  • 11.
    Taking the fasttrack GraphQL soundness and schema-centricity enables complex tooling to be developed, resulting in • tremendous speedup of FE development • DRY and modular BE development This is what we were looking for, and we found it. An ā€œagileā€ tool The most surprising outcome that we didn’t expect was the flexibility of the tool, and how it affects the team dynamics, communication and workflow. The discoverability, flexibility and tooling had direct impact over team members interactions and communications. SOLUTION OVERVIEW <tl;dr>
 GraphQL is custom API Gateway for all clients, with one codebase.
  • 12.
  • 13.
  • 14.
    Open from thestart Facebook took care in open-sourcing the whole spec in 2015, of this new tech they were using internally, including Relay, they client side library. There are many implementations of the spec, for every language. If you really want to, you would build one yourself. INTRO TO GRAPHQL GraphQL is a Specification https://facebook.github.io/graphql Relevant Players The companies really fueling the GraphQL community are Meteor, Facebook, GraphCool, Gatsby. Case studies grow every day! We’re going to reference the apollo ecosystem as one of the most widespread and well documented. https://www.apollographql.com/
  • 15.
    INTRO TO GRAPHQL TheSchema Types and Operations GraphQL implementation revolves around the full specification of • the data types involved • the queries • the data manipulations (Mutations) Everything is strongly typed - allowing you be loose everywhere else.
  • 16.
    Remote Procedure Call e.g.gRPC, SOAP, Thrift, Corba INTRO TO GRAPHQL GraphQL implements an
 API paradigm Resource-Based Query Language e.g. REST + HATEOAS, FTP, ODATA e.g. Cipher, SparQL, LINQ, SQL, GraphQL We scratch our heads to decompose data to serve UX FE developers scavenge the right data P. Sturgeon - https://philsturgeon.uk/2018/05/21/picking-an-api-paradigm-implementation/ We try decouple tangled systems
  • 17.
  • 18.
  • 19.
    INTRO TO GRAPHQL GraphQLis designed to work as an Evolving Gateway towards multiple clients
  • 20.
  • 21.
    GRAPHQL FOR NATIVEAPPS Promises Kept&Broken
  • 22.
    The curse ofthe multi-model While at the business level, the model is one, at the technical level you usually have 3 (or more) implementations on your app: • the on-the wire one, between client and server • the persisted one, to save data on SQLite for example • the runtime one, used to manipulate data in app And you have to manage them all! PROMISES One Schema to Rule them All JSON
 Model Model.swift SQL Schema
  • 23.
    GraphQL SchemaGraphQL Schema TheGraphQL schema is flexible, opt-in, standard and strongly typed. • flexible it has been designed with change in mind as key feature, so you don’t risk to be locked in • opt-in clients needs to explicitly write query and ask for a given field on some type - no way to * ! • strongly typed and standardization allow for powerful tooling to automate the 3 models PROMISES One Schema to Rule them All JSON
 Model Model.swift SQL Schema Caveats • GraphQL schema dictates how you write your code, it’s not just data spec • May not translate in a smooth way to all languages - optionals and fragments
  • 24.
    We group hereconsiderations regarding how well the GraphQL technology and his related implementation libraries Apollo works with the target technology. As a powerful abstraction, we expected some impedance mismatch when analyzing the details and low level implementation. And we found some. PROMISES Mechanical Sympathy
  • 25.
    Minimize Payloads Query languageallows the client to be in control of the payload, so it can, at any time request only the minimum amount of data needed on a given Fragment / ViewController. No more overfetching! PROMISES Mechanical Sympathy:
 Network Efficiency 
 just what you need
  • 26.
    PROMISES The Big Cookie R.Meier - Google I/O 2012 - Making Good Apps Great Mobile is Different When working over 3G or 4G connections, the Round Trip Time dominates over bandwidth. GZIP works better with long payloads, and radio has ā€œwarmup cyclesā€ to exploit. It’s much better to have ā€œbig data syncā€ requests. Network queries tend to be more like ā€œget all the dataā€ Mechanical Sympathy:
 Network Efficiency 
 just what you need
  • 27.
    Protocol Agnostic GraphQL isnot designed with a specific transport protocol, but most of the implementations rely on HTTP. All queries are exposed through a single endpoint (typically /graph) and through POST with the query content in the body. The whole set of HTTP semantic is bypassed. Caching is a casualty GraphQL requests are opaque - so they can;’t be cached by any proxy along the connection. This means that client apps have to use a client side cache. PROMISES Mechanical Sympathy: 
 HTTP Caching
  • 28.
    PROMISES Mechanical Sympathy: 
 HTTPCaching A Step Behind in Internet - friendliness 1990s CORBA Treat remote objects as if they were local 2000s SOAP Standardize Remote Method Innovation 2010s REST Going back to true WWW sematics 2015 GraphQL …we actually don’t care about HTTP.
  • 29.
    Another Casualty For similarreasons, the HTTP Status-Code based information is not available - all application-level errors are 200s, and details are always in the payload. The actual format is rich and articulated, including support for partial errors (i.e. errors on only some branch of the query tree), but overall, doesn’t play well with what used to be key tenets of HTTP - let alone other libraries and infrastructure. PROMISES Mechanical Sympathy: 
 Error Handling
  • 30.
    More than justqueries PROMISES You can use GraphQL for 
 all kinds of services The standard includes support for Mutations: specific requests that can CRUD data. Most of the tooling also support Subscriptions: pub/sub for data changes (i.e. over WebSockets). Now we can use it for everything, right?
  • 31.
    More than justqueries A Query Language is for Querying While we could implement everything, there is no advantage in implementing ā€œbusiness-rocessā€ style services over GraphQL. Examples: • Logins, Registrations • Payments, Enrollments • Wizards Moreover, support for binary payloads (file down/upload, streaming) not supported *. PROMISES You can use GraphQL for 
 all kinds of services The standard includes support for Mutations: specific requests that can CRUD data. Most of the tooling also support Subscriptions: pub/sub for data changes (i.e. over WebSockets). Now we can use it for everything, right?
  • 32.
    PROMISES The service 
 evolvessmoothly and indefinitely
  • 33.
    Grow your Schema Thestrategy that is suggested for evolving GraphQL schema is to: • Always add fields, never change or delete • Mark obsolete fields with @Deprecated and keep supporting them • monitor service usage, and remove only when usage of old field is ~0% As we started our journey, we added the REST-style version prefix /v1 to our /graph, as an added ā€œsafety netā€ for backward compat. So far has not been used. Caveats • Cost of mistakes during domain modeling is relevant - actually stays in the schema forever. • Need for ā€œgraphql awareā€ logging and report (example: Apollo Engine Optics) PROMISES The service
 evolves smoothly and indefinitely Definitely Works
  • 34.
    Schema as Communicationtool Having the schema as a pivotal artifact affects greatly the team workflow. The back-end team can spend less time documenting and tailoring the services to serve the UX (BFF-style). This frees us from waterfall-ish contraints, as the back- end is built on business objects and not on querying constraints. This also assumes a thick-client approach, with App developers expert in the problem domain. PROMISES Team Workflow skyrockets UI DESIGN REST ENDPTS APP DEVCONCEPT with REST UI DESIGN SCHEMA DEV APP DEVCONCEPT with GraphQL
  • 35.
    Schema is aTooling Platform The apollo-ios and apollo-android libraries implement the GraphQL standard and a series of convenience features: • Model Code generation in Java / Swift • Local Cache, which is a full fledged instance of Repository +ORM • Watcher query, custom Scalars and Datatypes They a bit lagging in respect to server counterpart (i.e binary support) Definitely Works Proper tooling saved many weeks of ā€œmonkeyā€ coding, Caveats • The apollo native libraries are developed by a much looser community (forget project governance structures). • There is the possibility to roll-your-own component - but this way you miss most of the value • Code generated is not perfect (as always) PROMISES Development Time To Market skyrockets
  • 36.
  • 37.
    Do you needto expose a heterogenous setof services and data sources, to clients of all sorts?
  • 38.
    Are you servingmostly textualand 
 authenticateddata? How about 
 ā€œtransactionalā€ services?
  • 39.
  • 40.
    Can you live
 without server-definedcaching, 
 without networkcaching, 
 without HTTPsemantics?
  • 41.
    Are you developinga digital product in a context where 
 fast turnaroundis key, and being 
 flexible and robustto accomodate new features?
  • 43.
    GRAPHQL FOR NATIVEAPPS 
 BeyondGraphQL
  • 44.
    The native appis the User eXperience touch-point of a wide array of technologies: MyAXA Technologies GRAPHQL FOR NATIVE APPS āž” ChatBots, Telemedicine āž” Video/Image Recognition āž” Microservices (Kubernetes + AWS) āž” IoT for Car and Home
  • 45.