What was it like learning JavaScript in the past?

Hey, I recently received a Web project, but to be honest, I haven't had much contact with Web programming in the past two years. I heard that Web technology has undergone some changes. I heard you are the most knowledgeable web developer here about new technologies?

To be precise, I am a "front-end engineer". But you've found the right person. I'm not too familiar with this year's technology, front-end visualization, music players, drones that can play football, just ask. I just went to a JS conference and a React conference, and there is no new technology that I don’t know about.

sharp. Well, I want to develop a web page to display the latest updates from users. I think I should get the data through the backend interface, and then use a table to display the data, and the user can sort the data. If the data on the server changes, I also need to update this table. My idea is to use jQuery to do it.

Don’t use jQuery! No one uses jQuery nowadays. It’s 2016 and you should definitely be using React.

Oh, okay, what is React?

React is a very powerful library, written by the talented people at Facebook. It makes pages more controllable, extremely performant, and easy to use.

Sounds really good. Can I use React to display data from the server?

Of course, you only need to add two dependencies, one is React and the other is React DOM

Um, wait, why are there two libraries?

React is the library I am talking about. React DOM is used to operate DOM. Because these DOMs are written in JSX, they require a specialized library to manipulate them.

JSX? What is JSX?

JSX is an extension of JS. It looks similar to XML and can be used to write HTML. You can think of JSX as a more elegant way of writing HTML.

Why not use HTML...?

It’s 2016 now, and there is no one who writes HTML directly.

Yes. Okay, after adding these two dependencies, can I start using React?

No. You need to add Babel before you can use React.

Babel is another library?

Well, Babel is a translation tool. Babel can translate the JS you write into any version of JS. You don’t have to use Babel, but if you don’t, you’ll have to write ES5 syntax. You know, it's 2016, how can you not use ES2016+ syntax? ES2016+ is so cool.

What is ES5? What is ES2016+? I'm a little dizzy.

ES5 is ECMAScript 5. Most people will use ES5 because most browsers support ES5.

What is ECMAScript...

As you know, JS was born in 1995, and the JS standard was formulated in 1999. At that time, JavaScript was still called Livescript and could only run in Netscape browsers. It was a chaotic time, but now we have 7 versions of the JS specification.

7 versions? What about ES5 and ES2016+?

are the 5th and 7th versions respectively.

Hey, what about the sixth version?

You are talking about ES6. Each version is a superset of the previous version, so you can just use the latest ES2016+.

Yes. Why not use ES6?

Well, you can use ES6, but you won’t be able to use cool syntax like async and await. It is better to use ES2016+. With ES6, you can only use generators to control asynchronous task flow.

I don’t know what you are talking about...you said too many nouns that I don’t understand. I just want to get some data from the server. I used to use jQuery very well. After introducing jQuery from CDN, I can use AJAX to get the data. Can't I do this now?

Brother, it’s 2016 and no one uses jQuery, okay? Everyone knows that using jQuery will only create "spaghetti" code (unmaintainable)

Okay, so now I have to load three libraries to get and display the data.

Yes, you can actually use the "Module Manager" to "package" these three libraries into one file.

Oh, what is a module manager...

The module managers of different platforms are different. The front-end module manager generally refers to something that manages AMD or CommonJS modules.

Okay...what are AMD and CommonJS?

are two definitions. We have many ways to describe the interaction of multiple libraries or classes in JS, such as exports and requires. You can write JS according to AMD or CommonJS API, and then package them with Browserify.

Sounds reasonable. But what is Browserify?

is a tool used to package JS files in the form of CommonJS and run them in the browser. The people who use npm repositories invented CommonJS.

What is npm warehouse...

is a public warehouse used to place dependent modules.

Is it like a CDN?

Not the same. It's more like a database where everyone can post code and download code. You can download these codes locally for use during development, or upload them to a CDN when necessary.

Sounds like Bower!

Yes, but it's 2016 now and no one uses Bower anymore...

Okay, I get it, so I should use npm to install dependencies .

Yes. Let me give you an example. If you want to use React, you can install React directly using npm, and then import React in your code. Most JS libraries can be installed this way.

Well, Angular works too.

Angular is so 2015. But Angular is not dead this year, there are also VueJS and RxJS, etc. Do you want to learn them?

Let’s use React. I've just learned enough. So I install React with npm and package it with Browerify?

Yes.

This seems a bit too complicated.

really. This is why you should use a task management tool like Grunt, Gulp or Broccoli, which can run Browserify automatically. No, you can use Mimosa now.

What are you talking about...

Task management tool. But we don't use it anymore. We were still using it last year and later changed it to Makefiles, but now we all use Webpack.

I thought that only C/C++ projects would use Makefiles.

Yes, but obviously we in web development like to complicate things first and then return to the simplest state. We do this every year. Just watch, in less than two years we will be able to write compilations on the web page.

Hey, what is Webpack you just mentioned?

Another module management tool, it is also a task management tool. You can think of it as a souped-up version of Browserify.

Oh, okay, why is Webpack the enhanced version?

Well, maybe it’s not strengthened. Webpack tells you how you should manage your dependencies. Webpack allows you to use different module managers, not just CommonJS, but even supports ES6 modules.

Everything is going on here, I am confused.

Everyone is confused, but just wait until SystemJS comes out.

Oh my god, another JS library, what the hell is this?

Haha, unlike Browserify and Webpack 1.x, SystemJS is a dynamic module loader.

Wait a minute, didn’t I just say that all dependencies should be packaged into one file?

That’s what I say, but after HTTP/2 becomes popular, it will be better not to package it.

Then why don’t we add React’s three dependency files directly to the page?

no. You can load these files from a CDN, but you still have to translate them locally with Babel.

Oh, so bad?

Yes, you can't run Babel on the production environment. You should run a series of tasks before publishing to the production environment, including compression, obfuscation, inline CSS, lazy loading of scripts... …

I understand, I understand. Since I can't use a CDN directly, what should I do?

I would consider using Webpack + SystemJS + Babel to transpile Typescript.

Typescript? Aren’t we talking about JavaScript? !

Typescript is also JavaScript. It is easier to use than JS and is a superset of JS. It is based on ES6, which is the ES6 we just talked about. You still remember it.

ES2016+ is already a superset of ES6, why does Typescript appear again?

That’s it, Typescript allows us to write “strongly typed” JS, thereby reducing runtime errors. In 2016, it’s time for JS to support strong typing.

Apparently Typescript can do it.

Flow can also do it, the difference is that Typescript needs to be compiled, while Flow just checks the syntax.

Alas, Flow is?

is a static type checker written by people from Facebook. Written using OCaml, functional programming is very easy.

OCaml? Functional programming?

Nowadays, big names are using these things. It’s already 2016. You know, concepts like functional programming, higher-order functions, currying, and pure functions.

I do not know what you're talking about.

No one knew it at first. Let’s put it this way, all you need to know is that functional programming is better than object-oriented programming, and in 2016 we pointed to functional programming.

Wait a minute, I studied object-oriented programming in college, and I thought it was pretty good at the time.

Java was pretty good before it was bought by Oracle. I mean, object-oriented used to be good, and some people still use it, but now everyone finds that state transformation is difficult to maintain, so everyone is starting to use "immutable objects" and functional programming. Haskell people have been using this set of things for a long time, but luckily there are libraries like Ramda in the web development field, which allow us to perform functional programming using JS.

Did you just throw out a few more nouns? What is Ramnda?

It’s not Ramnda, it’s Ramda, which is a bit like a Lambda expression. is a library written by David Chambers.

who?

David Chambers, a great man. blablabla

I have to interrupt you. These things all look good, but I think they're all too complicated and unnecessary. I just want to get the data and display it, I'm pretty sure I don't need the knowledge in this case.

Back to React, how do I get data from the server using React?

Well, React does not provide this function, you can only use React to display data.

I’m convinced. So how do I get the data?

You can just use the Fetch API.

What the hell? The name of this API is terrible.

I think so too. Fetch API is an asynchronous request interface provided by the browser.

Oh, that’s not AJAX.

AJAX just uses the XMLHttpRequest object, but the Fetch API allows you to use Promise style to initiate asynchronous requests, helping you get rid of "callback hell".

Callback hell?

Yes, every time you make an asynchronous request, you have to wait for it to respond. At this time you have to use a function within a function, and this nested call is callback hell.

All right. Does Promise solve this problem?

Yes. By using Promises to manage callbacks, you can write code that is more readable and easier to test. You can even make multiple requests at the same time and wait for them all to return.

Can Fetch do the same?

Yes. But the premise is that your users use a new version of the browser, otherwise you need to add a Fetch "polyfill", or use libraries such as Request, Bluebird or Axios.

God, how many libraries do I need?

This is JS, there are thousands of libraries doing the same thing. We know libraries, and we have the best libraries. We have a large number of libraries, and you can get whatever you want.

What do the libraries you just mentioned do?

These libraries operate XMLHttpRequest and return Promise objects.

It seems that jQuery's ajax method does the same thing...

We no longer use jQuery since 2016. If you use Fetch, you may need to add a Polyfill, otherwise you can use Bluebird, Request or Axios. Then use await and async to manage Promise so that asynchronous tasks can be controlled.

This is the third time you said await. What is that?

await allows you to block an asynchronous call, allowing you to better control the data returned asynchronously, greatly enhancing the readability of the code. await is very easy to use, you only need to add stage-3 configuration in Babel, or add syntax-async-functions and transform-async-to-generator plug-ins.

Sounds like crazy.

Not crazy. In order to use await, those who compile Typescript and then use Babel to translate it are crazy.

What the hell? Typescript doesn't support await?

It will be supported in the next version.

I have nothing to say.

You see it’s actually very simple. Use Typescript to write code, use Fetch to initiate asynchronous requests, compile all codes into ES6, and then use Babel's stage-3 configuration items to translate ES6 into ES5. All code is loaded using SystemJS. If you can't use Fetch, add a polyfill, or use Bluebird, Request or Axios so that you can use await to handle Promise.

It turns out that our understanding of "simple" is different. Okay, so with this, I can finally get the data and display it using React, right?

Does your web page need to handle status changes?

Well, no need. I just want to show the data.

That’s good, otherwise I have to explain to you Flux and some implementations of Flux, such as Flummox, Alt, Fluxible. But seriously you should use Redux.

I have ignored what you said. Again, I just want to show the data.

Well, if you just want to display data, you don’t need React. All you need is a template engine.

Are you kidding me?

I'm just telling you what techniques you can use.

Stop it, really.

I want to say that even if I just use a template engine, I will still use Typescript + SystemJS + Babel.

I just want to display data on the page, just tell me which template engine to use.

There are many, which one have you used?

Um, I haven’t used it for so long that I don’t remember.

jTemplates, jQote or Pure?

Um, I don’t remember, is there anything else?

Transparency? JSRender? MarkupJS? KnockoutJS? This one supports two-way binding.

Any more?

PlatesJS? jQuery-tmpl? Handlebars? Some people are still using it.

A bit like. Which ones are more similar to the last one?

Mustache, underscore? I remember even Lodash had a template engine, but that was back in 2014.

Well, maybe it’s a newer library?

Jade? DustJS?

Never used

DotJS? EJS?

Never used .

Nunjucks? ECT?

Never used. I can’t remember, if it were you, which one do you use?

I should use the ES6 native template string

I guess, only ES6 supports it.

Yes.

You need to use Babel

to get it right.

Need to use npm to install

Correct.

You need to use Browserify or Webpack, or SystemJS

Yes.

If I don’t use Webpack, I also need a task management tool.

Yes.

But since I want to use functional programming and strongly typed languages, I first need to use Typescript or Flow.

Yes.

If I want to use await , then I must use Babel translation.

Yes.

Then I can use Fetch, Promise and all kinds of cool stuff.

Well, don’t forget to add Fetch’s Polyfill because Safari does not support Fetch.

Guess what, let’s stop talking here. I don’t do it anymore, I don’t do Web anymore, and I don’t want to touch JS anymore.

It’s okay, in a few years, we will all be using Elm or WebAssembly.

I'm going back to the backend. I can't stand all these changes, version updates, compilations and transpilations. The JS community is crazy if it thinks anyone can keep up with it.

I understand you. I suggest you go to the Python community.

Why?

Have you ever heard of Python 3?

The above is what it was like to learn JavaScript in the past? For more related content, please pay attention to the PHP Chinese website (www.php.cn)!