The Journey of Visual Studio Code Erich Gamma Envision new paradigms - - PowerPoint PPT Presentation

▶
the journey of visual studio code
SMART_READER_LITE
LIVE PREVIEW

The Journey of Visual Studio Code Erich Gamma Envision new paradigms - - PowerPoint PPT Presentation

Apr 01, 2023 137 likes •618 views

The Journey of Visual Studio Code Erich Gamma Envision new paradigms for online developer tooling that will be as successful as the IDE has been for the desktop 2012 2011 Eat your own dogfood h"p 2011 2012 2012 2013 Meanwhile Microso;

slide-1
SLIDE 1

The Journey of Visual Studio Code

Erich Gamma

slide-2
SLIDE 2

Envision new paradigms for online developer tooling that will be as successful as the IDE has been for the desktop

slide-3
SLIDE 3

2012

slide-4
SLIDE 4

2011

slide-5
SLIDE 5

Eat your own dogfood

h"p

2011

slide-6
SLIDE 6

2012

slide-7
SLIDE 7

2012

slide-8
SLIDE 8

2013

slide-9
SLIDE 9

Meanwhile Microso; Changes

Run on Windows Run everywhere Edit in Visual Studio Use your favorite editor Black box compilers Open Language Service APIs Proprietary Open Source

slide-10
SLIDE 10
slide-11
SLIDE 11

Hacker News: Microso; “Hit List”

h@ps://hn.algolia.com/?query=MicrosoH

slide-12
SLIDE 12

Pivot

  • r

Persevere?

slide-13
SLIDE 13

Visual Studio Code

A tool that combines the simplicity of a code editor with what developers need for the core code-build-debug-commit cycle

slide-14
SLIDE 14

editor IDE

lightweight/fast keyboard centered file/folders many languages many workflows project systems code understanding debug integrated build File>New, wizards designers ALM integraVon plaWorm tools ... lightweight/fast file/folders with project context many languages keyboard centered code understanding debug task running

slide-15
SLIDE 15
slide-16
SLIDE 16
slide-17
SLIDE 17
slide-18
SLIDE 18

Inside Visual Studio Code – OSS in AcGon

Electron, Node TypeScript Monaco Editor

slide-19
SLIDE 19
slide-20
SLIDE 20

It’s fun to program in JavaScript

slide-21
SLIDE 21

Compensating patterns for classes, modules and namespaces. Refactoring JavaScript code is difficult! Code becomes read only Defining and documentation of APIs is difficult. Type information in comments are not checked

slide-22
SLIDE 22

TypeScript

OpVonal staVc types – be@er tooling: IntelliSense, Refactoring Be@er APIs docs More safety

delete this.markers[range.statMarkerId]; // startMarkerId

Use features from the future (ES6, ES7) today

slide-23
SLIDE 23

Growing the Code

slide-24
SLIDE 24

VS Code Preview – April 2015

slide-25
SLIDE 25

Extensions

slide-26
SLIDE 26

Eclipse

Everything is…

... a plugin with contribuVons … implemented in Java … runs in a single shell/window

slide-27
SLIDE 27

Eclipse Plug-ins

slide-28
SLIDE 28

Extension isolaGon

Controlled extensibility JavaScript or TypeScript Reuse node modules API: vscode.d.ts Extension descripVon: package.json Main Process IPC Extension Host Extension Host RP C Extension Host Node Renderer process

slide-29
SLIDE 29

Language API

slide-30
SLIDE 30

Language API – Providers

Editor registerHoverProvider() … Provider provideHover() …

slide-31
SLIDE 31

DEMO: Extension Development

slide-32
SLIDE 32

Extensions, Extensions, Extensions

1000+ extensions in the marketplace

slide-33
SLIDE 33

Language/Debug services

RP C Extension Host Node Renderer process

JSON

PowerShell OmniSharp Server Go CLI Tools Jedi vs racer javac TS/JS Server (*) code language protocol

slide-34
SLIDE 34

Tool Protocols

Request Response definiFon Returns the file locaVon of the symbol at the given file locaVon references Returns the file locaVons that reference the symbol at the given file locaVon compleFons Returns possible compleVons at a given file locaVon symbolDetails Return a type informaVon and documentaVon for the symbol at a given file locaVon format Returns edit instrucVons to format a file

  • utline

Returns list of navigaVon targets for a parVcular file

  • pen

NoVfies the server that the editor host has opened a file close NoVfies the server that a previously opened file is now closed change NoVfies the server that a range of a file has changed Request launch Launch a debugee setBreakpoints Sets mulVple break points conFnue, next, stepIn, stepOut ExecuVon control stackTrace Returns the stack trace from the current execuVon state variables Returns the children of all variables given a variable reference Event stopped The execuVon of the debugee has stopped exited The debugee has terminated

slide-35
SLIDE 35

DEMO: Sublime

slide-36
SLIDE 36

November 2015: VS Code goes OSS

slide-37
SLIDE 37

Development Team Community

Transparency Feedback

slide-38
SLIDE 38

OSS - Transparency

slide-39
SLIDE 39

Feedback Channels

QuesVons: Stack Overflow Issues/Pull Requests: GitHub Feature VoVng: User Voice SenVment: Twi"er MSFT FTEs use to same channels

slide-40
SLIDE 40

Feedback Example - Accessibility

CollaboraVon with GitHub on Electron accessibility

h@ps://github.com/MicrosoH/vscode/issues/2108

slide-41
SLIDE 41

More Feedback: Development Channels Daily updates Stability

slide-42
SLIDE 42
slide-43
SLIDE 43

VS Code OSS vs. VS Code Distro

VS Code OSS

Everybody can build from github repo Not branded MIT License Supported by Community

VS Code Distro

Builds on VS Code MS branded (logo, telemetry, gallery) MS Standard License Supported by MS

slide-44
SLIDE 44

Easy for Developers

VS Code consumes 142 OSS components, 90+% are node modules

Variety of licenses, someVmes none We track, review each license, C/R statements for every dependency

Needs tooling to generate and maintain third party noVces

slide-45
SLIDE 45

Easy for Contributors: CLA BOT

slide-46
SLIDE 46

Summary

Run on Windows Run everywhere Edit in Visual Studio Use your favorite editor Black box compilers Open Language Service APIs Proprietary Open Source

slide-47
SLIDE 47

Thank you!

@erichgamma @code