Front-end Technology slang JS

Note: The original is in English, this is my translation. Someone has copied the content of my translation, put it in his own column, make someone ask me whether I copied ... Please support the fruits of my labor, it took two hours to translate, thank you. Reprint please indicate that the translator should hang.

Hey, I recently received a Web project, but honestly, I haven't had much contact with web programming in the last two years, and I've heard that Web technology has changed. I heard you're the Web development engineer who knows the most about new technology here.

To

be precise, I am a "front-end engineer". But you've got the right person. I don't know much about this year's technology, the front-end visualization, the music player, the drone that can play football, you ask. I just went to JS Congress and React Conference, there is no new technology I do not know.

Good So, I'm going to develop a Web page to show the latest news of the user. I think I should get the data through the backend interface, then use a table to present 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 do it with jQuery.

but don't use jquery!. Now there are people using jQuery. It's 2016 years now, you should definitely use React.

Oh, well, what's React?

React is a very powerful library, written by Facebook's cattle people. It makes the page more controllable, extremely high performance, and easy to use.

It sounds really good. Can I use React to show the data coming from the server?

of course, you just need to add two dependencies, one is React, one is React DOM

Well, wait a second, why is two libraries?

React is the library I'm talking about, and React Dom is used to manipulate the DOM. Because these DOM are written in JSX, a dedicated library is required to operate.

JSX? What is JSX?

JSX is the extension of JS, it looks like XML, can be used to write HTML, you can think of JSX is a more elegant HTML.

Why not use HTML ...?

It's 2016 years now, no direct HTML writing.

Oh, yes. Well, with these two dependencies, is it okay to start using React?

Oh, no. You need to add Babel before you can use React.

Babel is another library?

Well, Babel is a translation tool, Babel can translate your JS into any version of JS. You don't have to use Babel, but if you don't, you can only write ES5 grammar. You know, it's 2016, how can you not use es2016+ 's grammar? es2016+ how cool.

What's ES5? What is es2016+ again? I'm a little dizzy.

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

What is ECMAScript ...?

you know, JS is born in 1995, and JS Standard is 1999 developed out. At that time, JavaScript was also called LiveScript, and could only be run in Netscape's browser. It was a chaotic time, now, we have JS 7 version of the specification.

7 versions? What about the ES5 and es2016+?

the 5th and 7th editions are respectively.

Eh, what about the sixth version?

you're talking about the ES6. Each version is a superset of the previous version, so you can just use the latest es2016+.

Oh, yes. Why not ES6 it?

Well, you can use ES6, but you can't use the cool syntax of async and await. It's better to use es2016+. With ES6, you can only use generator to control the asynchronous task flow.

I don't know what you're talking about ... You've 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, from the CDN to introduce jquery, I can use AJAX to obtain data, now can not do it?

Big Brother, has been 2016 years, no one use jQuery good. Everyone knows that JQuery will only create "spaghetti" code (not maintainable)

Okay, so now I'm going to load three libraries to get and present the data.

Yes, you can actually use the module manager to "package" these three libraries into a single file.

Oh, what is the module manager ...

the module manager for different platforms is different. The front-end module manager generally refers to something that manages AMD or CommonJS modules.

Good...... , what is AMD and CommonJS?

is a two definition. There are many ways to describe how multiple libraries or classes in JS interact, such as exports and requires. You can follow the AMD or CommonJS API to write JS, and then use Browserify to package them.

It sounds reasonable. But what is browserify?

is a tool that can be used to package JS files in CommonJS form and run them in a browser. CommonJS was invented by people in the NPM warehouse.

What is the NPM repository ...

is a public warehouse for placing modules that can be relied upon.

Like a CDN?

not quite the same. It's more like a database, where everyone can post code, and they can download the code. You can download the code locally and upload it to the CDN when necessary.

Sounds like a bower!.

Yes, but it's 2016 years now, no one has used Bower

...

Well, I know, so I should use NPM to install dependencies.

that's right. Let me give an example, if you want to use React, you can install React directly with NPM and then import React into the code. Most JS libraries can be installed this way.

Well, Angular can do the same.

Angular is the 2015 thing. But this year Angular not dead, there are Vuejs and RxJS and so on, you want to learn it?

Let's use React. I have learned enough things just now. So I use NPM to install React and then use browerify to pack it?

Yes, I do.

It seems a little too complicated to do so.

It

does. This is why you should use task management tools such as Grunt, Gulp, or broccoli, which can automatically run browserify. No, you can use Mimosa now.

What are you talking about......

task management tools. But we don't have it now. Last year we were still using it, then we changed it to makefiles, but now we are using Webpack.

I thought that only C + + projects would use makefiles.

Yes, but obviously we do Web development, like to complicate things first, and then return to the most simple state. That's what we do every year. Just look at it, and after two years, we can write a compendium on the Web.

Alas, what was the Webpack you just said?

Another module management tool, but also a task management tool. You can think of it as an enhanced version of Browserify.

Oh, well, why is Webpack a stronger version?

Well, it may not have been strengthened. Webpack tells you how you should manage your dependencies, Webpack allows you to use different module managers, not just CommonJS, but even support ES6 modules.

That's where it all goes, and I've been knocked around.

Everyone was stunned, but it would be nice to wait for the SYSTEMJS to come out.

Oh, God, another JS library, what the hell is this?

Oh, unlike Browserify and Webpack 1.x,systemjs is a dynamic module loader.

Wait, didn't you just say that all dependencies should be packaged into a file?

That

said, but when HTTP/2 is popularized, it is better not to pack.

So why don't we just add React three dependent files to the page?

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

Alas, so rash?

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

...

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

I will consider using Webpack + SYSTEMJS + Babel to translate Typescript.

Typescript? We're not talking about JavaScript, are we?

Typescript is also JavaScript, it is better than JS, is the super-set JS, it is based on ES6, is what we just talked about the ES6, you remember it.

es2016+ is already a ES6 of the super set, how to come up with a Typescript?

in this case, Typescript allows us to write "strongly typed" JS, thus reducing runtime errors. In 2016, we should let JS support the strong type.

Obviously Typescript can do it.

flow can do the same, except that Typescript needs to be compiled, and flow just checks the syntax.

Alas, Flow is?

is a static type Checker, which is written by people on Facebook. With OCaml written, functional programming is very good.

OCaml? Functional programming?

Daniel has been using these things for 2016 years now, you know, functional programming, high-order functions, curry, pure functions.

I don't know what you're talking about.

At

first, we didn't know. Well, you just need to know that functional programming is worse than object-oriented programming, and in 2016 we were pointing to functional programming.

Wait, I studied object-oriented programming in college, and I thought it was good.

Java was pretty good before it was bought by Oracle. I mean, object-oriented was good, and now it's still being used, but now everyone is finding that state transitions are hard to maintain, so everyone starts using immutable objects and functional programming. Haskell has been using this set of things for a long time, but fortunately, the Web development field has ramda such a library, so that we can use JS to function-type programming.

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

It's not Ramnda, it's Ramda, it's like a LAMBDA expression. is a library written by David Chambers.

Who?

David Chambers, one of the great gods. Blablabla

I have to interrupt you for a moment. These things all look good, but I think they are all too complicated and unnecessary. I just want to get the data and show it, and I'm pretty sure I don't need to know that in this situation.

Go back to React, how do I get data from the server with React?

Well

, React does not provide this feature, you can only display data with React.

It's served. How do I get the data?

You can use the Fetch API.

What the hell? The name of the API sucks.

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

Oh, that's not AJAX.

AJAX uses only XMLHttpRequest objects, but the Fetch API lets you initiate asynchronous requests with Promise style to help you get rid of "callback hell".

Callback to Hell?

Yes, every time you initiate an asynchronous request, you have to wait for it to respond. At this point you have to use a function in the function, the nested call is to callback the hell.

All right. Did Promise solve the problem?

Yes, I do. By using Promise to manage callbacks, you can write code that is easier to read and easier to test. You can even initiate multiple requests at the same time, and then wait for them all to return.

Can Fetch do the same?

Yes, I do. But only if your users are using a new version of the browser, otherwise you will need to add a Fetch to the "polyfill", or use the Request, Bluebird, or Axios these libraries.

Oh, my God, how many libraries do I need?

This is JS, the same thing has thousands of libraries are doing. We know the library, and we have the best library, we have a huge library, what to have.

What are some of the libraries you just said?

these several library operations XMLHttpRequest then return the Promise object.

It's like JQuery's AJAX approach is doing the same thing ...

we have not been using jQuery since 2016. Use Fetch, big deal Add a polyfill, otherwise use Bluebird, Request or Axios all line. Then manage the Promise with await and async so that you can control the asynchronous task.

This is the third time you have said await, what is that thing?

await allows you to stop an asynchronous call that gives you more control over the data returned asynchronously, greatly enhancing the readability of your code. Await is very useful, you just need to add stage–3 configuration in Babel, or add syntax-async-functions and Transform-async-to-generator plugin.

It sounds like crazy.

not crazy. In order to use await, it is crazy to compile Typescript and then use Babel to translate a talent.

What the hell? Typescript does not support await?

the next version is supported.

I've got nothing to say.

you see, it's really simple. Write the code with Typescript, use Fetch to initiate an asynchronous request, compile all the code into ES6, and then use the Babel stage–3 configuration item to translate ES6 into ES5. All code is loaded with SYSTEMJS. If you can't use Fetch, add a polyfill, or use Bluebird, Request, or Axios, so you can handle Promise with await.

It seems that the two of us have a different understanding of "simplicity". Well, with this, I can finally get the data and show the data with React, right?

does your webpage need to handle status changes?

Well, No. I just want to show the data.

that's fine, or I'll have to explain to you flux, and some of flux's implementations, such as Flummox, Alt, fluxible. But seriously, you should use Redux.

I'll be a heeded when you say that. Again, I just want to show the data.

Well, if you just want to show the data, you don't need to React. You only need a template engine.

Are you kidding me?

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

Stop it, it's true.

I would like to say, even if only with a template engine, I will still use Typescript + Systemjs + Babel.

I just want to show the data on the page, so you can tell me which template engine to use.

There are many, which one have you used?

Well, it's too long to be useless, don't remember.

jtemplates, jqote or PURE?

Well, I don't remember, anything else?

Transparency? JSRender? Markupjs? Knockoutjs? This one supports two-way binding.

Do you have anything else?

Platesjs? Jquery-tmpl? Handlebars? Some people are using it.

Kind of like. What's the last one that looks like?

mustache, underscore? I remember that even Lodash had a template engine, but it was the 2014 thing.

Well, maybe a new library?

The

Jade? Dustjs?

No use.

Dotjs? EJS?

No use.

nunjucks? Ect?

No use. I can't remember, if you say, which one do you use?

I should be using the ES6 native template string

I guess, only ES6 support.

that's right.

Need to use Babel

that's right.

Need to install with NPM

that's right.

Need to use browserify or Webpack, or SYSTEMJS

that's right.

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

that's right.

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

that's right.

If I want to use await, then I must translate with Babel.

that's right.

Then I can use Fetch, Promise and all sorts of cool things.

Well, don't forget to add the fetch Polyfill, because Safari doesn't support fetch.

Guess what, let's talk about it. I do not do, I do not do the Web, I do not want to touch JS again.

OK, in a few years, we will use ELM or WebAssembly.

I'm going back to the back end, I am not affected by these changes, version updates, compilation and translation, JS community If someone can keep up with its footsteps, the community is crazy.

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

Why?

have you ever heard of Python 3?

Finish.

Translator Note: The last sentence "Have you heard of Python 3?" "It's been 8 years since the Python 3 was released, and the Python community is still using Python 2.7. The JS community is just the opposite, the language features that have not yet been realized are used in the production environment!

Front-end Technology slang JS