6-week study plan to conquer JavaScript difficulties (REACT/REDUX/ES6 etc)

6-week study plan to conquer JavaScript difficulties (REACT/REDUX/ES6 etc) Yuboren·2 months ago

Original link: A Study Plan to Cure JavaScript Fatigue

Sacha Greif

Like everyone else, I've seen Jose Aguinaga writing about it feels to learn JavaScript in 2016 recently.

Obviously, this article hit a sore spot on people. It's been on the hacker news more than once first. Also is the/r/javascript on the most fire, on the medium also has more than 10k recommendation.

This is not to be a grandstanding: I learned long ago that JS's biosphere is really confusing. In fact, I was doing the state of JavaScript investigation to understand the really popular JS library, to discard its dross and extract its essence.

Today, I do not simply state the development of JS, I will show you a very specific, step by step grasp the JS Knowledge System Learning Plan.

Target population

This learning program is written to:

• You are familiar with basic programming concepts such as variable methods;
• You have known Php/python a kind of back-end language, but also used a kind of jquery library;
• You want to learn more about front-end development, but get lost in countless frameworks and libraries where you don't know where to go.

Covered content

• The composition of the current JS application
• Why using jquery alone is not enough
• Why react is the most suitable choice
• Why don't you have to "get a full grasp of JavaScript" from the start?
• How to learn ES6 grammar
• Why and how to learn Redux
• What is GRAPHQL?
• What to learn after that

Learning Material Description

Disclaimer: The article will refer to some tutorials from Wes Bos links, only for recommendations, not promotional ads.

If you want to find other relevant information, Mark Erikson has a collection list on GitHub react, ES6, and Redux

This javascript is not a JavaScript

First clarify the main purpose of the study plan. Whatever you want. "Learn JavaScript" or "JavaScript Learning program", you can find countless tutorials on learning JavaScript language resources.

But this is actually a relatively simple part. The learning comprehension of a language can be very deep, but in fact most of the Web application code is very simple. In other words, 80% of the knowledge you need to write a web app is covered in the first few chapters of the JavaScript tutorial book you read.

The real difficulty lies in mastering the ecosystem of JavaScript, which contains countless frameworks and libraries. The main focus of this learning program is this part of the story.

Framework structure for JavaScript applications

To understand the complexities of today's JavaScript applications, we first need to understand how they work.

First, let's look at the composition of the 2008 standard Web application:

1. The database provides data for the backend (backend can be PHP or rails, etc.);
2. The backend parses the data and outputs the HTML;
3. HTML is sent to the browser, which is displayed as a Web page.

This type of application now has some client-side JS code to increase interaction (such as tags, modal windows, etc.), but in essence, the browser still gets the content of the HTML from the server.

Now compare the current 2016-year web App (also known as a single page app) with:

Did you find the difference? Instead of sending HTML content from the server, it returns only the data, and the rendering steps for the data to HTML occur on the client (and also the code that returns how the client will respond to the conversation).

There are good and bad things to do, the first benefit is:

• For the same block of content, sending only the data is faster than sending an HTML page.
• The client does not need to refresh the page to be able to interactively change the content (which is why it is called a single-page application)

The defects are:

• The initial load takes longer, because the amount of code that "data is converted to HTML" can be very large.
• In order to facilitate caching and querying, you also need a place in the client to manage and store data.

The more dirty is:

• Congratulations, now the client's technology stack is as complex as the server side.

The scope of client and server

Since there are so many flaws, why do we have to suffer this crime? Is it bad to use a PHP backend like before?

Well, imagine you're developing a calculator application. If the user wants to know the result of the results, it is very foolish to return it on the server side because the browser is fully capable of fulfilling this requirement.

But on the other hand, if you just build a static site such as a blog, the server-side directly generated HTML content is quite appropriate.

In fact, most Web applications are somewhere in between, and the question is what kind of architecture we adopt.

The key is that the two architectures cannot be transitioned: You can't start writing a pure server-side application and then slowly migrate to a pure client. In some cases, you'll have to stop to refactor all the parts, or leave behind a bunch of messy code that can't be maintained.

This also explains why you cannot "use jquery only" in all projects. You can think of jquery as a balm. It's magical when you need tinkering in the room, and if you abuse it just makes it look bad. On the other hand, the current JavaScript framework is like 3D printing technology: It takes longer, but results are more concise and reliable.

In other words, mastering the current popular JavaScript stack is betting that the vast majority of Web applications may end up separating server-side clients. You really need to pay more for the learning costs. But an idle youth, the eldest brother had to be sad.

First week: JavaScript basics

Unless you're a pure back-end developer, you should know a little bit of javascript. Even if you don't understand, JavaScript's syntax looks much like C, and should not be too unfamiliar to PHP or Java developers.

It doesn't matter if you don't know anything about JavaScript before. You can find a lot of free tutorials online to get you started quickly. For example Codecademy's JavaScript lessons is good.

• JavaScript Tutorials
• JavaScript Full Stack Tutorial
• JavaScript MDN
• JavaScript Standard Reference Tutorial

Week two: Start learning react

Once you have mastered the basic JavaScript syntax, you know a little bit about why JavaScript applications are so complicated, so let's just say something specific and where to get started.

I think the answer should be react.

React is a library of Facebook's open source UI tools. In other words, it is primarily used to process data to page rendering steps (view layer).

Don't get me wrong: I recommend you choose react not because it's the best frame in the world (it's too subjective), but because it's really very popular.

• React may not be the most popular frame in the world, but there are really a lot of people who like it.
• React may not be the lightest frame, but it's not bloated.
• React may not be the most accessible framework, but it's also very friendly.
• React may not be the most elegant frame, but it's elegant enough.

In other words, react may not be the best choice in all cases, but it is the most reliable. And it believes me, at the beginning of your time, still do not be too maverick good.

Learning react also helps you to understand some practical concepts. Examples include components, application states, stateless methods, and so on. It is valuable for you to learn any other framework and library.

Finally, react has the largest ecosystem of its kind, with many packages and libraries that work well with it, and its vast community makes it easier to get help online.

I personally recommend react for beginners this tutorial. I learned this tutorial myself, and it has just recently updated react best practices.

• React Introductory Example Tutorial
• React Tutorials
• I can understand it at a glance. Reactjs Introductory Tutorial-Essence Edition
• A very detailed example of react getting started
• React Getting started and best practices

Do you need a "full mastery of JavaScript" first?

If you are a step-by-step student, you may want to lay down the basics of JavaScript first.

But for most people, it's like studying human anatomy and fluid mechanics to learn to swim. Indeed, these two professional knowledge is very important for swimming, but still jump directly into the pool to start swimming cool Ah!

There is nothing wrong with this question, it is all about your learning method. In fact, most of the react basic tutorials require only a little bit of javascript knowledge, and you just need to master this part first.

This same principle applies to the JavaScript knowledge system in the broad sense. You don't have to worry about not understanding the input and output of Webpack or Babel. In fact, react launches a command-line tool that allows you to initialize your application without worrying about configuration at all.

Week three: Your first react app

After you have finished react's tutorial, you may face the same situation as I did:

• You may have forgotten half of what you just learned.
• You can't wait to practice with half the rest of your knowledge.

I believe that the best way to learn a framework or a language is to get started. And writing some personal projects is the best choice for experimental technology.

A personal development project can be as simple as a page, or complex to a complete Web application. I feel the difficulty of re-designing your personal site with new technology is just as good, and you probably haven't updated your personal standing structure in a long time.

As I mentioned before, it's really a bit overkill to show static content with a single page app, but react has a great tool Gatsby, a react architecture static site Builder that lets you experience all the benefits of react.

The benefits of getting started with Gatsby react are as follows:

• A pre-configured Webpack, which means you have to save a lot of trouble (Webpack configuration is simply too anti-human).
• Automatically generate routes based on your directory structure.
• All HTML is rendered on the server side, making up for the lack of client rendering.
• Static sites can also be easily hosted on GitHub pages without worrying about the server side.

The state of JavaScript, which I developed with Gatsby, saves me a lot of time by worrying about the annoying issues of routing, building tool configuration, server-side rendering, and so on.

Week four: familiar with ES6

As I was learning react, I quickly discovered that I could easily copy and paste code samples, but much remained to be understood.

Especially unfamiliar with the syntax of ES6:

• Arrowhead Function Arrow Functions
• Object destructor destructuring
• Class classes
• Expand operator the spread operator

If you feel the same way, it's time to take some time to learn ES6. ES6 for everybody is a great tutorial.

You want free tutorials also, Nicolas Bevacqua's practical ES6 is good.

• ECMAScript 6 Getting Started

A good practice for mastering learning ES6 is to refactor the code that you wrote in the third week and try to convert it to a more concise ES6 notation.

Week Five: Mastering state management

At this stage you should already be able to write some static content of the react front end.

But real web apps are definitely not static: they need to get data from the backend of a database class.

Now you can use react to pass data to each individual component, and the application can be messy if it's complicated to use. For example, when two components need to show the same set of data, or need to communicate with each other.

This is the time to introduce the concept of state management . Unlike a small block of storage states (state) in each of your components, you can store all of your data in a global store and then distribute it to each react component:

In the react camp, redux is the most popular state management library. Redux not only helps you centrally manage your data, it also restricts the operation of your data to a certain specification.

You can think of redux as a bank: You can't directly modify your account's deposit number (come on, let me add a few more 0 in the back!). ）。 Instead, you need to fill out the deposit form and let the bank cashier certify that the operation will be completed later.

Similarly, Redux does not allow you to modify the data of the global state directly. Instead, by passing actions to reducers, reducer is actually a way to receive the old state and the operation to return the new state.

These seemingly redundant jobs will allow you to maintain the flow of data in your application well. Redux Devtools is a good way to show changes in data flow.

You can also learn redux tutorials on Wes's website, which is free of charge.

Or if you like video tutorials, you can also refer to Dan Abramov's video tutorials on Egghead.io

• Redux Getting Started Tutorial
• Redux Getting started and best practices

Last week: Using GRAPHQL to construct APIs

So far, most of what we've talked about is on the client side, which is just half the app. Even if you don't need to fully understand node's ecosystem right now, you need to know what's important to any Web application: How the data is fetched from the server and uploaded to the client.

Also a Fackbook open source project GRAPHQL, it can be used as an alternative solution to traditional rest APIs.

Unlike the rest API, you distribute different rest paths based on your pre-defined datasets (such as/api/posts,/api/comments, etc). GRAPHQL allows you to query data on-demand just as you would an operational database.

Imagine a person who went to a raw food store, a bakery, a fruit store, and a shopping list with him for a few different times.

This new strategy makes sense when you need to request multiple sets of data sources. Just like the example of the shopping list above, you only need one request to get all the data.

GRAPHQL has been on fire for the past year, and many projects, such as Gatsby, are starting to use it.

GRAPHQL itself is just an agreement, and its best implementation is the Apollo library that works well with redux. There are quite a few tutorials on the web now, but the official Apollo documentation has made it easy for you to get a good look at it.

Besides react?

I recommend that you start by learning the react ecosystem because choosing it is really reliable. But that does not mean that there is only one reliable front-section technology stack. I have two other recommendations here:

Vue

Vue is a recent fire up a framework, a lot of Baidu Ali type of large companies have also started to use. It is also the official front-end implementation of the PHP framework laravel.

Compared to react, its main selling point is:

• Official Library of Routing and state Management for maintenance
• Focus on performance
• Lower learning costs, you can use HTML templates directly instead of JSX
• Fewer template codes

React's more powerful place lies in its vast ecosystem, such as react native-class implementations. But Vue is growing.

• Beginner to: Suggested learning sequence for Vue 2.0

Elm

If Vue is more similar to react, Elm is a more avant-garde implementation. Elm is not only a framework, but also a language built on JavaScript, similar to Coffeescript/typescript.

It has many advantages, such as performance improvement, semantic version, no running exception, and so on.

In the state of JavaScript survey, 84% of the developers who used it were satisfied.

What do you learn next?

I believe that after learning the above content you have mastered the react front-end technology stack. Hopefully you'll be able to apply it well in real-world development.

But that doesn't prove that you've mastered javascript!. This is just the beginning of mastering the entire JavaScript technology system. Here are some of the things you might be interested in (the content is also in English so it's not translated):

• JavaScript on the server (Node, Express ...)
• JavaScript testing (Jest, enzyme ...)
• Build Tools (Webpack ...)
• Type Systems (TypeScript, Flow ...)
• Dealing with CSS in your JavaScript apps (CSS Modules, styled components ...)
• JavaScript for mobile apps (React Native ...)
• JavaScript for desktop Apps (Electron ...)

An article is far from enough to cover all of this stuff. Everything starts hard, but you have to have faith in yourself. Wait until you understand how the various parts of JS to work together, the next thing is to do is to learn to ignite the new technology every month.

Any questions and good comments or suggestions are welcome to participate in the discussion in the comment area.

"Good study, day up"

6-week study plan to conquer JavaScript difficulties (REACT/REDUX/ES6 etc)