The Jacket Component – a comparision between Mobiscroll, Jquery UI and Kendo UI
- by: Sagara
- -
- Saturday, 3 December 2016
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.