Building an App Using JS/TypeScript, Node, Electron & 100 OSS Components

Erich Gamma

Recorded at GOTO 2016

Get notified about Erich Gamma

Sign up to a email when Erich Gamma publishes a new video

good morning
so it's true I work on tools for many
many years
right so Eclipse and now with your code
and I must say sometimes I had some
depressions while developing tools
because I would rather be a cool full
stack web developer but I still work on
tools but I in this talk I'd like to
show you why I'm still excited about
tools and what was the journey behind
this Visual Studio code so my goal of
today is to not convince you that you
should find his own patterns that you
see a unit my goal of today is that you
use from studio code and you write an
extension for a grind so that's my
hidden evil plan so let's start
so as you're mentioned I changed jobs
five years ago I was a distinguished
engineer at IBM then I told them I go to
Microsoft then it became an extinguished
engineer at my at IBM had four months
break during this four months it was a
one of the greatest times in my life
because I had the time to learn
JavaScript web technology all this stuff
and I thought I knew it all but I was so
glad I had four months time to learn it
right learn JavaScript to really program
it learn the frameworks and so on it was
great so then I finally started
Microsoft and then I got my job
description in mail 2011 and it was very
simple one-liner right and vision new
paradigms were on the developer tooling
that will be as successful as the ideas
being for the desktop easy right so we
started as a small team in Zurich right
so I have kind of a team of 10
developers there you really mixed
Millennials senior old boys it's really
cool so the challenge for us was how how
do we do it right how can we succeed in
that the big Microsoft with this
ambitious ambitious vision and what we
said is you want to do it like a
start-up that means whether we build as
a product
every year we want to ship something
okay and that's basically what we did
right we started with think about what
do you want to do in the browser we code
obviously know you want to look at your
source code right in the browser you
want to look at the history of your code
you want to compare thieves and so on
this is one of the first partnerships we
got into rights in Microsoft any
virginal product team is called
partnering which choses you work
together you have trust in each other so
this was kind of Eros to the online
where we kind of have syntax coloring
this thing all computing the browser
right then before that actually it was
maybe also 2012 we started to work with
the typescript team and this in our you
you want to cover in the browser is
playgrounds right a great scenario for
online development you want to
experiment with the language without
having to install anything and the task
a playground was really great for us to
learn about what can you do in a browser
when it comes not only viewing code but
also getting intelligent intelligent
support for working on the code like
intelligence right so this is kind of
the first time we really went deeper we
implemented intelligence which means you
know the code gets analyzed in the
browser you build up an AST in the
the browser there's a big stepping stone
for us because we learned a lot about
how to keep and edit a responsive even
we need to smart stuff right and the
lesson learned here we never run
anything in the UI thread at that point
we used whether Chris heavily write
whenever something goes in the UI we
push it which is long-running we push it
to a web worker so that was a big lesson
from here so next a label on our way to
startup was not a deliverer but we just
said we have to dog food our own stuff
otherwise we'll not be able to flesh it
out so what we started to be used were
editor we built to to develop our own
tooling right this was about six months
into the project which was a great thing
and incredible fun experience right once
you start to use your own stuff you
your own wrinkles you find even it
limitations how much fun it is
threatened you feature which you can use
one hour later right this is the
function you had five years right we
kind of could really use our stuff and
that's why I am so passionate about the
tools because you can have fun as you
develop right because can use your stuff
continuously so the next shipment was
with onedrive that's the scenario a one
adit just code when you have it
replicated online somewhere right so you
have syntax coloring editing and so on
not a lot of deep language services
another interesting product was that we
got involved in worse than the f12
developer tools you're a little bit
scared about that one
because this one was not the typical
browser online development tool scenario
it was really about viewing the source
code in the in the development tools
right and what scared us about that was
they had an implantation in C and C++
which means our web technology was
compared performance wise with native
code which scares a little bit and also
what's Curtis they had very interesting
scenarios right with minified code and
minified javascript code has some brutal
characteristics for text editor right
because they have a very long line and
many of the optimizations you can do
with virtualization when you have a
large text file don't apply when the
lines are very long right because you
cannot virtualize horizontally so in the
end it was a great experience for us
which I would say sets the the starting
point for focusing on efficiency right
we notice whatever we do with our editor
if it runs with web technology it has to
be fast people don't excuse that use web
technology right I'd have no passion
about that nope no passion about that so
in 2013 the next thing then we shipped
was beyond an editor it was a tool that
allowed to edit websites online in a
browser which was at your websites
we call this Visual Studio online Monaco
the nice lesson from here is that we get
users from different platforms like from
Mac or Linux right they come and use the
tool and they started coding in it which
was a great lesson for us but what he
also saw kind of if you want to do hard
code development the browser has also
his wrinkles right have more latency and
when he had the choice between
developing running the two locally and
running in the browser we often went
back to running to locally so this were
kind of there for four years that we
ramped up always in startup fashion
right we always delivered every year and
then what's interesting is Microsoft
started change and this was straight if
since I'm with Maxim since five year and
it was really great to see all the
changes that happen right the change
happened from run on Windows only run
everywhere right
total change then the other thing was
the recognition that not everybody wants
to use Visual Studio right if you want
libraries or frameworks like asp net
then you cannot assume that everybody
wants to use Visual Studio so the
transition was from just focusing on
visual studio focusing on how to enable
devil operas to use the tool they like
they want write on different platforms
then the third change was from moving
away from just having a compiler moving
the compiler in the library and exposing
its own API which enables this in your
assignment for Ike you wanna run for
instance a sharp another platform in
another tool and this open API is
enabled that at the last big step at
Microsoft was a transition from fully
proprietary right whenever you check
some skin with open source it gets
merely checked out the transition to
really fully embracing open source not
only contributing to it but also
consuming it right and that was great
changes that helped us
and the nice thing is if you look at
that that's an example of this whole
transition right that's a SP net
framework and you see kind of the whole
stack is open source on the right and
also it's cross-platform so this leaves
one interesting challenge and that is
how how do you support tools for such a
new platform right and that's exactly
where we decided to pivot right we were
on a trajectory to work on a
browser-based IDE so now what did I
decide at this point given all these
changes and the need for cross-platform
tool editor we decided to pivot from a
browser-based ad to a desktop ID using
still the same technology okay this was
a major thing and the nice thing is also
that this got recognized right if you
used HEC news as the benchmark for open
source recognition then you see that
Macs have got very popular its
announcement on on open source single
net and open source in Visual Studio
code open source in the c-sharp compiler
and interestingly all this opens our
announcement got ranked higher then all
the CEO changes right all the CEO such
and Adele becomes CEO Steve Ballmer to
retire which shows kind of the interest
in Microsoft and Terrence transformation
it's currently undergoing so this I
mentioned that now this was kind of the
book we read at the time and that
inspired us so the question was people
to persevere do we try to invest more
and trust the web based IDE or are we
willing to make a change and decided to
make a change right and the change was
we dare we wanna develop a tool that
runs on the desktop is cross-platform
which web technology gives us and it's
really focusing on the we call this the
inner loop right inner loop is what you
do as a developer day in day out right
you edit you compile your debug you test
focus and you don't really wanna focus
on that so in a way you can say we took
the the core parts of an ID leaving all
hardcore coding what he do 7 by 24 when
you develop as a when you work as a
developer and by now it's all open
source so that's kind of decision we had
right on one hand we had the IDs like
eclipse on the other hand you have
editors like a sublime atom brackets and
what we said we tried to find a sweet
spot between these two areas right I we
haven't forgotten the coolness of
eclipse what you get in intelligence and
refactoring we love that but we haven't
also not forgotten how long it takes to
start these things up how how how much
overhead you have to start something new
right you can't just open a folder you
have to have a project file or workspace
and so on and that was the nice
character of editors right editors are
fast they start up fast keyboard
centered right because that was a big
lesson I never quit my team where we
have really this millennial developers
right they grew up with the web they
grew up it's sublime and you're amazed
how fast they are right because they
know the keyboard it's also editors just
work files and folders low overhead you
just open folder and do laughing and
also they support many languages right
did nothing as ambitious as an IDE that
says well without intelligence
you shouldn't even come to us an editor
they give you coloring maybe for many
languages for the whole whole for the
long tail of languages using phone for
web development but maybe they don't go
always that deep right maybe they go
only deep for some languages which was
an interesting interesting lesson and
yeah my wife is calling she wants to
pick up a car and Timon is not there I'm
sorry about that so that's kind of I
have to remove the phone it will
distract me so on the other Harriet IDE
right they understand the code which is
a cool thing right you can go to
definition you find references you can
debug you can build but also do much
more right to integrate modeling tools
to integrate designers whatever so they
try had this vision everything
run in the same shell which editors
don't have right if the Edit doesn't
know what to do you go to the command
line and that's exactly what we said
what you wanna do we want to find the
best from the editor lightweight fast
keyboard centered but you want to not
forget about the cool thing we had in
Eclipse or in Visual Studio like when it
comes to code understanding or debugging
these are the two two spots right that
he tried to find alternate comes to web
development the the challenge is a
vertically integrated tool which has to
approach for every framework or package
manager build tool you try to integrate
it it's very hard to keep up with the
technology right a web developer they
deal with package managers they deal
with the task runners like gulp grunt
they deal with frameworks bundlers and
so on and it's very clear if you try to
vertically integrate all that it will
always lag behind and also the devil
opposite target they are not interested
in everything integrated they want to
have freedom of choice when it comes to
workflows so I like to show you where we
are at with that and I want to quickly
show you kind of in in so I mean it's um
how easy it is for instance to do
c-sharp development on a Mac including
debugging all this inner loop stick
right so let's go to a show and I what
is it
let's go sorry I thought they forgot the
command line but I have here so I just
to open on the folder right that's he
had a correct is what we love we just
open a folder and in this case you see
the start up this is all web technology
in this case it's a folder which
generated some c-sharp program which has
some description approach a JSON file
which we understand right so we wireless
it goes out to the network let's do that
I'll be smart to remember that and I'll
well anyway let's show you kind of some
programming so the idea is now we make
we give you text files right chasing
files but we make it smart to edit them
so here let's do some stuff here and
let's make give us some space and so
right so it's C sharp on a Mac you see
that so I I get intelligence I get
parameter hints so let's do something
more interesting like do some
refactoring right let's extract this
thing into a new method let's rename the
and you seek an elf it has things like
fun stuff which you didn't have in the
past like we call this Colin's they
totally always tell you how many
references you have you can quickly
navigate to that it's dynamically
updated right when I rename that I get
squiggles I get a light bulb I can fix
that so kind of the functionality you
expect from smart coding right so you
want to be productive but we didn't want
to end like that we also say in the
editor you you make mistakes I want to
debug so you also add a debugging
support so let's do that
I set up a launch configuration debug
the thing it gets compiled and if the
demo gods are with me yeah I thought I
disabled that it's okay
oh I didn't say the very point sorry
doesn't like me too much right now okay
it already happened bottom line is we
support debugging right I don't wanna if
I wouldn't remember the command to
scaffold it from scratch my life would
have been easier
but let's abstract from that so you see
basically that's the idea right you
aren't an editor but the editor has lots
of smarts and the editor really helps
you with what you do 7 by 24 as a
programmer so let's look a little bit
what's behind that right so how do we do
that and you saw in the bottom left we
have this little flame thing and that's
that's the icon off of Omni sharp right
and Omni sharp is a project that got
started to enable these kind of
scenarios it enables you to use C sharp
development with any editor you want and
the trick is what C what Omni shop does
it moves the brains of the language into
a separate server process which is the
only sharp server which you can connect
to from the different editors and this
allows you then if you like sublime
you can use C sharp development from
sublime if you like it in visuals - you
can still do that right we don't take
away the visual from visual studio if
you like it but that's a good example
for how the openness and the choices you
want to give the developers right you
use the tool they want on the platform
they want so that's only sharp now let's
look a closer look what's inside Visual
Studio it's really open source in action
right if you look at what you have
inside it's all open source components
some of them are implemented by
Microsoft but also we stand on the
shoulders of giants right so the whole
shell that allows us to reuse the web
technology on the desktop is electron
right electron is an open source
component from github which is now at
version 1 with a very active community
electron deep uses chromium as the
rendering engine and it uses the node
API to give you access to platform
resources right JavaScript doesn't give
you access to file system and processes
and electron use the node API to give
you that that note not only gives a nice
API classic style for file system and
processes it also opens the door for
using the rich node ecosystem right
which we also wanted so electron node is
kind of the foundation the whole code
base which is today 350,000 lines of
code is implement in typescript we
change that I will talk a little bit
about the evolution and the last
component is the Monaco editor which is
was developed by my team and Valona also
become open-source so electron is web
technology HTML CSS JavaScript it's open
source and it also is cross-platform
right with electron comes some Native
menus if you look this application here
right it looks like a native app because
a menu bar even though it's all web
technology it doesn't look like you're
on in the browser right you basically
let the web technology escape the
browser and get the full power off the
desktop in the docs in the menu bars and
so on which is really cool ok then how
did you develop it so we started five
years ago with a small team the team was
we had some hardcore JavaScript
developers right so and of course we
started all in JavaScript and it was
really fun to start it right JavaScript
develop means you make a change press f5
you see the change you get this feedback
loop right this rapid feedback loop that
makes it so productive right the more
feedback we get the better it is that's
one of the made up patterns in my life
right J unit gives you feedback on how
your code is doing JavaScript gives you
feedback as you make progress but what
you found is right as more as the more
code we wrote the slower we got right it
felt kind of like juggling chainsaws in
particular once you get to 100,000 lines
of code it's getting more more
challenging to work with this code base
and also kind of JavaScript has some
quirks right
the good thing today is ACMA script six
is really a big step forward when it
comes with JavaScript but this delta
between javascript the definitive guide
on the left and javascript the good
parts is plenty pretty large right so
that's why we enjoyed it as much as we
enjoy programming javascript we also got
scared right how do we survive this
large project and can maintain it for
years right that was the challenge the
good thing is at the same time maybe
that's the main deport the pains we had
right so the pains we had is at that
point there wasn't a conscript six there
were no modules right you had to invent
that we're using namespace patterns
there were no classes there were no
promises right yet use libraries for
that and if that what scared us the most
is that you cannot refactor your code
right once you have 100,000 lines of
code and you want to rename a function
or improve an API it's just scary
because you cannot find the references
you have no type information right all
the nice thing which modern ideas give
you they are based on having type
information about what's going on
refactoring intelligence and so on so
the what you want to avoid is that our
code becomes read-only which we were
scared about right we had a large code
base we know we don't get it right the
first time you'll have to rewrite it we
get new requirements all the time so
that was really a scary point for us
you're the scary point for us we knew
others won't use our component and if
they want to use our component have to
be from an API but how document the API
how do you do that right you just
maintain some XML file on the side which
is never up to date you do then comments
which also will never get up to date so
it's it's very difficult to document the
describe an API and what date you have
to pass into an API in particular with
JavaScript which often gives you very
fluid api's right
you can optional arguments you can pass
in a function or a string and depending
on that it does something smart how do
you captured and describe that so the
good thing is at the same time as we
started our project the
a new language from from Microsoft
emerge which at that point was called
strata which now is called tab script
and you were on we were on some of the
first adopters of this language which
also means right we had this great
experience that you have a piece of code
and just the compiler barfs and then you
spend hours to find how can you rewrite
the code that the compiler can digest it
but it was really great that it could
work with them from the beginning kind
of to start to use typescript as the
language is really grows it up with us
right it grows it our development and it
closed our code base so what typescript
gives you is an optional static types so
you can if you want and notate your
parameters and variables with types
which opens the door to the tooling we
use to from IDs like intelligence
refactoring and so on since you can
annotate your coded types and you can do
it in a very flexible way right I'm
script has a very interesting type
system which is made to describe this
fluid JavaScript libraries it has
generics it has structural typing doc
typing it has interfaces to describe
structure which really allows you define
api's and the protocols api's for
existing JavaScript code which is
lastly they also give you of course more
safety right once you have optional type
information we type inference which is
on icing but you don't have to type
everything there's a powerful type
inference here in typescript it you get
more safety it finds your spelling with
mistakes and so on so you get just you
feel better and faster once you start to
develop a table script and the last
interesting feature of typescript is it
helps you close the gap between where
the specification is and where the wrong
term environments are right today we
have a conscript equal script six right
but not all except six features are
supported in our runtime environment
browsers or a node but typescript can
download compile Ekman script six code
Ecch Muscat five and give you features
from tomorrow today right that's another
nice fish that we like about tab script
and this basically is the story how we
grew up so LX from my team will give a
talk this afternoon about really how we
grew the co-pays and the challenges we
have faced the only point I want to make
here that V as a team we gradually
adopted typescript right we first
initially only dipped our toes into
using typescript one subsystem we
defined with types but as we grew we
really expanded to use it of typescript
and today we are 100% typescript our
code base which is a 350 or 4 and
thousand lines of code we don't count
anymore because there's so many
processes which I will show you later
what we do architectural either' and so
it was a really great story for us
because we got the large-scale copays
and JavaScript and the fact that we can
maintain it since five years and we
still move forward at fast speed right
we ship monthly when we ship monster new
features shows kind of how powerful that
is so let's talk about one topic I found
interesting because also how it relates
to to eclipse which is extensions right
once we made code available last while a
year ago the number one request for us
was support extensions we tried to get
in the first version but we quickly
noticed this is hard right coming up
with a good API coming up to a good
extension story was just too short we
gave us six months for the preview of
the electron based desktop application
leveraging our web technology so we had
to backup for the for the first preview
one year ago but then we really want to
make it right for the food October so
six months later IV gave us another six
months to come up with the extension
story and the plugin system now
comparing these two eclipses writer
I still love Eclipse right Eclipse was a
great journey right so we had that
division we built a
from the ground up as plugins everything
is a plugin also we thought Java is cool
everything is in planned in Java right
even in you want to write a language
support a language C++ you wrote the
integration in C and Java doesn't make
sense right it hurts somewhat right you
write your you C++ parser in in Java and
you test it out by well hoping to find
someone who uses your stuff implant in
Java Eclipse also at this idea like all
IDs you have this shell centered view
right stuff everything into one shell
which has still the issue no the more
stuff you if you you put in a shell the
slower startup gets the more heavyweight
the thing gets so I'm very proud that
can use my Eclipse plugin slide from the
talk from dosh 5 now 10 years ago maybe
but that's the model right in Eclipse
everything is a plug-in and the plug-in
defines extension points and API which
means the overall API of a Eclipse if
you are an extension writer is the sum
of all API is exposed by the plugins
that's it's pretty challenging than I
have a consistent API if you think about
it right because whatever you implement
API the other thing from eclipse is lazy
activation which is a good thing which
you know if you have thousand things
installed you will not always need these
thousand same things instantiated when
you start so that's why you also we want
to keep that right so we want to keep
the lazy activation but you want to
change the clips model everything is a
plug-in and also extensions run in the
same process as the core Eclipse right
that was that's a profound difference
and that's why we said we want to move
to another model where we isolate
extensions we want to protect our core
so no matter what your extension does
our core is still up and running for an
editor this means you as a user can
always execute safe if
if you have an extension that runs an
endless loop right then for that reason
we departed from the clips model where
you just say Iran extends in the UI we
move to a model where we say we have a
separate extension host that host
extensions right and the extension house
is a container that lost extensions and
communicates with the UI with the render
process processes show here used through
some RPC mechanism
this also means note the existing code
is totally encapsulated right whatever
runs in the render process is almost
opaque to an extension unless we expose
it through the RPC and expose an API for
that so that's kind of the I think the
cool differentiate differentiated from
eclipse which gives us better robustness
and also better startup performance
because the extensions get loaded in a
separate process at the time the UI is
already up and running right so that's
kind of the benefit here so the
extension host is a note process so we
build on the shoulders of node and we
allow that you can reuse note modules
when you write an extension which is
very nice you can implement in
JavaScript or typescript we have an API
that I will show in a second that is
described in typescript in a very fluid
way it's a very convenient API and we
have this meta information like the
plugin XML from Eclipse it's a package
JSON right because XML who doesn't want
who wants to use it anymore
Jason is the format you prefer in the
wetland so that's what we support so
before we go into demo I want to quickly
say what this important part of our API
we want that with code you get deep
language integration right our goal is
to go beyond syntax coloring for for
many many languages so you want enable
that you can write the cool experience
with intellisense go to definition quick
fixes inline references and that's why
we spend lots of time in our API to come
up with abstractions that allow you as a
language provider to
have a cool language experience right
and if you look at our extension
ecosystem our marketplace you find not
only coloring support for many languages
but you really find deep deep language
support for for many languages so how do
we do that
there is a pattern right I tried to
remember how to talk in patterns but
idea is simple we have this provider
pattern that is the editor needs to get
some data from the language in order to
show for instant Ellison's right so what
we have as a pattern is you as an
extender your a Chester a provider
that's then called back later when the
editor needs data from you like to hover
right you register our provider once the
ID when you hover around it will call
you back and tell you give me back an
app our information
right that's the pattern we use for all
kind of language features like
intelligence go to definition
diagnostics and so on so rather than
just talking about that let's look into
that a little bit and let's see where
you are so now I create an extension
from scratch and you see now also that
what we said the combination between
command line and editor right we just
use an open source tool for scaffolding
yeoman generator which is a scaffold
which extend by writing modules and this
creates a lot you create an extension I
can pick which language I want I want to
use tab script in this case I call it
hover our quote okay I leave that leave
the publisher you have a Marketplace
know as with all kind of extension
system day you me not must have a
marketplace that allows users to find
and install them so that each e2 is my
extension name I don't want the gate
repository and I hope I get to NPM it's
better now good we pull down all what's
needed so we do
and I don't want to use the code itself
I want to use the demonio version which
insiders and you have here our extension
it has some meta information has some
source file some tests right so the meta
information is the package Jason let's
give us some space it has some
information about the data we said we
want to support lazy activation so we
define the ephemeris of activation
events which allows an extension say
when you want to become active in this
case let's assume we want to provide a
hover which becomes active when I edit
JavaScript code so I can say on language
extension okay so that's it and I don't
manic any contributions so let's switch
to to the code and extension so there is
a new update which I will do later so
that's the price you pay for being on
the bleeding edge but you want that so
as I said and now you see kind of the
coding experience right so we want to
write an extension for vs code we have
this namespace tour a pest described in
tab script which means we have
intelligence for the for the API I want
a register a:hover provider and here you
see now the pattern right you have uses
however this provide a pattern for
everything for colons document a
formatting reference information and so
on but in this case I want to do with
our provider okay and I want to register
it what's the API it takes a language
you see kind of thisis this fluent API I
can give it just a string or I can give
it a an object and typescript supports
these Union types right so I say well I
want to do JavaScript JavaScript and I
don't have yet
okay so of course I get an error and now
I want to implement our provider and now
you can see how you program in tap
script right I introduce our provider
and I will type it now so that get
intelligence okay so I typed our
provider to be a vs code our provider
because if I do that and when I now
create the object tab script will tell
me hey you're missing a property right
so mister property provide hover which
is the callback that gets called by the
editor right so as they provide however
I do provide however I did I selected
create a property and now what does it
need so I can nicely thing is I have
full type information even I do
JavaScript or tab script I can go to
definition and I can see you about the
how a provider does it needs a document
the position and what it returns is
either a:hover
or add animal which is our abstraction
for a promise right so again you see
this fluent API you can return however
directly or if you have something easing
kronas you return a promise okay back to
the code so we just provide our function
and return vs code however no new BS
which again is this fluent API and I can
either return a mark string or just a
string so let's do hello
from Amsterdam right so the idea is now
whenever you hover over JavaScript code
you should see an enriched our which
also tells you hello from Amsterdam
so since debugging failed last time I
gave it one more shot right to show you
a lazy activation I will now set a
breakpoint in my extension iMac standard
and only be activated when I get it a
JavaScript file right so I launched it
so here I mean chasing file nothing
should happen but once I go in a
javascript file my extension gets
activated and I'm in the debugger and I
get all the debugging features that you
used to write you can hover over values
and things like that expression the
evaluation and so on so let's continue
and check our stuff sorry and you see I
haven't reached a however to do hello
from Amsterdam make it slightly interim
or interesting and go back to it and
maybe get some interesting quote from
the net right I just have a snippet here
I insert the code snippet which will go
to a service which will go to a service
and because it goes the service are
online it uses a promise here now the
provider turns not the power directly
but a promise the promise get two
handlers resolved and rechecked and you
see when it's the data arrives from this
code service we resolve the promise
create the hover and return the promise
right so that's kind of how you a
synchronously contribute to our API and
consume the API save an error right HP
is missing so let's just import it and
you have a snippet for that HTTP it
and you see kind of now we get the
richer clothes right and I always
nervous which ones we get because some
of them are not too for everyone so
Alejo there are only two kinds of
programming languages those people
always bitch about and those nobody uses
I like that one I also want to hope to
get a Java one No let's do let's take it
at that ok let's go back to the slides
but you're gone got the idea right so
it's you develop it's very fluent
experience fully typed type script you
got intelligence in a new JavaScript you
would get the same intellisense
experience because typescript also
powers the JavaScript experience and
thanks to that now we got lots of
extensions but I want to talk to the
next piece here which is about once you
have the UI right how do you really
drive a language that it has an ast that
it has intelligence and so on and that's
what we do here is you have seen you
have this extension hose with tOSU
extension what I showed before like the
whole provider but in this case
everything happens inside extensions in
JavaScript now I need to want a rich
language like C++ or Java or whatever
you don't wanna write the parser and the
AST all in JavaScript a type script
right and also you can enable that you
can use the same language servers for
different tools so for this reason we
have from our extension hose yet another
indirection to a language server process
right I showed you at with omni sharp
service on understand stand gives you
the brains of c-sharp and its infant in
c-sharp the cocea like the go language
service implementing go and uses to go
command-line tools Python uses the Jedi
intelligence engine which is implant in
Python but you get the point right you
wanna really by splitting things up in
multiple processes we allow you that you
can use the language of choice to
implement your extension like when you
implantation C++
or a rust which is also one of the
extension such as deep support is
implemented in rust itself and the way
how we talk between a process simple
JSON payload and we have even defined
common protocol that allows you if you
just write a new server from stretch you
use the count protocol you don't even
have to deal with the client here and
here because we have done a generic
implantation of this provider API that I
showed you for this common protocol
which is all also open sources on github
it's our code language protocol okay and
now as I'm actually have two separate
processes what is separate process
allows different editors can leverage
these processes and I want to quickly
show that for sublime so where you have
that's not what I want so maybe let's
just see so we are in in sublime and I
get intelligence and this is powered by
the same language server that is used by
Visual Studio code which gives you type
script type script intelligence type
parameter ends right this shows kind of
also how open we are right we make kind
of language servers which you can
integrate in any editor you want and I
think this shows also this nice openness
we wanna we want to get to okay then we
went to open source I won't just make
some points about open source so it's
the same lesson yet from eclipse right
feedback you get that's the the thing
right then we really try to do it as a
development team we want to be as
transparent and as a reward we get lots
of feedback so we document our process
we document our roadmap we document our
iteration plans they're all visible all
on github all in issues and one of the
things we have done recently we
enabled daily feedback channels right so
what we did in Eclipse every month we
made a milestone of able people used it
and gave us feedback which is nice right
they followed us and helped us to make
things better we still do that we still
trip every month but what we started to
do one or two weeks ago we open up this
green channel which is the insider's
channel which is an update channel which
gets daily updates so you can have two
products installed side by side this
table and inside of one but the inside
of one gets daily updates which means if
you really want to follow us you want to
test the latest feature you want to work
with us on improving a feature people
get to the insiders Channel and they get
daily updates right vs code suppose auto
update so you will be automatically
updated to the same version vs
development team use and he has a
right to have a stable environment so
for that reason I use the green one
because I want to really show with the
latest one and also show you the
confidence I have in a in our daily
updates and what's cool about that is we
really can become even more responsive
right so today what we had this week
happening we had a tweet kind of at 3:00
at 1:00 p.m. right the tweet said the
gate thief's are broken we created an
issue and the fix came in about six
hours later right and then the person
got out update a new version and could
verify it within six hours right this is
kind of the feedback loop really to the
next level right and that's what you
really love okay so open source make it
easy for developers now we consume about
142 open-source components which is
quite a lot write it into lots of
bookkeeping because even if you are open
source you have to know which other open
proper credits in a third party notice
is filed and also we keep a central
database like Microsoft keeps a central
source components so the idea is of
course if on is the open source
component security leak or whatever we
can't go in the database and find out
which products need to be fixed so there
is lots of bookkeeping you have to do
but we build some tools for that and
today now we are able to ship monthly
with 140 open-source components right
before all these processes were done
Daddy ship maybe once a year but we
really got to narrow it down that you
can ship monthly and still be compliant
with the open source bookkeeping and
also make it easy for contributors right
so when you make a contributions to the
to the via scope co-pays or to another
max of co-pays you have a current with
the license agreement pot which will
check no did it just fix the comment you
make fix some typos then you don't have
to do lots of overhead you can just make
the pull request if you make significant
change then you no longer have to fax a
signed contract it's all online and you
can sign that you agree to the compute
computer license agreement so the nice
thing is what we learn is right if you
if you make open source kind of in a
fast cadence you need tools but if you
have these tools in place it can really
be pleasant and can make it all a breeze
so in closing what I'd like to have
shown you today is really the
transformation that Microsoft went
through with the example Visual Studio
code right which is an open source code
editor free runs on any platform it's
extensible has rich extension system and
the homework assignment I'd like to give
to you is go home install it and think
of a cool extension and publish it to
the marketplace ok with that I like to
close and happy coding