Nearly four years ago, I wrote an article called The Future of Web and Mobile: HTML5, CSS3 and Javascript blog post, in which I mentioned the emergence of Javascript and the explosion of Javascript frameworks such as jQuery, Knockout, etc.
Fast forward to the present, and I see that modern Web development is once again about to change overwhelmingly. The overwhelming amount of information can be confusing, especially for beginners. The primary reason is the emergence of new frameworks, such as Angular 2 and ReactJs, that use ECMAScript 6 features that are not yet fully finalized. And there are more tools available to convert ES6 code into plain old JavaScript code, namely ES5.
I outlined a list of programming languages/tools that we should learn to understand the overwhelming and rapidly changing world of modern Web development.
JavaScript
It’s the only programming language that all browsers understand, and it’s the backbone of front-end development. JavaScript is also known as ECMAScript, ES 5. It’s important to understand this programming language well before diving into other languages.
ES6
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 transpilers such as Babel to convert ES6 code to ES5 code. It’s good to experience this and learn about new features. However, don’t delve too deeply into them because they are subject to change.
Babel
This is one of the most popular ES6 to ES5 translators. In addition, it is recommended by many frameworks, such as React. To convert ES6 to ES5 code in real time, there is a REPL available at https://babeljs.io/repl/.
It’s important to note that Babel isn’t just an ES6 to ES5 translator. It is also a JSX to JavaScript translator. Don’t know what JSX is? So look below.
NodeJS
NodeJS is a server-side platform that allows you to build back ends in JavaScript. Why do I mention NodeJS? This is because, even if you’re not interested in back-end development, many front-end tools rely on NodeJS. Be at least familiar with Node and its command-line tools.
NPM
NPM is the package manager for Node. What PIP is to Python, Ruby Gems is to Ruby, and Maven is to Java. Learn how to install/remove/upgrade software packages, especially package.json file structures.
Grunt or Gulp
These are the two most popular task runners running on the Node platform. Technically, they are packages for NPM. They allow you to automate many front-end tasks such as Lint source files, concatenation, scaling, deployment and more.
Bower
This is a package management tool for the front-end library itself. Want to add Jquery to your application? As easy as using Bower install jquery.
The above tools are sufficient for basic front-end development. However, here ARE two of the 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 like Angular. ReactJs is written in ES6 and can be translated to ES5 using Babel. It also uses JSX, which can also be translated into JavaScript with Babel.
WebPack or Browserify
These two are the most popular module balers. They can take the JS source code, figure out the correct dependencies, and issue JavaScript files that can drive the entire application. I prefer WebPack. Click here to see about WebPack.
Flux or story
React components are arranged in a hierarchy. Most of the time, the data model follows a hierarchy. In this case, Flux is not very useful. However, sometimes your data model is not layered. When your React component starts receiving external items, or you have a small number of components that start getting very complicated, then you might want to try Flux.
Immutable.js
Immutable. Js provides a set of data structures that can help solve some of the performance issues when building React Apps. This is a great library that you might use a lot in your app, but it’s completely useless when you focus on the performance impact.
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 two-way data binding. Evaluate carefully when choosing Angular 2 development.
TypeScript
Angular 2 recommends TypeScript as the programming language of choice. I’m not familiar with TypeScript, but I think it adds static typing to the dynamic nature of Javascript. In the end, I believe it’s just a translator.
Service workers
Experimental API. It’s like a background thread in the browser that does all kinds of work. I think it also adds support for offline browsing.
Fetch API and Push API
Please read the link for yourself. Because I didn’t know much about it myself until now.
Source: Mynong.com
Translation link:http://www.codeceo.com/article/15-teches-web-developer-need.html
英文原文 :http://www.madhur.co.in/blog/2016/05/14/things-learn-modern-web-development.html
Translation author: Xiaofeng
Baichuan.taobao.com is the wireless open platform of Alibaba Group. Through the opening of “technology, business and big data”, baichuan.taobao.com provides high cohesion, open, industry-leading technology product matrix, mature business components and perfect service system in mobile scenes. Help mobile developers quickly build apps, accelerate the process of APP commercialization, and empower mobile developers and mobile entrepreneurs in an all-round way.
About Alibaichuan 