Swat.io Social Media Management for Teams — 5 Developers, 7 servers, 2 TB of database — PHP7.2, PostgreSQL, ElasticSearch, Laravel, CakePHP, Queues, Queues, Queues — Lots of high volume customers — 5 Mio API outgoing requests/day — 0.5 Mio incoming API requests/day — Only constant: Change
Skills "We <3 to take full advantage of our abilities and talents, as well as further developing them together." Action "We don't default to blindly following the rules. We encourage everyone to give feedback and show initiative at any time."
Rest APIs — Pros: — Client <> Server architecture — Stateless — Cons: — Every REST API looks differently — Client can't define the response structure1 — Documentation separated from code — Deprecations not possible 1 Sparse fieldsets might be supported - see Facebook Graph API
Facebook @ Scale — Facebook has to support ~ 20 Different App Versions at same time. — All are using different fields / endpoints from their APIs. What the hell?
“GraphQL is a query language for APIs […]. GraphQL provides a complete and understandable description of the data in your API, gives clients the power to ask for exactly what they need and nothing more ….” — https://graphql.org/
GraphQL APIs — Pros: — Client <> Server architecture — Stateless — All GraphQL APIs work the same — Consumer defines what fields/relations should be queried and how the response should look like — Combine whatever data you would like — Documentation/Deprecations are part of your schema
Rest in practice — Backend is adding new fields to existing endpoints — Existing implementations need to be checked — Backend is adding new endpoints — Frontend needs to wait for new endpoints — Frontend receives unneccessary data GraphQL in practice — Backend defines the schema once — Frontend is asking for all required fields without backend devs adding new endpoints
Key terminology — Define your graph as a Schema — Receive Data through Queries — Write Data with Mutations — Learn about your schema with Introspection There's more, of course! — Have a look yourselves! https://graphql.org/learn/ — Fields, Arguments, Aliases, Fragments, Variables, Directives, Subscriptions, …
GraphQL Schema Definition Language Example: type BlogPost { title: String! author: User body: String } type User { id: Id! firstName: String lastName: String }
GraphQL Query Real Life Example In one request, we're fetching — current client — all channels — all users — all permissions of these users — current client member — permissions for all channels — client list — current User — all groups the user owns — last 10 notifications Frontend can, at any time, add even more fields …
GraphQL Documentation: name' => [ 'type' => Type::nonNull(Type::string()), 'description' => "The name of this channel, usually as provided by the external network. …" ],
GraphQL Deprecations: 'client_id' => [ 'type' => Type::nonNull(Type::id()), 'description' => 'The ID of the client this channel belongs to.', 'deprecationReason' => 'Use `channel.client` instead.', ],
Swat.io Frontend Build Process What's new? — Our new SPA is different. It's not using JavaScript — We use TypeScript now! — You named it! TypeScript uses … Types! — Even better: It uses the GraphQL typings! — The best: The typings are generated automatically!
Old Swat.io Frontend Build Process So, that's the deal: 1. A developer implements something 2. Code is reviewed, tested locally and then deployed 3. Developers tend to forget impact in other repos 4. Customers find out in production: 5. Customer talks to Support talks to Developer talks to Developer: Ah, I forgot to change X! 6. Bugfix Time ⏰
New Swat.io Frontend Build Process So, here's the deal: 1. A developer implements something 2. Afterwards, the build process is triggered 3. The build process downloads the latest GraphQL schema 4. It uses the generated typings for type checking the whole code base 5. There is no 5. step !
Swat.io Frontend Build Process If the build is fine: 1. Instant profit ! If the build fails: 1. Meaningful error messages 2. We fix the bugs before hitting production
johannesnagl
yuya4
takahana
sinsoku
watany
eiki
kadogen_0527
caori_t
you
hikarut
hosimesi11
iselegant
newrelic2023
deanohume
myddelton
lauravandoore
reverentgeek
dougneiner
moore
bkeepers
palkan
sstephenson
danielanewman
chrislema
yeseniaperezcruz