One day, a junior partner in our group suddenly asked me, you know there is a job called reconstruction engineer? This is doing? Reconstruction of Engineers
I think this issue led to the development of the front end of the field, so I'll sort out the development process at the front end of the field, the way a little under the 2017 trend forecast. Do not want to see the memories, you can skip back to see the future.
And God said, Let there be light and there was light
Since 1991, Tim Berners - Lee HTML description mentioned in public, during 1999 W3C published HTML4 to write web pages in order to better exchange ideas with each other, in order to maintain their own web pages, and the brightest Great God is the Eight Immortals It was supernatural, and even invented PHP (the world's best language). This period does not have a so-called front-end development positions, we are software engineers. This era is the era of course, the man of God is rife, and now the Internet too much or the whole IT industry concept and prototype form during this period. Google Web site officially opened, individual PC slowly began to spread.
And God called the firmament Heaven
O'Reilly Media, Battelle, and MediaLive in October 2004 led the first Web 2.0 Assembly, web2.0 era of open, Blog, Wiki, RSS various personal website started landing our field of vision, while watercress, End of the World in line with these product 2.0 era is beginning to flourish in the country. We have focused on the first wave of Web front-end software development division, the same time, the birth of the United States of FaceBook cross-product of the times, in 2005, the school network occurs, the front began to perk up, in August 2006, Jquery first a release.
And God called the dry land Earth, and the gathered waters he called sea
During the following year, basically revolves around a variety of front-end libraries such as MooTools , Underscore , Prototype , the Dojo, jQuery , YUI development page. Major libraries also absorb the advantages of each other, and constantly improve themselves, but the essence is not much variation.
At the same time, we do not see behind the browser Second World War broke out, V8 engine began to shine, Web standards are pushing ECMAScript5.0 evolving. Node released, meaning the front of the field we expand, reach out to the server.
Smart phones began to spread, the trend is unstoppable big wave moving end, web front end began to develop a variety of mobile libraries end of Sencha Touch, Zepto.js, JQ Mobile, HTML5 concepts up hot, endless variety of web games, and Flash battle also to the point of incompatible, Twitter also launched this pioneering Bootstrap's CSS toolkit.
With the hardware upgrade, improve performance V8 engine, greatly improve the performance of the entire page, we have started to develop complex Web pages to this demand are beginning gave birth to front-end engineering for the development of thinking, the first is problem modular loading, AMD, CMD, UMD on stage, derived from the product Seajs, requirejs began to demarcate the site.
This era is the era of server-side rendering for the king, including a lot of stitching on the module or component is done on the server side, but also open jquery + requirejs + mode template to develop complex pages. (This time, there has been division JS reconstruction engineers and engineers.)
Management day and night, light and dark, respectively
12 years later, with the W3C specifications and standards to further promote, further intensification of all complex Web pages, people are not satisfied with the development when Jquery noodles, there have been a number of framework to simplify client development, such as Backbone, Ember, AngularJS, Vue, Avalon, Knockout, React and so a variety of MV * framework.
This is a separatist warlords era, so many gushing framework, each developer according to their preferences, select the different needs of the business framework to achieve these goals.
Node.js began to rise, Express, Koa framework to start using various production projects, PM2 service management, enterprise solution for monitoring and stability, while Ali began exploring the development of roads Node.js intermediate layer, continuous sound, providing front and rear ends of the separation solution.
And God said, Let the water teem there is life
Micro-channel social networking giant is already rising, play micro-channel public number, so that the front began to hot up the post, he began to bring the dispute and Native Web.
15 years, Facebook launched React.js Conf 2015 General Assembly based on the open source JavaScript framework React Native, in one fell swoop React onto a new height, Learn Once, the Write Everywhere . This year is the year of belonging to React.
At the same time, build tools are constantly iteration, Grunt glory has to go, Gulp did not stay long on the throne, Webpack of the storm swept.
16 years, Webpack has become the mainstream front-end package built, Vue strong rise, Ng2 complete release. The front end in the mainstream development of the basic form of the Three Kingdoms period (React, Vue, Ng) . Meanwhile, the mobile terminal also formed a hybrid development-oriented manner, Native embedded Webview page.
Because the network and hardware performance continues to improve the front end from the original model to now more like cs bs, but there are still advantages cs of distribution.
So God created man in his own image - broken or split
The above recalled a moment about the front end of the development process, Here's what some of the predictions of 17 years ago, his own end development.
With the different services, each team began to point at the front-end technology differentiation:
Heavy SPA page
Web page Hybrid mode
Events page
Other games
Heavy SPA page - Teambition
SPA heavy pages, is extremely complex business functions, use Vue, React, after Angular this MVVM framework in the development process, inevitably more and more components, the frequency of communication between the city communications, sub-assembly components between father and son greatly increase. How to manage the flow of data between these components will become the biggest difficulty of this type of WebApp.
From the page is loaded it, SPA can rely Loading loading animation for the first time, to cover a number of issues page load performance (TB usually loaded 5S around me here), many lazy loading and delayed loading and the like also need to do. Because behind all the data related to the need to use, there would be no issue of whether to use.
From the recent star Rx.js, we can see it, we are increasingly concerned about the problem of data management, local data management is only one aspect, but also involves the issue of multiple users to synchronize data, that is, the server and client data synchronization issues, such as the timely and proper synchronization data.
Timely and correct data synchronization concept means: operating a multiplayer mission, both of them when modifying a task likely to cause data coverage. A finished just modified, B also modified a few seconds, because synchronization is not timely, I do not know A B modified, the result B newly revised data cover the modifications A's. So if you want to reduce similar errors, it is necessary to ensure timely and correct data synchronization.
Since so much data and request, then we will certainly have to make good use of local cache and a variety of stores, will use the LocalStorage, SessionStorage of.
So many business and components, bound to the memory can cause stress, how to manage memory is a science, more typical is the destruction of the components, how reasonable the creation and destruction of components, have been components of the internal data organization of data will be very test code for staff.
You can see related @ Xu Fei's article
Web page Hybrid mode - App is now most mainstream
Development of Hybrid mode is still the mainstream of mobile terminals, the characteristics of this web page is not complicated business, most of the main information display, plus some action buttons, a problem to be solved is that a lot of time to communicate and Native, and Android webview of a variety of domestic manufacturers is very difficult to solve the problems in this area micro-channel to do good, to engage in a direct their browser to support the underlying unity.
For the realization of jsbridge, companies have different implementations, mainly depends on the development of Native how to define a bridge program to develop my own experience point of view, there are so few points need to be addressed:
User authentication problems, how to verify the user's identity Native, is a common session original Web site or the use of Native commonly used token, but regardless of which, we need help to inject Native identity.
ajax request problem, if in the form of a URL to embed can be sent alone ajax request without any problems, but if Html text directly Webview rendering of the way, it is similar to the PC, open the folder html files, like, ajax request not go out, we need to do to help Native bridge to call.
Communication costs, since the original PC side compared to more participants, so troubleshooting even more trouble, this is mainly to see how the whole App architecture design.
Performance issues, how should I say, not every App developers are very powerful, so if there is a problem Native code, the probability of error Webview will become high, such as Css3 animations, easily lead to the collapse of the high share of memory and so on .
So, for developers of web front end in this direction, if the Native development will experience more like a duck.
Activity page - such an invitation from the universe
Such activities page, mainly on design and animation cool, suck the eye, thrilling, exciting activities basically out of a page, can set off a wave of wave of circle of friends. Technically with WebGL-based, general use Three.js, rendering canvas to display a variety of animation and visual effects.
The front end in this direction will be more attention, compatible browsers, performance, designed effects, animation fluency, experience and so on. The main micro-channel compatible browser, because the circle of friends to market, in general, will be biased design and animation more.
Other games - H5 games, data visualization
At that time a variety of popular domestic H5 games, particularly, basically with CreateJs to produce more, little contact, not much comment.
With the advent of the era of big data, various areas of front-end data visualization library is endless, D3, Highcharts, domestic Echarts are outstanding in this field.
Turn the field
In fact, there is a field, through a variety of knowledge Nodejs, learning services side, to switch to the server field.
future
I have mentioned above segments (or is fragmented - are more gimmick), sense of self, has been slowly show some trends, I do not know if you have wood feel, such as Xu Fei will be more good TB this heavy business schools, and hand Amoy people will be more concerned about the Hybrid genre, and even carry out his own framework Weex this JS-Native development. Of course, most developers will probably still do, it is not so obvious tendency, but with the tilt of the company's resources focused on business transformation and companies, many developers still will gradually differentiated.
Personally I think that this subdivision is actually more favorable to our front-end,
The weight of the front-end business, diversification scene, showing the front end of the whole field of relatively rapid development, to participate in all aspects, has followed the development of the times and development.
There are various segments of, we can do a more refined special, different segments of the knowledge, require careful study and research, such as the front end tends to centralization and normalization (Redux, etc.) to organize data It requires students to understand the basic front-end database theory. Knowledge can find out exactly what each of these areas, is a huge challenge.
Conducive to the exchange, the various branches of person, you can come up with their own expertise technology to communicate with each other, learn from each other, build a more systematic knowledge networks.
In fact, say many, I feel lots to talk about, such as @ Kou Yun proposal plus Backbone, Ember, AngularJS, Vue, Alavon, Knockout, React framework is not a period of time appears to be thinking of the pioneers of epigenetic integrated development framework, and the framework ecological this part. But my feeling is not the focus of this article, there is no plus. There is currently competition and cooperation between the Native and Web front-end.
Original address and discussion: know almost its original
(These are just personal opinion and any similarity can only say great minds think alike)