Our Blog

New age web development IDEs

Ivan Pavlov
by Ivan Pavlov on Fri 30 January 2015 No comments

In the beginning the web was all HTML and Notepad (vi, emacs …). Then Javascript and CSS added up to build the DHTML (Dynamic HTML) and the WYSYWG visual editor Macromedia Dreamweaver came, to rule them all.

After few slow years the web went crazy – HTML5 became a standard, the mobile and web apps were born, Adobe bought Macromedia, JavaScript was rediscovered as a server-side language, “responsive design” and “mobile first” became the new black, more and more browsers learned the HTML 5 APIs with their databases, vector graphics, animations, web sockets, web components  etc.

So the evolution spiral brought most of the web developers back to the text editors like Notepad++, Sublime text, Atom – extended to provide code and project control, code validation, some automation and many plugins, but remaining based on pure text in their nature.

Now the question is who will be the new Dreamweaver.

Right now there are many candidates and I’d love to learn about your favorite in the comments. However here I will list two of them – products of huge corporations:

Adobe Brackets

It is still more of a text editor (similar to Sublime text and Atom), however provides easy preview/editing of svg vector graphics, animations and html files. The most attractive feature and what distinguish it from the others (and the reason to be in this review) is the extension Extract for Brackets, which allows to “pull out design information from a PSD including colors, fonts, gradients, and measurement information as clean, minimal CSS via contextual code hints”. It is still in preview and will be paid extension, which sounds more like Adobe than the open source code of Brackets.

Other highlights of the Brackets are:
‣ inline editors which allow to open inline edit window for css by the element which uses the style: “Want to work on the CSS that applies to a specific ID? Put your mouse cursor on that ID, push Command / Ctrl+E and Brackets will show you all the CSS selectors with that ID in an inline window so you can work on your code side-by-side without any popups.”
‣ live preview – the browser view is automatically updated when the code changes
‣ preprocessor support – integrated support for LESS and SASS preprocessors

Intel XDK

This is much closer to the classical IDE. The HTML5 Cross-platform Development Tool provides a simplified workflow to enable developers to easily design, debug, build, and deploy HTML5 web and hybrid apps across multiple app stores, and form factor devices.

That’s right – it provides integrated environment to build HTML5 apps for Android, iPhone, Windows Phone, web. And then test on emulator or real devices (including performance profiling) and finally to publish and eventually sell on one or all of:
‣ Apple App Store
‣ Google Play
‣ Nook Store
‣ Amazon Store
‣ Windows Store
‣ Tizen Store
‣ Facebook
‣ Chrome

And, as they like to say on the TV commercials – “this is not everything”. It features also:
‣ drag & drop visual UI builder for multiple UI Frameworks and Apis like jQuery Mobile, App Framework, Twitter Bootstrap, and Topcoat
‣ numbers of ready samples and templates to jump start.
‣ installable plugins and extensions (for example for in-app purchasing and Dolby Audio)

And it works on all major OS – Windows, OS X, Ubuntu Linux.

Definitely this seems like an IDE that I’d like to try in a battle.

Anyway if your development tasks still work mostly outside of the browser, you should probably stay with your old well known and proven VisualStudio, Eclipse, InteliJ etc. IDE.


Ivan PavlovNew age web development IDEs

Related Posts

Take a look at these posts

Join the conversation