Sencha Inc. | HTML5 Apps


Sencha Touch Spotlight: brainbits

May 13, 2011 | Jay Robinson

brainbits is a web development agency based in Cologne, Germany. We built phlexible.core and the CMS extension phlexible.CMS using Ext JS. We develop business applications for customers including Bayer Healthcare, German Telekom, BMW, and the Bundesinnungskrankenkasse, known as BIG, Germany’s first legal direct health insurance group.

Choosing Sencha Touch was definitely the right decision.”

In contrast to traditional health insurance companies, “direct” insurance companies such as BIG do not have local agents. Instead, BIG manages all of their members’ administrative needs through their website or call center — responding to about 400,000 members.

In order to continue to provide the best service, BIG wanted to add a mobile application that would allow members to handle the most common administrative processes, such as completing a member proposal, ordering forms, managing a move, and searching for a doctor or pharmacy, using their smartphones or tablets.

Sencha Touch allows the BIG App dashboard to look the same on iOS and Android. Shown here on an Apple iPhone. Sencha Touch allows the BIG App dashboard to look the same on iOS and Android. Shown here on a Google Android.
The BIG App dashboard – looks absolutely identical on both iOS and Android.

Why We Chose Sencha Touch

We started our development project by doing extensive research on the available GUI frameworks for touchscreen devices, and we compared and benchmarked each one. Even though Sencha Touch was in early beta, our developers at brainbits were immediately convinced it was the right choice.

To build our mobile application, we used our existing content management system phlexible.cms (which is based on Ext JS and Zend framework) as the core element of our mobile application architecture and functionality. We wanted to unify the administration, speed up the development process, and streamline the maintenance of the whole system by using the same business processes and back-end functions for the mobile application as we had for the website.

brainbits Sencha Touch custom application showing form fields. brainbits Sencha Touch custom application showing form fields with errors. brainbits Sencha Touch custom application showing form fields with a pop-up message.
Automatically generated forms including info popups and error messages.

brainbits developed an architecture to manage navigation structures, content and – most importantly – business processes provided by the application via the CMS. We developed an “App Generator” component and added it to the CMS. This generator takes Zend_Config_Ini-files used for form generation within the website and converts them to for validation and Ext.form.FormPanels. This design offers a number of compelling advantages:

  1. Auto-code-generation creates bug-free code
  2. New business processes can be implemented very fast
  3. All business processes are in sync between the website and the mobile app
  4. Even developers with no Sencha Touch experience can add new app processes by simply adopting existing website processes

Furthermore, the application retrieves content navigation structures and content pages directly from the CMS and displays them by using Ext.NestedLists and a WebviewPanel.

Finally, we also used a native shell to generate an application that could be distributed via the Apple App Store as well as the Android Market.

An Ext JS app with the accompanying Sencha Touch web app.
Phlexible.cms acts as content repository for the BIG app – and the output is displayed as Ext.NestedLists.

Business Value of Using Sencha Touch

First, all of our existing Ext JS knowledge helped us to get started quickly. Secondly, our customer puts great value on an individual look-and-feel. Sencha Touch provides many creative options by using CSS3 and doesn’t depend on native UI components. In contrast to other frameworks, the x-type mechanism helps developers prevent redundant code and concurrently creates reusable components. And last but not least, Sencha provides excellent commercial support. For example, the Sencha support team was very helpful in helping us solve a “show stopper” problem in one day.

Our Advice to New Developers

The excellent Sencha Touch documentation and the friendly support team helped us to resolve questions quickly. Also, the Sencha Touch Kitchen Sink demo was the most effective problem solver for us. It gave us lots of ideas, so we strongly recommend you take a look at it.

Final Thoughts

We had to learn a lot especially about the peculiarities of touch screen devices and the principles of touch user interfaces, but Sencha Touch helped us to enter a completely new business more or less painlessly by using our familiar web technologies. Also, Sencha Touch was easy to integrate into our existing tool setup of PhoneGap, the CMS and the app generator which provided us a powerful and effective development and operational environment. For us, choosing Sencha Touch was definitely the right decision.

There is 1 response. Add yours.

Thorsten Suckow-Homberg

4 years ago

I was introduced to their backend code last year and also had a look at the way the ui was built. The branding “phlexible” pretty much gives a hint at what the CMS is capable of smile Stephan and his team are doing an incredible good job here!

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

Commenting is not available in this channel entry.