GraphQL - JavaScript Fullstack Solution

GitHub: https://github.com/evenchange4/todomvc-subscriptions
Demo: https://todomvc-web.now.sh/

Transcript

1. GRAPHQL - JAVASCRIPT FULLSTACK SOLUTION 2017.12.29 MICHAEL HSU
2. AGENDA 1. Recap 2. Server 3. Web
3. RECAP API GATEWAY - PROXY
4. RECAP GRAPHQL NATIVE - CONNECT TO DATABASE
5. DEMO ▸ TodoMVC: CRUD + Realtime ▸ https://todomvc-web.now.sh/
6. TODOMVC - FULLSTACK . (lerna) !"" packages #"" constants # Shared constants between client and server. #"" server # GraphQL Server !"" web # Web server
7. SERVER
8. HOW TO BUILD A GRAPHQL SERVER? (1/3) GRAPHQL OPERATION ▸ Query: R ▸ Mutation: CUD ▸ Subscription: Realtime (WS, MQTT) ▸ https://todomvc-server.now.sh/
9. HOW TO BUILD A GRAPHQL SERVER? (2/3) LIBRARIES ‣ 1. graphql-yoga: express, graphql-tools, graphql- subscriptions, graphiql ‣ 2. knex.js: ORM ‣ 3. Pkg: Binary compiler ‣ 4. Docker: Container
10. HOW TO BUILD A GRAPHQL SERVER? (3/3) MODULE ▸ 1. connector: connect to database ▸ 2. models: ORM, database manipulate ▸ 3. typeDefs: GraphQL type ▸ 4. resolver: Logic ▸ https://github.com/evenchange4/todomvc-subscriptions/ blob/master/packages/server/README.md
11. WEB
12. HOW TO BUILD A GRAPHQL WEB? (1/2) LIBRARIES ▸ 1. Next.js: Server-rendered React applications ▸ 2. Apollo-client: GraphQL client ▸ 3. Apollo-link-state: Manage local state (redux)
13. HOW TO BUILD A GRAPHQL WEB? (2/2) MODULE ▸ 1. gql: GraphQL type ▸ 2. hoc: React ▸ 3. resolvers: GraphQL for local state (getState, reducer) ▸ https://github.com/evenchange4/todomvc-subscriptions/ blob/master/packages/web/README.md
14. SERVER & WEB CONCLUSION - SIZE ▸ Server: Linux binary 64MB ▸ Web: bundle size 433KB + 101KB (Code split)
15. FULLSTACK TODOMVC WITH GRAPHQL SUBSCRIPTIONS https://github.com/evenchange4/todomvc-subscriptions TAKEAWAY