GraphQL & React tutorial (part 1/6)
A guide to using the latest production-ready tools to build modern apps in 2017
I’ve been fascinated with teaching people to build apps since the success of the Discover Meteor book in 2013. In many ways, writing a book about Meteor was straightforward: at the time it was a completely closed system with one templating system; one router; one build tool; one database and one data transport.
Through a series of posts, follow along as I build a Todo List using what I’ve found to be the most innovative and production ready tools as of early 2017. We’ll walkthrough the basics of creating an application using the same tech employed by both massive companies like Facebook and the developer community-at-large (per the State of JS).
On the frontend
create-react-appto set up our build system, providing:
- React, a rendering library you’ve probably heard of.
- Webpack, a build tool (we won’t mess with this, but just let
- Jest, a testing tool with an emphasis on React.
- React Router v4, the latest incarnation of the most popular router for React.
- Apollo Client, a GraphQL client library.
- Storybook, a UI component harness — this a key tool that will enable our Component-Driven Development (see below).
On the backend
create-graphql-servera tool to generate a GraphQL server using:
graphql-server, a GraphQL server for Node (part of the Apollo project).
- MongoDB, a easy to use database.
- Passport, an authentication library, using JWT.
- Jest, the testing library.
In particular, we’ll make use of ES2016 syntax throughout the app, and also the
async/await feature from the ES2017 draft. This will be enabled by the use of the Babel compiler in both apps.
Apart from demonstrating how to use the technologies listed above to create an application, I also want to use the opportunity to illustrate a couple of general development techniques that are transformational in terms of the pace of development, quality of the final application and pure power of the process.
Component-Driven Development is a way of building user interfaces (UIs) by starting with their smallest parts: the components. Emphasis on components is a theme in UI development that has been gaining momentum since the introduction of modern UI libraries like React.
CDD denotes a set of tools (such as React Storybook) and a way of developing applications to really take advantage of this change in emphasis. Some advantages of CDD include:
- The ability to parallelize work as different people work on different components.
- The ability to use a “Visual TDD” approach to allow building UIs in a more rigorous fashion.
- Increased communication opportunities between designers and other product people and the developers building the components.
- Reuse of components between applications and features.
I’ll talk more about why I think CDD is great in future posts, but hopefully some of these advantages will become clear as we develop our todo list app.
This is a technique advocated by the Apollo team where you anchor your client/server development around the (GraphQL) schema. It might sound obvious, but if you take the time to think about the schema early on in the process, then your front and backend can be developed in isolation, and switched out easily.
This is an especially good idea when prototyping an idea like this one; we can safely use a tool like
create-graphql-server to quickly build out a first version of our schema to prototype the app with, and then later migrate to a different tool (if you so desire).
We’ll also show a variety of testing and mocking techniques that take advantage of the schema-centric approach
What we’re building: Taskbox Zero
So what are we going to build? The basic idea is a Todo list with an “Inbox Zero” style philosophy.
The foundation of any product development process is defining the product. Go to part 2 below to dive into the why’s and what’s of Taskbox Zero.