Home > Developer > Web Develop
Background: Cloud The beginning of the establishment, we began to accumulate their own front-end framework, but also draw on the advantages of foreign frameworks such as Bootstrap. In the internal use process, we all agree that good, we hope to open up this product, hope to share to more people, but also hope that more people to contribute code, to build China's front-end open source ecological environment.
because Amaze UI is currently in beta, we hope to collect as many excellent and constructive feedback suggestions and views as possible, and improve the function of amaze UI with excellent front-end developers to promote the development of China Mobile's cross-screen front-end technology. (Beta address:http://amazeui.org/landing)
Let us share with you in advance our front-end Web scenario for mobile first.
1. CSS for the Amaze UI
1.1 Mobile First :
Amaze UI developed in a mobile-first concept, needed in meta ; viewport property.
width=device-width, initial-scale=1maximum-scale=1, user-scalable=no
<name= "viewport" content= "Width=device-width, initial-scale=1, maximum-scale=1, User-scalable=no" >
1.2 using HTML5
Amaze UI developed under HTML5 without testing other DOCTYPE, use before making sure that your first line of HTML is <!DOCTYPE html> .
<! DOCTYPE html>
...
2. JavaScript for the Amaze UI
based on Zepto.jsThe Amaze UI JavaScript component is based on Zepto.js development, use ensures that zepto.js (1.1.3) is introduced before the script in the Amaze UI.
because the $ = window.Zepto module internally specifies , there is currently no support for using jquery to replace Zepto.js, and jquery support will be added to subsequent work.
Components are called in a similar way to JQuery, and see the documentation for each component for details.
Advanced Usebased on Sea.jsAmaze UI is currently used Sea.js organization, Management module, users using Sea.js can view the relevant interface through the source code.
Default Event interfaceThe amaze UI binds the default events through specific HTML, and most JS components can be called via HTML tags. These default events are amui under the namespace and can be closed by the user themselves.
Close all default events:
$ (document). Off ('. Amui');
To turn off default events for a specific component:
$ (document). Off ('. Modal.amui');
Most components define custom events.
custom events are {事件名称}:{组件名称}:amui named in the same way , users can view the component documentation using these custom events.
$ ('#myAlert'). On ('close:alert:amui', function () {//Do something});
WEB components:
650) this.width=650; "src=" http://s3.51cto.com/wyfs02/M02/3F/1C/wKioL1PIlZXz5sVAAAPbL5uuzxM831.jpg "title=" Web component. jpg "alt=" wkiol1pilzxz5svaaapbl5uuzxm831.jpg "/>
650) this.width=650; "src="/e/u261/themes/default/images/spacer.gif "border=" 0 "class=" image_zoomin "style=" Background:url ("/e/u261/lang/zh-cn/images/localimage.png") no-repeat center;border:1px solid #ddd; "alt=" spacer.gif "/>
Also talk about the questions the front-end developers might have:
1. now that there are so many front-end frames, why develop the amaze UI?
The domestic front-end framework is quite a lot, but there are few techniques to solve the cross-screen adaptation and compatibility problems of browsers. In addition to the domestic open-source technology awareness is not enough, a lot of mature technology is mainly closed in their own company, so that the entire industrial chain in the technology is difficult to reciprocity and interoperability. at the same time, mobile, cross-screen has become the most popular internet technology, and front-end developers in the development of web pages, often fall into the repetitive resolution of complex cross-screen, adaptation issues, energy consumption, impact on work efficiency, product development slow such a vicious circle. Inside the company with Amaze UI to resolve this kind of problem to reflect very good, we intend to open source out, hope to be able to help the front-end development.
2. What are the advantages of the amaze UI relative to other front-end frameworks?
Inevitably need to compare with Bootstrap, I think the amaze UI may have the following advantages:
0. Can be well compatible with the existing front-end framework of the advantages;
1. Add more elements in line with Chinese market characteristics: Chinese typesetting is more optimized, compatible with Chinese mainstream browser;
2. More lightweight, not only for the desktop, but also for the mobile side;
3. Contains some packaged widgets, other frameworks are not;
3. What is the idea of amaze UI to advance mobile first front-end Web scenarios?
Unify the user experience by splitting and encapsulating a number of commonly used Web page components to standardize mobile websites developed through the cloud platform.
On specific measures:
Semantic. Amaze UI Development follows the principle of semantics and intends to convey the functional roles of elements visually through information such as class names, while focusing on structure, style, behavior separation, reducing the coupling degree of each part, and improving development efficiency and maintainability.
Mobile first, cross-screen adaptation. By following the concept of mobile first, progressive enhancement (Progressive enhancement), you can start developing your website from your mobile device and gradually focus on the most important content and interactions on the device that expands on the larger screen, adapting to the mobile internet trend. Easily create a cross-screen fit page.
Modular, customized on-demand. Amui uses less to write style, good structure, easy to expand, easy to maintain, using SEAJS modular development, organization JAVASCRIPT, natural, elegant.
Focus on HTML5. Amui is based on lightweight zepto.js development, effectively reducing the bloated code that is compatible with older browsers; CSS3-based interactive effect, smooth and efficient. Amui focuses on modern browsers (support HTML5), no longer consumes resources for outdated browsers and improves the experience for more valuable users.
Localization support: Compared with foreign front-end framework, Amaze UI focuses on solving Chinese typesetting optimization problem, adjusts fonts according to operating system, and achieves the best Chinese typesetting effect; provides better compatibility support for mainstream browser and app built-in browsers, saving you a lot of compatibility debugging time.
Postscript:
Amaze UI is currently in the beta period, hoping to collect as much as possible excellent, constructive feedback suggestions and views, with the vast number of excellent front-end developers to improve the function of amaze UI, promote the development of China Mobile cross-screen front-end technology.
Note: Some of the text originated from InfoQ's interview.
This article is from the "IE Browser development" blog, please be sure to keep this source http://wingeek.blog.51cto.com/1226974/1439847
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
