Zebra UI – Canvas driven web UI

Zebra has been available for a couple years now, but I’ve only recently begun to work with it.  There are many discussions about whether rendering an entire web UI in canvas is practical or not. Old hat web developers seem to have trouble coming to terms with leaving behind their DIVs and the HTML elements that provide for things like buttons and drop downs, text areas and the like.  There are also concerns about search engine indexing, and load performance.

I defer for a moment to this thread on Stack Overflow.

The OP asks the question “Does it make sense to create canvas-based UI components?”

The most highly voted answer exudes a resounding “No”. But if you look closer you’ll see a few dissenters in the mix. What I found particularly interesting is the idea that, as DOM elements grow in total amount, the performance of the page will suffer.  It is here where a fully canvas rendered “application” will shine.

In my short time working with Zebra so far, I’ve been very impressed with load times, UI responsiveness and the possibilities it presents. That said, there are a few downsides and roadblocks for me moving forward with Zebra.  Admittedly, the project I am currently working on has pretty much been set in stone that Zebra will be the foundation for the application, so these are the hurdles I will need to overcome.

  • Shedding typical web developer mindset. Zebra is OOP. I’ve begun using Eclipse to work in JavaScript instead of my trusty notepad++. Some of your typical approaches to layout, functionality, styles are thrown out the window. Developing a web app with Zebra might feel more like working with QT Creator than in JavaScript.
  • Working with a minimalistic API. Zebra documentation, examples and tutorials are in a “good enough” state. They are enough to get the ball rolling, but I’m finding that it’s difficult to actually leverage the full scope without a lot of tinkering and experimentation.
  • Small community. There is a forum for help and discussion, but overall it seems like that community around Zebra isn’t very large. So there will not be a lot of feedback if I run into a problem, and not a lot of code to steal borrow from when looking for specific solutions.

As with most of my real job work, I won’t be able to share, for now, any of my projects here on my blog. But as I move forward with Zebra UI, reluctantly, I will see if maybe I can’t contribute back and start building some demos and examples for others who might be interested in playing with it.  I think that guy on Stack Overflow will be on the wrong side of history eventually.  Yes, this had been done before and it was called “Flash”.  But in HTML5, modern browsers, the age of mobile, most everyone having JavaScript enabled… I think we’re on the edge of seeing a shift toward full canvas UIs as websites, applications and most definitely in games. Developers will be able to leverage WebGL, and eventually SIMD (see: SIMD in JavaScript)


Leave a Reply

Your email address will not be published. Required fields are marked *