The Future of Web Interface Building

I’ve talked an awful lot about the future on my blog lately. The future internet, the future of social networking, online advertising, etc. But one thing I’m really interested in is how the construction of web interfaces looks.

Originally, building a website pretty required notepad, or something to that effect. I’m talking about those old-school table-based layouts with <font> tags littering everything. You know, when javascript was used for image rollovers and nothing else.

Later on, things like Frontpage and Dreamweaver became the preferred way to design pages. Building the layout of a page and tables and forms was really a practice of click, drag, and drop. But as web standards progressed and the use of server-side languages proliferated, using Frontpage and Dreamweaver became impractical.

Today, we’re back to notepad. Our text-editing tools have gotten better though, and now we’ve got Sublime Text, Textmate, emacs and vim plugins to help us out. But the overall practice of building UIs from the ground up is even more tedious than it originally was.

Enter Twitter Bootstrap. Enter pretty much every other CSS framework too. They’ve helped us drastically cut down on boilerplate code by giving web developers a set of base layouts and UI elements to work with. Building a UI and getting down to code is actually easy again!

Recently, I read about Jetstrap, a drag and drop online-only UI builder for Bootstrap. Yes. This is the direction we should be headed in —

Almost.

Here’s the problem: The internet isn’t just for documents. HTTP was built by Tim Berners-Lee with the idea of transferring academic papers in mind — you know, in hypertext. But 20 years of web development hackery has bolted new standards, features, and other things on top of it. Why? Because the web is being used to build applications in addition to documents.

I do think the future of building web interfaces is through using drag and drop interfaces like Jetstrap. I don’t think the core of it will involve the manipulation and styling of DOM elements, like Jetstrap does. I think the future of rich, multi-channel web interfaces is with WebGL.

WebGL is a javascript API for hardware-accelerated graphics. That means using WebGL and a javascript library like three.js gives you the power to render graphics using the actual hardware, instead of relying on the browser. Right now it’s primarily used for (mostly experimental) in-browser games. I think Google Maps uses it too, or provides an option.

On the desktop, we’ve had this forever. And as the gap between the desktop and web continues to close, it’s time we’ve started to explore how exactly a classic graphics library plays into web UI development. I still think HTML/XHTML will be the basis of describing and interface. I just don’t think CSS is going to be as significant as it is today for webapps. Component styling will be left up to the WebGL-based UI frameworks of the future.

I know this is radical, and probably not to the taste of the web developer population. But does defining our web application UIs really in the current mode of a styled <ul>, <header>, <footer>, and <div class=”clearfix”></div> make sense? I’m not saying those are great examples of why we’re doing something wrong. But I think they are definitely hints that a change is in order.

I see a day when UI frameworks for the web use WebGL for all UI generation. The DOM stays, of course, and javascript is workhorse that brings it all together. And because of that, we can build rich, cross-browser, cross-device interfaces that rely less on web standards and more on technology core to every device. We can build them with UI-generation tools, and leverage flexibility we don’t have now.

That’s enough for now. The more I write, the more I think it may be too outlandish. I guess another barrier exists: Will anyone ever create an awesome UI framework that uses WebGL?

What do you think?

This entry was posted in Future, Soap Box, Tools. Bookmark the permalink. Post a comment or leave a trackback: Trackback URL.
  • http://twitter.com/davidrhoden David Rhoden

    I’d like to know more about what you’re talking about in terms of a library.
    I have this to day about UI frameworks like Twitter Bootstrap: they only work if *everybody* on the project knows the framework very well, and I just don’t think that’s a realistic goal. I mean, the designers, back-end devs, front-end devs: everybody needs to be committed to the framework, and know all the assumptions that go into it. Not saying it can’t happen, but I’ve never seen it happen.

  • chrisiufer

    Very interesting insight! I think you just connected the dots as to eventual outcome between the balance of “native” and “webapp” development. In the near future the two will become one in the same. HTML and CSS may be replaced by custom UI frameworks, but the underlying language to make that possible would still be javascript, which should be a relief for anyone in web development as a profession.