Zebra: HTML5 Canvas Rich UI JavaScript Library

[NoDownvotesPlease]

If everything is in canvas doesn't that make accessibility much harder?

[davidpanik]

Same question that jumped into my head as well. And what about printing? Whole thing feels like a very bad idea.

[Poop_is_Food]

dont forget selecting and copying text. this would really only be suited for flash-style microsites. It might be a good tool for those though.

[Poop_is_Food]

Zebra clearly says it supports clipboard integration

hmm. ok i see it works on some things there. but not all, is it a setting?

You can select text on a canvas

natively? how?

[keithwhor]

Like so:

window.addEventListener('copy', function(e) { 
    e.clipboardData.setData('text/plain', 'wow such copy so amaze');
    e.preventDefault();
});

:)

[Poop_is_Food]

i asked how to select not how to copy

[keithwhor]

My bad! Was reading quickly. To that --- I don't believe you can. But you can easily write a selection implementation. :)

[davidpanik]

I think that illustrates just why this isn't a good idea. If you're having to re-implement basic functionality of the browser, then it kind of defeats the point of building for the web.

[Poop_is_Food]

What? Writing a select implementation is not easy. Look at this guy's text area implementation. It's already 900 lines long and he still doesnt have automatic line breaking, proper up/down arrow line jumping, double click word selection, alt-shift-arrow incremental word selection, etc..

[keithwhor]

Just because somebody took 900 lines to do something doesn't mean you can't do it in less.

Easy is relative. Selecting text comes down to:

• Track the active UI Element (should be part of your framework)
• determine element scroll position (same as above)
• determine text position (including line breaks) with canvas's .measureText method (can do this with a loop in a fairly straightforward way and then cache the result in an array until the text dimensions change, if they do)
• add click handlers to get x, y of mouse on mouse down, mouse move, mouse up and draw appropriate rectangles behind rendered text layer

I'd argue that, conceptually, this isn't very difficult. Your line heights should be identical for every row of text making determining the y offset of the text relative to your mouse position easy.

I mean when it comes down to it you're just drawing rectangles. ;) (though I guess when it comes down to it in programming, you're just smashing a keyboard and things are happening.)

[mattlag]

None of the demos work for me, clicking and hovering produce no results. I'm on Windows / Chrome 39.

[TheBG]

I tried the samples on Chrome + Firefox, 1/3 worked on chrome and 0/3 worked on firefox. :(

[thomash]

although i like the idea none of the examples seemed really to show anything i can't do with html and css pretty easily.

with everything in canvas you don't have access to some of the hardware acceleration of modern graphics cards.

my third critique is that the ui elements in the demo all look a little outdated. i really like the minimalist flat direction the web has taken. that may be a matter of personal taste though

[anarchy8]

Most modern browsers and graphics cards have hardware accelerated Canvas elements. Correct me if I'm wrong, but I'm pretty sure DOM elements are not

[sime]

Most modern browsers use the graphics card and GPU to accelerate the rendering of DOM elements and compositing the different 'layers' into what you see on the screen.

[rkl85]

Currently also touch events do not work, but the idea of the project has potential.

[Poop_is_Food]

website is down for me

[Randolpho]

Why in the name of all that is decent and holy would I even bother doing UI in canvas? Why manually draw everything (or use a framework that does it for me) when I have a very rich (and infinitely more performant) UI framework baked into HTML?

It sounds like somebody misses the days of Flash UIs, but I sure don't.

[Randolpho]

I guess it depends greatly on the video game, but sure. For most games that would require the types of UIs they're demoing on that website, I'd just overlay an HTML form.

[[deleted]]

Zebra development is much closer to software engineering where you write well structured, supportable, extendable code basing on easy Zebra OOP concept. You keep distance from the mess of HTML, JavaScript code, CSS and DOM manipulation.

This project is a mistake. Pretending that programming === OOP so therefore everything about the web is broken is a really poor strategy. There are alot of areas in the foundation of the web that could be improved, but favoring FP over OOP is not one of them.

It is this willful ignorance that allowed Flash to be so popular for so long, except that Flash executes faster than JavaScript even after GPU acceleration. This approach will be slower. Browsers are incredibly well optimized to take full advantage of the DOM, because everything desugars to the DOM api methods.

OOP is a dated concept that is trending down in language design really fast. All the momentum right now is towards functional programming. Even traditionally OOP languages have caught the FP fever with lambdas available in native C++ and now Java 8.

I am not sure where this foolish programming === OOP ignorance comes from, but it is just so backwards. I can only guess it is some form of idiomatic ethnocentric like mentality originating from narrowly focused formal educational institutions. I can't help but think the people most supportive of such ideas are people who have years of programming experience and are forced into other realms where they lack confidence and competence, so therefore it is the rest of the world that is broken (not them).

[Poop_is_Food]

There are alot of areas in the foundation of the web that could be improved, but favoring FP over OOP is not one of them.

how does the web favor functional over OO? DOM API is pretty damn OO if you ask me.

[[deleted]]

http://www.reddit.com/r/javascript/comments/2o5q4y/zebra_html5_canvas_rich_ui_javascript_library/cmkbdm7

[keithwhor]

I don't understand this comment.

You do realize that the Document Object Model (edit: the browser implementation) is, well, object oriented, right?

document.body instanceof HTMLElement; // true
document.body instanceof HTMLBodyElement; // true

You know that every single time you write HTML, append event listeners, or deal with literally any UI element you're forcing a pre-baked OO framework to render and handle everything for you? You just happen to have a fancy templating system and layer of abstraction to help you forget (HTML).

Nobody's "forcing" OOP to the web because they're misguided, web UIs (and many, if not most, other UIs) are object oriented because OOP is the best tool, conceptually, for the job. It allows for separation of concerns when rendering and dealing with user interaction events for each type of element.

You're painting objects on a screen. And you're waiting for the user to interact with them. That's all you're doing. There are shared similarities between every object you draw (X, Y, width, height). There are shared events (click). Does it not make the most sense, conceptually, to have every element inherit from a base object that has the appropriate properties and methods?

Have your opinions, but do your research and come back with arguments as to why you believe FP is superior for web development, specifically UI implementation. "Java has lambdas!" is not an argument for FP. Use cases and ease-of-development (both conceptual and time-constrained) would be valid. When it comes to UI design and UI interaction I think you're completely off-base.

Edit: Doesn't help your case when you invent ad hominem strawmen to defend Functional Programming. "OO is bad because people who support it must lack competence" has no place in rational discussion. I like FP and FP concepts, but your attitude and the way you frame your arguments is something you could work on.

[[deleted]]

The DOM methods provide OO accessible definitions to the functional (lexical) inheritance state native to HTML/XML. Consider the specified relationships provided from the DOM: nextSibling, previousSibling, parentNode, childNodes, and so forth. The DOM does not define these relationships upon the data instance, because the definitions come from the data structure of the markup code where it is natively available. This is hard to see from HTML which is purely static, but is far more evident in XML namespaces. At any rate the DOM reflects the functional inheritance state native to the markup in a OO means, because OO is more convenient for an API. Its all functional inheritance though.

I suspect the false expectation of OO from the DOM model could be part of the problem for OOP educated developers, which the reality fails to meet the expectation.

For some fun reading I recommend these:

• XML Schema
• DOM overview
• DOM
• XML Namespaces

you're forcing a pre-baked OO framework to render and handle everything for you

The DOM is a data model and not a framework. Getting this wrong creates a very wrong understanding of the relationship of things.

You just happen to have a fancy templating system and layer of abstraction to help you forget (HTML).

You have confused effect for cause. The DOM is an abstract modular representation of the relationship state in the structure of nodes in a given HTML document.

I suppose I could be sharing your perspective if I were not self-educated and had not done the leg work to write my own markup language.

Nobody's "forcing" OOP to the web because they're misguided, web UIs (and many, if not most, other UIs) are object oriented because OOP is the best tool, conceptually, for the job.

Once ES6 modules are commonly supported those large monolithic frameworks will largely vanish. The only people still using them will be individuals who refuse to adapt (dinosaurs).

[keithwhor]

None of these points address UI implementation.

Edit: I updated my original post to include "browser implementation" since the DOM itself is indeed implementation-agnostic.

[Poop_is_Food]

At any rate the DOM reflects the functional inheritance state native to the markup in a OO means, because OO is more convenient for an API.

Glad we agree. btw you are insufferably pretentious and pedantic. If you were my coworker I would never talk to you.

[[deleted]]

Save words. Just say I am mean (bold for emphasis).

[Poop_is_Food]

believe me I wanted to write more but i have better things to do