Who is the Target of this Study Plan?
You should read this study plan if:
You are well versed in fundamental concepts of programming, such as functions and variables.
You want to venture into deeper front-end development, but libraries and frameworks are keeping you stuck.
You have used Python and PHP languages to develop back-end work, or probably jQuery (a front-end library) in running a number of simple hacks.
Things We Will Cover
How’s and Why’s of Learning Redux
What is GraphQL? Why is it a big deal?
Learning ES6 syntax
The next step you should take
Why will your safest pick be React?
I can’t just use jQuery, why?
Resources Mentioned Here
Disclaimer: some of Wes Bos’ courses have materials that are very good, and there will be several affiliate links to them in this article. This is purely because of the material contents aforementioned, and not just the affiliate scheme. If you feel that you will need more materials, consider Mark Erikson. He has rich materials for ES6, Redux and React.
Data is sent to your back-end, which could be a Rails or PHP app.
After reading the data, the back-end’s output would be HTML in nature.
Then, the browser displayed the HTML sent to it as a web page, which was the DOM.
We can compare that with the “Single Page App”, which is the “modern” 2016 web app. The difference is very clear; what the server sends in this case is the data, in place of the HTML. The data is then converted into HTML on the client. This is the reason why you send a coded guide to the client on how to conduct the conversion.
Some of the implications of this system include:
Clients are able to swap content in, without the need for the browser to be refreshed. This is why it is referred to as the “Single Page App”. It is faster, because sending HTML pages takes longer, compared to sending content pieces.
The ‘data to HTML’ can become very large, causing the initial load to take longer. Again, you will need to have space for data storage on the client, so you can manage it from there. This is especially if you need to inspect or cache it. You will also have a client-side stack to deal with. Unfortunately, it becomes complex just like the server-side stack.
The Client-Server Spectrum
Now, what is the need for all this trouble? Let’s say you want to develop a calculator. There is no need for the user to go to the server in order to do the 1+1 sum if the browser is capable of conducting the operation.
Generating final HTML on the server is allowed if you intend to develop a static site like a blog. A web app will mostly fall within the range of the spectrum, and you’d be very keen to know where yours falls. The spectrum is not perfectly sequential, and one needs to pause at various stages to know where they are. Failure to do this will produce spaghetti codes that cannot be maintained.
Week 1: Start With React
React is popular, lightweight, easy to learn and very elegant. You should avoid taking risks with your technological choices at the beginning, where React introduces you to application state, components and stateless functions as vital components.
Week 2: Your First React Project
After learning React, you are likely to have forgotten half the content and be very eager to put what you have learnt into practice. You can try developing your personal site for a project that will help you learn faster. Try using Gatsby; it will help you to avoid the downsides of a single-page app.
Week 3: Mastering ES6
If you are not conversant with object destructuring, the spread operator, classes and arrow functions, you will need to learn ES6 first. You may want to use Wes’ ES6 for everybody videos, or Practical ES6, by Nicolas Bevacqua, if you like free materials.
Week 4: Taking on State Management
Building a basic React front-end with static content should be an easy task for you at this point, although a typical web app will not be static. If two components want to communicate or display similar data, things will get messy very quickly. State Management stores your data in one global store, from where it is sent to the components you have created.
Bonus Week 5: Building APIs with GraphQL
We have only been focusing on half the equation; that is the client. The process that data uses to reach the client from the server should not be forgotten. Imagine sending someone to the grocery store, bakery and then to the butcher, on different trips. It would be inefficient and tedious, and you would really just send them with a shopping list. The shopping list has the same use as GraphQL, which is making multiple data queries.
Beyond React and Co
To start off, React ecosystem is recommended because it is a safe pick. For further exploration, Elm and Vue are good options.
Understanding the React front-end stack is not the end of everything. Some of the subjects you will come across as you explore include:
Did you find this article helpful? We would appreciate your feedback. Please drop a comment or suggestion below.