HTML5: The Parts You Care About (Part 3)
This is the last post in the blog series HTML5: The Parts You Care About. Read Part 1 and Part 2.
Investing in the Right Tools
To close this series of posts discussing HTML5, I want to discuss the toolset that you use for development. Everyone is going to have an opinion on what is the “best” thing out there, including me, but I’m not going to focus in on that. Instead, the post is going to focus in on the types of tools that are out there for HTML5 development and share some of the tools that stand out.
Development Environments
This might seem like a gimme, but it’s worth mentioning. Every developer, regardless of platform, has a vested interested in their development environment and HTML5 is no different. There are a lot of different ones out there, but here are a few that stand out.
Visual Studio 2012+
I’m not just talking about ASP.NET development, but HTML development as a whole. Visual Studio has come a long with its prized development environment, especially in the web development department. The Web Essentials team has been providing some very cool additions for HTML developers, and we are seeing some even more power features come into play in VS2013.
If you haven’t looked into Visual Studio in a while, it’s time to look again.
Cloud9 IDE
This is one of my favourites. Cloud9 is an entirely web-based IDE that targets more than just HTML. It ties directly to your Github and Bitbucket accounts, so you can pull in your source code from your repositories. Complete with a terminal, deployment tools, and debugging tools, Cloud9 IDE is definitely something to look at for any developer that works from multiple machines.
Notable Mentions
JavaScript Compilers
I’m not talking compilers in the traditional sense, but rather JavaScript compilers. The general idea is that you use a language that provides a cleaner syntax with more language features, which is then compiled into the code we are used to seeing (i.e. JavaScript). I realize that this might sound excessive, but it can really provide a lot of power and simplification to the developer, as well as some performance enhancements.
TypeScript and CoffeeScript are the two major players when it comes to JavaScript compilation, each with their own pros and cons depending on your development experience.
TypeScript
TypeScript is an open-source project started and backed by Microsoft. One of the distinguishing characteristics of TypeScript is that JavaScript is a subset of TypeScript, meaning that any JavaScript you write is also valid TypeScript.
Another unique part of TypeScript is its need for definition files for external modules and/or libraries. The definition file provides the information TS needs to refer and use the other libraries. Rather than forcing developers to write their own TypeScript definition files, a number of TypeScript enthusiasts have taken it upon themselves to provide definition files for many of the most popular JavaScript libraries with the DefinitelyTyped project.
I could go on about TypeScript for a while, but it is definitely worth a look. It is especially good to look at if you are looking to write JavaScript and have a background in .NET code (like I do) as it feels very familiar to the .NET ways of developing. Plus, the tight Visual Studio integration doesn't hurt one bit.
CoffeeScript
I think it is fair to say that CoffeeScript is the most popular JavaScript compilation framework. CoffeeScript has a syntax that is more Ruby-like in nature, and focuses in on providing a more familiar way to write JavaScript code just like TypeScript.
CoffeeScript works seamlessly with external JavaScript libraries, without requiring a library file like TypeScript. The goal of CoffeeScript is to "attempt to expose the good parts of JavaScript in a simple way" as per their website (Oct. 15, 2013).
CoffeeScript has been around for a while, and has been refined into strong language with a great compiler. CoffeeScript set bar when it comes to JavaScript compilers and it is definitely worth a look by any and all developers looking to use JavaScript in their project.
Resources
Further Reading: What about Style?
We focused on JavaScript compilers in this post, but there is a whole range of CSS compilers out there too. The biggest names are LESS, SASS, and Stylus, which can make your CSS writing and management much easier with language features like variables and nested rules).
If you do anything CSS related, it is definitely worth a peek at the links above.
Libraries and Frameworks
The last piece I want to highlight in the toolbox are libraries and frameworks and their importance in HTML5/JavaScript development. With the proper libraries and frameworks in place early on, developers can build powerful, stylish, and engaging HTML applications without needing to write the core plumbing code that make it possible.
In this post, I will focus in on two of the most important frameworks I have come across: Twitter Bootstrap and Modernizr.
Twitter Bootstrap
The folks at Twitter took their beloved UI design and opened up the source code to release it as a framework for everyone to use. This framework is a full HTML/CSS/JavaScript package deal, providing CSS-based layout management for multiple devices and, common web components and styles, along with common interactive components.
By leveraging Twitter Bootstrap, developers are able to hit the ground running on creating powerful applications without getting lost in the details of design and making it look pretty. Twitter Bootstrap is easily one of the best wins for any HTML development team and should be investigated if you're not already using it. https://getbootstrap.com/
Modernizr
Moderinzr is another open-source framework, but this time is exclusive to JavaScript. Modernizr provides ways to do feature detection in HTML applications using either CSS or JavaScript, depending on your preference and your application.
Modernizr does more than just allow HTML5 to be run and managed cleanly in legacy browsers, rather it allows you to load dependencies based on the features detected ensuring that only the resources needed by the specific client are downloaded, improving performance of your application.
All in all, Modernizr is a must-have for any HTML developer looking to release their application to the web, as browser detection is not an accurate way of developing any functionality for a browser-based application. https://modernizr.com/
Conclusion
As you probably can tell from parts one, two, and three of this blog series there is a lot of HTML5 that you can care about. As we see technology progress, we are seeing HTML show up in more and more places making a true cross-platform technology.
If you have yet to look into HTML5, this is your chance to look and see how this open standard can make your applications and development life even better.
Thanks for playing.
~ DW