Adobe sketches the future of the Web

The Web will soon become a foundation for truly rich applications and immersive experiences. Adobe ponders the technologies that will likely play a crucial role

This week on New Tech Forum, we have a discussion about the past, present, and future of the Web and Web development from Divya Manian and Thibault Imbert, Web product manager and Web Group Product Manager, respectively, at Adobe.

As Web standards move forward, we're seeing a substantial change in the possibilities of Web development and rich Web applications. New Web development frameworks and developer tool sets are appearing and growing more popular by the day, alongside advances in browser rendering engines. Together, this is causing the Web development model to grow by leaps and bounds.

HTML5 is clearly at the forefront of this movement. Divya and Thibault lay out how HTML5 is changing the game, and what Adobe is doing to help foster the future vision of the World Wide Web. -- Paul Venezia

The evolving, expressive Web

The beauty of the Web lies in its reach. All someone needs to do is write a few lines of HTML and post it online, and people all over the world can see the results. This miraculous occurrence is made possible by the widespread adoption of a relatively simple set of standards.

The features of the Web are not created in secrecy. They are specified through discussions on public mailing lists and written down in public specifications. This enables everyone who is interested to contribute to the shaping, testing, and implementation of these features. Contributors can learn from each other -- and, most important, learn from past mistakes -- to continuously move toward a better Web.

This openness is especially important as we move into the next phase of the Web -- where it will become an ever more powerful, collaborative, creative surface. Features that emerged years or even decades ago will evolve and be pressed into service to build the future.

Pushing JavaScript to the edge

Let's take an example of an element of the "classic" Web evolving to fit today's workflow: JavaScript.

As was shared at Google IO this year, in the past decade, JavaScript has seen a hundred-fold performance improvement, and recent research projects like Mozilla's asm.js have demonstrated that we could go even further beyond that. Asm.js defines a subset of JavaScript that can be generated by compilers and highly optimized by JavaScript VMs, by mainly getting rid of garbage collection and dynamic types.

The idea is of using JavaScript as the "assembly language of the Web" is not new. Past projects such as GWT from Google, or more recently TypeScript from Microsoft, have used a similar approach, enabling new developers to target the Web platform.

By adding access to concurrency in the stack, JavaScript developers can leverage features such as Web Workers in almost all browsers today and move intensive computations off the UI thread, preventing UI locking. Even better, Web Workers can be utilized to parallelize a task, so multiple threads can be working at the same time to execute code more rapidly.

That said, enabling efficient parallelization still has limitations today. Yet exciting conversations are happening around areas like shared memory and more efficient message-passing models. When those problems are solved, concurrency on the Web could make the Web platform a far more powerful stack.

Recently, Intel has been researching a path to parallelism in JavaScript through a project called RiverTrail, which introduces a parallel programming model and API for JavaScript (see Figure 1). The beauty of RiverTrail is to allow Web developers to leverage multiple cores for general computations within the JavaScript environment by leveraging OpenCL behind the scenes, bringing parallel programming to the masses. Currently, the code can only be parallelized when using Firefox using a special extension, but the same idea may work out of the box in the future in other browsers.

Figure 1. Behind the scenes of River Trail
Figure 1. Behind the scenes of RiverTrail

Here's a simple example of how we would increment the value of each element in a simple array, using the ParallelArray API:

We create our array:

var first = new ParallelArray(1,2,3,4);

We increment each element:

var inc_pa = first.map(function f(val) {return val+1;});

As you can see, the complexity of an OpenCL kernel is completely abstracted and a higher-level API is exposed, providing power and safety. To see RiverTrail in action, have a look at the particle simulation shown at IDF 2011, and the liquid image resizing demo first shown at Research @ Intel day 2011.

When large tech companies pool resources (funding, engineering talent, and so forth), great things can happen. For example, at Adobe, we've been using TypeScript to develop projects like the Digital Publishing Viewer on Windows 8. Everything was developed in TypeScript, except the PDF libraries that we already developed (C++) and a few compression libraries we wanted to reuse. We initially did this as a challenge and discovered that the optional static typing and sourcemap support enabled increased productivity.

Scripting is one piece of the equation. For many years, rendering has remained a big bottleneck for Web developers trying to produce expressive content. Until recently, Flash was the go-to solution for expressive content, providing a fast and consistent renderer. Today, the broad support for the HTML5 canvas element with the combination of CSS for DOM-based animation is giving developers a consistent and powerful graphical surface for their expressive content.

Many things that required scripting in the past can now be done natively by the browser using CSS. In the following example, we animate an element from the right side of the screen to the left, all scripted in JavaScript:

(function() {

  var requestAnimationFrame = window.requestAnimationFrame ||

window.mozRequestAnimationFrame ||

                              window.WebkitRequestAnimationFrame ||

window.msRequestAnimationFrame;

  window.requestAnimationFrame = requestAnimationFrame;

})();

var start = null;

var dx = 0;

var destination = 100;

var e = document.getElementById("title");

function step(timestamp) {

  dx -= (dx - destination)*.01;

  e.style['margin-left'] = dx + '%';

  if (Math.abs ( dx - destination ) > 1) {

    requestAnimationFrame(step);

  }

}

requestAnimationFrame(step);

This code requires additional CPU cycles and could be done natively by the browsers today, relying only on CSS. We can then replace the expensive previous code with the following CSS3 code:

#title {

  -Webkit-animation: slidein 3s;

}

@-Webkit-keyframes slidein {

  from {

    margin-left: 0%;

  }

  to {

    margin-left: 100%;

  }

}

Of course, a motion library could be utilized to perform the same animation. With JQuery, we would write something like:

$('.content').animate({marginLeft: 100}, 1000);​​​​​

But this would still require lots of JavaScript code to be executed behind the scenes. With the previous code, only a few lines of CSS are involved, which is more optimized and simpler to author.

Some people would argue that this kind of animation remains limited for immersive experiences, but Microsoft recently enabled WebGL on Internet Explorer 11 on Windows 8.1, which is a big milestone. WebGL will provide to Web developers a fully programmable pipeline, like you would have with OpenGL ES 2.0, but from JavaScript.

This opens amazing capabilities to Web developers wanting to develop immersive 2D and 3D content on the Web. Some exciting new frameworks have emerged for 2D game development like Mat Groves' Pixi.js, which leverages WebGL but elegantly falls back to canvas when necessary and exposes a higher-level API.

Beyond HTML5: The future of the Web as a foundation for applications

What's next for the Web? We're moving toward a future where traditional desktop tools will also run on Web technologies. The Web has morphed from a set of links into an increasingly malleable surface for creators.

A much neglected but most successful feature of HTML5 has been the implementation of the HTML parser in every browser laying the foundation for consistent rendering of all Web pages across all HTML5-ready browsers. This has allowed us to focus on more powerful features that would enable creating great experiences for the Web.

This is why Adobe has been contributing features that would bring these experiences to end-users through standardizing them via W3C and contributing code to WebKit, Blink, and Gecko -- the rendering engines that power Apple's Safari, Google's Chrome, and Mozilla's Firefox. Some of the features we are working on are Regions (for next-generation text layout), Blend Modes (for graphic manipulation via code), and Shapes (for non­rectangle text wrapping).

It's also why we work on projects such as responsive CSS Web designer Reflow and open source code editor Brackets. It'll be tools like this that will drive the Web forward, as they are built from the ground up using HTML, CSS, JavaScript, and other Web technologies using a very thin native wrapper (Chromium Embedded Framework) to make them available as desktop applications.

Apple's iWork for iCloud and Google Docs have already been helping push the envelope of what's possible on the Web. Developers and designers such as Garann Means, TJ Holowaychuk, Guillermo Rauch, Chris Coyier, Lea Verou, and Hakim El Hattab are all helping test the edges of new technology and informing Web features and enlightening the larger creative community on what is possible on the Web.

Most of these features are new and fairly untested across browsers. But Browser Developer tools are getting better at making it easier to write and debug code for these new features. Web Platform Docs and Mozilla Developer Network provide exhaustive documentation to help creatives understand how each of them work and how to use them.

The future of the Web holds great promise, but we are at the cusp of its potential, and it is easier to see the challenges we face. We want to create a powerful Web platform where creatives see possibilities instead of constraints that limit their expression.

New Tech Forum provides a means to explore and discuss emerging enterprise technology in unprecedented depth and breadth. The selection is subjective, based on our pick of the technologies we believe to be important and of greatest interest to InfoWorld readers. InfoWorld does not accept marketing collateral for publication and reserves the right to edit all contributed content. Send all enquiries to newtechforum@infoworld.com.

This article, "Adobe sketches the future of the Web," was originally published at InfoWorld.com. For the latest business technology news, follow InfoWorld.com on Twitter.

From CIO: 8 Free Online Courses to Grow Your Tech Skills
Join the discussion
Be the first to comment on this article. Our Commenting Policies