|
| 1 | +# New GraphQL.org Site Architecture: |
| 2 | + |
| 3 | +## Index |
| 4 | + |
| 5 | +*Goal:* This is the landing page and is our opportunity to quickly capture attention and explain what GraphQL is and why you should care. |
| 6 | + |
| 7 | +*Timeframe:* Launch Mon, Sept 12th |
| 8 | + |
| 9 | +This page is effectively a marketing page for GraphQL and should be the visual, scrollable version of the "Introducing GraphQL" conference talks and should be rich with visual metaphor and illustration and take advantage of whitespace to make individual salient points. |
| 10 | + |
| 11 | +Above the fold, this page should succinctly explain what GraphQL is and illustrate with a simple (editable) query/response example. Before scrolling you should understand the following: |
| 12 | + |
| 13 | +* GraphQL is an query language for APIs. |
| 14 | +* GraphQL is sent by client applications, such as an iOS app. |
| 15 | +* GraphQL is evaluated by a web service and often returned as JSON. |
| 16 | +* GraphQL typically replaces REST. |
| 17 | + |
| 18 | +Below the fold we should introduce concepts one at a time, each with visual metaphor and take-aways: |
| 19 | + |
| 20 | +1) GraphQL describes what a client needs in terms of how client developers think about data. |
| 21 | + |
| 22 | +* If you're familiar with JSON, GraphQL is easy to learn and understand. |
| 23 | +* It's easy to anticipate the shape of the result for any query. |
| 24 | +* GraphQL only sends what you ask for, nothing more or less. |
| 25 | + |
| 26 | +2) GraphQL queries can access many "resources" in a single network request. |
| 27 | + |
| 28 | +* A query can access properties of not just one object, but of many related objects. |
| 29 | +* Compared to REST, GraphQL requires much less network activity. |
| 30 | + |
| 31 | +3) GraphQL services provide a type system. |
| 32 | + |
| 33 | +* Every `{ }` corresponds to an object of a particular type, and every type describes the fields available. |
| 34 | +* GraphQL only runs queries that make sense. |
| 35 | +* Tools and IDEs can make editing queries easy via type-aheads. |
| 36 | + * GraphiQL is a free tool that you can use. |
| 37 | +* Type system defines descriptions, making it easy to keep documentation up to date. |
| 38 | + |
| 39 | +4) GraphQL is composable via fragments. |
| 40 | + |
| 41 | +* Fragments describe a portion of some Type to be queried. |
| 42 | +* Fragments are often used next to View code where data is used. |
| 43 | +* Fragments are composed together to create full queries. |
| 44 | + |
| 45 | +5) GraphQL makes backwards-compatible APIs easy. |
| 46 | + |
| 47 | +* Server does not need to worry about concerns of any particular client, only the complete set of capabilities. Clients are responsible for the data they receive. |
| 48 | +* Because GraphQL only sends what you ask for, new capabilities can be introduced via new fields on types with no impact on existing queries. |
| 49 | +* Old capabilities can be marked "deprecated" with no impact on existing queries. |
| 50 | +* Far fewer reasons for versioning your API when using GraphQL. |
| 51 | + |
| 52 | +6) GraphQL queries are answered by simple functions on your server. |
| 53 | + |
| 54 | +* GraphQL is not backed by any database technology, just like REST. |
| 55 | +* Every field on each type is represented by a function for retrieving that data. |
| 56 | +* A GraphQL executor will call your functions and use as much concurrency as possible. |
| 57 | +* Possibilities are endless for connecting to your server's existing data model. |
| 58 | + |
| 59 | +Finally, there will be a set of links for learning more (diving into `Learn`) and for getting started (in `Code`). As well as a wall-o-logo for companies using GraphQL. |
| 60 | + |
| 61 | +## Learn |
| 62 | + |
| 63 | +*Goal:* Introduce GraphQL, one concept at a time, covering both primary concepts and best practices. |
| 64 | + |
| 65 | +*Timeframe:* Basic primary concepts by Sept 12th, advanced primary concepts by Sept 30th, best practices as ready over Q3/Q4. |
| 66 | + |
| 67 | +Where "GraphQL the Spec" is designed for a specific audience of those building GraphQL servers, this represents "GraphQL the Book" and is designed for the audience of anyone who wishes to use GraphQL. It should cover both GraphQL core concepts in addition to best practices and further topics, and it should range from introductory concepts through advanced concepts. |
| 68 | + |
| 69 | +The landing page for this section should begin as a more information-rich introduction to GraphQL, explaining why you might use it, and give a brief overview of the constituent parts. Take-aways from this introduction page: |
| 70 | + |
| 71 | +* GraphQL is a query language. |
| 72 | +* GraphQL servers describe a type system, called a "schema". |
| 73 | +* Clients can access a GraphQL server's type system to learn about what's possible. |
| 74 | +* Clients send queries to servers and typically get back JSON. |
| 75 | +* GraphQL servers validate and execute GraphQL queries. |
| 76 | + |
| 77 | +There is then a TOC through the sections and chapters (this is a straw-man list, open to reordering and addition) |
| 78 | + |
| 79 | +* Core Concepts: |
| 80 | + * Query Language: |
| 81 | + * Basics (queries, fields, arguments, aliases, comments) |
| 82 | + * Variables |
| 83 | + * Fragments |
| 84 | + * Values |
| 85 | + * Directives (skip & include) |
| 86 | + * Type System: |
| 87 | + * Basics (Schema, Objects & Fields) |
| 88 | + * Scalars |
| 89 | + * Lists & NonNull |
| 90 | + * Interfaces |
| 91 | + * Unions |
| 92 | + * Enums |
| 93 | + * Advanced Topics: |
| 94 | + * Validation |
| 95 | + * Execution & Error Handling |
| 96 | + * Introspection |
| 97 | + * Mutations |
| 98 | +* Best Practices: |
| 99 | + * Servers: |
| 100 | + * Schema Design Guidelines |
| 101 | + * Paginating Lists |
| 102 | + * Non-Breaking Changes |
| 103 | + * Performant Servers (Batching & Caching) |
| 104 | + * Authentication & Authorization |
| 105 | + * Serving over HTTP |
| 106 | + * Clients: |
| 107 | + * Using Variables |
| 108 | + * Co-locating Fragments |
| 109 | + * Caching Results |
| 110 | + * Persisted Queries |
| 111 | + * Generating Models |
| 112 | + |
| 113 | +## Code |
| 114 | + |
| 115 | +*Goal:* Introduce open source GraphQL tools along with quick getting started guidelines for each. |
| 116 | + |
| 117 | +*Timeframe:* Top 3 servers described by Sept 12th, remainder by Sept 30th. |
| 118 | + |
| 119 | +This page is all about fulfilling the "Ok I'm sold! Now what?" conundrum. It should first very quickly reintroduce the elements of GraphQL you would expect to see software for as well as offer a quick path towards getting something working. |
| 120 | + |
| 121 | +1) Servers |
| 122 | + |
| 123 | +Explain the purpose of a GraphQL server, that there are servers written for many different languages and environments, and that graphql-js is the reference implementation operated by Facebook. |
| 124 | + |
| 125 | +Each server should contain the following: |
| 126 | +* Logo |
| 127 | +* Name of Project |
| 128 | +* Language/Environment |
| 129 | +* Link to website |
| 130 | +* Getting started (e.g. npm install + code sample) |
| 131 | + |
| 132 | +2) Clients |
| 133 | + |
| 134 | +Explain the purpose of a GraphQL client, that it's okay to just use curl/XHR/fetch, and that clients can offer more value via smart caches and integration with UI frameworks. |
| 135 | + |
| 136 | +Each client should contain similar set of info as servers. |
| 137 | + |
| 138 | +3) Services |
| 139 | + |
| 140 | +Hosted GraphQL-as-a-service have an opportunity to pitch themselves here. |
| 141 | + |
| 142 | +4) Tools |
| 143 | + |
| 144 | +Highlight many common tools and libraries used by GraphQL community, e.g. GraphiQL. |
| 145 | + |
| 146 | +## Community |
| 147 | + |
| 148 | +*Goal:* Central dispatch for finding help for GraphQL questions, learning about conferences and meetups, and connecting with the community. |
| 149 | + |
| 150 | +*Timeframe:* Simple version by Sept 12th, evolve over time. |
| 151 | + |
| 152 | +This page should serve as a high-level view of what resources are available and what's going on in the community. It should encourage pull-requests to facilitate being updated by the community over time. |
| 153 | + |
| 154 | +* Links out to: |
| 155 | + * Stack Overflow topic |
| 156 | + * Slack/Discord channels |
| 157 | + * Popular blogs |
| 158 | + * Twitter feed |
| 159 | +* Calendar of upcoming meetups or conference talks related to GraphQL (encourage edits by community) |
| 160 | +* Grid of recorded videos about GraphQL (conf talks, etc). |
| 161 | + |
| 162 | +## Blog |
| 163 | + |
| 164 | +*Goal:* GraphQL core team's blog, signal-boosting popular articles written elsewhere. |
| 165 | + |
| 166 | +While any evergreen content typically belongs as chapters in the "Learn" section, the Blog is an opportunity for GraphQL core team members or occasional invited contributors to discuss experiments, interesting applications, or signal-boost things like new releases of the GraphQL spec, the reference implementation, upcoming events, or links out to interesting articles. |
| 167 | + |
| 168 | +Task: generate RSS feed (maybe also email subscription?) |
| 169 | + |
| 170 | +Long term goal: metric frequency of posts, set goals to moderate frequency. |
| 171 | + |
| 172 | +## Spec |
| 173 | + |
| 174 | +Link out to GraphQL spec. |
0 commit comments