User Experience Innovation – Selecting the Best Te...

Former Member · ‎10-20-2013

What is it all about?

Recently we were requested to develop a very unusual consumption experience for exploring Fiori business content, enriched with context aware services (you can find here more information about it). While this is still in development, we thought some of you would be interested in learning about some of our considerations in selecting the technology for the UI.

Nir and I are developers in the SAP Portal group, in SAP Labs Israel, and we just love to bring Web UI to the extreme.

So what was on our plate? Complex shapes, dynamic graphics, multiple layers, complex and simultaneous animations, and, needless to say, mobile-friendly and absolutely smooth performance.

We also wanted: minimal learning curve, usage of a technology which is common in the industry, accessibility & text extraction, ability to embed external HTML content.

The good part: we were free to support a limited product-availability matrix, with only the most up-to-date Webkit browsers on PC and the retina iPad.

After a long investigation and numerous POC’s, we decided to go with CSS Transformations over HTML DOM elements with a pinch of Canvas. We were surprised to find out that the technology we had known for so long would fit us best, and while on this quest we learned to improve our skills using it.

Here are the technologies we investigated in order to find which best suit our requirements:

HTML5 Canvas
SVG
CSS Transform

First Option: HTML5 Canvas

According to the HTML5 specification, the CANVAS element is:

“a resolution-dependent bitmap canvas, which can be used for rendering graphs, game graphics, art, or other visual images on the fly.”

The HTML5 Canvas element is an HTML tag similar to the <div>, <a>, or <table> tag, with the exception that its contents are rendered with JavaScript.

In order to leverage the HTML5 Canvas, we need to place the <canvas> tag somewhere inside the HTML document, access the <canvas> tag with JavaScript, create a context, and then utilize the HTML5 Canvas API to draw visualizations.

The canvas element is the actual DOM node that is embedded in the HTML page.

The canvas context is an object with properties and methods that you can use to render graphics inside the canvas element. The context can be 2D or webgl (3D).

For example, let’s draw a rectangle with HTML5 Canvas:

<body>

     <canvas id="myCanvas" width="578" height="200"></canvas>

     <script>

          var canvas = document.getElementById('myCanvas');

          var context = canvas.getContext('2d');

         

          context.beginPath();

          context.rect(188, 50, 200, 100);

          context.fillStyle = 'yellow';

          context.fill();

          context.lineWidth = 7;

          context.strokeStyle = 'black';

          context.stroke();

     </script>

</body>

The result:

HTML5 Canvas Advantages:

High-performance 2D surface for drawing anything you want
You can save the resulting image as a .png or .jpg
Best-suited for generating raster graphics (for example in games, fractals, etc.), editing of images, and operations requiring pixel-level manipulation

HTML5 Canvas Disadvantages:

Poor text rendering capabilities. Might not be the best choice for cases where accessibility is crucial
Events are binding to <canvas> tag and not on specific Web element, so in order to handle events for a specific Web element, you may need to do a lot of hard work or to rely on a Javascript library like KineticJS
Poor debug tools

Second Option: SVG

SVG literally means Scalable Vector Graphics. It is a language for describing two-dimensional graphics in XML.

SVG allows for three types of graphic objects: vector graphic shapes (e.g., paths consisting of straight lines and curves), images, and text.

Graphical objects can be grouped, styled, transformed and composited into previously rendered objects. SVG also supports embedded or external CSS rules.

Example of SVG shapes:

<line x1="0" y1="0" x2="200" y2="200" stroke-width="1" stroke="#000"/>

<rect x="250" y="250" width="200" height="200" fill="rgb(234,234,234)"

     stroke-width="1" stroke="rgb(0,0,0)"/>

SVG Advantages:

Vector graphics: people are now using high-resolution iPads and monitors
Accessibility: Humans and machines can understand SVG code even if they can’t render it
DOM Handling: SVGs have a DOM so it’s easy to attach event handlers and manipulate elements like you would for other HTML elements. To move an item, you simply change its coordinates

SVG Disadvantages:

Slow rendering when document complexity increases; frequent use of the DOM impacts performance
Steep learning curve
Longer application loading, especially with detailed graphics

Third Option: CSS Transform

Modern browsers (Safari, Chrome, Opera, Firefox, IE9+) provide Web developers with CSS animations capabilities.

The effect of CSS Transform is to modify the appearance of an element in the browser by translation, rotation, scaling or other means.

While CSS Transformation in itself is a powerful tool, the ability to animate the transformations using webkit-transition makes it even better, so you can define animation properties like duration, delay, easing etc.

For example:

.element {

     -webkit-transition-property:width;

     -webkit-transition-duration:1s;

     -webkit-transition-timing-function:linear;

     -webkit-transition-delay:2s;

}

In addition, you can combine multiple transform animations to a single element by listing them one after the other, so you can create complex animations easily.

You can predefine animation for an element and control the timing by @-webkit-keyframes. A keyframe defines the style that is applied for that moment within the animation. The animation engine smoothly interpolate styles between the keyframes.

Here is an example of a keyframe animation that changes the element size:

@-webkit-keyframes item-animation {

     0% {

           -webkit-transform: scale(0.2, 0.2);

       }

     45% {

          -webkit-transform: scale(1.1, 1.1);

     }

     100% {

          -webkit-transform: scale(1, 1);

     }

}

In the same CSS file you can attach the keyframe animation to an element:

.element {

     -webkit-animation: item-animation 0.5s;

     -webkit-animation-fill-mode: both;

}

Furthermore, from a performance perspective, it is better to use CSS Transform in comparison to changing an object position and size by plain CSS properties (top, left, width, height).

Changing CSS properties by Javascript causes the browser to paint each frame, which result in a flickering transition. The CSS Transform version gets the screen element elevated onto its own layer on the GPU (called a RenderLayer). Now that it sits on its own layer, any 2D transform, 3D transform, or opacity changes, can happen purely on the GPU, which will stay extremely fast and still get us quick frame rates.

CSS Transform Advantages:

Performance – uses GPU and not CPU
CSS is a common technology, which doesn’t require much learning, and is easy to use – just a few more CSS properties and values
Animations are made on the HTML DOM objects

CSS Transform Disadvantages:

Bitmap graphics only - we have to take into consideration different screen resolutions
Dynamic animations are made using Javascript and are slower (for example, items which should be moved to a calculated location)
Creation of complex shapes are limited - we can draw circles, but more complex shapes might require images

Which one to pick?

It is quite hard to declare one technology as the optimal one, since the decision, like always, depends on your needs.

After investigating each technology and doing some POCs, we found out which of our requirements are answered by each UI technology:

Requirement	HTML5 Canvas	SVG	CSS Transform
Draw complex shapes	V	V	Sufficient (for required implementation)
Dynamic graphics	V	V	V
Complex animations	V	V	V
Good performance	V	Partially (CPU costly)	V
Mobile-friendly	V	V	V
Minimal learning curve	X	X	V
Common in industry	Partially	Partially	V
Accessibility & text extraction	X	V	V
Embed external HTML content	X	Partially (foreignObject)	V

The ability to embed HTML content is an important requirement since we must make sure our solution will support integration with other UI libraries like UI5.

In addition to technical pros and cons for each UI technology, we also took into consideration our team’s wide experience in using HTML and CSS, which could help us provide a good solution in minimal time and learning curve.

In conclusion, our main choice is CSS Transform for animations, complex Web elements with embedded HTML, and simple event-handling for each element.

Additionally, we chose to use HTML5 Canvas for animations of non-Web elements like background scenery elements.

Hope you enjoyed this post,

Nir and Yotam.

Sources:

http://www.paulirish.com/2012/why-moving-elements-with-translate-is-better-than-posabs-topleft/

http://dev.opera.com/articles/view/svg-or-canvas-choosing-between-the-two/

http://msdn.microsoft.com/en-us/hh534406.aspx

http://creativejs.com/resources/requestanimationframe/

http://www.paulirish.com/2011/requestanimationframe-for-smart-animating/

http://www.w3schools.com/cssref/css3_pr_transform.asp

https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_CSS_transforms

https://developer.mozilla.org/en-US/docs/Web/CSS/transform