A Study Plan To Cure JavaScript Fatigue

Are you interested in JavaScript coding, but find the language confusing when you start learning? Then this article is definitely for you. With a simple study plan, it could take you only 5 weeks to learn JavaScript perfectly, so sit back and read on.

A fairly recent article by Jose Aguinaga, “how it feels to learn JavaScript in 2016,” has gained a lot of attention. Hacker News featured it as top news twice, and it became the most popular post on the /r/ JavaScript subreddit. Furthermore, it garnered over ten thousand likes on Medium.

The popularity is not all that surprising, because the JavaScript ecosystem is very confusing. This post will look at what is not okay, but also give a solid, sequential study plan towards triumphing over the confusion.

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 is there no need to necessarily learn JavaScript first?

Why will your safest pick be React?

I can’t just use jQuery, why?

How does a contemporary JavaScript web appear?

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.

JavaScript vs. JavaScript

As we begin, we need to make sure we are reading from the same script. Searching “JavaScript study plan” or “Learn JavaScript” on Google will give you results, which will teach you ways of learning the JavaScript language. Web apps usually use codes that are relatively simple and easy to learn, but you can dig deeper for the complex parts of JavaScript language.

About 80% of what one needs in order to write web applications is comprehensively covered within the beginning chapters of the common JavaScript book. Attaining a perfect mastery of the JavaScript ecosystem is the difficult part, as it has numerous libraries and antagonist frameworks. Fortunately, this study plan is focusing exactly on that difficult part.

Building Blocks of JavaScript Applications

Understanding how modern JavaScript apps work will go a long way in helping you to understand their components, especially for starters. Circa 2008 is a “traditional” web app. Let’s have a look at its basics:

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.

Most of the apps had JavaScript code that increased interactivity, including modal windows and tabs. However, these browsers were still being fed with HTML, and used to go on from that point.

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:

The Positive

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 Negative

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 0: JavaScript Basics

You most likely know a little JavaScript, unless you are exclusively a back-end developer. If not, JavaScript’s C-like syntax also looks like Java or PHP. Even if it proves to be extremely difficult, don’t give up because there are lots of other avenues for you to learn, including JavaScript lessons from Codecademy.

Week 1: Start With React

React is the perfect answer for you, now you already have the basics of JavaScript at your fingertips. Facebook is the foundation of this UI library, as it created it and is responsible for open-sourcing it. This means that “data to HTML” is conducted by Facebook.

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.

Next Steps

Understanding the React front-end stack is not the end of everything. Some of the subjects you will come across as you explore include:

Build tools

Type systems

JavaScript on the server

Did you find this article helpful? We would appreciate your feedback. Please drop a comment or suggestion below.