The web application landscape has shifted rapidly in the past year. Due to Adobe’s changing view of the Flash Platform, many companies who have relied on technologies like Flex are looking to migrate to HTML 5. This transition can be tricky both for an organization as well as its developers. Here are five steps that should be some of the first an organization takes in this process:
1. Choose a Client-Side MVC Architecture
There are several key points to consider when making this decision for your organization:
How documented is the framework? Can your developers easily pick up new concepts solely from the documentation?
Does the framework provide adequate real world examples? These will be crucial for the internal learning process with your developers.
Does the framework provide a level of flexibility for the type of applications that your organization creates?
Does the framework allow for you to create testable applications? Does the framework have a testing story already crafted for its applications?
Does the framework provide the level or support needed for your organization?
What level of support do you require? Many frameworks are purely open source with no support options. Some frameworks (like Sencha Touch / ExtJS) have a level of support available to organizations.
If your company is attempting to decide on an MVC architecture, I would recommend examining Backbone JS, Ember JS, Angular JS, and ExtJS / Sencha Touch. Choosing a framework that contains both a client side MVC architecture and a mature class system is almost always going to be superior than piecing multiple frameworks together. Picking a micro-architecture doesn’t have to be a permanent decision, but it will give your developers a place to start.
In addition, your team can augment the framework that you have chosen over time. For example, At Universal Mind we work with Sencha Touch and ExtJS (in addition to other frameworks). To facilitate code organization and reuse one of our team members, John Yanarella, crafted DeftJS which adds dependency injection (among other things) to the core framework that powers both Sencha Touch and ExtJS. In short, you can make a framework into what you want it to be.
2. Select a DOM Manipulation and AJAX Library
In many cases, the DOM manipulation library will not be included with your MVC framework. Some solutions (like Sencha Touch / ExtJS) aim to provide an all-in-one framework, but that isn’t the norm.
The most popular DOM manipulation library is jQuery, and it has a vast online community. This also includes a large library of community plugins, but many of these may not meet the bar of quality that one would expect for an enterprise application.
There are many other DOM manipulation libraries that exist such as Prototype, Dojo, and MooTools (just to name a few). Determining which one is a best fit for your organization requires an examination of your developers experiences, desired level of documentation, and proposed use cases.
3. Adopt Code Conventions Quickly
In addition, tools such as JSLint (also authored by Crockford) can force developers into following many of these best practices and conventions. JSLint also has integration into many of the popular IDE’s including Aptana and WebStorm.
Organizations that skip this step will find that their code has little coherence between projects, and that it is increasingly difficult for developers to ramp up on a code base created by another team.
4. Develop a Testing Plan
Through its lifetime Flex developed a quality testing story. Developers could leverage unit testing tools like FlexUnit and also enterprise functional testing tools such as HP’s Quick Test Pro. Making the switch to HTML5 application requires building a testing plan that is just as rich. Determining how to integrate your QA team into this process is crucial.
The next piece centers on functional testing of HTML5 applications. This is one area where HTML5 development can exceed Flex. With Flex development, the only truly powerful testing tool was HP’s Quick Test Pro (because Adobe wrote this integration into the framework). With web standards development, the integration is a little easier. Tools like Selenium provide for quality functional testing of your HTML5 applications.
5. Define a Build and Deployment Process
As Flex matured, many organizations adopted build tools such as ANT and Maven. These tools all had integration with the Flex compiler, and building an optimized Flex application generally only took a few discrete steps. The process becomes a bit more complicated with HTML5 applications.
As you build your applications, you will need to plan on having a build process that accomplishes the following (or a subset of these items):
Compile LESS/SASS CSS code (if your organization chooses to use one of these tools)
Combine CSS code into single file
Run unit tests
Run functional tests
Execute load tests in a staging environment
Developing a repeatable and consistent process to push to production will certainly be key to your organization’s success.
Starting off on the right foot is crucial in this transition. Empowering your developers with these new technologies requires careful research and planning. By working your way through these items, you can approach your decision with the required amount of forethought.