A Proposed Stack for Your Next Side Project
A talk from Reversim conference
I like doing side projects. It’s an opportunity to learn new technologies, work on the entire creation flow, including product, marketing and devops, which I don’t usually get to do at work, and most importantly, make an idea that I have in my mind a reality.
Usually you don’t have a lot of time to work on a side project, maybe about 3 hours a week, or two days in a row at a hackathon. Many people have ideas, but not everyone implement them, and one of the main reasons is that the bootstrap is hard and preventing riding a wave of success. It’s hard to keep moving fast when you spend a whole day configuring, and keep bumping into small yet necessary technologies you need to learn.
In the past year a few technologies became mature, and useful for a quick bootstrapping.
In this post I will explain how to use them. My last side project was Better Developers — a website for developers, with a list of skills that great developers have, and the tasks one can do to improve at them.
The stack I used for this project is as follow:
I used a serverless architecture for the backend. Serverless architecture means I don’t create a server, but use a third party service, that takes care of managing all the resources (for example, makes sure it’s always available), and I add only a little code, if necessary. The third party service I used is called GraphCool, and it’s a GraphQL server.
GraphQL is a spec, considered by some to be REST next version. Unlike REST, that works on objects (POST call will create object, GET call will fetch an object, an so on), GraphQL works on a graph. By using GraphQL, one can fetch only specific fields from object, and combine data of multiple objects in one call, without abusing the convention. This helps creating leaner transfers, and reducing its number.
GraphQL was created by Facebook. First used in 2012, and released in 2015. It’s not under MIT open source license, but under less open license. It’s in use by large companies like GitHub, Twitter, Pinterest and more.
GraphQL query (to fetch data) will look like this:
And the result:
GraphQL mutation (to create / change data) will look like this:
And the result:
GraphCool allows creating Types (objects), and their fields through a intuitive UI. It’s also allowing adding data through the UI, and has a Playground where one can create queries and mutations, to add data textually, and verify the queries really work before adding them to the code. GraphCool has an auto complete helper for the queries and intuitive errors.
Another helper available is GraphCool CLI, by using it, one can pull the schema, change it locally and push again, and do more actions.
After configuring GraphCool, the backend is ready and we can move on to the Frontend.
The problem with front end projects is that there are many libraries, tools and “must have” dependencies. Using create-react-app helps having a directories tree with basic react project (and even one test), ready to be edited. After running:
$ create-react-app AppName
$ yarn start
We will be able to see the auto generated app in the browser:
If you know React, you can skip this session. I will only mention the most basic design that will allow me to explain Apollo.
To pass data from outside of the component, we will use a certain property, like name in the above example, and inside the component we will have access to the value by calling this.props.name.
Apollo is a front end library to communicate with GraphQL servers. It’s a big project with libraries for Angular, Swift, and more, as well as React. It has a convenient built in features like cache managing, optimistic updates and more, there’s no need to manage the HTTP calls, and learning curve is pretty easy.
This is how the main JS file looks like, when first created using create-react-app:
To connect the app to our backend, this is the addition that’s needed:
Wrapping the project’s main component with ApolloProvider component, that receives client:
The client contains the end point of the GraphCool project, displayed in the GraphCool project’s main page. The query will look almost identical to the query tested in GraphCool Playground:
It’s sitting in the file of the component that uses it, and is connected to the component by replacing the export with:
Inside the component we call the query like that:
And we can use loading and error to handle different results from the server:
The next step is to deploy all this to production.
Netlify is a build, deploy and hosting tool for web projects. It’s configuration contains only four elements — the repo link, build command, branch, and publish directory. Every time you’ll push to the repo, a new build will run, and if successful, will be deployed automatically to production, no need to upload files manually or create script for that.
As you can see,
this stack makes it very easy and quick to start working on the business logic, which is a main key in the success of you project bootstrapping.
Code School React fundamentals course (~ 1 day to finish)
GraphCool & Apollo awesome tutorial (~ 2 days to finish)