The baptism and transformation of website design web front end
Source: Shangpin China |
Type: website encyclopedia |
Time: April 29, 2015
With the explosive growth of the Internet industry Website Design Web front-end technology is also undergoing baptism and transformation. Especially in recent years, with the development of mobile terminals, more and more people have begun to devote themselves or change careers to new fields, which has injected new vitality into today's IT industry. Although it is not a long time since the birth of Web front-end technology, with the gradual deepening of Web technology, the following efforts will be made in the future.
1. Web mobile terminal development. 2. JavaScript brothers. 3. Class libraries and frameworks with a hundred flowers in bloom. 4. Engineering Web front-end development specification.
Web mobile terminal development
PhoneGap: an open source development framework that uses HTML, CSS and JavaScript to build cross platform mobile applications. It enables developers to take advantage of the core functions of smartphones such as iPhone, Android, Palm, Symbian, BlackBerry, WindowsPhone and Bada, including geo location, accelerator, contacts, sound and vibration. In addition to compiling applications locally, you can also use the cloud build tool provided by PhoneGap to compile applications. In other words, just upload the application written in HTML5 to the cloud server of PhoneGap, and PhoneGap Build can compile it into applications suitable for different platforms.
Front end knowledge map
SenchaTouch: At this point, we have to mention some mobile oriented WebUI libraries. After all, PhoneGap is a tool. To build a complete app based on Web technology, we must choose some suitable mobile UI libraries. The most noteworthy is SenchaTouch, which can make WebApp look like NativeApp. Beautiful user interface components and rich data management, all based on the latest HTML5 and CSS3 Web standards, fully compatible with Android and iOS devices. PhoneGap indicates a development trend, that is, apps can also be completed using Web front-end technology. As the most commonly used UI toolkit for developers, SenchaTouch has further accelerated this trend. At present, a large number of projects on Taobao have adopted this idea to build, that is, add a custom mobile Web based UI library to the built-in application shell. I believe that this model will become more and more popular in the future.
Sencha Touch: At this point, we have to mention some mobile oriented WebUI libraries. After all, PhoneGap is a tool. To build a complete app based on Web technology, we must choose some suitable mobile UI libraries. The most noteworthy is Sencha Touch, which can make the Web App look like the Native App. Beautiful user interface components and rich data management, all based on the latest HTML5 and CSS3 Web standards, fully compatible with Android and iOS devices. PhoneGap indicates a development trend, that is, apps can also be completed using Web front-end technology. As the most commonly used UI toolkit for developers, Sencha Touch has further accelerated this trend. At present, a large number of projects on Taobao have adopted this idea to build, that is, add a custom mobile Web based UI library to the built-in application shell. I believe that this model will become more and more popular in the future.
Media Queries: In the CSS2 era, if you have ever designed print CSS for websites, you will understand the role of CSS3 Media Queries. However, CSS3's Media Queries can obtain these data more than CSS2's Media Queries: the width and height of the browser window, the width and height of the device, the handheld direction (horizontal or vertical) and resolution of the device. In other words, Media Queries provides a technology for writing CSS based on different platforms. This technology was popularized at the beginning of 2011, and has been very popular so far, especially today when Web pages still account for the majority of Internet traffic. This compatibility technology can quickly make websites compatible with mobile devices, and ensure the fastest cross platform compatibility and multi platform usability of products.
Zepto.js: A JavaScript framework developed specifically for Mobile WebKit browsers such as Safari and Chrome. It boasts that its simple development concept can help developers to complete development delivery tasks simply and quickly. More importantly, this JavaScript framework is super lightweight, only 5 KB. The syntax of Zepto.js is borrowed from and compatible with jQuery. At present, many websites have started to make applications based on Zepto.js, because after abandoning the compatibility problem of IE browser, Web development will become more and more pure, lighter, and more pleasant to code. It is undeniable that with the increasing popularity of mobile terminal development, Zepto.js will have a broader application scenario and space in the future.
Bootstrap: An open source toolkit for front-end development launched by Twitter. It is a CSS/HTML framework jointly developed by Mark Otto and Jacob Thornton. Bootstrap provides elegant HTML and CSS specifications, written by the dynamic CSS language LESS, and has many similarities with Blueprint, the CSS framework. Bootstrap has been very popular since it was launched, and has always been a popular open source project on GitHub. NASA and MSNBC's Breaking News have both used this project. In the second quarter of 2012, Bootstrap released version 2.0. A major improvement of Bootstrap 2.0 is the addition of response design features. In 1.0, this is where many developers complain. Moreover, in order to provide a better responsive design scheme for mobile devices, Bootstrap 2.0 adopts a more flexible 12 bar grid layout. In addition, it also updated some progress bars and customizable picture thumbnails, and added some new styles. It is worth noting that Bootstrap is a very lightweight framework. 2.0 is only 10KB after compression. Bootstrap provides good tools and ideas for the rapid construction of our website, and this tool set will have more vitality.
JavaScript brothers
CoffeeScript is a new programming language written using Ruby for reference. Its founder Jeremy Ashkenas jokingly called it a low-key brother of JavaScript, because CoffeeScript will compile Ruby into JavaScript, and most of its structures are similar. But the difference is that CoffeeScript has a stricter syntax. Its greatest merit is that the C/Java syntax of JavaScript hard binding is abandoned and replaced by a syntax similar to Ruby/Python. Ruby/Python is originally deeply influenced by Lisp, and is a peer of JavaScript. Their syntax has been tested by practice and is very suitable for functional programming. This elegant language has unique charm. The upcoming 2013 version of Taobao's home page is implemented using CoffeeScript.
TypeScript is a superset of JavaScript developed by Microsoft. TypeScript is compatible with JavaScript and can be loaded with JavaScript code and then run. Compared with JavaScript, TypeScript has made progress in: adding comments so that the compiler can understand the supported objects and functions, and the compiler will remove comments without increasing overhead; Add a complete class structure to make it more like a traditional object-oriented language. Since JavaScript is only a scripting language and is not used to develop large-scale Web applications, it does not provide the concept of classes and modules. TypeScript extends JavaScript to implement these features, better supports large-scale JavaScript application development, and attracts non developers. However, it should be noted that although TypeScript seems to be guaranteed with Microsoft's support, it is only an early preview version currently provided. TypeScript is not as beautiful as its website looks. The final version may be determined in the ECMAScript6 release conference a year later. The current version is just a development preview version. Therefore, the future development of TypeScript needs further observation.
In addition, Node.js is becoming more and more popular on the server side. Today, Node.js is not only an intermediate solution for handling high concurrency requests, but also because of its flexible syntax and rich underlying APIs, more and more people begin to use it to write tools. Especially, some tools based on Ant or Java before now have Node.js versions.
In this way, Node.js has a broader application scenario in the field of command line tools, and can even replace traditional dynamic languages such as Perl or Ruby. There are many application scenarios in Taobao Node.js. For example, in the data department, Node.js is used as a container pool for handling high concurrency scenarios, specifically absorbing high concurrency requests, and even being able to maintain long links with clients, which previously required high costs, such as Comet technology. In addition, Taobao's open-source front-end class library KISSY can also be directly run in the Node.js environment, so that KISSY code can be run on the command line, and many front-end codes have the opportunity to use automated testing to improve production efficiency. Moreover, the internal development tool chain of Taobao has been mostly built with Node.js.
Class libraries and frameworks in full bloom
SeaJS is a module loading framework that follows the CMD specification developed by Wang Baoping (Yu Bo), a senior technical expert at the front end of Alipay, and can be used to easily and happily load any JavaScript module and CSS module. SeaJS is very compact, because its compressed volume is only 4KB, and there are very few interfaces and methods. SeaJS has two cores: module definition and module loading. SeaJS can load any JavaScript module and CSS module to ensure that when you use a module, you have loaded other modules you depend on into the script running environment. SeaJS allows you to enjoy the fun of writing code, regardless of the loading problems. After all, the maintainability of web pages is as serious as the performance problem, which is reflected in: too many files are not conducive to maintenance, and the front and back ends are the same; There are too many HTTP requests. Of course, this can be solved through consolidation. However, if there is no backend consolidation, the labor cost will be very high. SeaJS can solve these problems very well. SeaJS follows the CMD specification, so it is easy to write modules. At present, more and more people have adopted the CMD specification to develop projects.
Recently, Microsoft has officially released the Windows 8 operating system, and the style of the Windows operating system has completely become the Metro UI like a magnet. For Microsoft, this is a huge change, and all Microsoft platforms, including desktop, tablet, mobile terminals and their websites, use this UI style.
MetroUICSS is a very complete framework for creating Metro style websites. It is self-contained, but can also be used with other frameworks. It is created with LESS, and has a grid system, layout styles, tables, buttons, and pictures. It also has built-in JavaScript components to help you generate slices, menus, sidebars, progress bars, and prompts. It is a very useful framework. With the further popularity of Windows 8, this style of CSS class library will definitely become a trend.
Hype is a compact tool and a new HTML5 authoring tool for MacAppStore. Its advantage is that it can make eye-catching animation effects on web pages without Flash plug-ins. Tumult, the company that developed the application, was founded by two former Apple engineers and received investment from YCombinator. Jonathan Deutsch, one of the company's co founders, was once the technical director of the Mail.app backend, so when he was interviewed by Paul Hontz's The Startup Foundry, he said that the company was founded to solve the problem of the lack of HTML5 authoring tools. It can be said that Hype is the first available visual tool for creating HTML5 products, with milestone significance. With the improvement of hardware performance, HTML5 applications are more likely to be generated by tools than by engineers in the traditional sense. Therefore, instrumentalization is a direction. Whether HTML5 can really get a foothold in mobile terminals, this direction is worth sticking to. After all, HTML5 application development is still in the primitive society.
IScroll.js is a small class library written with native JavaScript to simulate rolling effects, and does not depend on any JavaScript framework. It is designed to solve the regional scrolling problem of mobile WebKit browsers and is compatible with MobileSafari, Android default browser, Safari, Chrome, Firefox 5+, Opera 11+, IE9+and other core WebKit browsers. The latest version is iScroll4. This small library has attracted much attention since it was launched, because it can not only perfectly simulate the rolling effect on the PC side, but also perfectly support the touch screen events on mobile terminals.
IScroll4 was launched at the end of 2011. In 2012, it was brilliant in the development of mobile terminal products. This JavaScript library was used in many Taobao products. IScroll is a small but exquisite classic, and its name is also Apple style. However, the drawback is that it can only be called with ID. However, this small feature is not a big problem and can be solved through secondary packaging. We look forward to more wonderful performances of iScroll4 in mobile terminals.
Front end MVC was a hot topic in 2011. As more and more people began to try to use MVC class libraries such as JavaScript MVC and Backbone.js, more products also looked more like "software" than "web pages". However, due to the complexity of the front-end environment, we have gradually found that "this" MVC is not perfect and can only be applied to "data-driven" scenarios, while there is no good solution to "event driven" scenarios. At present, many Taobao products are trying to use "finite automata" to make up for MVC's shortcomings in this regard. Therefore, MVC in the new scenario needs to be further refined.
Engineering Web front-end development specification
In 2012, there were more and more discussions about front-end development coding specifications. Top developers at home and abroad are interested in coding specifications almost at the same time. Former Yahoo! Home page chief front-end engineer N C. Zakas also mentioned the importance of norms in team collaboration in his book High Maintainable JavaScript. The following two aspects are worth discussing and pondering.
In the dispute between AMD and CMD specifications, with the further popularization of CommonJS, the CommonJS specification plays an increasingly important role in the field of standard module development. However, the difficulty of implementing CommonJS on the browser side adds a bit of variables to this specification. In essence, CommonJS is an API specification for synchronously loading JavaScript code, which is very simple and elegant. In order to implement this mechanism on the browser side, we have to add a layer of asynchronous callback, which is called AMD (Modules/Asynchronous Definition). RequireJS implements this specification, and Dojo will fully support it immediately (Dojo 1.6). The specification itself is very simple, even including only one API. In the process of developing SeaJS, Yubo has kept the style of the CommonJSModules specification, namely CMD (CommonModuleDefinition). Compared with AMD, CMD does not use a single API to apply to multiple functions, but defines different APIs according to different functions. In my opinion, the two are basically the same in completeness, but differ in community philosophy and programming style. Developers can choose to use AMD or CMD programming style according to their own preferences.
The Java language coding specification has a great impact on the front-end development programming specification. Zakas mentioned five JavaScript programming specifications in his book High Maintainability JavaScript, all of which have similar origins to the Java language coding specification: Crockford programming specification, jQuery core style guide, SproutCore programming style guide, Google's JavaScript style guide and Dojo programming style guide. No matter what kind of specification is used, the importance of consistent coding style is emphasized. It can also be seen that front-end team development is paying more and more attention to the specification, and the flexibility of JavaScript needs to be limited to some extent.
In conclusion, through the above description, we can see the continuous progress and innovation of front-end technology, and also realize the engineering of the project process, the lightweight of solutions, the diversification of libraries and frameworks, and the systematization of knowledge structures. This trend will become more and more obvious in the future, which also indicates the development direction of front-end technology.
When it comes to the systematic construction of front-end technology knowledge structure, I have been doing this for years. In 2011, I also drew a picture to illustrate my view that the construction of front-end technology system is a long-term task. After all, new technologies and knowledge are emerging in endlessly, and it is also challenging to sort out the classic knowledge structure. But this work needs someone to do after all, pointing out a general direction for new entrants. As for the growth of front-end engineers, I also wrote a long article "front-end development ten day talk" to help newcomers solve their doubts.
Source Statement: This article is original or edited by Shangpin China's editors. If it needs to be reproduced, please indicate that it is from Shangpin China. The above contents (including pictures and words) are from the Internet. If there is any infringement, please contact us in time (010-60259772).
