iUI, jQTouch, WPTouch, PhoneGap, XUI, iWebkit, Rhodes, gwt-mobile... When we have begun to marvel that web mobile applications are filled with various frameworks and class libraries, in fact, the major web frameworks have just begun their mobile Fields: Touch version of Yahoo's YUI3.2, jQuery's jQueryMobile, ExtJS integrating JQTouch and the Sencha Touch framework launched by the Raphaël library. . .
The renaming of ExtJs to Sencha really shocked me. After all, I was once a fan of the ExtJs framework. It is indeed not easy for such a heavyweight framework to suddenly turn around and develop in the direction of mobile touch. We can't help but marvel at the impact of mobile applications. major changes to come.
OK, here I don’t want to introduce to you the usage and performance comparison of various web mobile application frameworks. Just influenced by ExtJs, and wanting to know how far I had gone, and better accumulate front-end experience, I began to imagine what a good web mobile application framework should be, and began to try to implement it. Reinventing the wheel is just forcing yourself to understand this field more deeply, not being arrogant enough to challenge anything. So after analysis and comparison, the summary is as follows:
1.Lightweight
This should be the most important point in the mobile application framework. Don't think about the popularity of 3G and WiFi. National conditions are national conditions. It is difficult for most users to download your 100K CSS and JS files within 3 seconds. Therefore, our mobile application framework must be as lightweight as possible, and all naming and function implementation methods must be as concise and highly compressed as possible. Throw away those PC web application special effects and components, don't add 7,80K of jQuery.js to your page just for a menu effect.
2. Compatibility with mainstream mobile browsers
With so many mobile platforms and browsers, it is difficult for your mobile application to behave consistently on all browsers. Sometimes you need to load different style files for different browsers, or run different functions. to achieve the effect. Therefore, our framework must have a method that can identify various mainstream browsers. To be specific, your framework must be able to distinguish between iPhone, iPad, Android, Windows Phone, etc. OK, to be more specific to the country, QQ mobile browser and UCWeb. The last thing to note is that we try not to use the AU method to judge here, because the avigator.userAgent of each browser is very unreliable. Here you can refer to the idea of mooltools to judge browsers and apply it to our mobile field.
3. Powerful selector
The selector can be said to be the soul of the framework. CSS3 advanced pseudo-classes will be used extensively in future web mobile applications. Therefore, our framework must be able to traverse and locate as many HTML5 tags and CSS3 pseudo-classes as quickly as possible, even if they are like E:first-of-type is a structure that is not supported by jquery selectors.
4. Page animation effect
Different from desktop web applications, mobile applications are much more dazzling in terms of page switching effects, such as: sliding switching, mask pop-up, fade-in and fade-out, splash screen, zoomin, zoomout effects on iPhone, etc. Take a look at CSS definitions of fadein and zoomin animations