Web IDEs: the future of coding

Still using desktop code editors? Web integrated development environments (IDEs) are a new way to build your web projects directly in the browser, often saving development time and making collaboration easier.

The humble browser used to just serve up simple HTML documents, but it’s often now your first stop for just about any task. Think about it — document editing, file sharing, image manipulation, server backups, 3D rendering, music production and just about any other work traditionally done in desktop software can now be handled by a web service.

I’ve actually become reluctant to install anything anymore, as there’s usually a great web alternative that just requires a simple account signup to use it. But even with all the great services on the web, web development itself has been one of the last frontiers for this trend, perhaps because of developers’ reluctance to work online. But that’s beginning to change, and for good reason: web integrated development environments now rival desktop solutions in terms of quality and usefulness.

 

Coding offline is crazy

Most developers build websites on their desktop before putting them online. This was a sensible way to work in the past when we had slower net speeds, most solutions were desktop-based, and we were afraid of putting anything online unless it was finished. However, even average web speeds are fast now, and there are plenty of great online coding solutions.

Building websites and apps can be much like building a house. I could make a lot of analogies to how foundations, pipework and interior design match up with website components. But unlike finishing a house, when you finish building a website, you move it to a different location. Like trying to move a finished house to a new lot, that’s when the problems can begin. You likely haven’t built the site in exactly the same environment you’ll deploy into, which may cause issues. You wouldn’t build a house in a field when you know that it will have to be moved to a street when you’re done. In moving a house, parts are likely to get broken, none of the pipework will match up, and so on. So why would you do it with a website? It’s crazy to work that way.

The most common argument against coding online is that it’s not professional to work on live websites. But coding online doesn’t mean you’re turning client sites into works in progress — build in a development area only you have access to. When you’re ready, move it to live area — simple! It’s time to embrace coding online.

Having switched to web IDEs for the last year, I spend half my time exclusively online now and save about 10 to 15 percent in dev time from to my previous desktop coding practices. That’s time I can use to make a website better, or maybe even occasionally finish my workday on time. (Yes, it can happen!) Why are IDEs so awesome? Here are four big reasons: 

  • You can code anywhere with anyone: Using an online solution lets you code from anywhere — home, office, train, web cafe or from any location where you have a device with a browser and internet connection. You can also code in teams, in the same room or remotely, and at the same time too, something that’s not always easy to achieve with desktop code editors.
  • You can use any OS you want: Without having to install anything, it doesn’t matter whether you use Mac, Windows, Linux or another operating system as long as you have a modern web browser.
  • You don’t need to have a zillion programs open: Another big plus with IDEs is not needing to have so many programs open and constantly toggle between windows. You just use the web browser for the IDE— the web effectively becomes your toolbox.
  • You can test faster: IDEs also save on testing and even deployment time, as coding online allows you to discover issues as you build, especially if you’re using the same server environment the live site will have.

 

Online coding solutions

So what web IDEs can you use right now? Popular solutions include Cloud9, ShiftEdit and CodeAnywhere among many others. Each offers its own take on how an online coding solution should work. Some require payment, and others don’t; some allow you to work via FTP on your own domains, and others require you to clone into their system first. Much like desktop code tools, each has its own scope and style, so it’s important to check out all the features to find the one that’s best for you.

You might think (as I did a couple of years back) that IDEs are light on features and abilities, but that’s far from the truth. The leading web IDEs easily rival the popular desktop code editors, if not exceed them in terms of quality and ability. They often have huge user bases; the well-established ones have 100,000+ users. So they’re updated as often as every week with new features, while desktop solutions might only update their features in new versions every couple of years.

Online coding solutions offer all the standard features such as code highlighting, folding, code completion and more, plus terminal windows, collaborative coding, dynamic interfaces, and direct connections to other services such as Github, Bitbucket and Dropbox.

 

Open-source options

Over the years I’ve heard so many web devs complain about their editors not working well for them. But they feel they can’t do anything about it except inform the provider and wait for a fix or alteration. With more and more open-source web IDEs now available, you can recode the tool to match your needs. There’s no need to fight your editor anymore — make it work for you.

On the experimental end of the web IDE spectrum are open-source varieties such as Aptana and ICEcoder, which freely offer their source code for you to take, use and modify. Because they’re written in languages you’re likely already familiar with — JavaScript, PHP, Ruby — you can quickly get to grips with them and tweak things to your preference. Don’t like how you open files? Change it. Want to build on an extra something? Great, do it. 

While they’re not typically as robust as full-service web IDEs, open-source IDEs are adding new features regularly to give users the best online code editors possible.

 

So, what are the drawbacks?

The issues that would stop you from using web IDEs are becoming fewer all the time, but there are a few legit reasons why you might still code offline. If your project requires huge amounts of data transfers or data crunching, using your browser would be impractical. Or maybe your site is heavy on graphics and uploading your images over and over again would be slower than working offline.

Some might argue the biggest issue is security. If your code is available from anywhere, it could potentially be accessed by anyone. A security breach of your web IDE provider or account could put your code at risk — if the data is sensitive, this could be a major problem. Web IDEs for this reason undoubtedly take security very seriously, but a security breach is not beyond the realms of possibility and should be a consideration before coding your next project online.

 

Toss your desktop solutions

Desktop code editors have made the web what is today, and we should be thankful to the software authors who helped us make great things. But the desktop’s coding days are numbered. Online code editors let us work from anywhere, connect multiple services together, deploy with the click of a button, pull and push source code around to our liking, and let us build brilliant solutions with greater efficiency and openness.

We need to embrace a future where everything can be integrated, mixed and reworked on our own or in teams, with the safety of knowing code can be rolled back, bugs tracked and solved from anywhere if there’s a problem. With everything ultimately moving to the cloud, web IDEs will undoubtedly become the de-facto way of coding, and I welcome this bright new dawn. If you’re still coding offline, I challenge you to let go of your fears and give the future a try.

Have you used a Web IDE to code a site? Do you prefer a local solution? Let us know in the comments.

Featured image/thumbnail, code image via Shutterstock.

  • http://twitter.com/tomzorz_ Deme Tamás

    Code offline and use something to constantly sync any changes.

  • Luis

    I believe that there can be an in between, most desktop IDEs allow you work in a remote server via ftp. You get the online and the full beneficts of a desktop IDE:

  • umbercode

    Somewhere along the line, the term IDE has become synonymous with code-editor. This is a bad thing. An IDE is so much more than an editor. In fact, a code-editor is only one part of an IDE. An IDE should also contain things like project-management, navigational tools (goto declaration, find uses), templates, debugging, refactoring, etc. etc. etc. None, or almost none of these things are part of what you call these online IDEs. As such, they are not. They are mere editors, some with a little extra, but basically none of these deserve to be called IDE. Yes, they serve a purpose, and within the constraints of their functionality they are good. But for full-development nothing beats a real IDE. Please do not confuse the two.

  • hawsome

    Are preprocessors like SASS available online?

  • http://www.facebook.com/ashercharles Asher Charles

    This seems like a really good idea, I have been developing in the browser for 6 years and only recently switched to local. In Australia our Internet speeds are incredibly slow even 5ks from the CBD I get 9Mbs. I have loved the instant upload and refresh and have decreased my build time considerably, I use WordPress so once I have built I upload and import the lcal database and the client enters the content…. Too easy… Especially when I want to do a coding session at the pub and have no Internet. I will give this method a try but I can’t see how it would work when I code out in the parks or pubs or at Dads house on ADSL1. Until Australia fixes their terrible Internet Local seems like the way to go for the bulk of the work.

  • Albert Augustin

    I think the better and faster way is to code local. We are working on Mac OS X – so Apache is preinstalled and just fire up MAMP, PHP Storm and CodeKit. They work brilliant and fast. You could setup CodeKit that it automatically refresh page after saving – CSS Injection, no full page reloads! And SASS/SCSS are compiled on the fly.

  • http://www.facebook.com/scott.madeira Scott Madeira

    I agree with umbercode… I don’t see how these tools will let you do much more than edit code. How do you do real development where you need to step through your code with a debugger, set breakpoints, etc. If you really want to “code anywhere” I suggest a laptop loaded with Apache, MySQL, PHP, XDebug and an IDE of your choice like Netbeans or Zend. That is a fully-functional, self contained, go-anywhere environment.

  • Lim Jiew Meng

    I am surprised Koding was left out. Also I think a major drawback is still the performance and feature difference. A desktop IDE is still much faster and has much more editing functionality. eg. fast auto complete (“intellisense” – truely parses ur code, refactoring etc). Most web IDE I see is nothing more than a medium featured text editor … I think it needs to be at minimum close to Sublime Text or Notepad++

  • stacey

    Thanks for sharing I am not a coder, I am a designer with some coding experience, but I love to keep up with what is going on that side of web development, and as always your articles are very informative.

  • http://andreasolsson.me/ Andreas Olsson

    I’ve started to look for a cloud based code editor since I bought my first tablet. Haven’t really found anything that works good on the tablet yet. But I think the web based editors will be ready before a good Android code editor.
    I will try out those in the article a bit more and see how they perform on the tablet.

  • Joe Petchonka

    I’ve tried both methods for building websites, both online and offline, and I must be honest: I always find myself going back to the ol’ reliable Dreamweaver. I just can’t shake the habit. I find developing sites online is too cumbersome and annoying.

    It was akin to creating basic sites on Notepad, personally.

    http://forzawebsolutions.com

  • http://www.spiralli.ie Spiralli Business Solutions

    If I could find a web IDE that was remotely as functional as PHPstorm, I’d consider the move. For now, I’m happy with a local LAMP/WAMP stack. A remote Git repository means I can work on the project anywhere.

    The time may come when browser IDEs rule the roost, but it will take years rather than months.

  • Gary Hicks

    I have a PC workstation and an rMBP. Since adopting the rMBP I’ve had to figure out how to work mobile whilst maintaining file synchronicity and version control. Online IDEs look very cool but I don’t want to be tied to an Internet connection… what happens if I want to work on the move -or check files whilst I’m on a train, for example?

    As said elsewhere, desktop editors or IDEs work best when utilising online storage or otherwise synced files; this was what worked for me. The solution depends greatly on the need of the user, of course, and whilst I wholeheartedly embrace our Online ‘IDE’s I think their current barrier is Internet connectivity and availability -and until they improve (at least in the UK) I will be staying offline -and will rely on Google Drive and Subversion to sync file locations.

  • http://www.paulund.co.uk/ Paul

    I haven’t found any online IDEs that are as quick and as powerful as desktop applications. I can’t see them ever getting to this standard, a online IDE will have a massive problem if you have multiple projects open, with loads of files open at the same time. The speed will be just too slow compared to something as fast as sublime text.

  • Lars Pohlmann

    I agree with all the critics here and want to add one point. Think about security. Webapps often contain secret business logic and are developed within the boundaries of an NDA. You simply aren’t allowed to use online IDEs in these cases.

  • http://www.facebook.com/samue.marks Samuel Marks

    We’ve had an online IDE (code-editor + debugger + ERDs) in web2py for years now :)

  • http://www.andreasnorman.se Andreas Norman

    I’m guessing the author of this post is simply just referring to html/css on tiny projects when he’s talking about “coding”.

    In larger projects or when really coding (php, .net, java) writing all your code in a web based editor is wrong in so many ways and also impossible in many projects.

  • http://twitter.com/denniserny Dennis Erny

    I suppose if you are looking for a browser-based replacement for Notepad++ then this article will have hit the spot for you. As others have mentioned; however, ‘code editors’ and true Integrated Development Environments are as different as night and day.

    I am seeing the same thing happening on the design-side with all sorts of promising-looking apps cropping up that allow you to ‘design in the browser’. Unfortunately, the code that they produce is not something I would ever feel comfortable putting into production — these web apps are really are just scratching the surface of what their desktop counterparts can achieve at this point — perhaps in 3-5 years we will see full blown IDE’s and the like in the browser.

    Incidentally, I currently use Netbeans 7.3 — an amazing tool for developing HTML5 sites and applications — which connects directly with Chrome to provide live editing of CSS and HTML5 without the need for refreshing the browser or even saving the file. Even if proper browser-based IDE’s currently existed, I would have little incentive to make the switch.

  • Jeffrey Bradley

    I have been using Application Craft and have been very impressed with it. http://www.applicationcraft.com

  • michaelherman

    PythonAnywhere is also a great solution1

  • Adam Jimenez

    Thanks for including ShiftEdit. There have been several valid criticisms raised in this comments thread. In some areas online ides do have catching up to do. In other areas they are already ahead as indicated in the article. A couple of things to clear up, offline is possible with a web app via the browsers local filesystem. And speed is much less of a problem especially in chrome. Adam Jimenez (author of ShiftEdit)