JavaScript panorama of 2016

The programming picture is a colorful picture, with exciting changes never showing signs of stopping. The witty conversation below will hopefully improve some of the excitement in that picture, and help you grasp the latest "black models" recently.

Hey, I just got a new web project, but in fact, I haven't touched the web much in recent years, and it seems like the web market has changed a lot. You are one of the most famous web dev lately, right?

• The exact term is Front End engineer, and you are right to find me. I do everything about the web in 2016. Graphics and music playing. run unmanned aerial drones, everything in the world. I just attended JsConf and ReactConf, so I know the latest technologies to create the best web application.

Great. I need to create a website that displays the latest activity from the user, so I just need to get the data from the REST endpoint and display it as a filtered table, and update it if there is a change on the server. What if I use jQuery to access and display data?

• Oh god, no one uses jQuery anymore. Try React, 2016.

Oh really. What is React?

• The library was great because the Facebook guys built it, with very high control and performance to the application, by allowing him to easily handle any view change.

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

• Okay, but first you need to add React and React DOM to the library in the webpage.

Wait, go to the two libraries, huh?

• One is the library, the other is to control the DOM, but now we can also describe the DOM in JSX.

JSX? What is JSX?

• JSX is just an extended set of JavaScript syntax, quite similar to XML. This is also a way to describe the DOM, considering it is a better version of HTML.

What about HTML now?

• 2016 already. No one else directs the HTML code.

Ah. That's right, if I add these two libraries then it will be able to use React, right?

• Not yet. You have to add Babel to use it.

Another library? What is Babel?

• Babel is a transpiler that allows us to target specific versions of JavaScript. You don't have to add Babel to use ReactJS, but if you don't add it, you'll be forced to use ES5. Honestly, in 2016, then specialized in code with ES2016 + giving it the model.

ES5? ES2016 +? What are you talking about. What is ES5 with ES2016 +?

• ES5 stands for ECMAScript5. This is the version most people have targeted since most browsers have integrated it.

ECMAScript?

• That's right, as you know, this is the foundation for JavaScript scripting standard in 1999, after its initial launch in 1995, JavaScript was then called Livescript and only ran on Netscape Navigator. It was still very messy at the time, but now things have improved a lot, and we have, about 7 versions.

Seven versions too. Really. What version is ES5 and ES2016 +?

• One is Thursday, and the other is Saturday.

Wait, what about the sixth version?

• You mean ES6? Each version is a larger part of the previous version, so if you use ES2016 +, you already have all the features of previous versions.

Oh. So what is ES2016 + more than ES6?

• In general, he is fine with ES6. But with good features like async and await, you need to use ES2016 +. Otherwise you will be stuck with ES6 generator with coroutines to help block asynchronous calls, giving you proper flow control.

I don't think he just said anything, all the strange names. I just downloaded a bunch of data from the server, I just added jQuery from a CDN and just took the data with AJAX call, can I do that now?

• In 2016, the general, whoever uses jQuery, will have a bunch of spaghetti codes on his hand. Everyone knows.

OK. So instead, I will download three libraries to retrieve the data and display the HTML table.

• Well, you can add these three libraries but have to package them with module manager to load only one file.

I got it. What is the manager module?

• Also depending on the environment, but for the web, usually to spend anything that supports AMD or CommonJS common modules.

Ahaaaa. And AMD and CommonJS are …?

• There are many ways to describe the interaction between multiple libraries and JavaScript classes. You know, export and require? You can write many JavaScript files that identify AMD or CommonJS and you can use tools like Browserify to package.

OK, that sounds reasonable. What is Browserify?

• This is a tool that allows you to package the dependencies described CommonJS with files that can be run in the browser. This tool comes out because most people export these dependencies in the npm registry.

Npm registry?

• This is a very large public repo, where experts remove code and dependencies into modules here.

Like a CDN?

• Not necessarily. Like a more centralized database, here people can publish and download the library, you can use them to program locally or upload to CDN if you want.

Oh, that's like Bower!

• That's right, but in 2016, whoever uses Bower.

Well, so … I have to download the npm library from npm, right?

• Right. For example, if you want to use React, you must download React module and import it into the code. You can do the same with most popular JavaScript libraries.

Oh, like Angular!

• Angular is from 2015 already. But okay. Angular, then VueJS or RxJS and other interesting libraries. Do you want to hear more about these libraries?

Come back to React, I have learned too much. So, if I need to use React, I have to access it from npm and then with Browerify, right?

• Exactly.

Package a pile of dependencies together, why is it so complicated?

• Of course it's complicated. That's why we have to use task managers like Grunt or Gulp or Broccoli to run Browertify automatically. Otherwise, he could use Mimosa.

Grunt? Gulp? Broccoli? Mimosa? What are you talking about?

• Task managers. But we are out of time, 2015 is still good, then we switched to Makefiles, but now it's all in use for Webpack.

Makefiles? I remember this mainly used in C projects with C ++?

• Correct. But actually in the web we like to be more complex than to go back to the basics. Every few years we are "messy" once, just wait and see, we are about to assemble the assembly assembly to make the web right here.

*Sigh*. Do you mention Webpack?

• This is another module manager for the browser, and it can also handle task runner. Like Browserify, but better.

Oh, Ok. Better than any idea?

• Well, it can't be said to be completely better, this is more subjective, depending on how you like the dependencies package. Weback allows you to use many other manager modules, but not just CommonJS, like native ES6 also supports modules.

This CommonJS / ES6 tangle made me dizzy.

• Everyone is the same, but you should not care about SystemJS anymore.

Oh my god. Add another -js. Okay, so what is SystemJS?

• Well, unlike Browserify and Webpack 1.x, the SystemJS is a dynamic module loader that allows you to pack multiple modules in multiple files instead of wrapping them up into a large file.

Wait, but I thought we wanted to build the library in a large file and load that file!

• Yes, but because of the future of HTTP / 2, many HTTP requests are still better.

Wait, then we can't just add these three libraries to use React right ??

• Not entirely so. I mean, you can add them as external scripts from a CDN, but you'll still have to add Babel.

*Sigh*. Another piece of work, right?

• If nothing else, you will have to cover all babel-core, but not optimized for production. In production, you need to perform a super confusing pre-task series to prepare the project. You need to minimize assets, make them worse, inline css on fold, defer scripts, and then….

Alright, alright. So if I want to add library directly in CDN, how will I do it?

• I will transpile it from Typescript with Webpack + SystemJS + Babel combo.

Typrescript? I thought I was coding in JavaScript!

• Typescript is also JavaScript, or more specifically, JavaScript's superset, or JavaScript specifically on the ES6 version. You know, the six versions I just said earlier?

I rewarded ES2016 + for ES6 superset already! WHY is there an additional Typecript now needed?

• Well, because it allows us to use JavaScript as typed language, and reduce run-time errors. In 2016, you should add some types to your JavaScript code.

And obviously, Typescrip has done that.

• Flow is fine, though it only controls typing, while Typescript is JavaScript superset and needs to be compiled.

* Sigh * … What about Flow?

• Type static checker created by someone at Facebook, written on OCaml platform, because functional programming is the best.

OcCaml? Functional programming?

• You don't know anything, new models 2016, Functional Programming, Higher Functions, Currying, Pure functions, …

I don't understand what the hell you just said.

• At first no one understood. Listen, you just need to know that functional programming is better than OPC and that's what we should use in 2016.

Wait, I used to study OOP at school, OOP used very well?

• Oracle's new retrieval Java is also good. I mean, OOP was still good at the time, and still has a foothold today, but now people are realizing that modifying states is quite annoying. And even more fortunate is that the web now has more libraries like Ramda that allow us to program pure JavaScript functions.

What is the name of all the western ships? What is Ramnda?

• Not. Ramda. Like Lambda. The library of David Chamber you know?

David, what?

• David Chambers. Very good. One of those who has a big deal for Ramda. You should also find out about Erik Meijer if you really want to learn functional programming.

And Erick Meijer is …?

• Also a guy in functional programming. This guy has been giving lectures dozens of times, he used to wear three colorful shirts, then beats Agile too much. The Tj, Jash Kenas, Sindre Sorhus, Paul Irish, Addy Osmani are all good too –

Slowly. Only access and display data is difficult. I am pretty sure that only create tables with dynamic data. Let's go back to React. How do I get data from React server?

• Well, you don't actually retrieve data with React, React only displays data.

Oh, I'm dead. So what will you do to retrieve data?

• Should you use Fetch?

What is Fetch? What is the name?

• Is it true? Fetch is the name of the native implementation used to implement XMLHttpRequests with the server.

Oh, so AJAX?

• AJAX is just the use of XMLHttpRequest only. But of course, Fetch lets you do AJAX on promise, and you can split your promise later to avoid callback hell.

Callback hell?

• Right. Every time he makes an asynchronous request to the server, he needs to wait for the server's response, causing him to add a function to the function, called a "callback pyramid" from hell.

Oh, OK. And this "promise" solves this problem, right?

• Right. By filling the callback control through promise, he can write code more easily, easier to understand, easier to mock and test, and also perform parallel requests at the same time and wait until all are loaded. accomplished.

And Fetch does it all right?

• That's right. But only if your users use the latest browser, you still have to add Fetch polyfill or use Request, Bluebird or Axios.

God, how many libraries do I have to know? How much is this?

• JavaScript that. There are thousands of libraries doing the same things. We know the library well, actually, we use the best libraries. These libraries are super big, and sometimes we include Guy Fieri's picture in it too.

Did you just remind Guy Fiery? Always try it out. What can something Bluebird, Request, Axios do?

• They are libraries that implement XMLHttpRequests and return the result as a promise.

Isn't jQuert's AJAX method also starting to pay promise?

• In 2016, remove the "j". Use Fetch, and polyfill when it's not in the browser, otherwise use Bluebird, Request, or Axios. Then manage promises with await in async function, and crossover, you already have the appropriate control flow.

He reminded await three times already, but I don't know what it is.

• Await you to block asynchronous calls, from which you can manage data access times better, and make the code easier to read. Or, you know, you just have to say that you have added stage-3 preset in Babel, or using syntax-async-functions and transform-async-to-generator.

I must be crazy.

• No, not crazy. It is time to precompile Typescript code and transpile with Babel to use the new await crazy.

Eh? Not in Typescript available?

• The next version has, but 1.7 only targets ES6, so if you want to use await in the browser, you must first compile Typescript code targeting ES6, and then go to Babel.

Say it.

• Oh god, it's easy to eat. The code runs out with Typescript. All modules use Fetch compile to target ES6, transpile them with Babel on pre-installed stage-3, and load with SystemJS. If you don't have Fetch, polyfill, or use Bluebird, Request or Axios, and process all promises with await.

It seems but the two of us have a very different concept of "easy". So, when I finished the above "ritual", I could retrieve the data and could display it with React, right?

• Is your application trying to handle state changes?

Err, not sure. I just need to display the data is okay.

• Oh, thank you. Otherwise I have to explain to Flux, then the implementation like Flummox, Alt, Fluxible. Although he should use Redux better.

I will pretend I have never heard of those names. Back to the problem, I just need to show the data.

• Oh, if you just need to display the data, you won't need React in the first place. You just need the templating engine.

How cool is it? Is my poking fun set? Is this the way you treat people you love?

• I just explained the tools you can use.

Stop! Stop it!

• I mean, even if I only used the templating engine, I would still have to resort to Typescript + SystemJS + Babel combo if I were you.

I need to display page data, not picking stars in the sky. You just need to tell me which templating engine to use, the rest I take care of myself.

• Very much, which one are you familiar with?

Ugh, I don't remember my name anymore, it's been a long time since I haven't touched.

• jTemplates? jQote? PURE?

Err, bear, don't know. Is there any other?

• Transparency? JSRender? MarkupJS? KnockoutJS? This has two-way binding.

Anything more?

• PlatesJS? jQuery-tmpl? Handlebars? There are still users.

Maybe. Is there anything similar to the last thing you just mentioned?

• Mustache, underscore? I think lodash is good or not now, but these have been around since 2014.

Err … seems to be newer.

• Jade? DustJS?

Is not.

• DotJS? EJS?

Is not.

• Nunjucks? ECT?

Is not.

• Mah, no matter who likes to use Coffeescript anyway. What about Jade?

No, did you just remind Jade?

• Pug … ah, Jade. That's right, Jade has now changed its name to Pug.

* Sigh * Bear, can't remember. So which one do you use?

• Probably only ES6 native template strings.

Let me guess. Does that need more ES6?

• You then.

And based on the browser I am using, I need more Babel.

• That's right.

And if I want to integrate without adding a core library, I need to load it as a module from npm anymore ha.

• Correct.

Then you need to add Browserify, or Webpack, or is it something SystemJS does?

• After that, he knew it well.

If you don't use Webpack, then you have to manage with the new task runner ideal?

• That's right again.

But since I should use function programming and typed languages, I first need to pre-compile Typescript or add this Flow.

• You are gradually in the lesson.

And then send it to Babel if I want to use await.

• 10 points for the quality.

So then I can use Fetch, promise, and control flow and all their miracles.

• Don't forget the polyfill Fetch without the support, Safari still can't handle it yet.

Understood, this conversation is all over. Well, you know what, I also ended up, running off the web, all JavaScript whatsoever.

• Well, in a few years people will switch to code with Elm or WebAssembly instead.

I decided to break up the backend. Change, then the new version, then the new version, then the compiler with transpiler is too much. The JavaScript community is all crazy people who keep turning around like this.

• So I understand what you mean. Then you should try jumping into the Python community.

What happen?

• Have you heard about Python 3?

…

ITZone via hackernoon