An Inside Look at What GitLab’s Web IDE Offers Developers
Gitlab is reinventing its Web IDE to better support remote development in cloud-based environments.
The new Web IDE became available in beta for everyone last month and is already enabled by default on GitLab.com. It has received positive, important feedback less than a month after its release, said Eric Schurter, principal product manager for Create at GitLab.
“One of the reasons we chose an open beta approach is that we wanted the community to help us understand which features are most important to address immediately,” Schurter told The New Stack. “We’ve already received incredibly valuable feedback and have implemented some improvements.”
New Features Already Planned
Based on user feedback, Gitlab plans to iterate on the committing and code review experiences, and add some more significant features, such as being able to install and run third-party extensions in the Web IDE and to search across an entire project.
The previous Web IDE was based on the open source Monaco editor, but didn’t compile code and wasn’t customizable to a developer’s own workflow, GitLab said in announcing the beta. The new web IDE is built on the Visual Studio Open Source project and designed to meet developers where they are, Schurter said.
“Visual Studio Code is one of the most popular IDEs out there and bringing a familiar experience to the browser, right inside the GitLab UI, means developers can be more productive and more confident making changes, without taking the time to switch contexts in their local development environment,” he said.
The Web IDE also builds on what VS Code offers, adding (for example) custom extensions that handle tracking changes to the file system, committing those changes to the repository using the GitLab API, and establishing a connection to a remote development environment, he told The New Stack.
“We’re excited to leverage the benefits of frequent upstream contributions, contribute back to the project whenever possible, and implement GitLab-specific functionality as needed,” he said.
More Cloud Development Support in IDE
Cloud development — or as GitLab terms it, remote development — is a key focus for the beta Web IDE. Developers spend hours managing and updating their local dependencies or re-installing package managers to troubleshoot conflicts, Schurter said. Larger teams can spend days, or even sometimes weeks, onboarding new developers to a project, he added.
“By defining a stable, reproducible development environment in code, developers will be able to create ephemeral instances of these environments in the cloud and be ready to contribute from the Web IDE or their local IDE within minutes,” he said. “There are other offerings with similar functionality, but the real benefit will be having it all contained and managed within GitLab’s single DevSecOps platform.”
GitLab team members have been using the beta Web IDE to update the GitLab handbook, said Michael Friedrich, senior developer evangelist at GitLab.
“I’m excited about the direction with remote development to ensure that everyone can contribute,” Friedrich said. “This will solve the limitations with local hardware and provisioning the development environment, and make teams and open source contributors more efficient.”
The Developer Experience
He provided an overview of the developer experience, saying the Web IDE is integrated into the GitLab DevSecOps platform and can be accessed directly from common workflows: Start a new project, edit an existing file, or open the IDE from a merge request to address review feedback.
“The Web IDE file explorer provides access to all files in the repository to make changes, with intelligent auto-complete suggestions and syntax highlighting,” he said. “Once the changes are committed to a new branch, a new merge request can be created. The merge request will trigger CI/CD pipelines, security scans, review app deployments, and observability for fast feedback in the DevSecOps lifecycle.”
Markdown preview comes with it, which can help with documentation, he added.
Frontend and web developers should know that they quickly can make changes to the web app source code and deploy them using a merge request, with feedback in review apps, or they can use continuous delivery with production changes, Friedrich said. The CI/CD pipelines run automatically after persisting the changes in the Web IDE. Developers can start a live preview with a development web server from the terminal when remote development environments are available with on-demand cloud development environments, he added.
Features for Veteran and New Developers
Advanced users can take advantage of the extensibility of the Web IDE, Friedrich said, adding that in the future, users will be able to install VS Code extensions into the Web IDE for a more customizable experience.
Another planned feature that Friedrich said will benefit developers and DevOps engineers: The GitLab workflow extension for VS Code natively in the browser with direct CI/CD pipeline feedback. That said, the IDE’s lightweight approach and language syntax highlighting, file tree access, and search makes it a great choice for beginners, according to Friedrich. Indeed, Gitlab had the non-developer in mind when developing the new IDE, Schurter said.
“We’re interested in making this developer experience more accessible to non-developers,” Schurter said. “By having the Web IDE available to everyone, at all times, with no installation or configuration necessary, we hope to make it easier for everyone to contribute.”
