We are talking about changes in the front too fast. Whenever there is a new front-end developments, peers will laugh, do not update, and learn no more. Changes too fast, fast where those changes, I said to myself short not long from the front-end development for three years to reflect changes in these years.
Although only just three years of development experience, but because of the experience of outsourcing, calendar after large and small projects. These projects not only use the latest technology, but also the maintenance of older technology all the way down 45 years ago. Several ways to explore the following one by one.
1 language change
First of HTML, in fact, I do not know HTML5 previous version of what, because from what I entered the field, that is, H5 hottest time, just know that HTML5 will be more new tags, such as video, canvas, but also some the new storage solutions such as sessionstorge. now the basic browser support these changes.
Followed by CSS, change course, CSS3, adding some new animation properties such as transition and layout properties such as flex, etc., can be used with HTML5 make some cool results page. I know change is only so because I have not experienced CSS2 and older period.
HTML and CSS for the process of these changes, the browser has a supported, which must mention IE Series, entry time, the project also requires compatible with IE7, so I found a series of IE hack syntax from the Internet, but now I have forgotten how to use, and even IE have not been opened for a long time, and recently opened Microsoft's browser Chrome is to try to change the kernel Edge. See, between the years, Microsoft has changed the core.
The most important thing is the change of js, 2015 ES6 released, then I'm not into programming, do not know who this child have JavaScript language, and today ES7, ES8 are released. Of course, most browsers can not fully support these new syntax, but also to rely babel translates ES5.
Speaking ES6, also mention coffeescript, in an old project had come into contact, there will be found a large amount of syntax, such as the arrow function, very similar with the ES6. Before ES6 release, coffeescript kinda like fire, so the technology selection chose it. Of course, after ES6 released, we all switch to the "orthodox" standard, coffeescrpt also a lonely.
js server side version of nodejs, the past few years is also a lot into the actual project, and some tools not only as a front-end use. Just something I've experienced and understood, nodejs would like Ali and landing more entrepreneurial companies in large companies. Large companies have the main back-end language, nodejs and no ability to pry such as the status of java, php, etc., but the front end can help expand their business boundaries, such as BFF layer, both ends of liberation, but also enabling the front. A small start-up companies and technical personnel may very flexible, they prefer a unified front and rear side language, so it is very natural nodejs competitiveness.
Also said that under Typescript, may very moment the fire, and I have not used, but I heard a lot of front-end items are recommended to use, and it seems the larger the project the better, such as vscode this open source project it is large enough, have all with Typescript developed.
2. Change code is structured
In fact, the organizational structure of the code is related to the size of the project with, say, an activity page, probably the most traditional html, css, js you can meet, if you must join webpack etc. but superfluous.
Js also varies with the development of modular, pre-ES6 release, and no native js provide modular.
Traditional development, it is a simple front-end Three Musketeers is sufficient, as long as the introduction of css and js html page, at the same time to ensure that the order of introduction js, otherwise can cause an error. And people development, naming conflicts often things happen, so there will be a function package, object encapsulates, IIFE closure module package of this foundation.
Later, with the launch of commonjs nodejs module specifications, in the browser and AMD have such modules CMD tool out. Meanwhile npm package more and more popular, now the front should be able npm install it.
Wait until ES6, began to have native support for modular syntax. Of course, now browser is not fully supported.
3. Changes in frame (library)
Admittedly, Jquery no longer possible. but my company is still good old projects with jquery development, as are the front vue or react with the company, with Jquery when the very least, use it up to the ajax method. So now every day there zepote dealing with jquery, had to check documents, but can be a profound experience that such a change manually trouble dom, and chaos, there is not maintainable.
After Jquery, as well as backbone (like so write) ... as well as a series of Angular MVC framework, greatly improve development efficiency front end, of course, I join, they do not how the fire, and curious, I did not in the project they last met. Well, here it is just a mention to the table of respect.
Then again, React appeared, and virtual dom against jsx top performance, quickly among a brother frame. React with last year on the project, about a year.
When I came into contact with the front end of 2016, to learn the latest Vue, for me this novice very friendly, also come into contact with the official first-hand documentation. Vue also looking to play against the work. But honestly, I React with love.
For now, I'm doing this project, both Jquery (of course, is an old project), there React, there Vue.
4. The tool of change
Now I am probably webpack used, because if you use Vue or React, basically had to use webpack.
May have previously grunt or gulp, they are just tools flow, but does webpack module packaging tools.
5. Changes in the development mode
Nothing more development - the FBI - test - the same years of on-line process. But specific to development - the FBI at this stage, in fact, it has also changed greatly changed. Because the front-end, in addition to purely static pages, basically have to rely on the back-end. Simply put, before and after the end of the separation change. Here we make a comparison.
Times are not separated front and rear ends, for example one of:
The rear end of the front end of the project as part of the project, such as a back-end java project, early development, I need to play a single branch, installed java environment, and put on intelj IDEA, fitted gradle, and then start the java project, front-end development html , css, js, agreed with the back-end interface format, and then make some fake data to complete the basic process. Once developed a rear end, merge code, the data actually the FBI returned interface. The front end of the line do not operate directly on the end of the subsequent line items.
This development approach is very painful, because you are not familiar with this set of back-end tools, regular service will not start or error, a long time to make trouble. In fact, this is not the most painful, there was a project, the back end is Php, front-end modules to develop samrtPHP, must also be logged on the development machine, in the linux environment, with vim to write code that is not to the fate.
Front and rear ends of Separation Times:
Front and rear ends are now substantially separated by only an interface link front and rear ends. This is so cool, front-end just a front end that environment, nodejs, webpack and so on, as long as the interface documentation identified, thinking about how to develop how to develop.
Among them, one step further, creating a front end by nodejs BFF (backend for frontend) layer, connection ports are taken over, the back-end need only provide the basis of micro-services. No longer have to worry about with this backend asked to return this this field.
Furthermore, the front now begin by nodejs, start ssr (server-side rendering) to solve client problems such as black and white rendering generated.
It changes all the time, summarizes these changes in order to better seize the moment and predict future trends.
Reproduced in: https: //juejin.im/post/5cffbee6e51d4556bc066f49