GraphQL & React tutorial (part 1/6)

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

blog.hichroma.com