HTML5 allows for great in-browser app development. Recently, I wrote a few Great HTML5 games and on the Pros and Cons of HTML5 for gaming. Overall, the potential is high, but issues with browser compatibility, immature tools, and lack of elegant OOP and architecture will slow the progress of HTML5 for gaming.
For HTML5, I’ve found many frameworks to support application development in the browser. Many also have IDEs to help development and other (non-browser) publishing paths such as iOS/Android.
Fundamentals of HTML5
We probably all forget that HTML5 means “Hyper Text Markup Language”. Its a formatting language that allows for linking (hyper). Version 5 is here, but will not be finalized for a few years (2014?). So what is version 5 and why are people so excited?
Well, ‘HTML5’ technology is really a combination of 3 key technologies. All are free to use, standardized, and far more powerful than previous versions. So people are excited. Also many people are using mobile to access the web. And mobile web usage is increasing really fast. *AND* because mobile browser was created more recently (and thus not limited by historic limitations in computers and the related bureaucracy, *much* mobile web browsing TODAY is compatible with HTML5. All good things.
- HTML5
- JavaScript (Often via JQuery)
- CSS3
The Challenges of the New Platform
Software Developer Jesse Warden points out the following; The issue, however, is that it’s not that straightforward. There are 5 main issues that the HTML/JS/CSS stack (which I’ll here after refer to as the HTML stack), have when coming from the Flex platform in a consulting context (there are more, but these are the ones that matter with regards to the context of this post). They are:
- DOM as a dynamic display technology
- JavaScript lacking mature language constructs (Most frameworks have built-in workarounds)
- There are larger problems for multiple Browser Vendors to solve
- the industry’s libraries & frameworks are young from an Enterprise context (yet not!?)
- The Video Codec Issues
- Tooling
HTML5 ‘Frameworks’
Above HTML5+JS+CSS, a framework adds a consistent library of actions, events, and UI. We generally hope that a framework can be powerful to meet our needs, fast to meet our development deadlines, and flexible to allow us to customize and extend the framework to meet our particular needs and fringe cases.
Types of frameworks (sometimes they overlap
- HTML5 Framework– Low-level, flexible, but not specific for app, game, or mobile development. Runs in an HTML5-enabled browser
- HTML5 Game Framework– High-level and game specific. This is ONLY good for game development. Runs in an HTML5-enabled browser. See this awesome post Flyer Game for HTMl5.
- HTML5 App Framework– High-level and app specific. This is ONLY good for game development. Runs in an HTML5-enabled browser
- HTML5 Mobile Framework– This is generally an ‘app’ framework PLUS it may allow you to publish to ‘native’ device languages and handle finger ‘touch’ events, accelerometer and other mobiles-specific features.
Table of ‘HTML5 App Frameworks’
Framework | IDE? | Video | Site | API | Docs |
---|---|---|---|---|---|
SproutCore | No | Site | Video | API | Docs |
PhoneGap | XCode | Site | Video | API | Docs |
KendoUI | No | Site | Video | N/A | Docs |
Axure | Yes | Site | Video | N/A | Docs |
JoApp | No | Site | Video | API | Docs |
Sencha | Yes | Site | Video | API | Docs |
M Project | Yes | Site | N/A | N/A | Docs |
Resources
- HTML5 Resource Guide of links to simple starter templates.
- Non-framework HTML5 Boilerplate template
- Short list of Best HTML5 Frameworks
Deep Dive Into Each Framework
Hello World for Sencha’s Ext JS 4 HTML5 Framework – Full Source Code and HD Video Screencast
Next Steps
- I wanted to test out a few frameworks for HTML5 to learn more. Check back soon for a review of the best frameworks.
- Please add any comments or suggestions below…