Developing an Enterprise Sencha Application Strategy

If your business has invested in traditional application development platforms such as Adobe Flex or Adobe AIR; maybe it is time to look into Sencha. Sencha is a powerful HTML5 software development kit for web and mobile that allows for cross-platform development practices that cut down on code base and increase delivery channels.

Here is the challenge: Every business is unique and requires unique solutions for the web, mobile, and internally. Developing Sencha applications can be done in many ways with evolving development frameworks. However, there are several core issues that need to be dealt with when working on large-scale HTML5 applications, such as how to handle:

• Application Context
• Module Management
• Application Navigation
• Style Management
• Resource Management
• Data Transport
• Error Management
• State Management

At AppFoundation, we have been developing Rich Internet Applications since 2005 and that experience has shown many issues with current options for development frameworks. From organizations who don’t allow open-source solutions to mostly issues with application consistency and size; AppFoundation has created its own development framework to address the core issues above.

As you might have experienced, you can see that Sencha can be built out-of-the-box to obtain data from external data sources. This works fine with small Sencha applications that only have one or few view states. However, when it comes to building enterprise scale applications in Sencha the basics just won’t cut it. To avoid a ‘big ball of yarn’ (many point-to-point connections between Sencha components) infrastructure for your application we need to define a standard and consistent architecture for building our Sencha applications.

When determining what architecture to implement your Sencha user interface with; you need to consider what fits your organization and developer’s skills best as each solution is different and generally based on different design patterns, or slight modifications of those patterns. However, from our experience, you need to address various problems when developing enterprise applications such as:

• Applications that are difficult to maintain due to the over-use of design patterns.
• Difficulty to track application flows when data is not persisted and passed through models exclusively.
• Inability to manage application styles. Application styles can change based on different entities viewing the application; such as an e-commerce site that has business partner sign-in. Each business partner could need a different style to match their branding.
• The ability to properly chunk the application into modular components.
• Strong user interaction and a clear separation of concerns when setting the application architecture flows and views.

The purpose of a development framework or architecture is to create a consistent development process that is repeatable and non-evasive. AppFoundation is building SenchaConnect to streamline development of HTML5 applications so that you can start developing features instead of worrying about application plumbing.

The SenchaConnect platform programming model is made up of the following core components that should be core to any enterprise Sencha application:

• Application Framework: The Application Framework is the main wrapping component for the Application that contains application context and is responsible for the setup/initialization of the application.

• View Components/Modules: Modules are used to chunk the application into smaller segments. These modules are the features and components of the application where you start to code the different views and flows which are available for re-use.

• Application State: The Application State is responsible for holding important application attributes in a memory cache that is accessible from any part of the application that gets an instance of this model.

• Data Model/Sub-models: The model provides a layer to access and change application data through creating proxies.

• Proxy: Proxies represent a layer of abstraction that exposes business functions to the application. They are a means to engage with remote services such as RESTful JSON services to retrieve data.

• Style Manager: The Style Manager allows you to dynamically load styles into the application and is initialized at run-time.

• State Engine: This utility allows the definition of application states and the valid transition to which other states are available.

• Resource Manager: This utility is used to handle internationalization (i18n) and localization (l10n) details. You specify a default resource bundle by component or by application that allows you to define string names for button labels, text areas, etc.

• Error Manager: Error management allows you to capture and store errors from anywhere in the application as well as use its internal pop-ups to display error messages.

AppFoundation is committed to delivering high-end web and mobile applications with Sencha. If you are looking to convert your Flex applications or create a new custom application, contact AppFoundation; a leading provider of Sencha solutions.