Before graduation, I did not have much personal experience in front-end engineering. Now I have been working for more than half a year, and my experience is getting deeper and deeper. Recently, I have prepared to have an in-depth understanding of NPM, YARN, Webpack, gulp, Babel, ESlint and TypeScript. How it Feels to Learn JavaScript in 2016, although it is said to be 2016, it still looks outdated now, which also shows that the front-end is gradually becoming stable.

Here is the full text:

Hi, I’m going to write a web project, but to be honest I haven’t touched code in years and I hear the industry is changing so much. You must be the most up-to-date Web dev we have.

Yes, but it’s more accurate to say I’m a Front End engineer. Visualizations, music players, soccer games — you name it — are front-end development. I just came back from the JS Conference (JsConf) and React Conference (ReactConf), so I know the latest techniques for creating Web apps.

That’s great! I now need to write a page that shows user activity, and I need to retrieve the data through a RESTful interface and present it in a table that can be filtered. Can I use jQuery to get data and presentation?

God, no, no, no, no one uses jQuery anymore. You should learn React, it’s 2016!

Ah, well, what is React?

It’s a cool framework created by some of Facebook’s best minds to help you easily control views, better manage projects, and improve performance.

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

You can, but you need to introduce the React and React Dom libraries into your page first.

What? Why two libraries?

React is the core library, and the React Dom is used to manipulate the Dom. You usually need to describe the Dom in JSX.

JSX? What is JSX?

JSX is a syntactic extension of JavaScript that looks more like XML. It’s a new way to describe the DOM, and it’s better than HTML.

HTML means very innocent.

Kid, it’s 2016, and no one writes HTML directly anymore.

Well, if I add these two libraries, can I use React?

Emmm, not very good. You also need to add the Babel library.

Another library? Babel is what

Babel is a software that allows you to convert any version of JavaScript code to the version you want. But if you insist on using only ES5 syntax, Babel can be omitted. But let’s be realistic, it’s 2016 and you should be using ES2016+ syntax like everyone else.

ES5? ES2016 +? I don’t know what they are.

ES5 stands for ECMAScript 5. It is the most widely used version and almost all browsers support ES5 syntax.

ECMAScript?

It is a language specification proposed in 1999, and JavaScript is one of its implementations. JavaScript, originally called Livescript, was introduced in 1995 and ran only in Netscape browsers. It was very confusing before, but now with seven versions of ECMAScript, it’s all very clear,

Seven versions? What about ES5 and ES2016+?

This is version 5 and version 7.

Wait, where’s version 6?

You mean ES6? Since each version is a superset of previous versions, using ES2016+ allows you to use all features of previous versions OF ES6 and ES5.

Okay, can I program in ES6?

Sure, but you can’t use some of the latest features like async and await. You can only use ES6’s generators and coroutines to perform asynchronous requests in the form of “synchronous” requests, so take a look at the CO framework if you’re interested.

I have no idea what you’re talking about. I’ve never heard of any of these terms. Let me get this straight. I just want to load a piece of data from the server. I used to get jQuery from the CDN and request the data through AJAX.

Dude, it’s 2016, no one uses jQuery anymore, it just makes you write spaghetti code.

Okay, so do I need to introduce React, React Dom, and Babel libraries to pull data and display HTML tables?

Yes, but you also need a module manager to package these three libraries into a single file.

Oh, what’s the module manager?

Its definition depends on context, but on the Web you can call it a module manager if you support AMD and CommonJS modules.

Wait, AMD and CommonJS are?

By definition, they are different specifications that describe how different javaScript libraries and class modules interact, often referred to as modularity. Have you heard of exports and require? You can write different JS modules via AMD or CommonJS, and then use Browserify to bundle these files together.

Sounds reasonable, but what is Browserify?

It is a tool that packages the COMMONJS-written JS modules that our project relies on to run in a browser. This tool is available because the modules we rely on tend to be published in the NPM Registry.

NPM registry?

It is a repository of code modules written by people all over the world.

Like a CDN?

Not quite. It is more like a central repository where people can publish and download modules. You can download modules to use locally or upload them to the CDN and use them.

I see, like Bower!

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

Oh, I see, then I use NPM to download the required library files.

Yes, if you want to use React, you just need to download the React module and import it into your code. You can use NPM to download almost all the popular javaScprit libraries today.

Angular is in there too?

Yeah, but Augular was in 2015. Augular is still in use, but with VueJS or RxJS libraries coming out in 2016, will you want to learn?

Let’s just say React. We’ve talked about it so much. So if I want to use React, ALL I need to do is download the library from NPM and package it with Browserify.

Yes.

But it seems complicated, with so many libraries to download and then pack up.

Right, so you need to run Browserify automatically using a task manager like Grunt, Gulp, or Broccoli, or even Mimosa.

Grunt? Gulp? Broccoli? Mimosa? I’m going crazy. There’s so much stuff in here.

They’re both task managers, but now they don’t look cool at all. We used them back in 2015, and have since used Makefiles, but now we integrate everything with Webpack.

Makefiles? These are generally used in C/C++ projects, right?

Yes, but you know, in the Web, we like to make things complicated first and then go back to square one. We’ve been doing this for years. Just wait, in a year or two we’ll be writing assembly code on the Web.

What do you mean by Webpack?

It is a module manager for another browser, as well as a task runner. It’s more like an improved version of Browserify.

Well, is it better than Browserify?

Maybe, it helps you better manage dependencies between modules. Webpack allows you to use different module managers. In addition to CommonJS type modules, the latest ES6 modules are also supported.

I’m totally confused by all this CommonJS/ES6 stuff.

Everyone does, but with SystemJS you don’t have to worry about them.

Oh my God, another JS noun, so what is SystemJS?

Unlike Browserify and Webpack 1.x, SystemJS loads modules dynamically, allowing you to bundle different modules into different files instead of packing them into one large file.

Wait, I think we should just pack all the libraries into one big file and load them.

Yes, but since HTTP/2 is coming, it will support request multiplexing.

Wait, so we can’t just put the React dependent libraries locally?

Also is not. I mean we can load the dependent libraries as external scripts from the CDN, but the Babel library still needs to be added to the local.

Well, that doesn’t sound too good.

Right, you have to bring in the whole Babel-core, which is very inefficient for an online environment. You need to do a lot of pre-loading to get your project ready, compressing resources, obfuscating code, inlining CSS, lazy-loading JS, and…

Got it, got it. So what do you do if you don’t use a CDN to load a library?

I use a combination of Webpack + SystemJS + Babel to convert from TypeScript.

TypeScript? I always thought I was writing code in javaScript.

TypeScript is javaScript, more specifically a superset of javaScript, or more specifically, the ES6 version of javaScript.

ES2016+ is already a superset of ES6, so why do we need this TypeScript thing?

Because it allows us to define types while writing javaScript, it reduces runtime errors. Now that it’s 2016, it’s time to add types to your javaScript code.

Haha, as its name suggests, TypeScript.

Although TypeScript is a superset of javaScript, it needs to be compiled into javaScript to run in a browser. Another tool, Flow, simply does type checking without compilation.

Wait, what is Flow?

It was a static type checker developed by a couple of guys at Facebook, and they wrote it in OCaml because functional programming looks cool.

OCaml? Functional programming?

It’s functional programming, high-order functions, Currization, pure functions that cool kids use today.

Well, I haven’t heard of any.

No one does at first. You just need to know that functional programming is better than object-oriented programming and that this is the way to go in 2016.

No, I studied object orientation in college. Is this better?

As good as Java was before Oracle bought it. Ha ha, I mean object orientation was great in the past and still used by a lot of people. But now that many people realize that changing the state of an object is too dangerous, they are moving toward immutable objects and functional programming. Haskell has been doing this for years, but don’t get me started on Elm people. Fortunately, native javaScript can also be programmed functionally through libraries like Ramda.

You need to stop listing nouns. What is Ramnda?

No, Ramda, similar to Lambda expressions, is a library created by David Chambers.

David? Is who?

David Chambers, a god who likes to play Mean Coup Game, is one of the contributors to Ramda. If you want to learn more about functional programming, you also need to know Erik Meijer.

Erik Meijer is?

Another functional programming guru who has given a lot of speeches attacking agile programming. Of course, if you’re interested, check out Tj, Jash Kenas, Sindre Sorhus, Paul Irish, Addy Osmani

Wait, I’m sorry to interrupt. I don’t really need that for me right now, I just want to pull the data and show it. Let’s go back to React. How do I get data from the server with React?

Emmm, you don’t use React to get data, you just use it to display data.

Ash, what do you usually fetch the data with?

You can Fetch the data from the server using Fetch.

What? Fetch the data from the server? That’s a pretty simple name for a guy.

Fetch, like XMLHttpRequests, is a native implementation of browsers to retrieve data from the server.

Is that AJAX?

While AJAX is just a wrapper based on XMLHttpRequests, Fetch lets you request data asynchronously in the Promise style, avoiding callback hell.

Call back to hell?

Because the network request is asynchronous, you need to get the data in the callback function. If you need the network request, you need to call the network request in the callback function, and then add the callback function. It gets messier and messier.

Yeah, YEAH, I know that, so can promise fix that?

Yes, with Promise you can more easily manage asynchronous requests, write easy-to-understand code, and invoke multiple network requests at the same time.

That’s Fetch, right?

Yes, but you have to make sure your user’s browser is up to date, otherwise you need Fetch’s Polyfill (compatible with browsers that don’t use Fetch), or use Request, Bluebird, or Axios.

God, how many libraries do I need to know, how many more.

This is javaScript, there are thousands of libraries that do the same thing, and of course we can pick the one that works best.

What are those libraries you just mentioned?

They are promise style request libraries implemented by XMLHttpRequests.

Isn’t jQuery’s AJAX methods starting to return promises?

Forget jQuery, go Fetch + Polyfill, or Request, Bluebird, Axios. We can await asynchronous requests in async functions with them, just like sequential programming.

This is the third time you have mentioned await, but I have no idea what it does.

Await allows you to block asynchronous requests, gives you more control over asynchronous requests, and then processes the data, greatly increasing the readability of the code. This is handy, but remember to add stage-3 preset Babel, or use syntax-async-functions via the transform-async-to-generator plug-in.

It’s too much trouble.

No, no, no, the real trouble is compiling the Typescript code first and then using the Babel transform to make await known to the browser.

What, Typescript doesn’t support “await”?

1.7 is not supported, it will only be compiled into ES6 and is expected to be supported in the next release. So you compile Typescript to ES6 and then convert it to ES5 via Babel to make it compatible with more browsers.

I don’t know what else I can say.

It’s actually pretty simple. Write code in Typescript, all modules are called in Fetch, add Babel’s stage-3 preset, and use SystemJS to load them. To make Fetch compatible with more browsers, be sure to polyfill, or use Request, Bluebird, or Axios, and await all promises with await.

We may have different definitions of simple, so now THAT I have the data, CAN I display it in React?

Does your application control all state changes?

I don’t think so. I just need to show the data.

That’s great, because otherwise I’d have to explain Flux and some of its implementations, like Flummox, Alt, Fluxible. But to be honest, Redux works better.

I don’t want to know any new names, I just want to show the data.

Wow, if you’re just showing data, you don’t really need React, just use a template engine.

Are you kidding me? Do you think this is funny? Oh, no.

I just want to show you what you can use.

Then please don’t say anything.

In fact, I recommend sticking with Typescript + SystemJS + Babel if you use a template engine.

Do you have a template to recommend?

A lot. Have you used anything before?

I can’t remember the name. It’s been too long.

jTemplates? jQote? PURE?

B: No, do you have any more?

Transparency? JSRender? MarkupJS? KnockoutJS? This one supports bidirectional binding.

Anything else?

PlatesJS? jQuery-tmpl? Handlebars? Some people still use these.

Does anything look like the last one?

PlatesJS? jQuery-tmpl? Handlebars? Even LoDash has a template engine, but that was in 2014.

Are there any newer ones?

Jade? DustJS?

Never heard of it.

DotJS? EJS?

Never heard of it.

Nunjucks? ECT?

Never heard of it.

That’s right, no one likes the Coffeescript syntax anymore. The Jade?

Didn’t you say something about Jade?

I mean Pug, also Jade. Now Jade is called Pug.

Well, I can’t remember what I used, what template engine are you using now?

Probably using the native template strings supported by ES6.

So let me stroke you. ES6 only?

That’s right.

Then I need to use Babel to work with more browsers.

That’s right.

Do I need to load its core library from NPM?

That’s right.

Do I also need Browerify or Webpack or SystemJS to manage these modules?

That’s right.

Unless I use Webpack directly, I also need a task manager.

That’s right.

Since I use functional programming and strongly typed languages, I also need Typescript or Flow.

That’s right.

To use await, Babel needs to be configured accordingly.

That’s right.

So I can use Fetch and Promise and all this magic stuff.

Yes, don’t forget to polyfill Fetch, some browsers don’t currently support this feature.

Okay, I’m crazy. Let’s call it a day. I don’t want to touch the Web again, and don’t talk to me about javsScript again.

No problem, maybe we’ll be using Elm or WebAssembly in the future.

I’ll just go write my back end. I don’t think I can keep up with all the changes, all the different versions, all the different compilers and converters. The javaScript community is so crazy that it thinks everyone can keep up with such rapid changes.

Lol, you should check out the Python community.

Why is that?

Have you heard of Python 3? (Python 3 is not forward compatible with Pyhon 2, big difference)

To sum up, one of the key things that has changed so much about the front end is the emergence of Node.js. It allows JS to run outside the browser and also provides the ability to read and write files. In this way, you can compile and transform JS files locally and run the packaged files in the browser.

We can ignore the syntax supported by the browser, all kinds of modular, ES new features, feel free to use it boldly, the worst of the last conversion can be.

Node.js also allows javaScript to write server-side applications. I’ve only used it to write Web interfaces, but not much else.