XMLHttpRequest object that lives in a web browser and communicates with the server without the need to refresh the entire web page (a.k.a. Ajax). JSON will be our data format of choice for data exchange between the web browser and the server.
Moving from DHTML to HTML5
DHTML stands for Dynamic HTML. Back in 1999, Microsoft introduced the
But choosing HTML5 as the least common denominator that works in various devices and browsers means lowering requirements for your enterprise project. The UI might not be pixel-perfect on any particular device, but it will be made somewhat simpler (compared to developing for one specific VM, device, or OS) and will have the ability to adapt to different screen sizes and densities. Instead of implementing features that are specific to a particular device, the functional specification will include requirements to test under several web browsers, in many screen sizes and resolutions. HTML5 developers spend a lot more time in the debugger than people who develop for a known VM. You’ll have to be ready to solve problems such as a drop-down not showing any data in one browser while working fine in others. Can you imagine a situation when the click event is not always generated while working in Java, Flex, or Silverlight? Get ready for such surprises while testing your HTML5 application.
- Those that allow you to take an existing HTML5 website and easily add new attributes to all or some page elements so they would start shining, blinking, or do some other fun stuff. Such frameworks don’t promote component-based development. They may not include navigation components, grids, or trees, which are pretty typical for any UI of the corporate tasks. JQuery is probably the best representative of this group; it’s light (30 Kb), extendable, and easy to learn.
- Another group of frameworks offers rich libraries of high-level components and allow you to extend them. But overall, such components are supposed to be used together, becoming a platform for your web UI. These components process some events, offer support of the Model-View-Controller paradigm (or an offshoot of that), have a proprietary way of laying out elements on the web page, organize navigation, and more. Ext JS from Sencha belongs to this group.
Dividing all frameworks into only two categories is an oversimplification, of course. Frameworks such as Backbone.js, AngularJS, and Ember.js have no “components” in terms of the UI sense, and some don’t even quite dictate how you build your application (as in, they are not full-stack like Sencha). Some of the frameworks are less intrusive, whereas others are more so. But our goal is not to compare and contrast all HTML5 frameworks, but rather to show you some selected ones.
ext.create instead of the operator
Developing in HTML5
Remember that, even if you rely on a framework that claims to offer cross-browser compatibility, you will still need to test your application in the browsers that you expect to support to ensure that it functions as intended. The chances are that you may need to fix the framework’s code here and there. Maintaining compatibility is a huge challenge for any framework’s vendor, which in some cases can consist of just one developer. Spend some time working with the framework, and then work on your application code. If you can, submit your fixes back to the framework’s code base—most frameworks are open source.
Challenges of the Enterprise Developer
If you are an enterprise developer starting work on your first HTML5 enterprise project, get ready to solve the same tasks that all UI software developers face, regardless of what programming language they use:
- Reliability of network communications. What if the data never arrives from/to the server? Is it possible to recover the lost data? Where did it get lost? Can we resend the lost data? What to do with duplicates?
- Modularization of your application. If your application has certain rarely used menus, don’t even load the code that handles them.
- Perceived performance. How quickly is the main window of your application loaded into the user’s computer? How heavy is the framework’s code base?
- Should you store the application state on the server or on the client?
- Does the framework offer a rich library of components?
- Does the framework support creation of loosely coupled application components? Is the event model well designed?
- Does the framework of your choice cover most of the needs of your application, or will you need to use several frameworks?
- Is well-written documentation available?
- Does the framework of your choice lock you in? Does it restrict your choices? Can you easily replace this framework with another one if need be?
- Is there an active community to ask for help with technical questions?
- What is the right set of tools to increase your productivity (debugging, code generation, build automation, dependency management)?
- What are the security risks that need to be addressed to prevent exposing sensitive information to malicious attackers?
We could continue adding items to this list. But our main message is that developing HTML5 applications is not just about adding