What is front-end experience in 2016?

Q: I recently took over a new web project, but to be honest, I haven't touched this code for a long time. I heard that the front-end technology Stack has undergone great changes. I wonder if you are still at the forefront of the developer array?

 

A: To be accurate, I used to write web pages, but now it should be called front end engineer. I do belong to this so-called front-end engineer. In addition, I only returned from the JSCONF and reactconf sides. Therefore, I think I still understand the latest appearance in the Web Front-end field.

 

 

Q: It's good. My requirements are not complicated, that is, to obtain user activity data from the rest endpoint provided by the backend and display it on the front-end interface. The list must be displayed in the form of a list. At the same time, the list must support filtering, sorting, and other operations. By default, the front-end data must be consistent with the server. According to my current understanding, I plan to use jquery to capture and display data. What do you think?

 

A: No, no, no. It is estimated that no one has used jquery. You can try react. After all, this is 2016.

 

 

Q: Well, what is react?

 

A: This is a very good front-end library from Facebook. It can help you easily respond to interface events and ensure project-level controllability and proven performance.

 

Q: It's good. Can I use react to display data?

A: Yes, but you need to add the react and react Dom dependencies to your page.

 

 

Q: Wait, isn't react a library? Why add two dependencies?

 

A: Don't worry. The former is the core react library, and later is the auxiliary library for Dom operations. This will allow you to describe your interface layout with jsx.

 

 

Q: jsx? What is jsx?

 

A: jsx is a javascript syntax extension similar to XML. It is another way to describe Dom and can be considered as a substitute for HTML.

 

 

Q: What about html?

 

A: It's 2016, and HTML is outdated.

 

 

Q: Okay. Can I use react after I add two libraries to the project?

 

A: Well, you still need some small tools. You need to add babel to your project so that you can use it.

 

 

Q: Is it another database? What is Babel?

 

A: You can think of Babel as a translation tool. You can translate a specific version of JavaScript into any version of JavaScript. You can choose not to use Babel, but that means you can only write your project with annoying es5. However, since it is 2016, I suggest you use the latest es2016 + syntax.

 

 

Q: es5? Es2016 +? I am confused. What is es5 and es2016 +?

 

A: es5 is the abbreviation of ecmascript 2015. It is also the Javascript syntax currently supported by most browsers.

 

 

Q: ecmascript?

 

A: Yes. You should know that JavaScript was first proposed in 1995, and then finalized in the first official version in 1999. The development of JavaScript has been messy for more than a decade, but it has become clearer after seven versions.

 

 

Q: 7 versions? How many versions are es5 and es2016 +?

 

A: Yes, the fifth and seventh versions respectively.

 

 

Q: What about the sixth version?

 

A: What do you mean by es6? It is estimated that each version of ecmascript is forward compatible. When you use es2016 +, it means that you are using all the features of all previous versions.

 

 

Q: Why should we use es2016 + instead of es6?

 

A: Yes, you can use es6, but if you want to use async and await, you need to use es2016 +. Otherwise, you have to use the generator of es6 to write asynchronous code.

 

 

Q: I am confused now. I just want to load some data from the server. Before that, I only need to load the jquery dependent library from CDN, then we can use ajax to obtain data. Why can't I do this now?

 

A: Don't be silly. Everyone knows that the consequence of using jquery is to make your code messy. This is 2016, and no one wants to face this headache.

 

 

Q: What do you mean is that I load these three databases and then use the HTML table to display the data?

 

A: Well, you can select a module packaging tool to package these three dependent libraries into one file.

 

 

Q: What is a module packaging tool?

 

A: This term is also different in different environments. However, in web development, we generally refer to tools that support AMD and commonjs as module packaging tools.

 

 

Q: What is AMD and commonjs?

 

A: They are interface standards used to describe the interaction between JavaScript libraries and classes. Have you heard of exports and requires? You can define multiple JavaScript files according to AMD or commonjs specifications, and then package them with tools similar to browserify.

 

 

Q: What is browserify?

 

A: browserify was first built to prevent people from putting their dependencies into NPM registry, its main function is to allow people to package modules that comply with commonjs specifications into a file.

 

 

Q: NPM registry?

 

A: This is a large online repository that allows people to package and release code and dependencies in a modular manner.

 

 

Q: Just like CDN?

 

A: There is a big difference. It is more like a central repository that allows people to publish and download dependent libraries.

 

 

Q: Oh, I understand, just like Bower.

 

A: Yes, but since 2016, no one has ever used Bower.

 

 

Q: Well, should I download the dependency from the NPM library at this time?

 

A: Yes. If you want to use react, you can directly use the NPM command to install react and import it to your project. Currently, most mainstream JavaScript libraries support this method.

 

 

Q: Well, it's just like angular.

 

A: however, angular was also popular in 2015. Now there are fresh meat like vuejs or rxjs. Do you want to learn about them?

 

 

Q: Don't worry. Let's talk about react first. It's cheesy. I also want to determine if I have downloaded the react from NPM and then packaged it with browserify?

 

A: Yes.

 

 

Q: Okay, But it seems troublesome to download a lot of dependencies and package them each time.

 

A: Yes, but you can use task management tools such as grunt, gulp, or broccoli to automatically run browserify. By the way, you can also use mimosa.

 

 

Q: grunt? Gulp? Broccoli? Mimosa? What are we discussing?

 

A: No. We are discussing task management tools. However, these tools are also popular in 2015. Now we are popular with webpack.

 

 

Q: makefiles? It sounds like a C or C ++ project.

 

A: Yes, but it is obvious that the evolution of web is to complicate everything and then return to the most basic approach. It cannot be estimated that you will write assembly code on the web.

 

 

Q: Well, you mentioned webpack just now?

 

A: Yes. This is a packaging tool that combines both the module packaging tool and the task runner. It is a bit like an upgraded version of browserify.

 

 

Q: Which one do you think is better?

 

A: This varies from person to person, but I personally prefer webpack. After all, it not only supports commonjs specifications, but also es6 module specifications.

 

 

Q: Well, I have been thoroughly disrupted by commonjs/es6.

 

A: This is the case for many people. If there are more, you may need to solve systemjs.

 

 

Q: Why is it another new term? What is systemjs?

 

A: unlike browserify and webpack 1.x, systemjs is a dynamic module packaging tool that allows you to separate multiple modules into multiple files, rather than packaging them all into a large file.

 

 

Q: Wait, but I think we should pack all the databases into one file according to the network optimization specifications.

 

A: Yes, but HTTP/2 is coming soon. Concurrent HTTP requests are no longer a dream.

 

 

Q: At that time, do I not need to add the react dependency library?

 

A: Not necessarily. You can load these dependent libraries from CDN, but you still need to introduce Babel.

 

 

Q: Well, I seem to have said something wrong just now.

 

A: Yes. If you follow the instructions, you need to introduce all Babel-cores in the production environment, which will increase the performance consumption by a lot.

 

 

Q: Well, what should I do?

 

A: I personally suggest using typescript + webpack + systemjs + Babel.

 

Q: typescript? I always thought we were talking about JavaScript!

A: Yes. typescript is a javascript superset. It is based on some es6 packages. Shouldn't you forget es6?

 

 

Q: I thought the es2016 + We just mentioned is the superset of es6. Why do we still need typescript?

 

A: typescript allows us to write Javascript in a static language to reduce runtime errors. It's not a bad thing to add some strong types.

 

 

Q: I used typescript to do this!

 

A: Yes. Another one is the flow produced by Facebook.

 

 

Q: What is flow?

 

A: flow is a static type detection tool produced by Facebook. It is built based on ocaml in functional programming.

 

 

Q: ocamel? Functional programming?

 

A: Have you ever heard of it? Functional programming? Higher-order functions? Currying? Pure function?

 

 

Q: I have no idea.

 

A: Well, you just need to remember that functional programming is better than OOP in some aspects, and we should use it more in 2016.

 

 

Q: Well, I have studied OOP in college.

 

A: Yes, oop does have a lot to do, but you have realized that the variable state is too easy to cause unknown problems, as a result, everyone is slowly switching to immutable data and functional programming. In the front-end field, we can use libraries such as ram.pdf to use functional programming in JavaScript.

 

 

Q: Have you come up with a special word? What is ramda?

 

A: Of course not. rampers are similar to Lambda libraries and originated from david chambers.

 

 

Q: David Chambers?

 

A: David Chambers is a very good programmer. He is one of the core contributors to rambda. If you want to learn functional programming, you should also pay attention to Erik Meijer.

 

 

Q: Erik Meijer?

 

A: Another great god and evangelist in functional programming.

 

 

Q: Well, we will go back to react. How can I use react to capture data?

 

A: Yes. React is only used to display data. It cannot help you capture data.

 

 

Q: My God, how can I capture data?

 

A: You should use fetch to obtain data from the server.

 

 

Q: Fetch?

 

A: Yes. Fetch is the native xmlhttprequests encapsulation of the browser.

 

 

Q: Is it Ajax?

 

A: Ajax generally refers to the use of xmlhttprequests, while fetch allows you to use Ajax Based on promise, which can avoid callback hell.

 

 

Q: callback hell?

 

A: Yes. Every time you initiate an asynchronous request to the server, you must add an asynchronous callback function to process the response, the nested callback layer by layer is called callback hell.

 

 

Q: Okay, so promise is dedicated to this one?

 

A: That's right. You can use promise to replace the traditional callback-based Asynchronous function call method to compile code that is easier to understand and test.

 

 

Q: Can I directly use fetch now?

 

A: Yes, but if you want to use fetch in older browsers, You need to introduce fetch polyfill, or use request, Bluebird, or Axios.

 

 

Q: Come on, hurt each other. Tell me how many databases I need to know!

 

A: This is JavaScript, but there are thousands of databases. In addition, many libraries are very large, such as the library that embeds a Guy Fieri image.

 

 

Q: Do you mean Guy Fieri? I have heard that what is Bluebird, request, and AXIOS?

 

A: They can help you execute xmlhttprequests and then return the promises object.

 

 

Q: Isn't jquery's Ajax method returning promise?

 

A: Forget about jquery. Using fetch with promise or async/await can help you construct the appropriate control flow.

 

 

Q: This is the third time you mentioned await. What is this?

 

A: await is a keyword provided by es7. It can help you block an asynchronous call until it returns, so that your control flow is clearer and your code is readable. You can add stage-3 preset In Babel or syntax-async-functions and transform-async-to-generator.

 

 

Q: It's troublesome.

 

A: Yes, but what's more troublesome is that you must precompile the typescript code and then translate it into await Using Babel.

 

 

Q: Why? Is there no built-in typescript?

 

A: It is estimated that this support will be added in the next version. However, in current version 1.7, typescript targets es6. Therefore, if you want to use await in your browser, you must first compile typescript into es6 and then translate it into es5.

 

 

Q: I have nothing to say.

 

A: Well, you don't need to think too much about it. First, you encode the data based on typescript, and then translate all the modules using fetch into es6, then we use the stage-3 preset of Babel to perform polyfill on await and so on, and finally use systemjs to complete loading. If you plan to use fetch, you can also use Bluebird, request, or Axios.

 

 

Q: Well, this is much clearer. Is it so that I can achieve my goal?

 

A: Well, do your applications need to handle any status changes?

 

 

Q: I don't think I want to display data.

 

A: That's okay. Otherwise, you still need to know about flux, Redux, and so on.

 

 

Q: I don't want to worry about these terms any more. I just want to show the data.

 

A: Well, if you only want to display data, you don't need react. You only need a good template engine.

 

 

Q: Are you kidding me?

A: Don't worry. I just want to tell you what you can use.

 

 

Q: Stop!

A: I mean, even if you only want to use a template engine, we recommend using typescript + systemjs + Babel.

 

 

Q: Well, we recommend a template engine!

A: There are many. Which one are you familiar?

 

 

Q: Well, I used it a long time ago. I can't remember it.

 

A: jtemplates? Jqote? Pure?

 

 

Q: Have you heard of this?

 

A: transparency? Jsrender? Markupjs? Knockoutjs?

 

 

Q: Are there any more?

 

A: platesjs? Jquery-tmpl? Handlebars?

 

 

Q: It seems like the last impression.

A: mustache? Underscore?

 

Q: It seems a little later.

A: Jade? Dustjs?

 

Q: No.

A: dotjs? Ejs?

 

Q: No.

A: nunjucks? ECT?

 

Q: No.

A: Mah? Jade?

 

Q: No.

Answer? Is it es6's native string template engine.

 

Q: I guess es6 is required for this product.

A: Yes.

 

Q: Need Babel?

A: Yes.

 

Q: Do I need to download the core module from NPM?

A: Yes.

 

Q: Do I still need browserify, webpack, or a module packaging tool similar to systemjs?

A: Yes.

 

Q: Apart from webpack, you also need to introduce the task manager.

A: Yes.

 

Q: Do I still need a functional programming language or a strong language?

A: Yes.

 

Q: If we use await, we need to introduce Babel?

A: Yes.

 

Q: Can fetch and promise be used now?

A: Do not forget polyfill fetch. Currently, Safari does not support fetch native.

 

Q: Is it OK after learning this?

A: Yes, but we need to use elm or webassembly in a few years ~

 

Q: I think I should write back-end code.

A: The Python method is good!

 

Original article: Jose aguinaga

Translated by Wang xiyue Xiong _ Chevalier

Link: segmentfault.com/a/119004267083024

What is front-end experience in 2016?