HTML5 · Dashboards

What are the best HTML5 frameworks for building interactive/high performance dashboards?

AJAY BAM Ceo and Co-founder at Vyrill Inc

April 7th, 2016

All,

Has anyone used any HTML5 user interface frameworks like Kendo for building interactive and high-performance websites with support for pretty graphs and applications? If so, what has your experience been? Or do you have suggestions of any other tools?

Thank you and appreciate the comments.

Ajay

David Albert Founder & Principal at GreyGoo

April 8th, 2016

While very slick, both ThreeJS and BabylonJS rely on WebGL to render which doesn't have mass browser support. If you're looking for simpler options but still nice and clean, Morris Charts are nice: http://morrisjs.github.io/morris.js/index.html and is dead easy to implement--we've used the library in couple projects. Chartist is also nice, and does animations: http://gionkunz.github.io/chartist-js/ and is about as easy to use as Morris. It's also my understanding you can mix Kendo UI components with Bootstrap so that may be a good option. We use Bootstrap for pretty much every web app we build.

Stephen Williams CTO & cofounder at Change My Path

April 8th, 2016

The future belongs to WebComponents, and the best preview of that future seems to be Polymer 1.x.  It only works on recent browser versions, so forget IE < 10 or maybe 11.  But it works great on all 'Evergreen" browsers, including iOS and Android.  Use ThreeJS or even BabylonJS for 3D charts and interactives.  There are a number of libraries for other types of charts.

Alex Matiushkin

April 7th, 2016

I would recommend to take a look on sencha ExtJS. They provide commercial and open-source licenses.  

Stephen Williams CTO & cofounder at Change My Path

April 9th, 2016

@DavidAlbert: Works on all three of my browsers (Firefox, Chrome, Safari) on my MacBook Pro 10.10.5 that's over a year old.  Also works on my several-year-old Chrome Pixel.  What browser are you using? It is possible to disable WebGL; back in 2011 it was a security risk for a bit. Firefox may also disable it if you don't have updated drivers.
http://threejs.org/examples/#webgl_animation_skinning_blending

Stephen Williams CTO & cofounder at Change My Path

April 8th, 2016

Only 84% of global users and 90.5% of US users have support for WebGL in the browsers that they use.  Essentially all modern browsers and all recent mobile phones support WebGL well now.  If you care about the <10% of users who have outdated browsers, older Android phones without an add-on browser, or very old iOS phones, you should have an alternative.  Click on Usage Relative here, where red shows amount of users using a pre-WebGL browser:
http://caniuse.com/#feat=webgl

David Albert Founder & Principal at GreyGoo

April 9th, 2016

https://www.dropbox.com/s/buknn9nox2crh1y/Screenshot%202016-04-09%2019.32.35.png?dl=0

MacBook Pro. Bought less than 30 days ago.

Kuldip Pipaliya Freelance Developer at Truelancer.com

April 7th, 2016

Hi AJAY,

There are lots of HTML5 UI frameworks like
  1.  Wijmo,
  2.  Kendo,
  3.  Bootstrap2/3/4
  4.  telerik

There are lots of plugin available for Bootstarp2/3 ( BS ) for Graphs/UI those can be used for your dashboard or highly interactive web application. I prefer to use BS , because It is Open-source, very popular and supported by large community.

Adam Breen Digital Product Strategist at CPDone Pty Ltd

April 11th, 2016

Performance is always a loaded topic to discuss, if you're not using a common and agreed measurement approach. I recommend you start with this great article in Smashing Magazine from Paul Irish & Paul Lewis (both in the Google Chrome team), as background material for that discussion.

For actual framework selection, this fairly recent article from Alexey Migutsky has some of the clearest thinking I've seen on the topic for quite some time :)

It sounds to me as though you are probably quite early in your product development?

If so, I strongly recommend avoiding technical decisions like "which client side framework" for as long as possible, because client-side frameworks make it much easier to create technical debt that hurts you down the track. They seem easy to work with for trivial applications, but quickly develop unwieldy complexity in the hands of developers who have not previously built a complex app with the chosen framework.

Your user-validation needs can be much faster addressed using high-fidelity prototypes. (The new GV book "Sprint" is a fantastic testament to the power of prototyping... everyone in this forum should read it!) Make your prototype's data rich and meaningful, and get it in the hands of real users quickly. That will help you refine your UX/UI much faster than if you try to code it up.

Look at using the brand new Adobe XDtool for early-stage product development. It will help you to very quickly get a clickable, high fidelity prototype into potential users' hands, and iterate your design fast. It's very easy to learn, quick to use, and makes it easy to generate mobile, tablet and desktop web-hosted prototypes for testing.

A good, well-tested prototype will also help you determine the framework that best suits the style of information architecture and general UX that you want to provide (if indeed a framework is really required!).

One last note: if you're not developing native mobile apps to begin with, then give serious thought to the disadvantages of the heavier client-side frameworks on a mobile phone (speed, maintenance). You may find it's faster to get to "beta" using a well-understood server-side framework that can easily be swapped out for client-side UI in the future (eg. Rails, MVC.net). Server-side apps can still perform very well, and the reduced development overhead will keep your burn rate lower. And on less-powerful mobile devices, a single page load (with everything in-lined, which any server framework or decent build chain can do these days), will be MUCH faster than a client-side experience that has not been carefully crafted.

Hope that helps!

AJAY BAM Ceo and Co-founder at Vyrill Inc

April 18th, 2016

Thank you all for the detailed insights on the topic and notes.  We are looking and researching into all your suggestions. I will get back later with how we decided to proceed. I really appreciate this.