2014-05-01



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.

Ionic



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

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

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

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

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

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

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.

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.

The post 7 Web Frameworks for HTML5 Developers appeared first on Web Development & Technology Resources.

Show more