Developing an Enterprise HTML5 Application Strategy

If your business has invested in Sencha Ext JS, Sencha Touch, Bootstrap, AngularJS or other JavaScriping technologies for web and mobile, chances are you’ve also invested in the training and you have IT professionals that are familiar with the basics.

Here is the challenge: Every business is unique and requires unique solutions for web, mobile and internal applications. Developing enterprise applications can be done in many ways with many different 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:

• Browser Compatibility
• Best Practices Architecture
• Continuous Integration
• Application Navigation
• Style Management
• Resource Management
• Data Transport
• Error Management
• State Management

At AppFoundation, we have been developing large-scale enterprise applications since 2005 and that experience has allowed us to solve many issues with enterprise application development projects. 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 listed above.

There are many examples that demonstrate how javascript technologies can be used out-of-the-box to obtain data from external data sources. This works fine with small javascript based applications that only have one or few view states. However, when it comes to building enterprise scalable applications the basics just won’t cut it. To avoid a ‘big ball of yarn’ (many point-to-point connections between components) infrastructure for your application we need to define a standard and consistent architecture for building mobile or web applications.

When determining what architecture to implement your 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, not following a solid MVC (Model-View-Controller) design pattern can create various problems when developing enterprise applications such as:

• Applications that are difficult to maintain due hard to follow event flows.
• Difficulty to track application flows when data is not persisted and passed through events 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 and utilities.
• 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. AppContinuum has been built to streamline development of HTML5 applications so that you can start developing features instead of worrying about application plumbing.

The AppContinuum platform programming model is made up of the following core components that should exist in any enterprise Ext JS application and development shop:

• Infrastructure Identification – AppContinuum walks through the current development infrastructure in order to determine which roles/organizations need to work with particular versions of software undergoing development.
• HTML5-Based Technology Stack – The particular technology stack is identified and the initial codebase for the entire system is generated, and then checked into the specified software configuration management system.
• Infrastructure Automation – The desired infrastructure is installed onto existing databases and servers.
• Continuous Integration – A CI server can optionally be configured for build, test, and deployment automation for the new software system.
• Established Architecture – The initial system follows architectural best practices and design patterns, and provides detailed instructions for making changes and additions to that system.
• View Components: View Components are used to modularize the application into functional flows. These modules are the features and components of the application where you start to code the different views and flows.
• 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 context.
• 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 Spring RESTful services to retrieve data. They contain the data result and fault handlers that are implemented through the individual service calls.
• Navigation: This is a business object that manages view state for components via a main navigation controller.
• Style Manager: The Style Manager allows you to dynamically load styles into the application and is initialized at run-time.
• 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 inputs, 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.

A Real-World Example:  Social Business Tool

We needed a way to better manage a variety of information such as clients, projects, and communication between the two. AppFoundation’s social business solution applies the full potential of social models like communities, collaboration, and user generated content in a secure, managed environment.

The application is built using javascript technology with AppContinuum, and utilizes a series of Spring services for persisting its data. The combination of Spring and Ext JS offers a powerful deployment model with due to the ease of configuration required. The simple, yet robust, deployment is possible because the application runs in the browser.

The Connect application enables valid users to view projects they are tied to, messages for those projects, media, and client contact information if that are granted rights to those views.

The list below shows what the application feature set is composed of:

• Social Media connection suite via AppContinuum
• Account and user creation
• Ability to assign members viewing privileges to selected accounts
• Account level messages, connections, and media
• Secure remote client access
• Company knowledge base
• Client details, alerts, location, contacts, and attachments

With the power of AppContinuum, HTML5, javascript and Spring platforms, it only took a short amount of time to take the application from concept to a working production implementation. A team of designers, HTML5 developers, and Java developers worked on the application at different points throughout the implementation, working on both the backend data connectors and the user interface.

The use of AppContinuum, HTML5, javascript based app and Spring makes it possible to retrieve and visualize the data quickly for the users. With these technologies, we were able to stand up this application at a very fast pace.

The goal of any project is successful completion of all requirements and features. To successfully deliver your enterprise class applications, I hope you take a look at the core issues you need to address and choose the proper tools for the job.

About the author:  Chris Giametta is an author and Managing Partner with AppFoundation Technology Group, Inc (www.appfoundation.com, Twitter @AppFoundation). Dallas Texas based AppFoundation is full-service firm that provides custom web, mobile, and desktop application development. AppFoundation leverages innovative technologies to deliver premium user experiences that engage customers to drive satisfaction.