In 2011, 50-year-old Eric Gamma jumped from IBM to Microsoft.


That year, I happened to be at IBM, and it was IBM's Centennial Celebration. I was very disappointed to see this news. Such a big bull, the author of "Design Patterns", the author of JUnit, the architect of Eclipse JDT, and the benchmark in the programmer world. It's a shame that IBM didn't keep him.


picture


At that time, Eclipse was in the limelight, IDEA was not as popular as it is now, and Eric Gamma suddenly quit, which is quite puzzling.


Later, I learned that he joined the Visual Studio team and was engaged in online developer tooling, which is to allow programmers to write code in the browser.


This time, 50-year-old Eric Gamma is equivalent to abandoning all previous achievements and honors and starting a new business.



1
Start a business


Many people may not know that Eric Gamma has always been far from the center of IT in the United States, in Zurich , Switzerland , leading a small but powerful team.


picture

(picturesque Zurich)


His small team is about to face the biggest question: what is our product? 

If there is no output, where to go for further investment?

Capital is so realistic, Eric Gamma, no matter how good you are, if you don't talk about products, you can't get along.

Their first product was Monaco Editor, a web version of the editor.

This editor utilizes HTML5 technology, supports syntax highlighting, and intelligent prompts.

Eric Gamma also made an important decision: not to use any UI Framework, as close as possible to the lowest level of the DOM.


picture

Because he believes that performance is very important, and it is even more important to have complete control over his own destiny. 

As a result, Monaco Editor has been developed from scratch, line by line.

It's all over again, um, a great man is a great man. 

For project names, foreigners seem to like to use place names, such as Monaco (Monaco), Jakarta (Jakarta), Java (Java). : Tusconi.

If anyone knows why, please leave a comment below. 

When the product comes out, it is natural to find customers.

Monaco's first customer was Microsoft's cloud Azure, which has since been embedded in a variety of products.

It can be said that there is no problem for this startup company to survive, and the next step is how to develop.


2
encounter waterloo

The first battle was won, and the victory overwhelmed the team's head: why not make it a Web IDE? Move all the content of daily development into the browser. 

So, they transformed Monaco Editor into Monaco Workbench , and the change of a word suddenly became taller.

They set up a local server, started eating their own dog food, and used Monaco Workbench to develop Monaco Workbench. 


picture

Monaco is written in JavaScript, and JavaScript is a language designed in a hurry, and some of these features can easily drive people crazy when the codebase grows.

Even if Erich Gamma's team was very good at programming, they encountered one of the ultimate problems of dynamic languages: dynamic momentary, refactoring crematorium.

Fortunately, Anders, another great god at Microsoft, created a language called TypeScript that perfectly solves this problem.

(For Anders' story, see " A Man Who Feeds Four Generations of Programmers ")


picture

As you can see from this picture, Monaco isn't doing it all over again, it's adopting TypeScript incrementally.

In 2013, they released Visual Studio Online Monaco (the name is too long), with code browsing, integration with Git, search code and other functions, the interface is very similar to the later VS Code. 


picture

The interface looks cool, but the harsh reality is that this product only has 3,000 monthly active users .

For a giant like Microsoft, the number of product users is in the hundreds of millions, which is really embarrassing.

Online IDE, such a product idea in 2013 may be too far ahead.

An interesting thing developed in between, the kingdom of Monaco wrote a letter saying they didn't like the name of the product (with their country name in it), and then Erich Gamma they had to add a quote "Visual Studio Online" Monaco”


picture

Isn't it strange why the name Monaco must be put into a product for programmers? Can't it be called Visual Studio Online?


3
turning point

Erich Gamma's team faced a classic startup challenge: how to get ten-fold, hundred-fold user growth?

Where do you get users from? 

Is it to continue to spend money to promote in the programmer community, or to move in other directions?

At this time, the environment has changed. The new CEO Nadella came to power, and Microsoft began to embrace open source. In order to attract more programmers, Microsoft's products must run on Windows and become cross-platform.


picture

Erich Gamma saw an opportunity and also discovered a new user group: programmers born for web development.

This group will use many languages, many development tools, and many different runtime environments in development, and naturally have cross-platform requirements .

But do web programmers prefer Editor or IDE? 

Erich Gamma decided to go for the middle part.


picture

The web version is not used, so develop a desktop version, but it is too expensive to develop from scratch. 

Fortunately, there was a technology called Electron that allowed JavaScript to run on the desktop by using Node.js (as the backend) and Chromium's rendering engine (as the frontend). 


picture

Wrapped in Electron, the Visual Studio Online "Monaco" Web Workbench is transformed into a desktop "IDE" that is cross-platform.

In May 2015, VS Code was released (finally no longer has a place name), and the team made a cool Demo: debugging .NET programs on Linux, which suddenly caused a sensation.

VS Code has since entered the fast lane of development. 

4
Innovation wins

If we stop here, VS Code is a better editor at best.

If you want to capture the hearts and minds of programmers, it is impossible not to come up with some dry goods.

1. Open source

The voice of the masses is very high, and Microsoft and the Erich Gamma team also follow the trend and open source VS Code.

Before putting it on GitHub, the team carefully reviewed the code to get it clean.

No matter who they are, they are worried that their code will be sprayed. 

2. Extension

After everyone tried VS Code, the biggest suggestion was: to support extensions and plug-ins.

Isn't that what Erich Gamma is good at! He's been doing extensions at Eclipse for over 10 years!

But Erich knows very well that extensions are good things, but they can also hurt you and slow down your IDE badly.

Having learned the hard way before, the team decided that extensions should run in a separate process (reminds you of Chrome?)

The VS Code core interacts with the extension via RPC so that even if the extension crashes, the VS Code core will not be affected.


picture

3. LSP

Web development usually uses multiple languages, with JavaScript for the front-end, Java for the back-end, and maybe some scripting in Python.

With so many languages, how do you support intellisense for them all in one editor?

E.g:

The user clicks on a function name and clicks "Go to Definition", which should jump to the function definition.

When the user mouses over a class name, the associated definition and documentation should be displayed.

......

Erich Gamma once again exerted his master-level abstraction ability, abstracting the most commonly used operations of users in editing, such as opening files, editing documents, Goto Definition, etc., and defining a set of protocols: LSP (Language Server Protocol).

VS Code does not need to understand the characteristics of the language, does not need to consider the abstract syntax tree, very lightweight.

Programming language, Java or Python, regardless of IDE, as long as there is a corresponding Language Server that implements this protocol, you can interact with VS Code.


picture

picture

The LSP protocol has achieved unprecedented success in just a few years, and now there are 100 implementations from Microsoft and the community, covering basically all mainstream programming languages.

4. VS Code Remote

VS Code Remote allows programmers to open a VS Code workspace in a remote environment (such as a virtual machine, container), and then use the local VS Code to connect to work.


picture

With the blessing of these innovative features, VS Code quickly conquered the city and began to develop explosively, becoming an essential artifact for developers.

5
Return to the original intention

Don't forget the original goal of Erich Gamma: online developer tooling, let programmers write code in the browser.

After hard work, we can finally return to the original intention: VS Code in the browser


picture

Due to the good architecture of VS Code, it is easier to migrate to the Web, and the main change is the UI layer.

It used to rely on Electron for UI, but now it is turned to the Web, and the code needs to be refactored again to make abstractions.

For example, the dialog box that originally had Electron now needs to abstract the Dialog and give the realization of the HTML Dialog.

However, will programmers really adapt to pure Web editors and program in browsers? You can discuss in the message area. 

Here are some statistics, you can take a look, the monthly active users reached 14 million, 28k plugins, LSP Server has 138.


picture

Especially the 100,000 issue is particularly dazzling and shocking. A good product is really made by continuous polishing.

Ten years later, a complete community has formed, and 60-year-old Erich Gamma has a successful business!


6
Summarize

After reading this history, you may think that Erich Gamma is too good, he can do anything.

In fact, this is not the case. Before he left IBM, he once worked on a project called Jazz . Jazz tried to move team collaboration, especially the process of agile software development, into development tools such as IDE, and seamlessly integrate with code, but in addition to People inside IBM probably don't know much about Jazz, and this project did not make much waves in the industry.

If you want to sum up, it is the old saying: Luck is always given to those who are strong and ready. 

The transformation of TypeScript, Electron, and Microsoft seems to be an important help and luck for VS Code, but without the earliest Monaco Editor, without the courage of Erich Gamma to quickly transform, and without a series of follow-up innovations, VS Code would not be today.


References:
Most of the content and images in this article are from Erich Gamma's speech: " VS Code an Overnight Success… 10 years in the making"
https://www.youtube.com/watch?v=hilznKQij7A


(Finish)


More exciting, all in the code farmer turn over


picture

picture