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.