µMobi: A Micro Mobile Web Framework for Smartphones & Tablets, which aims to be a smaller, faster, touch-optimized mobile web framework.
uMobi uses jQueryMobile compatible HTML template, the same template in jQueryMobile also works in uMobi.
uMobi is pretty small, and is 11X smaller than jQueryMobile, if you don't need such rich components like jQueryMobile, you can simply pick up uMobi.
WORKING IN PROGRESS
Though there are jQueryMobile, iUI, jqTouch frameworks for mobile web development, but their files are too huge for 3G devices to download, the size of jQueryMobile is even more than 220KB (without jQuery or Zepto), but the startup bandwidth of 3G devices only has 8KB or uppper, therefore, jQueryMobile costs more than 4-6 seconds to download the whole jQueryMobile files.
Beyond that, jQuery runs slower 8 times than pure DOM manipulation.
We found that the UI design, effects of jQueryMobile are so splendid, and other frameworks are not. So we decide to make a smaller, faster, lighter mobile web framework, especially for 3G-bandwidth devices.
- Fast: fast DOM manipulation, initialization (provided by µ.js)
- Small: core is pretty small. you can build a customzied version with extra extensions.
- Extensible: write your features in extensions.
- jQueryMobile template compatible.
- SASS powered.
- CoffeeScript powered.
Band width limitation
Band width for 3G devices
In real world, tested with iPhone 4S
- Start up speed: 4KB ~ 8KB/s
- Maximum speed: 700KB/s or 0.68MB/s
- Average speed: 317KB/s or 0.31MB/s
Band width for wifi devices
In real world, 802.11b/g/n Wi-Fi (test incomplete)
- jQuery addClass vs DOM classList: http://jsperf.com/jquery-addclass-vs-dom-classlist/4
Zepto (minified 23KB, 22KB through Google closure compiler)
jQuery 1.8.3 (minified 32KB)
uMobi (minified 23KB)
jQuery Mobile 1.2 (minified 227KB)
- jquery.mobile.min.js 119KB
- jquery.mobile.min.css 76KB
- images/ 32KB
Enyo (minified 237KB)
- enyo.css 2.7K
- enoy.js 111K
- app.js 97K
- app.css 27K
jQuery UI 1.9.2 (minified 335KB)
- jquery-ui-1.9.2.custom.min.js 232KB
- css/ui-lightness/jquery-ui-1.9.2.custom.min.css 27KB
- images/ 76KB
Current Target Platforms
- iOS5.0+ (WebKit on iPhone and iPad)
- Android ?.?
- SASS for styles, Please see http://sass-lang.com/tutorial.html
For quick development, the following is the requirement:
- Apache / Nginx + PHP support: for rendering document templates.
- node.js, npm, coffee-script, grunt.
To edit coffee scripts, you need to run the following command to watch the source directory:
$ coffee -wc -o lib src
We use Grunt.js 0.4.x, which is still in development. there are some fixed dependencies to install. please see https://github.com/gruntjs/grunt/wiki/Upgrading-from-0.3-to-0.4
- Grunt.js 0.4.x http://github.com/gruntjs/grunt
- Grunt-cli http://github.com/gruntjs/grunt-cli
- grunt-css http://github.com/c9s/grunt-css
This should install grunt dependencies and contributed tasks.
To build compiled js through requirejs and uglifyjs:
To build compiled css through cssmin and jshint:
The compiled css/js files are located in
Below is the compiled directory structure:
compiled ├── images │ ├── icons-18-black.png │ ├── icons-18-white.png │ ├── icons-36-black.png │ └── icons-36-white.png ├── umobi.css ├── umobi.js ├── umobi.min.css ├── umobi.min.js ├── umobi.structure.css ├── umobi.structure.min.css ├── umobi.theme.css └── umobi.theme.min.css
To develop with CoffeeScript, simply run the command below: