Hands-On Gitpod.io Online IDE
Introduction
Over the last fifteen years as a software engineer, I have rotated through multiple IDEs (Integrated Development Environments). As a developer, I have mainly used Java programming in the Eclipse IDE. I never imagined using any other IDE, but as they say “never say never”, especially if you work in STEM or an engineering field. With the rise in popularity of VS Code in the developer community, I decided to make the switch from Eclipse to VS Code. I have been impressed with the efficiency of working in VS Code and all the extensions available. I can not imagine going back to staring at the “Eclipse” loading splash screen, as VS Code has provided a new level proficiency in my coding.
Why Gitpod.io?
With schools closing, in light of the COVID-19 lockdown, I decided this would be the perfect time to start teaching my middle school son and his friends some basic python programming. I was not sure what kind of laptop each individual child had access to so I did not ask them to install any type of IDE. My thought process was that even a child with a simple Chrome book can use an online code editor. Initially, the group started to build and test code on the online editor website repl.it. To teach and organize their code, I created a common Github repo, with each child as a collaborator. This helped the group to maintain source code and include related documentation in the Wiki. In order to keep things simple, I created a folder for each child on the master branch to check in on their code as they completed simple programming challenges.
Soon I realized that working with repl.it was causing a frequent back and forth between Github. That’s when I read an article about Gitpod.io and how it integrates with Github which spiked my interest as I was looking for a simple solution that would be flexible for all the children. I noticed that the Gitpod Online IDE is similar to VS Code and it’s supporting extensions. Gitpod has concept of “workspaces”, which can easily be created from a Github repo. After a deep dive into research and trying out a few examples, I decided to switch the group to Gitpod to build and test. I asked each member to create a Gitpod account and give write permissions to common Github repo. I had to teach them how to navigate IDE and simple commands to pull and push code to Github from the workspace terminal. Within a couple of weeks the group started efficiently coding in Gitpod. In the sections below, I will walk you through the architecture and point to some samples to get started with in Gitpod. I can guarantee that for any experienced coders, like myself, you will be impressed with the efficiency and ease of Gitpod.io.
Architecture
The Gitpod IDE is open-source, based on OSS Eclipse Theia. Gitpod workspaces leverage OSS technologies, like Docker and Kubernetes. Think of a workspace as a fully integrated development environment in the cloud with a code editor, debugger, terminal, and so on. A workspace is, essentially, a docker image deployed as a Kubernetes pod. So essentially you can create and destroy a workspace on the fly. As developers, our ability to run multiple workspaces at the same time is powerful. Think of times as a developer you to had stash your changes, switch a branch to debug some code. No more, you can have a separate workspace for each branch and even a workspace for a Pull Request.
Gitpod provides a standard image “workspace-full”, which has support for most of the popular languages like Java, Python, Go, etc. You can see the docker file of the standard image here. This is the default image GitPod uses when you start a new workspace. You can include a “.gitpod.yml” file in the root of your Github repo to override the default image and workspace configuration. This file allows you to run any custom scripts or commands when the workspace starts up. Here is some more detailed information about: “.gitpod.yml”
A workspace has a life-cycle, where you can start, stop or delete all in one place. Any code changes done in the workspace are saved and you can push them to Github. If you are familiar to working with VS Code, things are very much the same for you in this new workspace. Gitpod allows you to share a workspace with other developers, which is beneficial for remote teams.
The easiest way to learn and understand Gitpod is to start a new workspace with some of the sample Gitpod.io applications and poke around the IDE. I would recommend trying some code changes in the IDE, as well as building and running them. For the samples I have provided below, you will need to create a Gitpod account, which can easily be created and linked with a prior Github account. First, we will start with a very simple Ngnix web server application. Then, we will go on to the Django Python web application. Lastly, we will look at the classic Java Spring application for a “Pet Clinic”. Make sure to review “.gitpod.yml” for each application.
Sample 1: Ngnix Web Server Application
This application starts the Ngnix server on startup. You can start the workspace by clicking the link below:
https://gitpod.io/#https://github.com/gitpod-io/nginx-example
Sample 2: Django-Python Web Application
This application starts the Django-Python (Local Library) server on startup. You can start the workspace by clicking the link below:
https://gitpod.io/#https://github.com/gitpod-io/django-locallibrary-tutorial
Sample 3: Java Spring Web Application
This application starts the Java Spring (Pet Clinic) server on startup. You can start the workspace by clicking the link below:
https://gitpod.io/#https://github.com/gitpod-io/spring-petclinic
Final Thoughts
Gitpod.io demonstrates the power of OSS technologies like Docker and Kubernetes. The ability to code, build, run, and debug a Java application like “Pet Clinic” in a browser is certainly a paradigm shift. This new IDE allows people to code and collaborate anytime and anywhere in the world. There is no longer a need for developers to carry around high configuration laptops. Just connect a simple phone to a monitor and keyboard, and you are ready to code!
Happy Coding!
Disclaimer : This is a personal blog. The opinions expressed here represent my own and not those of my current or any previous employers.
