Info

Ben is Vice President of Global Products at Walmart.com, where he works closely with his long-time friend Dion Almaer.

One of the disadvantages of writing a blog post on little sleep late at night in a hotel room while watching a movie and talking with Dion and doing your email is that you inevitably forget to write something you meant to.

In this case, one of the big drivers for writing the previous Bespin and Canvas post was to discuss accessibility–which I then neglected entirely to mention. Let me rectify that here and add a few other miscellaneous bits.

Accessibility

Rendering all of our content to a giant bitmap is obviously not the best way to integrate with all kinds of technologies designed to make content more accessible in various ways. But getting past that initial observation, we’re actually really interested in finding ways to make Bespin very accessible.

One of our initial ideas is to embed semantic content inside of the <canvas> element itself, as in:

<canvas>
  The content inside the Bespin editor
  could be embedded inside here as text nodes
</canvas>

It might not be expensive (in UI latency terms) to keep these text nodes synchronized with the canvas editor since the UI thread doesn’t need to re-render anything as a result of the constant updates. If this approach were to incur a performance penalty, Bespin could have an “accessibility mode” that would optionally turn this on.

Bespin Dashboard

Bespin Dashboard

The Bespin dashboard also uses canvas, but for components instead of just text. We’re actually thinking of killing two birds with this one and having the hierarchy of the components defined inside of the <canvas> element:

<canvas>
  <splitPanel>
    <list/>
    <horizontalTree/>
  </splitPanel>
</canvas>

We could then build the UI using this hierarchy rather than by using the entirely programmatic approach we have in place now:

// this is pseudo-code not pulled directly from Bespin, but
// Bespin's dashboard code looks similar
var splitPanel = new SplitPanel();
var list = new List();
var tree = new HorizontalTree();
splitPanel.add([ list, tree]);
...

You would style and layout these components using separate artifacts (CSS and a layout-specific artifact).

We’ll talk more in a future blog post about this concept of using canvas to render components; it’s really more about supplementing DOM-rendered components with canvas-rendered components and laying out the combination with JavaScript (rather than CSS / HTML)–this is what we briefly mentioned as “Thunderhead” in the announcement video.

An advantage to this approach for accessibility is that we can provide a clean, fully-semantic hierarchy of the content, rather than status quo of HTML which runs the spectrum from style-and-content-mashed-together-seamlessly on one end to almost-pure-semantic-content-with-a-few-compromises-to-deal-with-CSS-realities on the other.

Let me again emphasize that Thunderhead is an experiment at what this kind of thing would look like; we’re not sure if we like it and we may scrap it entirely at some future point.

SVG?

We’re frequently asked why we didn’t use SVG for the editor. To be honest, the biggest reason is that I have a lot of experience creating custom components with Java2D, and Java2D strongly resembles the canvas API. It was pretty natural to start hacking away with canvas and JS.

But there are a few reasons we felt good about going down that road to begin with. First, based on experimenting with DOM rendering, we felt we had good reason to suspect that SVG wouldn’t perform as quickly as the canvas implementation since SVG has its own DOM API and thus is likely to mirror all of the performance issues to be had with HTML’s DOM.

On top of that fundamental concern, we had another: while it’s straight-forward to implement our own painting optimizations in canvas (and we have), with SVG it’s much more subtle and involves understanding the implementation details of SVG run-times and whatever optimizations have been implemented under their covers (again, the same as with HTML DOM performance optimization).

Also, as a fairly large specification, we were concerned about compatibility headaches as differing subsets of SVG are implemented in the browsers that support it. We didn’t have the energy to fight DOM compatibility issues during the day and SVG compatibility headaches at night.

Having said that, we’d love to see an SVG version of the Bespin editor emerge at some point and compare its performance and codebases. There’s certainly a good chunk of JS code that could go away if an SVG version worked out.

Stand-alone Editor?

We’ve also been asked whether we’d like to make it easy for folks to embed Bespin’s canvas editor in their own non-Bespin projects. Absolutely we do. Bespin will eventually spin out three projects:

  1. The Bespin project: an on-line code editor (i.e., the project we’ve currently announced)
  2. Thunderhead: a canvas/JS GUI toolkit
  3. (To Be Named Editor): a stand-alone canvas editor that you can embed

To make it seem less like I’m making this up just now, here’s what the Thunderhead logo looks like:

Thunderhead

Canvas versus Firefox

Some folks have also wondered why we didn’t just enhance Firefox to do the things that we achieved by using canvas and JavaScript. The answer to that is simple: we’re not interested in making Bespin only run on Firefox. We want as broad an audience as possible to use it.

However, we’re already talking with standards folks and browser folks about how best to pull some of these ideas back into the browsers. This isn’t canvas versus the browser, it’s about using canvas to experiment with new features ahead of the browser, and applying those “learnings” (is that really a word? WTF) back to the browsers.

More to come soon, thanks for reading.

Comments

44 Comments

Post a comment
  1. February 18, 2009

    Bespin looks really slick guys, and I too want it to be accessible. Let me know if I can help.

  2. LaC #
    February 18, 2009

    Are you familiar with the expression “eating your own dog food”?

    On one hand, we have folks, at Mozilla and elsewhere, telling people that open standards like HTML5, CSS, SVG, the DOM etc. are the way to go for building advanced interfaces on the client side, instead of using proprietary solutions like Flash or Silverlight.

    On the other hand, we have other folks, also at Mozilla, saying that none of that stuff was good enough for them, so they had to go straight to 2d drawing primitives and rebuild everything from scratch. At which point, there is no technical reason not to do it with Flash instead, and get the additional benefit of running on all browsers now, with no compatibility concerns.

    It’s also a bit unsettling to hear that Firefox couldn’t fulfill the text layout and rendering needs of a text editor, considering that 90% of its job is to layout and render text-based content with advanced styling (ie web pages).

    It seems to me that Mozilla is shooting itself in the foot with Bespin, from a PR point of view.

  3. Ben Galbraith #
    February 18, 2009

    @LaC: Actually, canvas is an HTML 5 standard, not a proprietary solution. It’s a peer to any other feature of HTML.

    One of the cool bits about not having Bespin in Flash is that we can run Bespin on the iPhone (if we implement bitmap font rendering, which we may).

    I don’t think it may be all that surprising that HTML isn’t optimized for code editors; that’s not really the browser’s primary purpose, is it?

    Finally, the great thing about Bespin being a Labs project is that we’re free to experiment and try crazy things. I’m not very surprised that some people think we’ve gone off the deep end with Bespin, but we do hope to get some conversations started and learn some lessons to apply to our efforts at making the web better.

  4. Robert O'Callahan #
    February 18, 2009

    LaC: there are huge differences between canvas and Flash: canvas IS an open standard (see HTML5) and there are multiple interoperable implementations, even multiple excellent open-source implementations.

    But you’re also right that using canvas is a giant workaround for missing functionality and poor performance in the text editing built into browsers, and that’s something we should do something about, and I think we will.

    In the meantime, the open Web also needs killer tools, and if canvas is the expedient way to build them, then go for it.

  5. Geoff Lankow #
    February 18, 2009

    Some (hopefully constructive) criticism on your logos:

    Firstly, the Bespin logo looks to me like curly braces sitting on a beanbag. I’m not sure quite how you could make it look more like a cloud and less like a beanbag.

    Secondly, I’m not a big fan of using initials in a logo, as in Thunderhead. It reminds me of Adobe products – although at least you’ve put more effort in than just drawing a square with some letters in. :) Instead of the letters could you have a page with code on it or something similar? Or perhaps some other code symbols, you can’t really use {} in both logos though.

    I know it’s early days and these things change with time, but thought I’d get my 2c worth in. Hope it helps.

  6. February 18, 2009

    Hi folks, very nice!

    However, I’d also like to toss in a vote for sticking to contentEditable. There are already several proofs of concepts for syntax highlighting using contentEditable and they don’t appear to have the performance problems you seem to be concerned about.

    Heres the first result off Google I found, for example: http://cdolivet.net/editarea/editarea/exemples/exemple_full.html. You can paste in tens of thousands of lines and editing is just as speedy as with a few lines.

    Implementing columnar highlighting might be tricky, but its doable I think. The selection API certainly allows discontinuous selections, so if you got some font metrics you could implement that. Its also a candidate for the browser to implement.

    The infinite spaces at the end of each line could also be implemented with a simple hack I think. It might involve a bit of capturing mouse/keyboard events and redoing some functionality yourself, but its better than doing the whole stack yourself no?

    Could you maybe go into a bit more detail about why contentEditable is insufficient? As someone who hacks with it fairly regularly for more complicated apps than a text editor, I’d love to see some of its problems improved by the presence of a nice killer app utilizing it, so it pains me to see it being given up on. :)

  7. February 18, 2009

    I think BeSpin is a great idea, but I have to admit that the choice of canvas+javascript worried me a little: it makes evangelising open semantic markup and against Flash-like opacity much more difficult. So I am glad to see you’re proposing to shift to more open markup.

    BeSpin highlights the fact that we need to address HTML+CSS’s *appalling* layout capabilities ASAP. If this project inspires those changes, that would be a fantastic result.

  8. February 19, 2009

    Ben, thank you for this new post about accessibility. I think that including the text content in the canvas element is a good choice.

    Bespin will become a very good tools :-)

  9. February 19, 2009

    The standalone canvas editor project is very interesting, I can’t wait to see it!

    I guess you’ve chosen the MPL license on purpose, but why didn’t you choose a tri-license? Won’t that be a problem to include the standalone canvas editor in Mozilla-based projects?

  10. Dao #
    February 19, 2009

    Are you thinking of “To Be Named Editor” as a code editor? Otherwise, another downside of canvas would be the lack of spell-checking. Of course, that could be implemented from scratch as well.

  11. Reggie Drake #
    February 19, 2009

    > There are already several proofs of concepts for syntax highlighting using contentEditable

    Not just proofs of concept, also a mature editor: http://marijn.haverbeke.nl/codemirror

  12. Paul #
    February 19, 2009

    I understand why canvas is used for the editor component, but why use it for the rest of the interface? I’ve not heard the reasoning beind that. It seems like the file chooser and open sessions could much more easily be implemented with HTML and JS

  13. February 19, 2009

    “Actually, canvas is an HTML 5 standard, not a proprietary solution.”

    um, no. There is no “HTML 5 standard”, not even an “HTML 5 recommendation”, although there is increasing consensus that there is an “HTML 5 trainwreck”. Time will tell.

    CANVAS tag was a “proprietary Apple solution” (Apple being the most closed and non-transparent hardware company), embraced later as a “proprietary Google solution” (Google being the most closed and non-transparent audience-tracking company), both of them trying to railroad through to have it become a de jure standard, ‘way in advance of it being any de facto standard.

    That swear-word, “proprietary”… if you could cut it out of your vocabulary, eliminate reliance on a prejudicial label, then you might find that you can say more.

    (Where do I stand on Bespin? If you can create something useful, great. But it does undercut the rest of the rhetoric used to differentiate from useful realworld solutions that were “not invented here”.)

    (And btw, sorry if I come across as snappy here, Ben, these allergies are killing me. ;-)

    jd/adobe

  14. Ben Galbraith #
    February 19, 2009

    @John Dowdell: Hey, Dion and I have a lot of friends at Adobe, we love you guys, let’s not start a flame war, okay?

  15. Ben Galbraith #
    February 19, 2009

    @Reggie Drake and Cyrus Omar: Hey, syntax highlighting was never a reason to avoid contentEditable. Performance was. To remind myself of just how bad performance can be, I followed Reggie’s link to one of the CodeMirror sites, created a file ~1000 lines large, and the browser proceeded to deadlock completely.

  16. February 20, 2009

    I think that has more to do with it having to process 1000 lines of new code to syntax highlight. That could be lifted to a worker thread, no?

    Once the text is there, editing is fairly snappy regardless of how much text is around.

    Its not a huge deal, you’re definitely pushing boundaries either way with Bespin so kudos!

  17. February 20, 2009

    Woah, way too much hating on . Remember, the internet was built on “rough consensus and running code”, the IETF approach, and pretty much most progress in the Web since 1993 has been vendors shipping extensions which are later harmonized and ratified as a “standard”. Javascript itself was a Netscape extension, later a “standard”.

    Canvas runs in WebKit, FF, and Opera now. It’s basically a defacto standard except for IE, so it is not going away anytime soon. Methinks canvas is encroaching on some territory that Adobe thinks is theirs and it’s touching some raw nerves.

  18. February 20, 2009

    opps, I shoulda escaped the brackets, that was supposed to say “way too much hating on <canvas>

  19. February 20, 2009

    @Ben: Locking up on a big file would be considered a bug in CodeMirror. Could you tell me which highlighter, which browser, and which file you used, so that I can try to fix it?

  20. Nosredna #
    February 21, 2009

    Canvas must be a browser standard.

    How do I know this? I know this because it’s implemented in Opera, Firefox, Safari, and Chrome, but not in IE. Isn’t that the very definition of a browser standard?

  21. Ihab Awad #
    March 16, 2009

    Good work, folks. I have high hopes for Thunderhead.

    As for your use of markup within the <canvas> tag, allow me to suggest an alternative approach. If you embed a “little language” for layouts, you can have the advantages of both declarative markup and lack of intrusion into the document:

    var myComponent = Builder.build(
    “” +
    ” ” +
    ” ” +
    “”);

    You can now take the approach of E’s quasiliterals:

    http://www.erights.org/elang/grammar/quasi-overview.html

    to substitute actual program values into the expressions. Let’s say each widget has a “model” attribute. You can then:

    var myListModel = /* something */;
    var myTreeModel = /* something */;
    var myComponent = Builder.build(
    “” +
    ” ” +
    ” ” +
    “”,
    { myListModel, myTreeModel });

    where I’m using proposed ES-Harmony sugar in which this:

    { a, b }

    is shorthand for this:

    { a: a, b: b }

  22. Ihab Awad #
    March 16, 2009

    Sorry! I forgot to escape my angle brackets! Here are my examples again:

    var myComponent = Builder.build(
    “<splitPanel>” +
    “<list/>” +
    “<horizontalTree/>” +
    </splitPanel>”);

    You can now take the approach of E’s quasiliterals:

    var myListModel = /* something */;
    var myTreeModel = /* something */;
    var myComponent = Builder.build(
    “<splitPanel>” +
    “<list model=@myListModel/>” +
    “<horizontalTree model=myTreeModel/>” +
    </splitPanel>”,
    { myListModel, myTreeModel });

  23. March 17, 2009

    (Just to prevent misconceptions: The bug in CodeMirror that Ben was referring to has since been fixed. There’s nothing inherently slow in designMode-based editors.)

  24. July 10, 2009

    Just curious, by why not write a tool that can translate declarative tags to script during or prior to the page rendering. This is what ASP.NET does with HTML tags. I believe Silverlight renders XAML declarative tags to .NET object, and even Google is working on a declarative markup for GWT(uIBinder or something).

    Given the success of this model, why not come up with something similar for the canvas

  25. April 18, 2010

    When will thunderhead be split from bespin? I see great potential in an Open Source thunderhead like product.

    Apologies if this is already done, I’ve just been looking for a thunderhead project for a while and cannot find it.

    PS, well done on the awesome products.

    Guido

  26. Ben Galbraith #
    May 12, 2010

    Hey Guido,

    I’ve been preoccupied with other things of late, but I would love to see Thunderhead split out. I’ll see if I can find time to dive in and get it split out from Bespin.

    Ben

  27. February 8, 2014

    Hi there very nice site!! Guy .. Beautiful .. Amazing ..

    I will bookmark your web site and take the feeds also?

    I am satisfied to seek out numerous useful info here in the publish, we need work out more techniques in this regard,
    thanks for sharing. . . . . .

  28. March 15, 2014

    Way cool! Some very valid points! I appreciate you writing this article plus the rest of the site is very good.

  29. March 18, 2014

    You have just built an attached garage with a foundation in the Sims 3, but a few finishing touches are needed.

    That is why many people look to add windows to their garage door.
    If your garage door is old and worn out, a new one can do a lot to
    improve the look of your home.

  30. March 20, 2014

    You have just built an attached garage with a foundation in the Sims 3, but a few
    finishing touches are needed. Tilt up doors use fir,
    spruce and other soft wood; roll up uses oak, redwood or plywood.
    These tend to be the noisiest of doors so bear this in mind if
    you have a bedroom above and need to use the door when people may
    be sleeping.

  31. March 26, 2014

    I relish, lead to I found just what I was taking a look for.
    You’ve ended my four day long hunt! God Bless you
    man. Have a nice day. Bye

  32. March 26, 2014

    I love what you ǥuys tenԀ to be up too.

    This kind of clever work and coveraǥe! Keep up the superb works guys I’ve addeɗ you guys
    to my personal blogroll.

  33. March 27, 2014

    Pretty nice post. I just stumbled upon your blog and
    wanted to say that I have really enjoyed browsing your blog posts.
    In any case I will be subscribing to your rss feed and I
    hope you write again soon!

  34. March 31, 2014

    Way cool! Some very valid points! I appreciate you penning this article and also the rest of the website is
    extremely good.

  35. April 5, 2014

    Hello would you mind stating which blog platform you’re using?
    I’m planning to start my own blog in the near future but I’m having a difficult time deciding between BlogEngine/Wordpress/B2evolution and Drupal.
    The reason I ask is because your design and style
    seems different then most blogs and I’m looking for something
    completely unique. P.S Sorry for getting off-topic but I
    had to ask!

  36. April 8, 2014

    Are you ready to try out one of the women free dating sites or
    are you interested in finding a different type of dating site.

    All the users need to do is login with the username and password in some cases and can
    complete the transactions for online transactions.

    There is a vintage free printable Christmas coupon
    book offered here, the coupons also have pre-printed “gifts” on them.

  37. April 16, 2014

    WONDERFUL Post.thanks for share..more wait .. ࿦

Trackbacks & Pingbacks

  1. Bespin and Canvas: Part 1 « Ben Galbraith’s Blog
  2. Supporting the system clipboard in your Web applications; What a pain! on Dion Almaer's Blog
  3. Is Canvas the End of Flash? | The Stairwell
  4. » Mozilla Bespin Meetup FND’s Blag: Just Another Personal Wobsite
  5. RE: Is Canvas the End of Flash? | Sleepwalker's Dream
  6. Stephen Beattie » Blog Archive » The web is broken, please fix… - Flash, PHP, Flex and other RIA technologies.
  7. Blue Sky On Mars » Rebooting Bespin: Embedded and SproutCore

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Basic HTML is allowed. Your email address will not be published.

Subscribe to this comment feed via RSS

Follow

Get every new post delivered to your Inbox.