Language Server Protocol & Debug Adapter Protocol to the Rescue of Web Development in Eclipse IDE
This is a modal window.
The media could not be loaded, either because the server or network failed or because the format is not supported.
Formal Metadata
| Title |
| |
| Title of Series | ||
| Number of Parts | 490 | |
| Author | ||
| License | CC Attribution 2.0 Belgium: You are free to use, adapt and copy, distribute and transmit the work or content in adapted or unchanged form for any legal purpose as long as the work is attributed to the author in the manner specified by the author or licensor. | |
| Identifiers | 10.5446/47223 (DOI) | |
| Publisher | ||
| Release Date | ||
| Language |
Content Metadata
| Subject Area | ||
| Genre | ||
| Abstract |
|
00:00
Software developerIntegrated development environmentInclusion mapCross-site scriptingPresentation of a groupWeb-DesignerConnectivity (graph theory)Descriptive statisticsFormal languageTheoryServer (computing)Computing platformWeb 2.0Computer animation
00:35
Inclusion mapProgrammable read-only memoryIntegrated development environmentSoftware developerConvex hullWeb 2.0Pairwise comparisonFormal languageWeb-DesignerServer (computing)Goodness of fitComputer animation
01:53
Line (geometry)Content (media)Module (mathematics)Integrated development environmentGraph coloringCodeWeb-DesignerError messageFormal languageJava appletComputer fontFormal grammarType theoryCompilerGoodness of fitComputer fileProcess (computing)File formatBoolean algebraServer (computing)Computer animation
03:52
Group actionRevision controlSource codeDistribution (mathematics)Binary fileApache MavenScripting languageFunction (mathematics)Convex hullBounded variationJava appletComputer virusFormal grammarComplete metric spaceFormal languagePersonal digital assistantServer (computing)CodeWeb 2.0NavigationExtension (kinesiology)Different (Kate Ryan album)Connectivity (graph theory)Computer fontDemo (music)Game controllerHash functionMeta elementText editorFeedbackSoftware bugProjective planeRepository (publishing)Distribution (mathematics)Graph coloringOperator (mathematics)Computer filePlastikkarteMathematicsWeb browserScripting languageBitConfiguration spaceContext awarenessResultantDemosceneInheritance (object-oriented programming)Declarative programmingWeb serviceComputer animation
10:50
Programmable read-only memoryIntegrated development environmentSoftware developerKeyboard shortcutComputer animation
11:12
ModemIntegrated development environmentSoftware developerProgrammable read-only memoryFunction (mathematics)Interface (computing)Group actionContent (media)DebuggerDrum memoryComputer virusFormal languageConfiguration spaceDirection (geometry)CodeVariable (mathematics)System callServer (computing)MereologyMultiplication signDebuggerPolar coordinate systemAdditionWeb browserComputer fileProjective planeComplete metric spaceCommunications protocolIntegrated development environmentReal numberSuite (music)Graphical user interfaceMathematicsValidity (statistics)Field (computer science)Demo (music)Category of beingExpected valueSoftware developerGame controllerProcess (computing)Keyboard shortcutRun time (program lifecycle phase)File formatCartesian coordinate systemDataflowSocial classComputer animation
16:32
Function (mathematics)Formal languageControl flowDebuggerGraphical user interfaceComputer animation
17:05
Function (mathematics)Bounded variationComputer virusConvex hullWeb 2.0Formal languageCollaborationismWeb-DesignerServer (computing)Domain nameLine (geometry)Right angleContext awarenessDivisorOpen sourceCommunications protocolConnectivity (graph theory)DampingJava appletIntegrated development environmentProjective planeCodeMultiplication signWordElectronic mailing listInternet service providerSoftware bugProcess (computing)Message passingGraphical user interfaceDemo (music)Computer animation
21:52
Point cloudFacebookOpen source
Transcript: English(auto-generated)
00:05
It'll be a kind of practical presentation after Alex's theoretical presentation. I'm Michael Istria. I work for Red Hat in Alex's team on Eclipse ID attached from platform to language server support, including build stuff and so on. And I'm going to tell you, to show you,
00:22
and by the way, explain to you how we made the Wide Web Developer, what components we're reusing, and what value it provides in Eclipse ID. So this is the Wide Web Developer website, where there is a description of everything. But before we get into details of Wide Web Developer, let's think a few years back of how
00:40
Eclipse was for web development three, four years ago. So there was the legacy JavaScript development tools, which were totally outdated and mostly of bad quality. The HTML and CSS were not supporting the latest release. It was really bad. And I think we can eclipse-loss some users over the years
01:01
for various reasons. And I think this reason can come for one million of users, because the web tools were bad. But Eclipse is still a very relevant ID for many ecosystems, because it's free, open source, polyglot, versatile, multi-platform, multi-project, scalable, extensible, with built-in Git support, good comparison
01:21
tool, local history, good search feature, a lot of edition commands, and a huge and serious ecosystem. So for all this reason, we could not just let Eclipse be bad at web development, which is now 60% of the market of development.
01:41
And we said, OK, we need something better. We'll do it. It was the rise of language server. We'll use language servers to do so. And that's how Wide Web Developer emerged and provided a lot of feature for web development that I'm going to demonstrate and go into detail. So let's get started. This is a good old Eclipse IDE with an old-fashioned light
02:01
theme that everyone can read in the room. And we start by opening a CSS file. So I open the CSS file. This is a CSS file. It's not the old CSS file. It's only Wide Web Developers.
02:21
The syntax highlighting is coming from TextMate. And you'll see that it has some edition features, like documentation, color preview. Here, there is the outline. If I make a mistake here on purpose, it will show an error. The error is shown in the usual views, the outline navigation.
02:40
And the color preview, yeah. Color preview has a color picker. That's one of the things I like to demonstrate, because it's just nice. It's not very important, but it's nice. And so we have all that for CSS. And this is not something we implemented. We just picked the VS Code CSS language server. There are people at Microsoft who did a good job regarding CSS.
03:01
We just take their work and reuse it, just like they're reusing the Java compiler of Eclipse IDE. So this is for CSS. Another popular format is JSON. This is a JSON file. So if I put crappy JSON IDs, it will fail because it's not conformed to the JSON grammar.
03:21
OK, same thing. Error reporting, outline, and so on. And since JSON has schema in a strange way, but it has schema support. Here I describe the schema. So we have the documentation. We have content assist.
03:41
How can I have content assist like this? So if I, what maybe a Boolean here? Module type. Well, I can do that. True. And it should run because it's wrong typing. I can format. So we have, oh, it broke the highlighting, but it's not a big deal.
04:00
So we have a lot of features coming also for JSON. And this is, just like CSS, the VS Code JSON language server that provides all that smartness. Integrating the JSON language server is exactly the same thing as integrating the CSS language server, instead that we start a different script to do the magic. But there is no difference in the consumer code.
04:22
So we have the schema completion. And if I open a popular file name like TS Config, everyone knows the TS Config. The schema is building. So you don't have to declare the schema. The ID declares, the language server already knows some schemas that are popular.
04:41
So you don't have to add schema on popular file like JSON or ESLint, like TS Config or ESLint. Okay, that's CSS and JSON. I also have EML, but I need to save time. That's the official reason, the non-official, is that I have a bug with EML in my demo.
05:02
But we have XML. So the EML support, when it's working and when I demo it, it's actually a Reddit-based language server done by some colleagues that we are using. Just like we use the CSS component from VS Code, we are using the EML component from Reddit,
05:20
from NPMJS, and just everything we do. More importantly, the good old XML. We have a language server for XML. Alex mentioned it. It's currently on GitHub on some repository. But it's going to be the Eclipse Lemmings project next week, and then it will be officially
05:42
a vendor-neutral Eclipse project. And what it does is that you get typical grammar, XML grammar checks. So it's plain XML meta grammar checks. So this is invalid XML. It reports invalid XML. And it has schema support for documentation or completion or everything.
06:04
So you get a full-featured XML grammar language server. And soon, we'll have the extension for Maven, for example, so we'll add into the smartness some things that can give the value of distribution ID in your context and so on. That's really near future.
06:22
So we have formatting, outline, blah blah. Okay, that's for XML. Now let's get to the funnier languages. My favorite, I would say, for this demo is the HTML one. So we have an HTML file,
06:40
which I open with a web browser, and I reopen it with the editor. Okay, I put the web browser here because it makes a nice demo. No, yeah, thanks. I'll enable it to refresh. So we have the web browser,
07:01
the code editor with the outline and so on. I can break HTML with some bad stuff. Well, I hope to make bad stuff in HTML. Oh yeah, I wanted to show completion first. So we have completion for HTML elements, as usual, with documentation.
07:21
This is coming from the HTML language server from VS Code. We get completion, we get automatically closing tabs. So if I put A and open a tag, next is slash A, we get control click on hash ref and things like that, so we can navigate to the resources.
07:41
And also, yes, that's about all for the basics. And if I change the text, the cool thing I want it to show is that with this navigator, okay, I did something wrong in the style. I broke my CSS. So with this embedded navigator and auto refresh,
08:02
we get a very fast feedback loop. When editing XML, we have a fast edition thanks to the language server, and we have a very fast feedback loop with the auto refresh in the web in the internal navigator We have support for inline CSS. So here I have a bit of CSS in my HTML file.
08:22
We get the same CSS support than we have on plain CSS file because it's actually using the same language server under the wood. So the VS Code HTML language server will invoke the VS Code CSS language server to get the CSS assistance that you're seeing here. It's the same one as VS Code because it's the same engine. Always keep that in mind that the same engine
08:40
is the same result. And so with this fun thing, I can just change the color with my super color picture and save, and we get the color of the scene. We have also embedded JavaScript support. So if I'm here, there is a button on click
09:01
which say hello. If I control click on it, it will find the say hello declaration in the HTML file. That's a feature provided by the language server. And in this JavaScript file, we get some assistance. So here, if I run the variable i, it says it's a number. If I change it to be a string,
09:23
and over again, it becomes a string. So the ID reacts properly to JavaScript change. We get completion. We get content assist and all that. So oh yeah, one I can show is if I run a variable
09:42
and select it, I can do find references which is a typical Eclipse operation. Find references is usual. And if I hit enter, it didn't find the references. What did I do wrong? Okay, I show it with the plain JS file, but it's strange.
10:04
Very strange. Sorry, I am too curious to search. Okay, it didn't work, but it works in real life. That's totally intended.
10:24
So you've seen there is support for JavaScript, but not all JavaScript are, not all web project are front end. You can have JavaScript services. So there is the elo.js file. And we have support for plain JavaScript. Similarly to everything I show you,
10:41
so I won't go into detail. Control click, assistance. Maybe here I can try find references. I'm taking risk as you can see. Whoa, whoa, whoa, whoa, whoa, whoa, whoa. Okay, something went mad. Sorry about that.
11:03
Okay, I'm back. You can enjoy the very first startup that Lars mentioned earlier today. Okay, I'm meeting the wrong shortcut. That's something I opened the button, but it, sorry. Okay, control three is better.
11:22
Find references. Okay, find references doesn't work, but there is rename. Okay, and you change the variable to rename and the variable change. So we have the find references that you saw working very well and the rename as well.
11:41
So that's all the typical feature you will need for JavaScript. And the same language servers that we're using, that is actually the TIA JavaScript, TypeScript language server. Eclipse TIA is one idea developed in the Eclipse ecosystem by some folks which is more targeted to be integrated,
12:03
embeddable in the web browser. As part of this idea, they have developed a language server for JavaScript and TypeScript that we are using here. And here it's TypeScript, so we get the same thing for TypeScript. Yeah, rename, and so on.
12:21
So you got a regular flow. Yes, there is format completion. That's all. The cool thing with the TypeScript language server is that you choose TypeScript TS server under the hood. So if you open some project that have ESLint enabled,
12:44
they will support ESLint. So they reuse the configuration of your project directly. So here you have ESLint command because the tab is not necessary here. So that's one cool thing of the TypeScript language server is that it's extensible,
13:00
just like TypeScript itself is extensible. And another one I can show you is the Angular one. So the Angular language server is done by the Google Angular team. So we are picking the language server. And we have a component, the JS. We can click on the HTML, and we see some completion. So there is field and title,
13:21
and I can control click to get back to the TypeScript file. If I had a FOSDEM, a girl, lol, like this, and get back to my HTML template, FOSDEM is there, and it says the property and so on. So yeah, again, very good development flow.
13:41
If I put a property that doesn't exist, I get a validation marker. We tend to forget that the markers are more important than the completion in real life, but you always get that. So that's very cool. We have got a very strong tool suite for development in Eclipse IDE for low-cost because we just picked PCs from other projects.
14:03
But developing is one activity of developer. I mean coding, editing, it's one activity. And I would even argue it's not the one that takes the most time and the most smartness. The other one is debugging. Debugging is a very important activity. Actually, when you were used to your debugger, you constantly have a debugger on,
14:22
and you're editing the code you're debugging, at least in Eclipse IDE. That's how, since we get the constant refresh, I almost always have the target application starting and edit it and get the hot reload of the class and so on. So the debugger is really my favorite tool, and I guess I'm not the only one. So if I get back to this elo.js file,
14:44
we have support for debuggers thanks to the debug adapter protocol, which is a kind of friend of the language server protocol. It's also used by VS Code. It's also debugger agnostic, language agnostic, everything agnostic. So we could embed it just like the language server protocol.
15:01
And for the plain.js file, we have the node debugger, which is the debug adapter coming from VS Code, the same one. And we can debug in a file just like we do usually in Java. So we have the breakpoints, the call stack on the left, navigable call stack, step-by-step navigation, variable view, and additions.
15:26
And so on, so, and the play, play, play, next. And the variable didn't change because I, let's try again. I probably mistyped something. Okay.
15:48
So the value did change in runtime as expected. So this is a simple debugger. Nothing fancy. It just works, does the job for, not for cheap price because it's a Microsoft team who did that.
16:00
And last but not least, the HTML file. This HTML file is dynamic, there is JavaScript and so on. So we can do the same thing, except that instead of debugging directly with node, we can debug with one of the browser which has an embeddable debugger. So I'll use Chrome for the demo.
16:22
Do I have the shortcut here? Chrome debug? Debug as Chrome debug. And Chrome is started. It says, okay, it found the first break point. Same thing. It's actually the same, if you look in the details of the language server, it's the same debugger for node and for Chrome
16:42
because when you debug node in VS code, it actually start the V8 from inside Chromium to do the stuff. So it's the same thing. You get the same features. That's normal. And we can change the value. We can make it a string. It will follow sudden and JavaScript doesn't really mind.
17:00
And we get that. And here I have my webpage. If I click on say hello, we see that even the inline JS is there, so I can do the same thing. I is a string. Let's say it's, hey, it was them. Okay. F6, we can inspect the document also, by the way.
17:22
So where is the document? That's the beauty with JavaScript. Go find something in all this context. Well, okay, you see, yeah. Maybe I can overrun it and get details. Yeah, too bad the size is not perfect, but,
17:40
well, anyway. Who needs that? So there is more glitch. And you see the message has changed. Hello, hey, it was them. And just like in the Chrome debugger, the button has changed as well. So I'm done with my demos. And I'd love a few words to repeat what Alex said
18:01
because you're in a brainwashing session about LSP and debug adaptor. So you have to read the same thing over and over again. So the usage of language server protocol and debug adaptor protocol has allowed us as a small team at Red Hat, leveraging LSP4j, LSP4e, and so on, which are major components.
18:20
But once we have all that, it took us less than a year to get from scratch to this if you couldn't have full-time employees. It's even a matter of months. It's a project we've been two or three working on one day a week or something like that for two years. I think so, yeah. So the return of investment of using language server
18:42
in Eclipse IDE is for us as developer. It's extremely high because it didn't cost a thing almost. It's really cheap. And the value for user is very high because the language server are of high quality. And for that, we can thank Microsoft for shipping those language servers and Microsoft and Red Hat and everyone
19:00
who do language server. And one cool thing is that while doing this work, we have identified bugs in language server that we've reported. The HTML support in VS Code, for example, is now slightly better because of a bug I reported six months ago that got fixed. And when VS Code makes a new release with a new CSS support, an incredible new tag,
19:20
we get it for free. So we've got this factorization not of, it's not even a technological factorization. We're really talking of a domain community factorization. And the mindset has changed. The collaboration between IDE is getting much better, as Alex said. And that's really, yeah, a good thing for the domain.
19:42
And the list of language server keeps growing. The list of Intel keeps growing and we can just integrate them with a few lines of Java in web developers, so it's really productive. Everything is open source under Eclipse Public License or MIT license. And that's my last word after,
20:01
and I take questions. Any questions? Yeah. Is installing the right language server on your system?
20:25
So that's the duty of the, we are the tool providers. Web developer is a tool. It's the duty of web developer to ship the language servers, unless for this language there is a better way to do things. But here the language servers are embedded.
20:42
The note packages that do the magic are inside the IDE. You don't have to install them. Yes, yes.
21:04
Is that something you just start a new process and then you are done? Or is there some more elaborate? No, it's really stupid and that's what makes it work great. You start the process, you communicate with the process. When you don't need it, you stop it.
21:20
I mean, the tool, stop it. You as a user, it's not your problem. I mean, if the process is remaining when everything is closed and it's taking you some RAM, you open a bug to the provider saying, hey man, you have to stop your process here. What's the deal? I think this topic also relates to the next session. Yeah, we can go on because in the next session, Jan will demo the LSP support in NetBeans
21:43
and NetBeans related LSP stuff and we'll have time for questions after that. So maybe with one more demo, you'll get more questions or more answers. No.