 C'est une présentation pratique après la présentation de Alex Therrikel. Je suis Michael Istria, je travaille pour Red Hat en team Alex sur les idées d'éclipse à part de plateformes, deux supports de langues de service, including buildstuff, etc. Et je vais vous montrer, et par contre, expliquer à vous comment nous avons mis le développement web, les compétences qu'on a réusées, et les valeurs qu'il y a dans l'idée d'éclipse. Donc, c'est le site de développement web, où il y a la description de tout. Mais avant d'entraîner les détails du développement web, nous allons penser quelques années plus tard de ce que l'éclipse était pour le développement web, 3 ou 4 ans plus tard. Il y avait les tools de développement de JavaScript, qui étaient totalement outdates, et qui étaient de plus de qualité. Les HTML et les CSS n'avaient pas supporté la relance. C'était vraiment malade. Je pense que l'éclipse a perdu des utilisateurs pendant des années pour des raisons de valeurs, et je pense que cette raison peut prendre pour 1 million d'utilisateurs, parce que les webtoons sont malades. Mais l'éclipse est encore une idée très relevante pour beaucoup d'écosystèmes, parce que c'est 3, open source, polyglot, versatile, multi-platformes, multi-projects, scalable, extensible, with built-in, good support, good comparison tool, local history, good search feature, a lot of addition commands, and a huge and serious ecosystem. So, yeah. 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. And we said, okay, we need something better. We'll do, it was the rise of language server. We'll use language servers to do so, and that's how our web developer emerged and provided a lot of features for web development, that I'm going to demonstrate later on. So, let's get started. This is a good old eclipse ID with old-fashioned lighting that everyone can read in the room. And we start by opening a CSS file. So, I open the CSS file. Okay. This is a CSS file. It's not the old CSS file. It's only web developers. The syntax lighting is coming from TextMate. And you'll see that it has some features like documentation, color preview. Yeah, 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. And the color preview, yeah, color preview has a color picture. 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. This is not something we implemented. We just picked the VSCOD CSS language server. There are people like Microsoft who did a good job regarding CSS. We just take their job, take their work and reuse it just like they're reusing the Java compiler of Eclipse ID. So, this is for CSS. Another popular format is JSON. This is a JSON file. So, if I put crappy JSON like this, it will fail because it's not conformed to the JSON grammar. The 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. How can I have content assist like this? So, if I... What may be a Boolean here? Module type. Is that true? And it should one because it's wrong typing. I can format. So, we have... It break the highlighting, but it's not a big deal. So, we have a lot of features coming also for JSON. And this is, just like CSS, the VSCOD 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. 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 built in. So, you don't have to declare the schema, the ID declares the language server already knows some schemas that are popular. So, you don't have to add schema on popular file like JSON or config. Ok, that's CSS and JSON. I also have the ML, but I need to save time. That's the non official reason. The non official is that I have a bug with the ML in my demo. But we have XML. So, the ML support when it's working and when I demo it, it's actually a redact based language server don't buy some colleagues that we are using. Just like we use the CSS component from VS Code, we are using the ML component from redact from NPMJS and just everything we do. More importantly, the good old XML. We have a language server for XML. Alex mention 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 Vendon neutral eclipse project. And what it does is that you get a 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 of completion or everything. So, you get a full feature XML grammar language server 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. So, we have formatting outline. Okay, that's for XML. Now, let's get to the fun year languages. My favorite I would say for this demo is the HTML1. So, we have an HTML file 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. Thanks. I'll enable to refresh. So, we have the web browser 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. So, we have completion for HTML elements as usual with documentation. 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 asref and things like that. So, we can navigate to the resources and also yes, that's about all for the basics. And if I change a text, the cool thing I wanted to show is that with this navigator okay, I did something wrong in the style. I broke my CSS. So, with this embedding navigator and auto refresh in the fast feedback loop when editing XML, we have a fast edition thanks to language server and we have a very fast feedback loop with 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. We get the same CSS support than we have on plain CSS file because it's actually using the same language server. So, the VS Code HTML 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, the same engine 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 and click 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 open the variable i, it says it's a number. If I change it to be a string and over again, it becomes a string. So, the ID reacts properly to JavaScript change. We get a completion. We get content assist and all that. So, oh yeah, one I can show is if I'm in a variable 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? Ok, I show it with the plain but it's strange. Very strange. Sorry. I'm too curious to search. Ok, it didn't work. But it works in real life. That's totally intended. So, you've seen there is support for JavaScript but not all JavaScript are frontend. You can have JavaScript services. So, there is the yellow.js file. And we have support for plain JavaScript similarly to everything I show you. So, I won't go into detail. Control click. Assistants, maybe here I can try find references. I'm taking risk as you can see. Ok, something went mad. Sorry about that. Ok, I'm back. You can enjoy the very fast startup that Lars mentioned earlier today. Fuck. Ok, I'm meeting the wrong shortcut that's something I I opened about it. Sorry. Ok, control 3 is better. Find references. Ok, find references doesn't work but there is rename. So, we have the find references that you saw working very well and the rename as well. So, that's all the typical features you will need for JavaScript. And this same language server that we are using, that is actually the TI JavaScript type script language server. Eclipse TI is one ID developed in the Eclipse ecosystem by CIP to be integrated embeddable in a web browser. As part of this ID, 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. So, you got a regular flow. Yeah, there is format completion. That's all. The cool thing about TypeScript language server is that you choose TypeScript TS server under the hood. So, if you open some projects that have ESLint enabled we have they will support ESLint. So, they reuse the configuration of your project directly. So, here you have ESLint commands because the tab is not necessary here. So, that's one cool thing of the TypeScript language server that 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 .js. We can click on the HTML and we see some completion. So, there is field and title and I can control click to get back to the TypeScript file. If I had a FOSDEM file like this and get back to my HTML template, FOSDEM is there and it says the property. So, here again very good development flow. 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 pieces from other projects. 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 and you're editing the code you're debugging. At least in Eclipse IDE but 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. The debugger is really my favorite tool and I guess I'm not even one. So, if I get back to this load.js file we have support for the debugger thanks to the debug adapter protocol which is a kind of friend of the language server protocol. It's also used by debugger agnostique, language agnostique, everything agnostique. So, we could embed it just like the language server protocol 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 breakpoint, the code stack on the left, navigable code stack. Step by step navigation, variable view, and additions and so on. So, and the play, play, play next. And the variable didn't change because I, let's try again. I could probably mistype something. Ok. So, the value did change at runtime as expected. So, this is a simple debugger, nothing fancy, it just works, does the job for, not for cheap price it's Microsoft team who did that. 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. Do I have the shortcut here? No. Debug has Chrome debug. And Chrome, it started, it says ok, it found the first breakpoint. 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. Because when you debug node in VS code, it actually start the V8 from inside Chronium 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 for student and JavaScript doesn't really mind. And we get that. And here I have my web page. If I click on say hello, we see that even the inline inline.js is there. So, I can do the same thing. I is a string. Let's say it's hey, for them. Ok. F6, we can inspect the document also, by the way. So, where is the document? That's the beauty with JavaScript. Go find something in all this context. Ok, you see here. Maybe I can overrun it and get details. Too bad the size is not perfect, but anyway. Who needs that? So, there is a small glitch. And you see the message has changed, hello here for them and just like in the Chrome . So, I'm done with my demos and I'd love a few words to repeat what Alex said because you're in a brainwashing session about LSP and debug adapter. So, you have to have the same thing over and over again. So, the usage of language of a protocol on debug adapter protocol has allowed us as a small team at Red Hat. Leveraging LSP4J, LSP4E and so on, which are major components. 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, probably. So, the return of investment of using language server in Eclipse ID is for us as developers. It's extremely high because it didn't cost a sing 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 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, 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 have changed the collaboration between ID is getting much better as Alex said. And that's really, yeah, a good thing for the domain. And the list of language server keeps growing, and we can just integrate them with a few lines of Java in wide web developer. So, it's really productive. Everything is open source under Eclipse Public License or MIT License. And that's my last word. I take questions. Any questions? Yeah? So, that's the duty of the... We are the tool providers. Wide web developer is a tool. It's the duty of wide 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. The node packages that do the magic are inside the ID. You don't have to install them. Yes? Yes? 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. 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 room, you open a bug to the provider saying man, you have to stop your process. Yeah, what's the deal? I think this topic also relates to the next session. Yeah, we can go on because in the next session, we will have time for questions after that. So maybe with one more demo, you will get more questions or more install nodes.