What's the best way to build a cross-platform HTML5 app (alternative JS frameworks)?

Question

I want to build an HTML5 app that will work on nearly every platform (qualified as desktop: FF, Chrome, Safari, IE9+, mobile: iOS, Android built-in browsers, not installed App browsers) -- if it is a mobile platform (phone, tablet) the view should accomodate the small screen. I have looked at a lot of different frameworks and they all have pros/cons.

For example, Sencha Touch has very nice widgets, but only works on Webkit. In addition, if I go with a mobile JS framework like jQueryMobile, it opens it up to desktop browsers (IE, FF support), but the mobile navigation views aren't really applicable in a desktop browser.

Aside from building multiple versions of the site hosted at different URLs, I'm trying to figure out if there is a best-path forward. I know I can use CSS3 media queries to load alternate CSS, but there is not alternative way to do this for JS (or is there)?

So, I'm coming to the conclusion that I shouldn't necessarily use one of these frameworks and try to do a flexible layout like this guy's site (layout/images adjust appropriately to viewport): http://artequalswork.com/ -- but I do need some JS heavy widgets like data grids that I don't want to build myself.

As an example, I might like to use KendoUI for the desktop version, and sencha-touch or jquery-mobile for the mobile version. I'm not sure how to do this cleanly w/o building two separate versions of the app. Any pointers?

Answer 1

---

Model View Controller!

---

You are describing the need for something that is called Model View Controller (MVC). If you separate the architecture of your site in this manner, you will isolate the UI from the logic and the data.

Hard Solution

You can create your site with a server language such as ASP.NET MVC or PHP with a framework that supports MVC (CakePHP, CodeIgniter, Yii...). Yet, there is a way easier solution...

Easy Solution

Most Content Management Systems (CMS) follow a MVC architecture. The easiest thing to do is is to grab one and make a theme for the different views. Then, you simply serve the right theme to right type of user (desktop or mobile) with some JavaScript detection. I would suggest going for WordPress since it has already a wide availability of themes and plugins for what you need. A fast Google search came up with WPTouch!

Answer 2

All problem form you goal “an HTML5 app that will work on nearly every platform”.

I think you may chose a desktop javascript framework and a mobile javascript framework.

Depends on how complex your site is. Very simple, you may same html, same js and different css. More complex you may same html, different js and css. Most complex you may different html, js and css.

I think we can use mvc to explain cross-platform problem, you can always use same model, but view may different to Mobile and desktop user, and because view is different, sometime you may use different controller.

In fact Objective-C Programmer just write Mac/iPhone/iPad as this way. At model level, Mac OS X and iOS is very similar, at most situation you may change 4-5 line to transfer a Mac app to iOS can run. But is not the main job to do, because of this two platform have very different screen size and user interaction method, a lot of job is to change view. Mac OS X have NSTableView support mutil-cloumn but iOS only support single-cloumn. But this transfer job is not difficult, because most code use objective-c is MVC.

Answer 3

Some rather convoluted answers on this one but the less moving parts you have the better.

Choose a JS framework that does a lot for some devices rather than an ok JS framework that does a little for a lot.

For example jQMobile is good for a whole matrix full of devices and is simple to develop BUT does not have all the things needed to be a smooth mobile experience. Sencha Touch works for ios, android and blackberry but it does an exceptional job. Sometimes you need to scale back scope!

I guess the point is you really don't want to have to code your project twice, right?

Answer 4

Check out this post on HTML5 Rocks : "Mobifying" Your HTML5 Site

Answer 5

There is no silver bullet here. Try to build a giant framework that could handle all situations will mostly end with a framework that doesn't work well on any platform.

Here is some experience for your consideration.

We build a site that works both on desktop and mobiles. To enable some HTML5 feature, we choose Modernizr to rescue. and we build two Views for the site, one for mobile and one for desktops. Once we got a request, we'll check whether the request is from mobile or not. If yes, then we'll return the mobile view. otherwise, return the normal desktop view.

Also we build ios and android apps that wrap the site, and we chose jQuery.Mobile as the mobile js framework, and which works just fine.

Answer 6

When it come to CSS I would try to keep design fluid. If not possible there is grid system that fits common devices.

Use media queries to serve a optimized grid that fit device type.

Recommend providers of optimized grid:

978.gs: http://978.gs/

On this site you find grids optimized for several screen sizes. It is optimized for mobile(300), tablet(748), web(978 and 1218) and big screens(1378). See demo page to see how ity work in screen resolutions.

Less: http://lessframework.com/

Every layout in Less Framework is based on a single grid, composed of 68 px columns with 24 px gutters. The only measures that change from layout to layout are the amount of columns and the width of the outer margins.

Answer 7

Full disclosure: I work for Kendo UI

Kendo UI has the ability to use models and templates to render dynamic views. That coupled with a dependency manager like Require.js can allow you to create a lightweight MVC type architecture.

The most important thing here is to remember to modularize your application into self contained views that can be used on any page independent of each other. If you architect this correctly, you should be able to do responsive design, and or use a mobile framework like Kendo UI Mobile to effectively target your application at both desktop and mobile platforms.

Answer 8

Do you take screen size in consideration? We'd better define different UI and interactive method for 1024x768 and 320x240.

As you mentioned Android, there are different types of touch screen which affects your design, too.

Today, the practical solution is either to drop some platform and use only common capability of browser, or to create a basic version and optimize it for specific platform.