It’s true, HTML5 is definitely changed the way we percieve online websites, applications and content. It’s so advanced, many browsers are still struggling to keep up with the newest HTML5 functions, it does take a long time to plan and implement them.
If you’re experienced with web at all, and have some basic knowledge of how a scripting language works, learning HTML5 coding might not be that hard to do, take a look at one of my past posts where I discuss a couple of ways of learning HTML5 for free. It might be harder than learning from an interactive tutorial, but that’s the ‘price you pay’.
As a side note, HTML5 is also taking over the video marketing world, and many companies are already starting to take advantage of this. Take a look at this guest column that was submitted a few weeks ago, it shows how advanced HTML5 video features can be used to create exceptional marketing content.
To this day, Bombermine must be my all-time favorite HTML5 project that I’ve have had the pleasure of interacting with. It’s an online MMO of the classic game Bomberman. It’s so popular, even after launching nearly two years ago – there are still 100’s of players online at any given time. Great showcase of the power of HTML5.
Few other interesting HTML5 projects:
- HTML5 Genetic Algorithm 2D Car Thingy
- Ben the Bodyguard: Beautiful HTML5 Website
- Soundslice: Living sheet music and guitar tablature
Trying to find the perfect HTML5 web framework might prove to be quite difficult, why? Well, I think the reason is because there are literally over a 100 web frameworks for HTML5, out there in the open. It’s nuts, but we’re going to take a look at some of the big players, and those frameworks that large proportion of the community uses.
I think mobile is quite big right now, and so I’ll open this up with a very popular mobile development framework – Ionic. It’s the perfect solution for building hybrid mobile applications, and it goes together with AngularJS like bread and butter.
It is one thing to build mobile websites, while it’s completely another to build native mobile applications, right from a framework. Ionic supports iOS6+, and Android 4.1+. The team suggest to begin with the documentation to get a feel of what Ionic does, but I think you’ve already figured that out by now.
Modernizr tests which native CSS3 and HTML5 features are available in the current UA and makes the results available to you in two ways: as properties on a global Modernizr object, and as classes on the element. This information allows you to progressively enhance your pages with a granular level of control over the experience.
I love Modernizr, it gives you the freedom of playing with the latest CSS3 and HTML5 features, without compromising the quality of the page design. It’s as simple as embedding Modernizr in your pages, and letting it do its work on checking the different functions of both scripting languages.
A List Apart did a wonderful introduction to Modernizr and its philosophy a couple of years back, take a look here.
Initializr is not a ‘literal’ web framework, but it serves such great purpose, I felt obliged to include it. It’s going to take away hours (in the long run) from your development workflow, by allowing you to generate pre-made templates based on a HTML5 Boilerplate.
You can choose which functions, libraries and parts of any given boilerplate to include, and I’ve found it to be quite an essential tool in my list. You can generate a template in less than 2-minutes, a lot less than it would take if done ‘manually’.
Sencha is one of those rare HTML5 frameworks that has been able to attract huge investments right from the start, I guess it’s doing things the right way, and is using forward thinking to attract new customers and loyal community members.
It’s a bundle of multiple frameworks and products, all of which are somehow related and can be used together to build amazing applications. Sencha Touch 2 delivers a major upgrade to the app experiences that you create, the efficiency of your work as a developer, and the ability of your apps to participate in the mobile ecosystem.
One of their best products, by far.
MontageJS was (and still is) developed to help developers to build modern web applications at ease, without all of the traditional frustration that comes from building apps directly, without a framework. In the most recent news, MontageJS took it to another level, by allowing to build 3D applications with their framework.
MontageJS is an open source framework that bridges the gap between structured markup and interactive experiences, addressing many of the longstanding challenges faced by frontend Web developers.
SproutCore is known for being a great HTML5 web framework when it comes to building client-side applications. A language like Ruby might be great for building websites, but that’s all they really are – websites. SproutCore gives you the ability to build real, native applications to the browser, which also feel that way. It’s pretty cool!
Brunch is a pretty swift HTML5 build-tool, built so that you can avoid generating config files that are bigger than the actual project itself. And while there is a lot of comparison with Grunt going on, this post is the best place to learn more about Brunch, and what it does.
I could’ve put any other framework in this last spot, but I think Brunch can help to leverage some of the common issues we have to deal with in front-end.
The Foundation framework has grown to become one of the most popular HTML5 web frameworks, and for good reasons. The combination of multiple web frameworks that Foundation has put together provides for an experience that allows you to create web and mobile apps without having to think too much about additional libraries and plugins, as majority of new technologies are already in-built within the default installation of the framework.
The biggest brands in the world are using Foundation to built outstanding websites, both static and dynamic. Getting help for Foundation related code issues is flexible since there is a public help forum where coders from all over the world are looking to help those who want to learn and understand more.
Enyo has been in the game for a while, and has recently pushed out some great updates to make web development for desktop and mobile as efficient as possible. To further investigate the surface features of Enyo, please head over to the official GitHub page and check out the README.
Mootor is a framework that’s still in works, technically. It was built to help HTML5 developers push out mobile applications at a much faster pace. Recent examples on the Mootor website suggest that Mootor will happily work together with Angular.js apps as well, so definitely check it out if you’re an Angular developer.
Web Frameworks for HTML5
I realized that half of the frameworks that you can get for HTML5, are built to help you create games, and so with that in mind – I’ll be looking to create a post in future, discussing the game frameworks for HTML5.
This resource itself, should be a great starting point to understand HTML5 better, and how the frameworks are built around it. We’re only touching the tip of the iceberg, and more stuff is to come in the next couple of years.
— UPDATE —
Here we are after more than a year with a flexible update for some of the frameworks, and also an inclusion of three more, one of which should have been on the list a long time ago. The web development world is moving ahead with a fairly slow pace at the moment, there’s enough frameworks for everything and new stuff takes a long time to really find its own foot, so people are relying on web frameworks that actually work and can actually deliver on the promise to have the necessary features for building mobile and desktop apps.