How to code online?

How to code online?

Many developers use IDEs (Integrated Development Environments) to develop on their machines. Many of these are free and open-source. Examples include Visual Studio Code, Android Studio and Pycharm. Others offer pay-as-you-go versions for corporate use. These include Visual Studio, the JetBrain suite and Komodo.

Depending on your development ecosystem, you are free to opt for one of these solutions. However, whatever the choice, you must first go through a phase of installing your environment.

However, there are alternatives that allow you to start developing software without having to worry about setting up a dedicated environment on your computer. This is thanks to online IDEs, also known by a less well-known acronym, ODEs (Online Development Environment).

You’ve probably already seen some of them in your research on the development forums. Several of them are well known in the community. It’s always a pleasure to find a link to stackblitz or codepen when searching the forums to debug your code. ODEs are important allies in many phases of the development process.

Why should I develop online?

There are many reasons to develop online. As with many tools, the effectiveness and relevance of this solution compared with machine development will depend very much on your context and the situation you find yourself in.

Personally, I use these tools when I need to present a short project, do a design test or when I’m not in a position to develop on a machine. In general, these tools are used in specific and generally succinct situations. Less often used during a complete development process, they are nevertheless useful and facilitate development in many cases.

Online coding is easier for beginners.

The first advantage of ODEs is that they make it considerably easier to access a project at the start of development. Developing online will give you the opportunity to free yourself from a computer-based development environment. You will be able to continue your work on several machines, without worrying about the operating system or the project’s configurations and dependencies. Configurations which, by the way, should be installed each time you change machines. If you find yourself in a situation where you need to use different machines, this is a non-negligible time-saver.

A gadgety little extra is the ability to develop on tablet and mobile screens when on the move. Note, however, that this requires special gymnastics to code without a keyboard.

The second advantage of online IDEs is that you don’t have to configure or install them on the machines you develop on. As part of an old technique or when learning a new technology, being able to code for free online is an advantage, as it means you don’t have to pollute your environment with installations whose usefulness for your projects is not yet clear. You can follow tutorials and training courses while using free online coding tools.

In addition, decentralising the installation of an environment can have an advantage if you don’t have a high-performance machine for development. Whether temporary or due to a lack of resources, these solutions make programming accessible to everyone. A little anecdote: if you go on holiday with the family PC and you have an irresistible urge to try out a piece of code, you’ll thank ODEs for enabling you to develop online.

Developing online facilitates collaboration and exchanges.

When we’re developing, in many cases we call on the community to help us resolve a misunderstanding, a bug or a particular difficulty. This is where online development tools come in.

Whether you are developing an entire project online or working in a machine-based environment, the ODEs will enable you to post questions on the forums, illustrated with your code, for the benefit of Internet users. What’s more, other developers will be able to use the ODE to contribute their answers and present their solutions. ODEs are a real plus when it comes to understanding and sharing knowledge with the community.

In the same vein, if you are collaborating with another developer on a one-off basis and they don’t have or don’t want to set up their machine for a small contribution. You can use online tools to facilitate spontaneous exchanges.

Coding online means you can keep your work safe and secure.

Most free online coding solutions offer cloud storage spaces for publishing your project. What’s more, several solutions offer the option of automating backups of your workspaces and securing everything in case a copy is lost. So, except in extreme cases, your projects are kept in a safe place and can be restored via online backups.

Some solutions also offer synchronisation of their tool with your remote git repository to facilitate the development of your branches and collaboration during the development phase.

Situations where online development is not recommended.

Despite the various advantages of online IDEs, there are several reasons to switch to machine-based environments.

The most obvious is as a result of a contract with a company. As a general rule, companies have dedicated environments and are not inclined to publish code on online environments. This is for obvious reasons of confidentiality and security. In this situation, you will not be able to use ODEs, unless your organisation has opted for a dedicated enterprise version. If this is not the case, rest assured that this will not prevent you from working remotely. It will still be possible to use a working copy on your machine or via remote access with a VPN, depending on your company’s requirements.

Another situation that suggests that ODEs are not the right solution to follow is the dependence on a minimum stable internet connection. Without this, you can forget about the idea of an optimal development environment with online IDEs. However, for some of the online solutions, this problem has been solved, and we’ll go into more detail later.

Finally, if you already have a machine dedicated to programming with decent performance, it will probably be more advantageous in terms of speed and performance to compile your code locally. But in this case, it’s still worth keeping an online IDE for other situations.

A list of 6 IDEs for free online coding.

Finally, like any tool worthy of the name, ODEs have their advantages and disadvantages. However, on a personal level, I find it useful to have one or two references in mind, so that you can use them in the right situations. Here are just a few of the hundreds of online solutions, all of which offer interesting features.

StackBlitz – The choice of flexibility.

A big name in the ODE sector, StackBlitz is the first choice quite simply because it is a well-established benchmark among developers. It owes this reputation primarily to the wide variety of environments it supports. Here is a non-exhaustive list:

Front-end frameworks:

  • React
  • Angular
  • Vue
  • HTML/CSS/JS 

Back-end frameworks:

  • NestJs
  • Express
  • GraphQl
  • JsonServer

One of the features that has brought StackBlitz to the forefront is the fact that calculation is centralised not on a remote server, but on your web browser. This will have a significant impact on the speed of the IDE, as well as its accessibility. In fact, this practice means that StackBlitz can be used without Internet access. This technical specificity is highly appreciable if you opt for an ODE for programming on the move.

For developers with a machine with limited resources, if you are working on a back-end project, you will be able to test the server launch within the browser.

Please note that the free solution offers synchronisation with your public github repositories only. If, however, you want a dedicated storage space or simply want to synchronise your private repositories, you will need to subscribe to the paid version.

Codepen – Ergonomics first and foremost.

Codepen is the front-end-oriented ODE solution that has already won over many users. The first impression on opening the ODE is of the ergonomic development interface. An advantage that Codepen puts a lot of emphasis on. With this ODE, you can incorporate Pen (projects) into any site and present your results. A very useful tool when it comes to presenting POCs (proof of concept). With these two major points, CodePen offers a service that can be very usefully applied to computer training or apprenticeships.

The free version allows you to create an infinite number of public projects. Storage space is included in the paid version.

Replit – For collaborative development.

A fairly solid offering in the ODE ecosystem, Replit offers a very attractive free version of its solution. You are not limited in terms of projects, you are allocated a 500 MB storage space, and live collaboration is provided, enough for some good code sessions. If you want to code for free, with several people and at no cost, this is a solution to consider.

Note, however, that the free version limits the CPU usage of the remote server. In addition, private repositories will only be available to premium users.

JsFiddle – Why make things complicated when you can make them simple?

The JsFiddle online IDE offers a streamlined, intuitive interface for getting started with static projects (HTML/CSS/Js). Based on the concept of less is more, this IDE remains simplistic and offers everything you need to run demos, report bugs and publish code on the web. It’s the solution to consider if you’re just starting to learn web development.

As with many other online IDEs, you can code for free, but there is a charge for access to private storage. One small point worth mentioning is that the interface can be disorientating in its simplicity, and certain functions can be difficult to access.

Gitpod – Automate and facilitate project management.

If you already use github for your remote directories, Gitpod is one of the ODEs best suited to your needs. Like a CI server, Gitpod lets you compile your branches directly on the online IDE. The environment automatically configures itself according to the git context you provide. You can then code online without restriction, on your current projects or create new ones. When it comes to directories, Gitpod offers synchronisation with both public and private directories.

Note that there is a browser extension that lets you add a button to GitPod from Github, Gitlab or Bitbucket.

With the free version, you will be limited in terms of working hours (50 hours/month). This is a surprising limitation, but it gives you the opportunity to test the entire solution before subscribing. What’s more, the free version limits you to 4 simultaneous projects.

codeTasty – For those who want to personalise their environment.

A final interesting alternative is offered by codeTasty, with a classic ODE that allows pair collaboration, even in its free version, as well as the use of extensions to customise the IDE. This second feature is far from anecdotal, since IDE customisation is often limited or non-existent in other online offerings.

The free version offers two-up collaboration on only two environments, a limitation that makes the free version seem a little less advantageous than the competition.

Conclusion

This is a subjective list, but it’s intended to be a broad one, covering the various solutions available in the online IDE ecosystem. There are several free or paid online coding solutions to suit your needs. Online coding is a practice that is still not widely used in complete development processes, but it is a solution that is not without interest in many cases.

The tools presented here are those that have succeeded in making their solution sustainable and offering the most comprehensive environments. However, many other online code editors exist, often with fewer functions, which may be of interest in specific cases.

It’s up to you to choose the offer that best suits your needs as a developer.

Photo Maxime Macé

Maxime Macé

Simple passionné de thématiques diverses et variées. J’apprécie enrichir mes connaissances dans les disciplines techniques comme l’informatique, les sciences et l’ingénierie, mais aussi dans les domaines merveilleux de la philosophie, l’art et la littérature.

Prenons contact

Vous souhaitez me contacter suite à la lecture de cet article ? Merci de renseigner votre adresse électronique et je vous recontacterai dans les plus brefs délais.

CV Ingénieur développeur informatique

CV Étudiant PhD Artificial Intelligence

Portfolio Artist designer