What is it to learn javascript in 2016

- Hey, I received a new web project, but, honestly, I have not been engaged in web coding for several years, and I heard that everything changed a bit. You're the most modern web developer, right?

“It's now called the Front-End Engineer, but yes, I am he.” I work with the web in 2016. Visualizations, music players, flying drones that play football, anything. I just returned from JsConf and ReactConf, so I know the latest technology for creating web applications.
')
- Cool. I need to create a page that displays recent actions from users, so I just need to get data from REST and display them in some filtered table, well, update it if something changes on the server. I thought maybe using jQuery to extract and display data?

- Oh my God! Not! No one else uses jQuery. You should try React: this is 2016!

- Interesting. What is React?

- This is a very cool library made by guys from Facebook. It really gives you complete control and improves application performance, making it very easy to handle any changes to views.

- It sounds tempting. Can I use React to display data from the server?

- Yeah, but first you need to add React and React DOM as libraries.

- Wait, why two libraries?

“Well, one is the library itself, and the second is for manipulating the DOM, which you can now describe in JSX.

- jsx? What is JSX?

- JSX is just a JavaScript syntax extension that looks very similar to XML. This is kind of another way to describe the DOM. Think of it as improved HTML.

- What happened to HTML?

- This is 2016. No one else writes HTML in raw.

- Oh well. If I add these two libraries, can I use React?

- Not really. You need to add Babel, and then you can use React.

- Another library? What is Babel?

- Oh, Babel is a transpiler, it allows you to focus on specific versions of JavaScript, while writing code in any version of JavaScript. You don’t have to add Babel in order to write to ReactJS, but if you don’t, then you’re stuck with ES5, but this is 2016, you have to code in ES2016 + like all the cool guys.

- ES5? ES2016 +? I'm lost. What are ES5 and ES2016 +?

- ES5 means ECMAScript 5. This is the version that most people are targeting, since it is implemented in most browsers today.

- ECMAScript?

- Yes, do you know the JavaScript standard, which was founded in 1999 after its initial release in 1995? Then, when JavaScript was called LiveScript and only worked in Netscape Navigator. It was very confusing then, but fortunately, now everything is clear, and we have 7 versions of this implementation.

- 7 versions. Seriously. And ES5 and ES2016 + it? ...

- Fifth and seventh edition respectively.

- Wait, what happened to the sixth?

- ES6? Yes, each edition is an add-on of the previous one, so if you use ES2016 +, then you use all the functions of previous versions.

- Good. Why use ES2016 + over ES6 then?

“Well, you can use ES6, but for interesting things like async and await, you need to use ES2016 +. Otherwise, you're stuck with ES6 generators and coroutines for blocking asynchronous calls and normal flow control.

“I have no idea what you just said, and all these names are confused.” Listen, I just want to load a bunch of data from the server, just connect the jQuery from the CDN and just get the data using AJAX. Why can't I do this?

- Dude, this is 2016. Nobody uses jQuery anymore, this ends with a bunch of tangled code. Yet they know it.

- I see. So my alternative is to load three libraries to extract the data and display the HTML table.

“Well, you include these three libraries, but link them to the module manager to load only one file.”

- Clear. And what kind of module manager?

- The definition depends on the environment, but for the web we usually mean everything that supports AMD or CommonJS modules.

- Well, ooooh. And AMD and CommonJS it? ...

- Definitions. There are tons of ways to describe how several libraries and JavaScript classes should interact. You can write some JavaScript files that define the AMD or CommonJS APIs and use something like Browserify to link them.

- Well, it makes sense ... I guess. And what is Browserify?

- This is a tool that allows you to associate CommonJS dependencies for files that can be run in the browser. It was created because most people publish these dependencies in NPM.

- NPM?

- This is a very large public repository, where smart people post code and dependencies in the form of modules.

- How is CDN?

- Not really. It's more like a centralized database where anyone can publish and download libraries, so you can use them locally for development and then upload them to CDN if you want.

- Oh, how bower!

- Yes, but this is 2016, now nobody else uses Bower.

“Hm, I see ... so do I need to load libraries from NPM?”

- Yes. For example, if you want to use React, then you load the React module and import it in code. This can be done for almost every popular JavaScript library.

- Oh, it's like in Angular!

- Angular is too 2015. But yes. Angular is also there, along with VueJS, RxJS and other interesting libraries from 2016. Do you want to know about them?

- Let's stick with React, I already learned too much about him. So, if I need to use React, will I pull it out of this NPM, and then use Browserify?

- Yes.

“It seems too complicated to just take a bunch of dependencies and tie them together.”

- Yeah, that's why you use a task manager, like Grunt or Gulp, or Broccoli to automate the launch of Browserify. You can even use Mimosa.

- Grunt? Gulp? Broccoli? Mimosa? Damn it, what are we talking about now?

- Task managers. But they are not so cool anymore. We used them in 2015 style with Makefiles, but now we are switching to Webpack.

- makefiles? I thought it was mainly used for C or C ++ projects.

- Yeah, but apparently, on the web, we like to make things complicated, and then go back to basics. We do this type every year. You wait, in a year or two we will still have assemblies in the web.

- Pfff. Did you mention something called a webpack?

- This is another browser module manager, at the same time it is a kind of Task Manager. This is like an improved version of Browserify.

- OK. And why is he better?

- Well, maybe not better, but more flexible in terms of how dependencies are related. Webpack allows you to use different module managers, not just CommonJS. For example, native ES6 modules.

- I am very confused in these CommonJS / ES6.

- Yes, everyone is entangled in this, but you can no longer bathe, because there is a SystemJS.

- Oh, God, something again, JS. Well, what is this SystemJS?

“Well, unlike Browserify and WebPack 1.x, SystemJS is a dynamic loader module that allows you to link several modules in several files, rather than linking them into one large file.

- Wait, I thought we wanted to merge our libraries into one big file and upload it!

- Yes, but because of HTTP / 2, several HTTP requests are actually better.

- Stand! So why can't we just add three original libraries for React?

- Of course, you can add them as external scripts with CDN, but you still need to add Babel.

- Eh. And that's bad, isn't it?

- Yes, it is necessary to include Babel-core completely, and this will not be effective for production. In production, it is necessary to perform a number of preliminary tasks so that the project is completely ready, and this is a ritual, in comparison with which to cause the devil - this is a recipe for how to cook an egg. It will be necessary to minimize files, make uglify, play with styles, think about loading scripts ...

- Got it, got it. But if you do not download the library directly from the CDN, how else?

- I would make TypeScript transports using Webpack + SystemJS + Babel combo.

- TypeScript? I thought we were writing JavaScript code!

“Typescript is JavaScript, or rather, a superset of JavaScript.” More specifically, javascript on ES6 version. Well, that sixth version that we talked about.

- I thought that ES2016 + is already a ES6 superset! Why do we need TypeScript now?

“Because it allows us to use JavaScript as a typed language and reduce the number of runtime errors.” This is 2016, you need to add some types to the JavaScript code.

- And TypeScript obviously does that.

- And Flow, although it only checks types, while TypeScript is a JavaScript add-in that needs to be compiled.

- Uh ... and Flow?

- This is a static typing tool made by guys from Facebook. They wrote it in OCaml, since functional programming is amazingly cool.

- OCaml? Functional programming?

- Well, this is what cool guys are using today, well, like, you know, 2016. Functional programming. High order functions. Currying. Pure function.

- I have no idea what it is.

- No one understands at the beginning. You just need to know that functional programming is better than object-oriented programming, and this is what we should use in 2016.

- Wait, I taught OOP at the university, I thought it was cool?

- Well, so it was until Oracle bought Java. I mean, OOP was good before, and it is still used, but now everyone understands that manipulating states is equivalent to kicking babies, so now everything is moving towards immutable objects and functional programming. The guys from Haskell have been shouting about it for 100 years, and I have not mentioned Elm yet. But, fortunately, we now have online libraries such as Ramda, which allow us to use functional programming in plain JavaScript.

- Are you just making up names? What is Ramnda?

- Not. Ramda Like the Lambda. Well, you know, David Chember's library?

- David whom?

- David Chember. Cool people One of the authors of Ramda. Look at the work of Eric Meyer, if you are serious about the study of functional programming.

“And Eric Meyer is this? ...”

- Also a functionary. Cool people He has a bunch of presentations where he is smashing Agile in a strange colored T-shirt. Look at what Tj, Jash Kenas, Sindre Sorhus, Paul Irish, Addy Osmani do ...

- OK. Slow down. All this is good and beautiful, but I think that all this is too complicated and unnecessary for a simple data retrieval and display. I’m sure that I don’t need to know these people or all of these things in order to create a table with dynamic data. Let's go back to React. How can I extract data from the server in React?

- Well, in fact, you do not need a React to fetch the data, it displays the data.

- Oh shit. So what is used to fetch the data?

- Use Fetch to get data from the server.

- Use Fetch to fetch data? Whoever calls these things needs a thesaurus.

- Oh yeah. Fetch is the name of the native implementation for executing XMLHttpRequests.

- Oh, AJAX.

- AJAX is just an XMLHttpRequest request. And Fetch allows you to do AJAX based on promises, which can then be resolved to avoid callback hell.

- Callback hell?

- Yes. Each time an asynchronous request is executed, you must wait for its response, which forces you to add a function inside a function called the callback hell pyramid.

- Oh, OK. Did the promises solve this problem?

- Still would! By manipulating the callbacks through promises, you can write more understandable code, test it, and also perform several simultaneous requests at the same time and wait until they all work out.

- And this can be done with the help of Fetch?

- Yes, but only in some browsers, otherwise you need to enable Fetch polyfill or use Request, Bluebird or Axios.

- How many libraries do I need to know, for God's sake? How many of them?

- This is javascript. There are thousands of libraries that do the same thing. We know these libraries. Our libraries are huge, and sometimes we add Guy Fieri pictures to them.

- Guy Fieri? Let's get this over with. What are these Bluebird, Request and Axios doing?

- These are libraries for performing XMLHttpRequests that return promises.

- Do the AJAX jQuery methods return promises?

- We no longer use “J” in 2016. Just use Fetch polyfill or Bluebird, Request or Axios. Then manage the promises with async, await and bang !, you have the right flow of control.

“This is the third time you talk about await, but I have no idea what it is.”

- Await allows you to block an asynchronous call, which allows you to better control everything during data acquisition and increases the readability of the code. It's awesome, you just need to make sure that you add stage-3 to Babel, or use the asynchronous function syntax and the transform-async-to-generator plugin.

- This is madness.

- No, madness - you need to recompile TypeScript code, and then transfer it with Babel to use await.

- Shta !? Is it not included in typeScript?

- Included in the next version, but in version 1.7 it is only ES6, so if you want to use await in a browser, you first need to compile TypeScript code in ES6, and then transfer with Babel to ES5.

- I do not know what to say.

- Listen, this is easy. Write all the code in TypeScript. Compile all modules using Fetch in ES6, transfer them from Babel to stage-3, and download from SystemJS. If you don't have a fetch, use polyfill, or Bluebird, Request or Axios, and process promises with await.

- We have very different definitions of "easy." So, with this ritual, I finally got the data and now I can show it with React correctly?

- Will the application handle any state changes?

- Grr, I don't think so. I just need to display the data.

- Oh, thank God. Otherwise, I would have to explain Flux and implementations such as Flummox, Alt, Fluxible. Although, to be honest, you should use Redux.

- How did they get these names. Again, I just need to display the data.

- And if you just display the data, do not start with React. You can take the template engine.

- Are you kidding me? Do you think this is funny?

- Yes, I just explained what you could use.

- Stop. Just stop.

- I mean, even if you just use a templating engine, I would still use the TypeScript + SystemJS + Babel combo in your place.

- I need to display the data on the page, and not to perform the original Sub Zero fatality from Mortal Kombat. Just tell me which template engine to use.

- There are many, how are you familiar?

- Uh, I can not remember the name. It was a long time ago.

- jTemplates? jQote? PURE?

- Not that. One more?

- Transparency? JSRender? MarkupJS? KnockoutJS?

- Other

- PlatesJS? JQuery-tmpl? Handlebars? Some people still use it.

- May be. Is there something similar to the last one?

- Mustache, underscore? I think that now even lodash has a templating engine, but this is a kind of 2014.

“Grr ... maybe he was newer.”

- Jade? DustJS?

- Not.

- DotJS? EJS?

- Not.

- Nunjucks? IS EATING?

- Not.

“Man, no one likes CoffeeScript syntax anyway.” Jade?

- No, you already told Jade.

- Well, I meant Pug. I meant Jade. I mean, Jade is now a Pug.

- Pf. Not. I do not remember. Which one would you use?

- Probably, native ES6 template strings.

- Let me guess. This requires ES6.

- Yes.

- Which, depending on which browser I use requires Babel.

- Yes.

- Which, if I want to include without adding the entire library, I need to load as an NPM module.

- Yes.

- Which, requires Browserify or Wepback, or, most likely, SystemJS.

- Yes.

- Which, if it is not a Webpack, should ideally be managed by a Task runner.

- Yes.

“But, since I have to use functional programming and typed languages, I first need to precompile TypeScript or add this Flow.

- Yes.

“And then send it to Babel for processing if I want to use await.”

- Yes.

“So I can then use Fetch, promises and flow control and all this magic.”

- Just do not forget polyfill Fetch, if it is not supported, Safari still can not cope with this.

- You know. I think we will end here. Actually, I think I am finished. I am done with this web and with javascript in general.

“Well, in a few years we will all be coding into Elm or WebAssembly.”

“I just want to go back to the backend.” I can't handle all these changes, versions, editions, compilers and transpilers. The javascript community is crazy if it thinks that someone can keep up with it.

- Clear. You then have to try the Python community.

- Why?

- Heard about Python 3?