15 Technologies to learn in modern web development

English Original: Things to learn for modern WEB development

Once again, modern web development will have an overwhelming change. The overwhelming outpouring of information is confusing, especially for beginners. The primary reason is that new frameworks, such as Angular 2 and Reactjs, have been introduced, using ECMAScript 6 features that have not yet been fully trained. And there are more tools available to convert ES6 code to plain old JavaScript code, which is ES5.

I have summed up a series of programming languages/tools that we should learn to facilitate understanding of the unstoppable and rapidly changing modern web development.

Javascript

This is the only programming language that all browsers understand, and it is the backbone of front-end development. JavaScript is also known as Ecmascript,es 5. It is important to understand this programming language well before delving into other languages.

BSQ

This is an extension of the JavaScript language, and many browsers are implementing ES6. The advantage is that even now you can start writing ES6 code, because you can use Transpiler (translator) such as Babel to convert ES6 code to ES5 code. It's a good thing to go through these and learn about new features. However, do not delve too deep because they are prone to change.

Babel

This is one of the most popular ES6 to the ES5 translator. In addition, it is recommended by many frameworks, such as react. To convert ES6 to ES5 code in real time, there is an available repl in https://babeljs.io/repl/.

It is important to note that Babel is not just a translator ES6 to ES5. It is also a jsx to JavaScript translator. Don't know what a jsx is? Well, look at the following.

NodeJS

Nodejs is a server-side platform that allows you to build back-ends in JavaScript language. Why should I mention Nodejs? This is because, even if you are not interested in backend development, many front-end tools rely on Nodejs. Be familiar with node and its command-line tools at least.

Npm

NPM is the package Manager for node. Just like Pip is to Python,ruby gems to Ruby, and Maven to Java. Learn how to install/Remove/upgrade packages, especially the Package.json file structure.

Grunt or Gulp

These two are the most popular task runner running on the node platform. Technically, they are software packages for NPM. They allow you to automate many front-end tasks, such as lint source files, concatenation, reduction, deployment, and more.

Bower

This is a package management tool for the front end library itself. Want to add jquery to your app? bower install jqueryas easy as the use.

The above tools are sufficient for basic front-end development. But here's what I'm going to say about the two most popular frameworks, react and angular.

Reactjs

Reactjs is the most Popular Front end library for building views. Note that it is not just v in MVC, so there is no comparison with frameworks such as angular. Reactjs is written in ES6, and can be translated into ES5 with Babel. It also uses jsx that can also be translated into JavaScript using Babel.

Webpack or Browserify

Both of these are the most popular modular baler. They can get the JS source code, find the right dependencies, and issue JavaScript files that can drive the entire application. I like webpack better. Click here to view about Webpack. Flux or redux

The react component is placed in a hierarchy. Most of the time, the data model follows the hierarchy. In this case, flux is not very useful. However, sometimes your data model is non-hierarchical. You might want to try flux when your react component starts to receive external props, or if you have a small number of components that start to become very complex.

Immutable.js

Immutable.js provides a set of data structures that can help address some of the performance issues when building react apps. This is a great library and you may use it extensively in your app, but when you focus on the performance impact, it's completely useless.

Angular 2

Angular 2 is the next version of one of the most popular MVC frameworks in JavaScript. It has been completely redesigned and has a steep learning curve. Full support for bidirectional data binding. Be careful when choosing angular 2 development.

TypeScript

Angular 2 recommended Typescript as the preferred programming language. I'm not very familiar with typescript, but I think it adds static typing to the dynamic nature of JavaScript. Finally, I believe it's just a translator.

Service workers

An experimental API. It's like a background thread that the browser uses to do all sorts of work. I think it also adds support for offline browsing.

Fetch API and Push API

Please read the link yourself. Because so far I know very little about it.

15 Technologies to learn in modern web development