Web IDEs: the future of coding

Default avatar.
January 30, 2013
Web IDEs: the future of coding.

ThumbnailStill 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 café 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.

Matt Pass

Matt Pass is a Digital Director at ICE Creative, a branding & web design company in the UK. He has over 13 years experience in the web industry, creating web solutions for some of the the biggest global companies and has actually completed an A‑Z of clients during his career. Best known for ICEcoder (his own web IDE) he is very active in the open source community but when not coding likes to look after penguins at his favourite wildlife park, Living Coasts. Follow him on Twitter @mattpass or checkout his Github account github​.com/​m​a​t​tpass.

Read Next

3 Essential Design Trends, June 2023

This month we are focusing on three trends within a bigger website design trend – different navigation menu styles and …

15 Best New Fonts, May 2023

The choices you make when selecting a typeface have more impact on your design than almost any other decision, so it’s …

10+ Best Tools & Resources for Web Designers and Agencies (2023 updated)

Having the ability to envision a tastefully designed website (i.e., the role creativity plays) is important. But being …

20 Best New Websites, May 2023

This month, there are tons of great new agency websites to get excited about. 3D animated prisms are a popular theme, a…

How to Find the Right White Label Website Builder for Your Agency

Web design agencies face a lot of obstacles in closing the deal with new clients. One of the most common ones is the ar…

Exciting New Tools For Designers, May 2023

There are hundreds of new tools for designers and developers released each month. We sift through them all to bring you…

3 Essential Design Trends, May 2023

All three of the website design trends here mimic something bigger going on in the tech space, from a desire to have mo…

10 Best AI Tools for Web Designers (2023)

It’s time to stop worrying if AI is going to take your job and instead start using AI to expand the services you can of…

10 Best Marketing Agency Websites (Examples, Inspo, and Templates!)

Marketers are skilled in developing strategies, producing visual assets, writing text with high impact, and optimizing …

15 Best New Fonts, April 2023

Fonts are a designer’s best friend. They add personality to our designs and enable fine typography to elevate the quali…

20 Best New Websites, April 2023

In April’s edition, there’s a whole heap of large-scale, and even full-screen, video. Drone footage is back with a veng…

Exciting New Tools For Designers, April 2023

The AI revolution is having a huge impact on the types of products that are hitting the market, with almost every app b…