Developing in the Cloud

How to solve development tasks online without local installing dev apps.

Developing in the Cloud

Cloud-based development environments are convenient for team members with different levels of programming skills to work together. Online IDEs do not require any local software installation – all you need is to login to your browser and connect to a shared workspace. Below we look at some popular services for team coding and easy deployment of web apps.

Glitch

Website: https://glitch.com/

Slogan: Glitch is the friendly place where everyone builds the web. Start a new blog, play with React, or build new worlds with WebXR. Let's go!

Description. The Glitch project is maintained by a team led by Joel Spolsky, one of founders of Trello and StackOverflow. Glitch is a remote workspace with the ability to edit code, add files and execute necessary commands from the console. The service offers the convenience of Node.js packages and static pages. All in all, a paradise for a JavaScript developer.

The main idea behind Glitch is to simplify development for newbies who want to implement their genius ideas using code, but are bogged down by side-programming problems: setting up the environment and code editor, matching libraries, etc. With Glitch, creating a web application is as easy as editing a blog post.

The project digital thermo-vox by WebXR technology, opened in the IDE Glitch. The file tree is displayed on the left, at the bottom there is the terminal panel running for the project app

Benefits:

  • pre-configured projects for Frontend and Full Stack development: a blog, a basic website, and other variants, called remixes in the project's terminology;
  • ability to work with SQLite–- a simple relational database;
  • notification of new versions of npm packages for dependencies;
  • simple metrics of CPU load, RAM, disk space usage;
  • the ability to share the project with the definition of a system of rights;
  • terminal with a classic set of commands;
  • a large number of examples and a welcoming community.

Disadvantages:

  • the IDE has a limited set of features, but the environment is mainly used to display files and small changes with a quick display of the result in the user interface of the application;
  • to remain productive, Glitch imposes execution time limits on unused projects. When the project is idle, it goes into hibernation mode;
  • the only interpreter available is Node.js.

Replit

Website: https://replit.com/

Slogan: Build software collaboratively from anywhere in the world, on any device, without spending a second on setup.

Description. The service allows to write code in most languages directly in browser; in fact, it's a full-fledged cloud environment that has all the basic tools for writing and running code online.

An example of Python development in Replit. On the left you can see the list of files and the toolbar, on the right the terminal with the output of the executed program

Benefits:

  • supports more than 50 programming languages;
  • Ghostwriter tool speeds up writing and improves program quality with smart autocomplete prompts and suggestions for code changes;
  • easy connection of GitHub repositories;
  • not only the web version, but also mobile apps on Android and iOS;
  • standard dev tools: linters, debuggers, etc.;
  • the possibility of collaborative development;
  • CPU, RAM, and disk usage monitoring;
  • training courses on programming languages within the editor;
  • import projects from Glitch;
  • easy hosting and deployment of applications.

Disadvantages:

  • free plan has a significant limitation on the memory used and is designed more for testing the product.

goormIDE

Website: https://ide.goorm.io/

Slogan: Every day, users around the world implement ideas here. Share and collaborate with project members in real time.

Description: goormIDE uses the concept of containers: depending on the selected plan the amount of memory and data resources available to the project environment changes. Other projects also use the concept of containers, but here it is positioned explicitly.

The container selection panel in goormIDE
Code in the running container, with the load monitor panel open at the bottom

Features:

  • preconfigured project images (Imagepacks) to start a new service using ready development patterns;
  • ready-made templates with settings for 28 development languages;
  • memory and network resources monitoring, reporting and event logging;
  • setting permissions for each team member role;
  • if the team grows and likes the solution, you can use it in an enterprise-version format;
  • there is a free version.

Disadvantages:

  • although compared to the closest competitor (Replit) provides more available computing resources at the prime rate, but less of the features themselves and various functions that facilitate development;
  • at the time of writing, the main support was based on Node.js modules.

CodePen

Website: https://codepen.io/

Slogan: The best place to build, test, and discover front-end code.

Description. As the tagline suggests, the main focus of CodePen is frontend development, that is, creating an application interface. It's a great option if you need to test interface design behavior or create a lightweight application without connecting to databases.

The Vue project opened in CodePen. The top three tabs correspond to the three main components of the web application: HTML, CSS, and JS. Below that, the page view is generated, and at the very bottom there is easy access to the console and additional controls‌ ‌

Features:

  • real-time preview: when we change any part of the code, the service immediately reads the changes and updates the preview page;
  • there is a collaborative development mode;
  • assets can be stored directly in CodePen;
  • there are additional settings for each frontend element. For example, for CSS you can specify the preprocessors used;
  • you can make your own variants on the basis of the blanks of the projects;
  • the result of the work can be packaged in a component that can be saved locally;
  • saving your favorite sample projects into a collection;
  • CodePen profile can be used as a frontend developer portfolio.

Disadvantages:

  • The niche of the product is limited exclusively to web applications, and even more narrowly to just the frontend component.

Gitpod

Website: https://www.gitpod.io/

Slogan: Spin up fresh, automated dev environments for each task, in the cloud, in seconds.

Description. Gitpod allows to work with code in an environment and presentation that is practically no different from the classic IDEs. In fact, it is a complete IDE in a browser: developers do not need additional time to master the tool.

The application opened in Gitpod. If it were not for the browser tab and the Gitpod label, the application would be indistinguishable from VS Code, which was listed as the interface

Features:

  • quick connection of the Git environment;
  • support for popular programming languages with a preconfigured environment;
  • an access URL is created for each session;
  • running several workspaces in parallel with different contexts;
  • under the hood of Linux containers, all file system features are available, one system can be used in parallel for development and deployment;
  • workspaces support collaborative work;
  • built-in continuous integration server;
  • the interface is adapted for different devices;
  • someone can use their own cloud infrastructure.

Disadvantages:

  • the basic versions have a limited number of hours per month available and there is a timeout limit: after N minutes of inactivity the application goes to sleep mode;
  • only VSCode, Vim and in beta version JetBrains products are supported so far.

Netlify

Website: https://www.netlify.com/

Slogan: The fastest way to combine your favorite tools and APIs to build the fastest sites, stores, and apps for the web.

Description. Not all online IDEs provide convenient capabilities for project deployment. For this task, somebody can use Netlify, a web development platform that helps small teams automate the tools of testing, building and hosting applications and sites. All you need to do is plug in your project's Git repository.

Project deployment panel on Netlify. After connecting the repository from GitHub, the service deploys the application on its own server and generates a link to the project, which can be used just like any URL.

Benefits:

  • the service takes care of backend configuration, deployment and hosting of applications with the provision of a domain;
  • it is easy to connect the git repository;
  • for experienced developers, there is an API for building management and integration with professional tools;
  • automatically add an SSL certificate to use HTTPS;
  • the premium tariff has a service that provides customers with their own CDN, a technology that allows end users to speed up downloading the site.

Disadvantages:

  • have to use third-party products to edit the code.

Conclusion

Let's summarize our review of tools for online development:

  • for those who are just getting into developing web applications with code, the easiest option is CodePen – write CSS, HTML, and JavaScript and see the result on the screen;
  • for those who need a more complex web application structure, but don't want to stray too far from the JavaScript world, Glitch is the way to go. The service has support for Node.js and simple databases;
  • JavaScript alone is not enough for large projects. The cloud editors Replit and GitPod support most popular languages. Replit will be more comfortable for beginners, especially since it has educational courses built in as well. Gitpod – for experienced developers who are used to classic IDEs;
  • to quickly deploy and show a finished application from the git repository, use Netlify.

Cloud-based development environments increase the variability of interaction with colleagues: you can explore and write software code on any convenient device that has a browser.

Cloud environments are also a great help to those who come into development through . NoCode. Platforms allow you to get into coding training without the effort of setting up an environment. You can just take the right template and play with the code, learning how to program hands-on.