I have been working in software for a while now and luckily I have been part of every level in the process of making a software product. I have also had the pleasure of working on different projects using different technologies. Every time I encountered new technology I get all giggly and feel like a noob getting to learn something new no matter what it is … new programming language, methodology, architecture, design or the next framework that will revolutionise the way we build software.
The most fun in software is learning new things related to the software development, whether it be a new language, framework, methodology, design approach, architecture pattern or simply a shortcut in your editor.
When I decided to learn Ruby and Ruby on Rails it was simply because I felt I needed to do something different; When I decided to create an App using Swift (iOS) and Java (Android) it was just so I would know what I was talking about when the discussion revolved around Apps.
At my job I’m part of a team that is moving a 10 year old monolithic website from Web Client Software Factory to a, more modern, Javascript client using a RESTful backend API. And, as you can imagine, this is not done by a single person so there is a team and therefore no single person will be able to learn everything.
So, I was a part of the team and got to work on React. Mostly structuring, architecting, automating build process etc. Not a deep dive into the client side part. And since I have never created a React application from start to finish on my own I decided to learn and understand the fundamentals.
One thing I found, when I started looking into the world of front end development, was the lack of structure and not many opinionated ways to create applications that could grow into large scale applications. Mostly I found snippets that taught you syntax and core React concepts or tutorials for specific modules. What I wanted was a tutorial on putting it all together so I could create an application that could grow.
What do you do when you search the internet and you don’t find what you are looking for? Make it and publish it!
So, this is the first time I write down my learning process from start to finish and I’m hoping it can help me understand what I’m doing better and maybe it might help others.
I will be making this as simple as possible since I am not a fan of complex development. I love things that make developers life simple so I will be using GitHub, create-react-app, react-router, redux, redux-saga and redux-form. Take a look at the tools we are using and make sure you check the versions since there may have been updates since I wrote this; so be careful ;)
GitHub
We will be storing the code on GitHub and there are branches for each part of the process so you can get finished parts of the application by getting different branches. We are also using Gists to show snippets of code during the process. The gists are useless on their own but since medium is able to render gists in a nice way I decided to go for that so the code will be nicely formatted.
yarn & npm
We will be using a dependency manager and npm is the goto dependency manager when writing javascript applications. I like to use yarn since it is fast and nimble and, since I like that one better, it will be the one most talked about here. However, there is nothing we do with yarn that can’t be done with npm so you can use the manager you like. If you like to give yarn a try go ahead and install it now.
create-react-app
create-react-app is a cli that provides a nice, simple, initial structure for a React application so we can get started quickly. It also provides a lot of things that help make the development pain free. Take a look at What’s inside to see what it gives.
react-router 4
When creating an application you might make it simple without routes but usually you need to route between views and react-router makes it a lot easier.
redux 5
Every application has a state that it needs to maintain and by using redux you have a predictable state container, or a simple object, that represents the whole state. We update this state in a unidirectional data flow so it is easy to see how and where the state is being manipulated.
redux-saga 0.14.6
If we need to access local storage, server api or browser cache it can be useful to use redux-saga to make that happen. This is still in its pre release but I like it and it makes my life easy ;)
redux-form 6.7.0
We are allowing our users to create new items and that requires a form and redux-form fits perfectly with our redux application state. Even if it is simple and we might be able to do without it I am trying to provide a structure and tools that no matter if your application will be small or large it will be accommodating.
styled-components 2.1.1
We need to style our application to make it look good and for that we will be using CSS. There are a few ways to apply CSS in an isolated and structured manner. We will be looking at two ways to accomplish this but we are only implementing the usage of styled-components.
Like I said in the beginning, this is an opinionated way to create a ReacJs application and the only opinion heard during this writing was mine.
When I started this tutorial I thought I might be able to squeeze it into a single medium story but when I had gone through the structure of the application I saw that wouldn’t be enough. So, there are a few parts to the Jumbles application tutorial and the parts are as follows.
Structure
This is where we set up our folders and figure out where to put things like views, routes, sagas, reducers etc. The branch could easily be a boilerplate for a new application if you like.
Wireframe
When I write new things I like to get the wiring out of the way. Set up my views with no styling and just get the flow out of the way. After we are done here you should be able to do everything the application is supposed to do even if it still has no storage and the data is hardcoded.
Form n’ Storage
Once the application is mostly ready we’ll provide a form for the user to create and store new things so they are persistent between sessions. After we are done here the application should be functional for a user to use it even if it looks bad.
Look n’ Feel
This is where we start making things look good (better). Using an application is more fun if it looks good. Even if it does what it is supposed to do we don’t like using applications that look bad. After this part the application should be easy on the eyes and appealing to users.
Progressive Web App (PWA)
Progressive web app is a fairly new thing but it is a nice way to give a web application a native feel. We will be setting Jumbles up so it is a PWA making it an application on your home screen.
Well; if you are ready to tackle this simple application we just jump right in and start with our structure in part 1 :)
