GraphQL Meetup in Bangkok - Edition No. 6 This time with an extensive GraphQL Introduction and Gatsby use-case presentation

1. GraphQL BKK 6.0
Meetup, Bangkok, 07th May 2019

2. ● Nimble
● GraphQL Introduction
● VS Code Extensions (Viktor)
● Gatsby @ BrikL
● Q&A
● Connect, Talk, Hack until 10pm
No breaks maybe... 😉
2
~ 9.00 pm

3. Thank you!

4. No rockstars or ninja developers.
We are passionate software engineers,
product managers and designers
4
jobs.nimblehq.co

5. 5
rubyconfth.com
Pullman Bangkok King Power - September 6th & 7th, 2019

6. GraphQL Asia
graphql-asia.org
6
Asia's first GraphQL conference
12th & 13th April, Bangalore, India
Join us and win today

7. 7
GraphQL
Introduction

8. 8
Your GraphQL level?

9. 9
Your GraphQL level?

10. 10
Your GraphQL level?

11. 11

12. 12
A query language
for your API

13. GET
https://api.github.com/users/:username/repos
13

14. GET
.../users/:username/repos?page=2&limit=10
14

15. 15

16. How about GraphQL?
16

17. 17

18. 18

19. 19

20. 20

21. 21
Who owns GraphQL?

22. 22
GraphQL is a specification
Not implementation

23. 23

24. 24

25. 25

26. 26

27. 27
You can use with any framework
Or vanilla js

28. 28
Most Popular GraphQL clients
Simple http requests works fine too!

29. 29
React + Apollo Client
Schema design
Apollo Server
Caching
Prisma
...
Speak to us
Tobias Meixner
tobias@brikl.io
Lucas Munhoz
ln.munhoz@gmail.com
Need help with GraphQL?

30. 30
I am excited to see what you are
Going to build with GraphQL
github@lnmunhoz
twitter@lnmunhoz
Thank you!

31. Gatsby @ BrikL
Next-gen e-commerce powered by Gatsby
Tobias Meixner
Co-Founder & CTO
Brikl Ltd
07 May 2019

32. Thank you for the food...

33. Gatsby
● No native asset pipelining
● Slow, manual DOM manipulation
● Replicate elements by copy-paste
● Refresh to view changes
● State coupled w/ DOM
● ES5 + polyfill for cross-browser compatibility
● Create document-based sites
● Code splitting, responsive images, etc
● Virtual DOM & declarative UI w/ React
● Componentization
● Hot reloading
● One-directional data flow
● ES6 + ES7 automatically transpiled
● Create app-like experiences
Before: vanilla HTML, CSS, JS
=>
#2 Most Hated
Technology
=>
Now: higher-level lang + patterns
A cutting-edge stack built for iteration speed
Vision

34. Before: laborious content migrations &
manually stitching data sources together
Now: pull data from anywhere.
Build with React & GraphQL.
Gatsby
=>
Vision
Data & CMS-agnostic development

35. Gatsby
One-click global deployment
Vision
● Content delivery networks
● Global load balancing
● Server redundancy and failover
● Continuous deployment and integration
● Performance and error profiling
● Security vulnerabilities
● And so much more
Now: Easy & free CI/CD pipeline +
CDN to deploy your website
Before: website deployment requires ops
expertise // expensive hosting
+

36. Now: Out of the box tooling to
make everyone productive
Gatsby
● Maintained for you -- no upgrading dependencies,
starting five different processes in the correct
order, hand-rolling a build pipeline….
● Documented -- your new team member can
Google for help when they’re stuck
● User-friendly -- built-in hot reloading, see helpful
error messages instead of confusing stacktraces,
etc
Before: mostly-working env maintained by
your best devs in their spare cycles
A friendly local dev environment
Vision
● Maintained by you -- your best dev set up the
asset build pipeline, deploys, and dev server. She
handles library upgrades and is the only one who
understand how all the pieces fit.
● Undocumented -- new team members frequently
blocked on weird quirks you forgot to write down
● Stack traces of death -- bugs throw application
errors, NGINX timeouts, and other errors that
frontend developers find impossible to debug

37. Gatsby
Vision
Gatsby Plugin Library

38. What Gatsby code
does at build time
Source plugin Component
What Gatsby code
does at runtime
Gatsbysite
Transformer
plugin(s)
GraphQL
queries
Source plugin
Source plugin
Source plugin Component
Component
Component
GatsbyandWebpackgenerates
staticfilesatbuildtime
Static
host
Person visits site
and clicks on things
Site returns static files

39. In Summary:

40. About BrikL
▪
▪
▪

41. BrikL Gatsby Use Case
▪
▪
▪
▫
▪

42. Architecture

43. Plugins
▪
▪
▪
▪
Source
▪
▫
▫
Gatsby Extensions

44. BrikL - Build time @ Netlify Build
Source
GraphQL
Component
CLIENT
Runtime
@ Netlify Edge
UNIQUEGatsbysite
Transformer
plugin(s)
Page Context GraphQL
queries
Source plugin
Source plugin
Social
sources
Shell
Component
Component
STATIC
Component
MIXED
GatsbyandWebpackgenerates
staticfilesatbuildtime
Static
host
Person visits site
and clicks on things
Site returns static files
Coming up:
Shop Config
+
ENV
+
skip
+

45. Build steps
3. GATSBY: Pass config into webpack for
React / JS Constants
4. GATSBY: Generate pages
5. GATSBY: Pass data into Gatsby

46. Build steps
Client ID e.g.:
cross-env
GATSBY_API_STAGE=dev
GATSBY_BRIKL_SHOP_ID=DEMO
gatsby develop

47. Build steps
Get configuration from API > onCreateWebpackConfig

48. Build steps
onCreateWebpackConfig

49. Build steps
4. GATSBY: Generate pages: createPages

50. Build steps
5. GATSBY: Pass data into Gatsby: createNode

51. Static Data (Gatsby only)
▪
▪

52. Shell Components
▪
▪
▪
Shell
Page
specific

53. Mixed Components
▪
▪
▪

54. Dynamic Components
▪
▪
▪

55. Gatsby + whatever

56. Challenges / Limitations
▪
▪
▪
▪
▪

57. Also...
▪
▪
▪

58. Questions?
Thank you!

59. 59
GraphQL Q&A

60. Next time on 10th July
AWS AppSync & Amplify (Workshop)
with Gerard Sans

61. 61
Thank you!Connect, Talk, Hack until 10pm

62. Credits (Slidetheme)
Special thanks to all the people who made and
released these awesome resources for free:
● Presentation template by SlidesCarnival
● Photographs by Unsplash
62