5 Top Cloud IDEs for JavaScript Developers
Top 5 JavaScript IDEs you should know in 2020
Developers have traditionally been writing software using text editors on local machines but recently, habits have started to change. A rise in the popularity of cloud-based services has led to an increase in cloud-based IDEs too. In this post, we cover some of the most popular IDEs for JavaScript developers.
The Cloud IDEs we explore in this post are suited for JavaScript developers with a range of requirements. Are you looking for something that allows you to selectively share code snippets with peers? Would you prefer the ability to embed code snippets into blog posts or documentation that you are writing? Are you looking for an option that allows you to add text within the IDE itself so that you can explain a concept within the IDE? Do you need an IDE for your complete development process?
IDEs are especially good for sharing and collaborating on code. If that's what you’re looking for, you might want to consider tools like Bit (Github). Bit helps you isolate code and share it on bit.dev so others may find it, use it and even collaborate on it. This way, you can have your cake and eat it, too. Develop code components on your local machine and easily export them to the cloud, for cross-repo collaboration.
1. Codetable by HackerEarth
Codetable by HackerEarth is a simple IDE with basic features, ideal for sharing code snippets. A large number of programming languages are available to you to test your code on, and you can remotely execute your code snippets through HackerEarth’s servers too. HackerEarth primarily caters to hackathons conducted by companies to hire new developers, and Codetable uses the same engine to execute the code snippets.
Once you have written the program, it is sent to the server to be executed. When the execution is complete, the output is shown along with the time taken to execute the code and the memory used. Note that these are parameters to judge your program in a hackathon. As an added feature, you are able to specify custom input to the program too.
While Codetable has only basic features, it is a good choice for beginners who do not wish to get distracted by a number of features that they can’t comprehend from the start.
2. JSFiddle
JSFiddle is one of the earliest IDEs that has generated from the idea of HTML, CSS and JavaScript “playgrounds”. JSFiddle served as an inspiration for many competitors. This IDE allows you to write code in these front end languages, enabling them to interact with each other and render the results in real-time. A code snippet is called a “fiddle” on the tool.
The primary functions of a code playground such as JSFiddle are testing your code real-time, sharing and collaboration with your peers. Your peers can fork your work, modify it and re-share it too. Additionally, you can embed your code snippet, along with the real-time preview on an external website like a blog or documentation for demonstration purposes. Further, you can simulate AJAX requests through JSFiddle too.
JSFiddle gives you scaffolding code in the form of boilerplates for popular JS libraries jQuery, Vue and React. A few unique features of JSFiddle include adding code to StackOverflow and bug reporting through GitHub Issues.
3. CodePen
Though CodePen started out as an HTML, CSS, JavaScript code playground, it has evolved over the years to provide many more features. It serves as an online social development tool for front-end developers. Just like JSFiddle, it fulfills the basic functionality that you expect from a cloud-based IDE — testing, sharing, and collaboration of code.
The basic features of adding HTML, CSS and JavaScript code, which interact with each other remain the same. You can save the “pen”, share it with your peers and even embed in external websites.
Creating an account to manage all your code is free on CodePen, whereas CodePen Pro starts at $8/month, billed annually. The free account gives you access to all the basic features of CodePen. CodePen Pro removes ads from CodePen, and adds features like creating private Pens, access to an asset hosting space, and getting higher on the popularity algorithm. If you need an end to end JavaScript IDE, CodePen Pro is a strong option to opt for. CodePen introduced its new feature, Projects in 2017 which allow you to manage full front end projects from within the site.
If you are a student, check if your school is enrolled in the CodePen for Education feature, which contains a few Pro features for you to explore.
4. Observable
Observable is a JavaScript cloud-based IDE, created by Mike Bostock, who also developer D3.js. It is inspired by Jupyter, a comparable web-based option to create Python notebooks. Observable notebooks are JavaScript notebooks on the cloud, which contain a mix of Markdown and JavaScript code.
To try out the features of Observable, you can simply try out the demo notebook before creating an account. The addition of Markdown snippets within the code enables you to a lot of new possibilities. You can progressively explain a concept by adding features to blocks of code within the same notebook. You can also use it as documentation for your software. When you create a free account on Observable, you can create new notebooks, save changes and share with your peers.
Teams at Observable is a paid feature starting $9/month for each editor, which unlocks a whole set of new possibilities for use in a team environment. The multiplayer editing feature allows multiple team members to work on the same notebook in real time. Additionally, you will also be able to query data sources in real time with the Live Data feature.
5. Google Cloud Shell
Google Cloud Shell provides you with a development setup on the cloud. It gives you access to the terminal on the browser, which is fully authenticated with your Google account. The Cloud Shell comes with popular tools like MySQL client, Docker, and Kubernetes by default. Additionally, it is developer ready with back end technologies like Node.js, Python, and PHP ready for you to start development on. You are given 5 GB of storage in your home directory. The Google Cloud Shell is free for Google Cloud Platform customers. Here is the detailed pricing of Google Cloud.
If you are looking for full access to a powerful virtual machine, with the option of portability of accessing it from anywhere, Google Cloud Shell is the perfect platform for you. It should appeal to you and take care of your development requirements if you own a Chromebook.
You can fire up the terminal from within the browser, and run normal unix commands within it. While terminal-based editors like VIM and Emacs are readily available, Google also provides a GUI based text editor from within the browser by splitting the screen if you are not comfortable with terminal based editors. When you use the editor, you can also see a graphical representation of the file system on the left menu, which can be used for uploading and downloading files.
If you are looking for an alternative to your local development machine, Google Cloud Shell seems to have the right ingredients for you to make the transition.
Which IDE should you choose: Final Thoughts
Let us revisit the questions that we posed at the start of this roundup of the best JavaScript IDEs.
If you would like to execute small code snippets and share the code and output with your peers, you should give Codetable by HackerEarth a try (or, as mentioned earlier, write your code on your local machine and share it with Bit).
Do you want the ability to embed the code in your posts, and collaborate with others too? Make sure you go over JSFiddle or CodePen.
Choose Observable if you would like the unique ability to mix markdown with your code snippets — this is ideal for documentation or blog posts.
Do you want a solution for your team to work in sync? Make sure you go through the features of Teams at Observable or the Team Plans of CodePen Pro.
If you want an end to end solution for an IDE on the cloud, you should try out CodePen Pro or Google Cloud Shell.
