Sign inSign up

GraphQL & React tutorial (part 1/6)

A guide to using the latest production-ready tools to build modern apps in 2017

Tom Coleman
Last updated:

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.

Unless you’ve been living under a rock, you’d know that the number of options for building apps in JavaScript continues to grow without bound. How is a developer supposed to make sense of it all?

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).

App Architecture

On the frontend

  • create-react-app to 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 create-react-app handle it).
  • 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-server a 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.

Development Techniques

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

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.

Schema First

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.

GraphQL & React tutorial (part 2/6)
What we’re building and why we’re building it

Did this article help you?

Get free UI development guides and tutorials like this emailed to you.

4,478 developers and counting

We’re hiring!

Join the team behind Storybook and Chromatic. Build tools that are used in production by 100s of thousands of developers. Remote-first.

View jobs

Popular posts

GraphQL & React tutorial (part 2/6)

What we’re building and why we’re building it
Tom Coleman

UI component explorers — your new favorite tool

Building complex UIs one component at a time
Dominic Nguyen

Designing for developers

Why designers should build developer products
Dominic Nguyen
PricingAboutJobsTerms of ServicePrivacyStatusSecurity • SOC 2Contact Sales
© Chroma Software Inc. Made by the maintainers of Storybook.