A comparison of tools for the development of HTML 5 Applications
Orientation in Objects GmbH
The vast spread of mobile devices with different operating systems is another aspect, where HTML5 can shine. The market for smartphones and tablets is heavily divided into Android, iOS, Windows Phone/Windows 8, BlackBerry and webOS, with the first two obviously being the big players. However, this segmented market means for developers that they have to rewrite their applications in several languages and with different technologies in order to target as much customers as possible. Now, instead of building native apps for a specific platform, developers can also develop one single web application using HTML5 and make it available on PCs and all kind of mobile devices without much trouble.
...HTML5 is here, it works and the hype seems justified, so...
The technologies are ready, but are the IDEs as well?
The choice of an appropriate IDE or editor for your project is absolutely mandatory as it can greatly ease and speed up your development if you choose the right one. Contrary it can impair the chances of success if you don’t.
This is why we decided to look for IDEs that are considered being good by the majority of the community and to compare them.
These are the IDEs that we chose for our comparison:
free (GPL, CDDL)
Microsoft Public Licence
Aptana Public License, GNU GPL
Microsoft Public Licence
Mozilla Public Licence 1.1
It is no surprise that almost every good IDE on the market has its unique features. Nevertheless every IDE should provide the core functionalities that a developer expects if he wants to develop a web application. Following criteria were considered for an impartial comparison.
Regarding the editor in general it is interesting how the UI looks like in general and how it is structured and arranged because this affects the usability of the IDE. The next point is the project creation with intuitivity and the amount and quality of project templates being important aspects. When it comes to auto-completion for HTML and CSS it is first of all relevant how fast and accurate it is in general. Furthermore we will test if the auto-completion (hereinafter referred to as AC) includes tags, attributes, attribute-values and pseudo-classes or only parts of this collection. Auto-completion for files, file paths, fonts and colors surely isn´t mandatory but will also be tested. Last but not least we will check if there is auto-completion in the HTML for IDs and classes that were specified in an included CSS file and vice versa.
Not a must-have per se but nonetheless a really nice feature is live editing with the ability to have your editor and a browser window side-by-side and directly see the impacts of your code changes without the need to reload the site. Code navigation is the next category where we will check if there are navigable overviews for all file types and options like “go to declaration” or “find usages”. Last but not least we will also rate the performance in general and the response times for the auto-completion.
As mentioned above, these are only the core functionalities that can ease the development of HTML5 applications.
These are the results of our tests:
The clearly arranged editor appears nice and modern although the amount of menus and submenus may seem a little confusing for beginners. When creating a project, NetBeans offers a wide range of templates, e.g. including Twitter Bootstrap, Boilerplate or Angular JS.
Not only the HTML and CSS auto-completion and validation features per se are very good, but also the interaction between those two is very compelling. If you use IDs and classes in your HTML markup you will have AC for the CSS file that you included in the header. The other way around, if you specify rules for certain IDs and classes in the stylesheet, you will also have AC for them in your HTML. Additionally there is a “Find usages” option for the IDs and classes in your HTML that directly points you to the declaration in the corresponding CSS file.
Another nice feature is that you are able to rename IDs and classes in the HTML/CSS and that the changes automatically affect the corresponding entries in the CSS/HTML. This kind of refactoring can only be matched by WebStorm.
The HTML AC offers support for HTML (5) tags, attributes and even attribute values if possible. It is also context-sensitive, for example in the sense of offering the “li” tag as the first option if your cursor is inside a surrounding “ul” tag.
Last but not least inside an HTML file there is also auto-completion for file names and file paths, which is a nice detail when including stylesheets/script files or embedding pictures. A small point of criticism is that the closing tags aren’t inserted automatically as done in most others IDEs.
The support for CSS is almost as good as for HTML. There is AC for HTML tags in CSS selectors, attributes, attribute values (including their CSS3 representatives) and pseudo-classes. As already mentioned above, you also have AC for IDs and classes that you used in the HTML. Unfortunately there is no AC for file names and file paths in CSS.
JQuery is an aspect where NetBeans can earn some points again. Out-of-the-box it offers an impressive AC even including IDs and classes used in the HTML in the JQuery selectors ‘$(“#someId”)’, respectively ‘$(“.someClass”)’.
After installing an extension for Google Chrome, NetBeans offers a very good live editing support and changes you make to the code are immediately displayed in the browser.
The code navigation is also very nice and comes close to what developers know from Java or .NET development. There are navigable overviews for the HTML, CSS and JS, a “go to declaration” for JS variables/methods and the “find usages” option mentioned above. Performance wise it has to be said that the AC is quite quick, but compared to the other candidates the performance is a little worse, especially if you run NetBeans on an older/weaker PC.
If you have a Java backend it is obviously a nice aspect that you could develop your Java backend and the HTML 5 frontend in the same IDE.
Microsoft WebMatrix 2
WebMatrix 2 is a free IDE from Microsoft for web development featuring templates for CMS, Blog or E-Shop projects and deployment assistance. It supports a huge amount of frameworks with WordPress, Joomla and Drupal probably being the standout candidates. The score in the ‘project templates’ category for WebMatrix 2 is nevertheless only “good” because this comparison focuses on HTML 5 applications and in this regard the templates can´t compete with NetBeans or WebStorm.
The editor is quite minimalistic but nicely arranged and features the same ribbon style menus that were introduced by the Microsoft Office 2007 suite. Unfortunately the editor is a little bit too minimalistic, lacking a feature to split the window and view and edit two source files side-by-side.
The support for HTML 5 is quite good in general and, in contrast to NetBeans, closing tags are inserted automatically. Context-sensitivity (see NetBeans) is also given as well as AC for HTML (5) tags, attributes and attribute values. Missing features are AC for IDs and classes that are defined in the CSS and AC for file names and file paths. Anyhow, these are only minor points of criticism and therefore the HTML 5 support has to be rated as “good”, especially because the validation for HTML (and CSS) is also quite nice and unknown tags are immediately marked, which should prevent typos.
CSS 3 however isn´t supported as good as HTML. There is support for CSS (3) attributes and attribute values and WebMatrix also features one of the best AC for fonts and font families of all candidates. Hence it is quite a pity that there is no AC for HTML tags in CSS selectors, no AC for IDs and classes used in the HTML, no AC for pseudo-classes and also no AC for file names and file paths. AC for attributes and attribute values may be more important than AC for HTML tags and pseudo-classes, but compared to other IDEs, WebMatrix can´t completely keep up in this department.
Lastly, regarding the performance, WebMatrix can gain some points again. The overall performance is really good and the AC is always very fast. Furthermore it doesn´t consume as much memory as most of its competitors.
Aptana Studio is based on Eclipse. A fact that it simply can´t deny because it basically looks exactly like a darker version of the standard Eclipse IDE. The IDE features a nice overview and in the default settings a dark background and white and colored fonts, which appears a little weird in conjunction with the typical light-gray Eclipse toolbars and menus.
When it comes to project creation, Aptana e.g. offers a template for HTML 5 Boilerplate and various file types.
The HTML support is very good. There is a quick AC for HTML (5) tags, attributes and attribute values, closing tags are inserted immediately and there is AC for file names and file paths. Finally Aptana also offers AC for IDs and classes that are defined in the CSS and the syntax and tag validation is also really good. There is only one small point of criticism because the AC for HTML tags isn’t as context-sensitive as the AC that most competitors can offer.
The CSS AC is also fairly good as it covers HTML tags in CSS selectors, CSS (3) attributes, attribute values and pseudo-classes as well as a nice support for fonts and font families. AC for IDs and classes that are used in the HTML and for file names and file paths is sadly missing.
Refactorings and live editing are also features that aren´t provided but at least the code navigation (navigable overviews, “go to declaration” for JS) and the performance are really good.
JetBrains WebStorm 6
JetBrains is the creator of IntelliJ, a popular commercial Java IDE.
Targeted at web developer they just recently released the 6th version of WebStorm, which is also the only proprietary candidate in the comparison.
Right at the beginning, WebStorm can convince developers with a nicely arranged editor window and many project templates, including Twitter Bootstrap, Boilerplate, node.js and even TypeScript and Dart.
It is also the only IDE that can compete with NetBeans when it comes to HTML support and in fact, even surpasses it a little bit. The AC in general is fast, accurate and context-sensitive and it is available for HTML (5) tags, attributes, attribute values, pseudo-classes, file names and file paths and also for IDs and classes that are used in an included stylesheet. Considering that closing tags are inserted automatically and that WebStorm, in contrast to NetBeans, marks unknown HTML tags as errors, the HTML support can only be regarded as outstanding.
A little worse but still really good is the support for CSS. Generally it feels like the fastest AC of all candidates and it is available for HTML tags in CSS selectors, CSS(3) attributes, attribute values, pseudo-classes, file names, file paths and font families (no specific fonts). A small but unique and nice little feature is that there is a little preview for colors in your CSS, even if they are specified via a hex value.
What is missing is AC for IDs and classes that are used in the HTML file. If this is no big deal for you, you can consider the CSS support to be really great, but copy & paste of IDs and classes between the HTML and CSS is quite tedious (especially in larger files). And I guess that every web developer already wondered several times after reloading the web site why the new style wasn’t applied when realizing that there was a small typo.
When it comes to live editing, WebStorm is the only IDE that can compete with what NetBeans has to offer. Like NetBeans, this feature requires a Google Chrome plug-in.
As mentioned in the beginning, JetBrains is also the creator of the Java IDE IntelliJ. This IDE comes with most of the features built-in that WebStorm has to offer and with the additional supply of plug-ins, IntelliJ is basically a superset of WebStorm. This is very interesting because if you want to back your HTML 5 application with a Java server application, you can code your backend and frontend in the same IDE, just like with NetBeans and Eclipse.
Visual Studio Express 2012 for Web
Microsoft´s IDE flagship Visual Studio is also available as an Express version especially designed for web development.
Generally the editor, its toolbar and little explorer windows seem a little crowded compared to other IDEs and also the project and file creation isn´t equally intuitive.
The support for HTML (5) is really good. There is AC for HTML (5) tags, attributes and attribute values, closing tags are inserted automatically and there is also AC for file names and file paths. Compared to NetBeans and WebStorm there is only one feature that is missing and that is AC for IDs and classes that are defined in the CSS. This is only one feature, but a pretty important one in my opinion as you can read above in the paragraph about WebStorm.
CSS 3 is also well supported as there is AC for attributes, attribute values and pseudo-classes. The AC for fonts and font families is also quite nice and can only be matched by Aptana and WebMatrix. Strangely missing are AC for the HTML tags in CSS selectors and unfortunately also for IDs and classes that are used in the markup.
Komodo Edit is the free alternative to ActiveState´s proprietary IDE Komodo.
The editor itself is quite minimalistic but well arranged. There are many templates for file types but no real “web projects” or templates for Bootstrap or HTML 5 Boilerplate.
HTML support is only mediocre with a context-sensitive AC for HTML tags, attributes, attribute values and auto-inserted closing tags. Unfortunately this AC is not available for HTML 5 tags and attributes. Furthermore missing is AC for file names and file paths and for IDs and classes that are defined in the CSS.
The support for CSS is better because there is also full-blown support for CSS 3 including HTML tags in selectors, attributes, a mediocre AC for attribute values (not as accurate as most competitors), pseudo-classes and font families.
Syntax errors are marked both for HTML and for CSS and the validation mechanism also identifies unknown tags in your HTML.
The enterprise version of the Eclipse IDE also offers quite good support regarding web development thanks to the WTP (WebToolsPlatform) project.
The components of the IDE window are nicely arranged. For developers that want to develop HTML 5 applications however, the toolbar and the amount of menus may seem a little confusing at first, mainly because they won´t need most features for their purposes.
Project creation is easy and intuitive but there are no project templates like those that some of the other candidates offer.
The HTML support is quite average with AC for HTML (5) tags, attributes and attribute values. Sadly the latter two do not cover all new HTML 5 elements. Also missing is AC for file names and file paths as well as AC for IDs and classes that were defined in the stylesheet.
Pretty similar is the CSS support with an AC for HTML tags in selectors, attributes, attributes values and pseudo-classes that is generally fast and accurate, but lacks any kind of support for CSS 3. AC for file names and file paths is also missing alongside the AC feature for in the CSS defined IDs and classes.
Also comparable to NetBeans is the fact that you could write your Java backend code and the HTML 5 frontend in the same IDE.
An absolute recommendation cannot be given, because every IDE has its pros and cons and personal preferences and project needs therefore decide which IDE is the best for you. Regarding the plain results, NetBeans 7.3 and WebStorm 6 probably have to be considered as the most complete IDEs for HTML5 development right now.
Again it has to be said, that every tested IDE will help you to develop HTML5 applications. Mediocre ratings in some categories therefore mostly result from the difference with IDEs that are truly great in these aspects.
To answer the question that occurred at the beginning: The technologies are ready and yes, the IDEs are as well. Have fun coding HTML 5 applications.
 Microsoft abandoning silverlight
 Adobe officially favoring HTML5 instead of Flash
 NetBeans 7.3
 Microsoft WebMatrix 2
 Aptana Studio
 JetBrains WebStorm 6
 Visual Studio Express 2012 for Web
 Komodo Edit
 ActiveState´s proprietary IDE Komodo