Sencha Inc. | HTML5 Apps

Blog

Samsung bada: The HTML5 Developer Scorecard

July 20, 2011 | Aditya Bansod

Samsung bada: The HTML5 Developer Scorecard

A few week’s ago, we brought you our review of the browser on the HP TouchPad. In today’s review we bring you a bit of a change, looking at the Samsung bada platform. If you’re based in North America, you may not be familiar with the Samsung bada operating system. The bada OS is a hybrid featurephone/smartphone OS that ships mostly in Europe (we hear it’s coming to North America soon). We were interested in it because we heard good things about its WebKit browser from our community of Sencha Touch developers.

While bada has a featurephone heritage, the browser is better than most smartphone devices we’ve seen.”

We managed to get our hands on a Samsung GT-S8530, running bada version 1.2 and put it though our browser tests to see how well bada’s WebKit implementation stands up as an HTML5 app platform. On paper and through many of our synthetic tests, bada had a lot of deficiencies and was often a mixed bag of results. On the other hand, in terms of real world performance and when actually used for HTML5 content the bada phone performed impressively well. We were pleasantly surprised how easily the bada browser was able to tackle CSS3 transformations and many other HTML5 features. While bada has a featurephone heritage, the browser is better than most smartphone devices we’ve seen.

Our First Look “Methodology”

Our HTML5 scorecard consists of a series of tests aimed to help mobile web developers understand new devices and new form factors as they come to market. We test in a number of areas, namely JavaScript performance, HTML5/CSS3 features, rendering performance and rendering accuracy. To get there we use a variety of tests, including Modernizr, Acid3, SunSpider, and our own Sencha Animator demos and our Sencha Touch Kitchen Sink.

bada Acid3 Scores

Acid3 and Modernizr

We use the Acid3 tests to get a sense of the completeness of a browser’s rendering and feature set. While the Acid3 tests are a bit dated as this point, they still provide a fairly good indication of the browser and developer experience on a particular device. Bada scored a 98/100 on the Acid3 tests. The failures came in bucket 5, and we believe those are from the lack of SVG support on the device. Also if you look closely at the the Acid3 image, you’ll notice that there are extra dark black borders around some of the boxes. While browsing and testing, however, we didn’t see these causing visible issues.

We then turned to Modernizr, one of our favorite tools to look under the hood of a browser and let us know what HTML5 features it supports. We again tested using the test suite. The Modernizr test failed after 236 tests were attempted (out of a total of 276). Failure occurred in the last set of tests — where the Modernizr test run results are compared against caniuse. It’s unclear if this is a test case issue, or a browser issue. Overall, therefore, the bada browser has fairly good support for HTML5 features, but there were a few major gaps reported, specifically CSS 3D transforms, audio and video, WebSockets and inline SVG. Also missing was font-face support. The browser renders all fonts in the browser default and ignores font-face. We noted that the browser reports that it supports SVG, but as Acid3 showed earlier and as we found in further ad hoc testing, we were not able to get it to work. On the other hand, WebSQL was present, touch events were present, and standard CSS transforms, animations, and reflections were also supported.

Performance Testing

As with all the other devices we’ve tested, the browser on the bada phone is powered by the WebKit rendering engine. On the bada platform, Samsung has built their own implementation of WebKit, called Dolfin. The phone reports that it’s using WebKit version 533.1, which is a slightly dated build of WebKit. Under the hood, we’ve heard that bada devices contain Samsung’s Hummingbird ARM processor clocked at 1GHz: the same processor that’s been used on multiple other mobile devices. While this is a modern mobile CPU, it appears that like the browser engine and specifically the JavaScript engine has not yet been fully optimized nor is there a JIT. Given how well the browser renders many websites and web apps, we were a bit surprised when we ran SunSpider to see how abysmal the results were. In our testing the bada phone reported 17x slower JavaScript performance than the latest generation of tablets (such as the Xoom, the iPad or the Playbook). It’s a bit of an apples to oranges comparison, but we expected given how modern the CPU is, and how well many other web operations occurred that it would be much closer.

bada Sunspider

Given how poor the SunSpider tests were, we decided against running v8 benchmarks. These tests are synthetic tests that push the engine to its limit. So as we usually do, we turned our attention to some more real world tests, looking at CSS3 performance using our own Sencha Animator demos as well as a few other tests.

Given the poor benchmark performance, bada’s CSS3 support is astounding. Compared to almost any other device, bada’s browser was able to render the most complex CSS3 animations without any issues. Our guess here is the Samsung team spent a lot of time engineering and hardware accelerating the graphics performance of the browser at the expense of the JavaScript performance. We tested six of our standard demos and our latest Rocking the Boat of Flash tutorial demo that were made with Sencha Animator and they worked beautifully. All the frames were rendered, and the frames were rendered accurately and in full fidelity. We noted earlier that 3D transformations aren’t supported so 3D effects ended up being flattened into 2D. Only iOS does CSS3 animations better, and bada handily beats every other tablet and smartphone we’ve tested. We also ran through our CSS3 vs Flash ads page. The Flash versions of the ads didn’t render so it seems that there’s no Flash support in the browser. On the other hand the CSS3 ads worked perfectly well. The bada browser nails CSS3.

bada CSS3 Animation

We also tested a few other real world HTML5 apps for performance and correctness. First off, we tried a github network graph. Rendering performance is fine, and the graph renders quickly and accurately, but it is at times a bit grainy. Zooming in on the network graph had much of the text jagged and the browser didn’t redraw to a higher resolution when the pinch-to-zoom was finished. We also tried Canvas Cycle and it did not load. Our guess is that given the poor JavaScript performance many Canvas based apps or games won’t work on bada devices because the browser continually misses its drawing intervals due to slow JavaScript. For simple static drawing, Canvas support is usable, but not for much more.

As this point we typically would have done our audio and video test but the bada browser doesn’t support either, so we skipped this test altogether. We also attempted a few SVG tests, both inline and out in a separate file and were not able to get them to work in the browser. When we attempted click on a link for a .svg file, the browser downloaded the file to the camera roll, where you could then go and view the SVG file. Not very useful.

Sencha Touch Kitchen Sink

Given the mixed bag with beautiful CSS3 animation support and iffy JavaScript performance, we weren’t quite sure what to expect with the the Sencha Touch Kitchen Sink. After testing for a while, we were quite impressed. There were definitely a few rendering glitches, and the aggressive behavior of the address bar often occludes the UI’s back button. On the other hand, animations were snappy, lists scrolled quickly and the browser had no problems handling the most complex layouts. Sencha Touch relies on high performance CSS3 and as our CSS3 testing earlier showed, bada performs well in the pure CSS3 tests as well as in our Kitchen Sink.

Samsung bada: Suggestions for the HTML5 App Developer

Samsung’s bada platform comes from a background as a featurephone, and while many of the aspects of the device reminded us of the old world of featurephones, the browser is squarely in the realm of a modern smartphone. The browser has many HTML5 features, and while a few are missing or are implemented in a somewhat strange way, as a HTML5 app platform it’s quite reliable.

For a HTML5 app developer, the abysmal JavaScript performance is something to be wary of. If you’re looking to do a lot of animations in JavaScript, it would be a good idea to consider using CSS3 animations and transitions given how well they work in the bada browser. Some of the minor rendering artifacts that we saw in Acid3 and in our Kitchen Sink seemed like they might have related to masks and border-radius, but they were not severe enough to prevent those features from being used.

We’re very excited about the promise of bada is a device and app platform for HTML5 developers. In many ways Samsung’s bada performs far better than its more expensive Android siblings in the Samsung lineup, so we’re very happy to see solid WebKit implementations coming from them. We were surprised with how well many of advanced browser features worked on their device, and we’re excited to see what the next generation of bada devices will offer with bada 2.

There are 5 responses. Add yours.

Markus Wichmann

3 years ago

Thanks Aditya for this nice review, this saves us all the time of testing what you’ve now tested!

José

3 years ago

Any plans to test Fitefox mobile?

webiksir

3 years ago

s525?

iPhone

3 years ago

I would like to know if web cell phones like the 3g or droid are going to be popular and if so how popular specifically.

linkkei

3 years ago

The html5 reached mobiles to give performace in navigation.
I have a Samsung that came html5 enabled, I use Opera Mobile and is the most sensational.

Comments are Gravatar enabled. Your email address will not be shown.

Commenting is not available in this channel entry.