The Jacket Component – a comparision between Mobiscroll, Jquery UI and Kendo UI

As a web based developer, we like to develop our own framework, from our own backend php framework called Bono, our own backend javascript framework called Xin, to our front-end CSS framework called Naked. We also develop a web interface framework called Jacket that combine Bono, Xin and Naked into one ready to use front-end and backend framework.

When we try to developing javascript component framework for Jacket, we face into a pretty big obstacle, with the time constrain and small team size, we come to decision to not develop our component framework, so we research some popular javascript component framework. Our team are already familiar using jquery as our javascript framework, so we only researching to 3 popular javascript frameworks: jquery UI, Mobiscroll, and Kendo UI.

There are some few criteria that need to be considered :

• It need to cover as many as our Jacket component needs
• It need to be easily re-skin, as our project mostly use different look and feel every time
• It need to be touch and mobile friendly if not optimize
• It need to be desktop friendly
• It need to have good documentation
• It need to be free

1. Jacket Component’s Need (So far)

Component	MobiScroll	jQueryUI	Kendo UI
Datepicker	Yes	Yes
Autocomplete	Yes	Yes
Searching	No	No
Searching Menu	No	No
Input Type File	No	No
WYSIWYG Editor	No	No
Tab Menu Scrolling	Yes	Yes
Pagination	Yes	No
Lazy Load	Yes	No
List	Yes	No
Checkbox Multiple	No	No
Multiple Delete	No	No
Radio Button	No	No
Calendar	Yes	Yes
Image Editor	No	No
Map	No	No
Move Sort	Yes	No
Tabs	Yes	Yes

Nice to see that more than half of our needs already covered with some of the framework.

2. Features Comparison

Features	MobiScroll	jQuery UI	Kendo UI
Accordion	Yes	Yes
Autocomplete	Yes	Yes
Button	Yes	Yes
Tabs	Yes	Yes
Dialog	Yes	Yes
Framework Icons	Yes	Yes
Slider	Yes	Yes
Datepicker	Yes	Yes
Progressbar	Yes	Yes
Select Menu	Yes	Yes
Spinner	Yes	Yes
Menu	Yes	Yes
Tooltips	Yes	Yes
HIghlight / Error	Yes	Yes
Calendar	Yes	No
Color	Yes	No
Text Fields	Yes	No
Checkbox	Yes	No
Switch	Yes	No
Radio Buttons	Yes	No
Form With Validation	Yes	No
Stepper	Yes	No
Dropdown Image	Yes	No
List View	Yes	No
Load More	Yes	No
Load On Demand	Yes	No
Checklist	Yes	No
Quick Navigation	Yes	No
Measurement	Yes	No
Option Menu	Yes	No
Paging	Yes	No
Prev / Next Navigation	Yes	No
Card	Yes	No
Number	Yes	No
Numpad	Yes	No
Number Separator Coma	Yes	No
Range	Yes	No
Rating	Yes	No
Multiple Select	Yes	No
Autocomplete	Yes	Yes
Autocomplete With Ajax	Yes	No
Country Picker	Yes	No
Countdown	Yes	No
Stopwatch	Yes	No
Tree List	Yes	No
Dialog	Yes	No
Sign In	Yes	No
Alert Message	Yes	No
Popup Checklist	Yes	No
Sheet List	Yes	No
Sheet Grid	Yes	No

Look at that so many component that all of the framework provide, and looks like Kendo UI have the most of them.

3. Look and Feel

	Mobiscroll	jQuery UI	Kendo UI
Themes	Sort of, it have several themes that looks like native mobile interface.	Yes, costume-able themes.	Sort of, they have their own look and feel.
Touch based	Good	You can’t touch this	Good
Mobile friendly	Yes	No	Yes
Desktop friendly	Yes	Yes	Yes

Since we are CSS master, we feel any kind of html can be override (thanks to the power of !important). But mobiscroll have skins that looks like native mobile interface, this might help us on developing web based mobile apps.

4. Documentation

	MobiScroll	jQuery UI	Kendo UI
Documentation	Yes	Yes	Yes
Demo	Yes	Yes	Yes

All of them have good documentation. They have how to use section and example. But Mobiscroll and Kendo UI have good demo website. So far so good, hopefully we have time to read them all.

5. Javascript framework Support

	MobiScroll	jQuery UI	Kendo UI
jQuery	Yes	Yes	Yes

Jquery is all we need everything are fine here.

6. That Most Important Thing

	MobiScroll	jQuery UI	Kendo UI
Price	OK, should be cheaper	Free as water	You don’t want to know

You can’t beat free.

Final Decision

We believe all those component framework already tested in both desktop and mobile environment, so it will save our time and eliminate the need to test our component on every devices especially mobile devices out there. So based on that consideration we going to use Mobiscroll in our Jacket.