Weitere Grundlagen Angular aus unserer DevOps-Vorlesung:
und https://www.youtube.com/watch?v=qo6GSj9FsIc
_________________________________
SE Blog:
Hallo und herzlich Willkommen zu software tool construction Vorlesung Nummer 10 hier im neuen Jahr wo es neues noch an alle wir haben jetzt noch ein bisschen was zu tun für unsere Webanwendung wir machen heute ein bisschen was neues ich zeig euch wie man angular benutzt und auch wie man diesen
Coolen bisher angesprochenen Monaco Editor da einbindet das ist alles ein bisschen wodo ich glaube ich habe es schon so ein bisschen angedeutet letztes Mal zumindest mit diesen Webpack Dingen die wir da machen mussten das zieht sich heute noch so ein klein bisschen durch aber wir müssen nicht mehr super viel machen
Zumindest um so einen ja so einen grundsätzlichen Webeditor zu bauen nächste Woche machen wir dann noch ein bisschen mehr damit der noch ein bisschen schöner und ein bisschen besser funktioniert aber heute erstmal so die Basics ich habe vielleicht habt ihr schon gesehen ich habe die Folien wieder hochgeladen da
Steht do heute nicht viel drinne außer so ein paar Links und diese Links habe ich vor allem deswegen da reingepackt weil diese ganzen dependencies und libries die wir jetzt hier benutzen die haben eben super viel Zeug was man eigentlich lesen müsste was ich jetzt für euch schon gelesen und irgendwie so
Ein bisschen versucht habe in irgendeine Form zu bringen die man benutzen kann aber da gibt sehr viel so Historie ganz viel wenn man Version x benutzt braucht man muss man y beachten das steht alles in diesen Links drinne wenn ihr da irgendwelche Probleme bekommt da gibt’s auch ganz viel troubleshooting und sowas
Weil das eben so ein Voodo ist aber die Leute die das gemacht haben haben das eigentlich ganz gut schon aufgeschrieben dann gibt’s h noch so ein paar andere kleine Links zu vor allem zu so ja so Kleinigkeit die wir heute benutzen wo man einfach mal nachlesen kann das sind
So z.B speziellere Features von von NPM oder pnpm das muss man einfach mal irgendwie gesehen haben und ich erkläre das eigentlich aber falls es noch mal nachlesen wollt dann findet ihr das da auch und dann gibt’s hier noch das ist vielleicht der ein spannender Link das habe ich jetzt hier schon mal
Aufgenommen es gibt eine Technologie die nennt sich lium und das ist im Wesentlichen sowas also so eine Art Framework für all das was wir jetzt hier gerade machen also was wir gerade selber programmieren da gibt’s z.B so eine Möglichkeit seine Grammatik aufzustellen und dann wird daraus so einen Ast
Generiert und sowas und man muss natürlich trotzdem noch viel machen man muss diese ganze codeenerierung und so immer noch selber implementieren und aber man kriegt eben auch so ein paar Dinge geschenkt aber das interessante an an an diesem Framework ist dass das eben auch so vorschlägt wie man so einen
Webeditor machen kann der generiert den nicht automatisch sondern das ist halt ein längeres Tutorial aber da stehen Teile von dem drinne was wir jetzt auch gleich machen und wenn man so ein bisschen diesen sage ich mal so diesen breiteren Kontext verstehen will warum wir das machen dann findet man da auch
So ein paar Beispiele dass das eben auch andere Leute machen so also das sind ganz viele Links da könnt ihr dann mal reingucken ansonsten geen wir natürlich wieder jetzt zu dem üblichen ich code was vor und ihr könnt das dann naachmchen so also Folien brauchen wir nicht mehr wir müssen wir fangen jetzt
Mal damit an dass wir erstmal so ein paar von diesen dependencies installieren und da kommen jetzt auch auch schon diese ersten Besonderheiten weil wir müssen jetzt zwei Dinge benutzen die man eigentlich so ein bisschen als Hack beschreiben könnte das hängt aber damit zusammen wie diese ganzen Technologien entstanden sind und
Äh was die eben für Besonderheiten mitbringen aber ich erkläre das gleich Schritt für Schritt ähm ich mache schon mal hier unsere package Jason auf ich lösche mal kurz mein Note modules Ordner weil ich das eben schon mal installiert hat und jetzt wieder zurückäh gesetzt hatte äh das kann ich schon mal vorweg sagen
Diesen notemodules Ordner das kann in manchen Situationen von diesen Dingen die wir jetzt machen helfen ich weiß das ist immer bisschen doof weil das ewig dauert und dann wieder das install und so aber das ist jetzt tatsächlich einen Fall wo das nützlich ist ähm wir fangen jetzt einfach mal mit dem
Monaco Editor an also der Monaco Editor ist im Prinzip eine dependency die wir einfach installieren und die wir dann später in unsere Anwendung Einbinden der hat aber die Besonderheit ähm dass er nicht so als Library programmiert wurde von von Microsoft die die den veröffentlichen sondern dieser Monaco Editor entsteht über einen besonderen
Bildprozess aus Visual Studio Code also da wird quasi werden Teile von dem von dem Code von Visual Studio Code genommen und ein bisschen was rausgeschmissen und dann so umgebaut dass das für im Browser funktioniert und dann entsteht da durus dieser Monaco Editor das ist klug weil es halt sehr einfach ist ist aber
Eigentlich ein bisschen die fals Richtung weil normalerweise sollte man wenn man sowas jetzt wenn ich wenn ich jetzt selber wenn ich jetzt Microsoft wäre und IDE programmieren will würde würde ich erstmal mit diesem Editor anfangen und dann darauf aufbauen die IDE bauen aber die haben das irgendwie die falsche Richtung gemacht und
Deswegen müssen wir damit jetzt Leben dieser Monaco Editor der ist halt total cool weil der diese ganzen language Features die wir die ganze Zeit benutzen alle unterstützt also der kann completion der kann irgendwelche Referenzen Anzeigen der kann eigentlich fast wenn man ihn gut erweitert kann der fast alles was vis
Code auch kann abgesehen von so Terminal und und dateibum und so ein Kram aber das macht auch im im Web nicht so hundertprozentig viel Sinn jedenfalls ähm dadurch dass er so komisch gebaut wird ist der ein bisschen schwer einzubinden also da deswegen muss man so ein paar Tricks anwenden mit Webpack und
So weiter aber da hat sich irgendwann irgendjemand gedacht das muss doch ein bisschen einfacher gehen und hat dann quasi das für uns schon mal gemacht und das noch mal neu publiziert die dependency heißt aber immer noch Monaco Editor aber wir wollen jetzt unter dem Namen Monaco Editor ein Package von
Jemand anderen benutzen und dafür brauchen wir das erste komische Feature was man in ähm mit NPM machen kann und zwar passiert das gleich hier al ihr seht ja ich installiere das mal kurz was wir jetzt hier bisher haben ihr seht ja man gibt hier immer die dependency an also nach mit dem Namen
Und dann gibt man die Version an und wir benutzen gleich eine ganz komische Syntax die ein bisschen anders aussieht das funktioniert natürlich auch über die Commandline und die kopiere ich jetzt mal hier rein und zwar machen wir jetzt pnpm install und dann wollen wir den Monaco Editor installieren aber die Version ist das
Hier und das sagt jetzt im Wesentlichen statt Monaco Editor selbst zu installieren von NPM installiere bitte von coding Game den Monaco Editor treemended und dieses treend das ist das das ist ein lustiger Begriff den die sich irgendwie ausgedacht haben das soll das Gegenteil von tree shaking bedeuten also treeshaking das ist so ein
Ja das ist so eine Technik die wird angewandt wenn man irgendwelche libraries oder Anwendung bandelt dann wird z.B aller Code rausgeschmissen der nicht benutzt wird das ganz praktisch weil dann kriegt man Webseiten die kleiner sind als wenn man den ganzen Code einfach nur konkatenieren würde aber aus irgendwelchenem und
Normalerweise macht man das aber bei libraries nicht aber bei diesem Monaco Editor wurde das trotzdem gemacht wegen diesem komischen bildprozess wie der aus fcode entstanden ist und das muss jetzt wieder rückgängig gemacht werden und eigentlich normalerweise oder in vorherigen Version von diesem von diesen dependencies hat man das immer lokal
Gemacht aber jetzt gibt es hier dieses Monaco Editor tre mended fertig zum Installieren lange Reder kurzer Sinn wir können das einfach mal installieren und dann gucken wir was passiert das taucht jetzt hier auf und jetzt steht hier eben Monaco Editor und hier steht als Version UPS m das
Hier und wir können uns natürlich angucken was hier so los ist drinne aber das ist relativ viel Code also dieser Monaco Editor an sich die dependency ist glaube ich irgendwie 16 megb oder so und das ist für eine für eine Library in in Javascript die so durchschnittlich
Vielleicht 10 KB groß ist das schon relativ viel aber da ist halt auch alles drinne da sind z.B ganz viele Programmiersprachen an sich schon mit drinne also z.B ja das syntax highlighting und sowas für Java und c#arp und was weiß ich nicht alles also sehr viel Kram den wir eigentlich größtenteils nicht brauchen
Aber dadurch dass wir ja wieder bei unserem Bauprozess dieses tree shaking haben wo wir Dinge rausschmeißen die uns nicht interessieren ist es alles gar nicht so schlimm ähm das haben wir jetzt also installiert und jetzt müssen wir das gleiche noch mal mit ähm vs Code machen und zwar
Vorher hatten wir das nur hier über über types gemacht damit haben wir nur die typescript Definitionen von den APIs die wir in vscode benutzen können bekommen das war auch ganz okay so weil in unserer Extension wurde ja dieses V Code diese dependency die wurde ja uns immer bereitgestellt vielleicht erinnert ihr
Euch wir hatten irgendwo ich glaube z.B hier in der project Jason dann hab wir hier dieses external F Code angegeben das heißtcode ist keine richtige dependency sondern das wird uns irgendwie bereitgestellt während der Laufzeit von dieser Extension und im Browser sind wir natürlich jetzt nicht in vscode das ist
Ja jetzt ein ein anderer Kontext habe ich letztes Mal auch in dieser Grafik gezeigt auf den Folien da müssen wir natürlich jetzt wieder die APIs von fscode bereitstellen aber an sich kann man fscode so nicht installieren also das das wird einfach nicht publiziert weil das macht ja auch nicht so viel
Sinn das ist ein ganzer Editor warum sollte man den als als dependency in in NPM anbieten wäre ja dann auch noch riesiker die Datei die dependency aber wir brauchen so ein paar Implementierung davon vor allem eben um so ein paar Editor Features im WEB anzubieten wie eben diese autocomletion
Oder andere Sachen und der gleiche Kerl der dieses diesen Monaco Editor treemanded gemacht hat der hat jetzt eben auch quasi fauscode noch mal neu publiziert aber kompatibel im Browser und das ist jetzt also wir installieren auch wieder fcode aber eben in der Version Monaco V Code API und
Wir müssen jetzt ein bisschen aufpassen ich glaube es sollte nicht so Problem führen ich habe esin ausprobiert aber diese Versionen ändern sich natürlich auch wieder ständig also dieses 158 185 das ist ganz neu das kam irgendwie am am 4 Januar raus als ich das alles vorbereitet habe war natürlich
Noch eine ältere Version aber ich habe es heute einfach mal mich getraut das zu aktualisieren wir gucken mal was passiert mit dieser Version müsste es eigentlich dann noch kompatibel sein weil wir benutzen ja jetzt nicht die Typdefinition von irgendwelchen neueren Features so das wird ja das wird jetzt auch installiert
Also das wird sogar besonders angezeigt also das sieht man ja normalerweise nicht wenn man sowas installiert dieses hier m das reicht aber noch nicht wir brauchen noch mehr dependencies und zwar also jetzt haben wir quasi die Basics jetzt könnten wir den Monaco Editor benutzen aber wir wollen ja den Monaco
Editor später mit unserem language Server verknüpfen standardmäßig hat dieser Monaco Editor keinen language Client den müssen wir nachinstallieren und das geht relativ einfach über den Monaco language Client wie der Name schon sagt und hier muss man jetzt ganz doll aufpassen bei den Versionen weil also das jetzt wieder eine
Stinknmale dependency aber die Versionen die passen halt nicht zu diesem Schema von von fauscode oder von dem Monaco Editor also das ist jetzt bisschen also die die die zählen anders quasi dafür habe ich diesen einen Link gemacht da gibt’s so eine Kompatibilitätstabelle da muss man halt gucken welche Monaco language cin
Version habe ich zu welcher Monaco Editor Version passt das und zu welcher vs Code API Version passt das wenn man das alles richtig macht dann funktioniert’s hoffentlich wenn man da irgendwas vercheckt dann kriegt man manchmal Probleme und an der Stelle sei auch noch mal gesagt was bedeutet eigentlich hier
Diese Versionen z. das Zeichen das sieht man ja schon viele in diesen Dateien das hier z.B ist es mit dieser Tilde und hier ist es das dieses andere Zeichen ich weiß gar nicht wie es heißt da muss man nämlich auch ein bisschen aufpassen diese Tilde bedeutet
Es soll also die ach verdammt die ersten beiden Versionen sollen gleich bleiben also es soll immer 1.3 davor stehen wenn es wirklich installiert wird und die letzte also die Patch Version die darf sich ändern also die darf automatisch von von pnpm bzw NPM äh aktualisiert werden und
Bei dem hier darf sich auch diese Version ändern also dann dürfte z.B auch 29.5 installiert werden und ähm hier gehen wir jetzt eben auf Nummer sicher und sagen also die die patchvion meinweggen kann die sich ändern wenn man P wenn man NPM Update oder sowas macht aber die
Die minor Version darf sich nicht ändern da muss man dann eben auch ein bisschen aufpassen deswegen schreibe ich das auch hier dahinter mit dem AD welche Version installiert werden soll am besten nehmt ihr dann die gleichen weil dann kann nichts nicht schief gehen das es ändert sich wie gesagt oft
Wenn ihr das in zwei Wochen bearbeitet kann es sein dass es irgendwie 7.4 gibt oder so und dann na kann es passieren dass man irgendwas komplett anders machen muss das während also als ich das vorbereitet habe ist es wirklich oft passiert dass neue Version rauskam und jedes Mal hat irgendwas nicht mehr
Funktioniert super nervig aber das Gute daran ist dass die halt immer beschreiben was sich geändert hat muss man halt lesen ansonsten wundert man sich so ja die meist Wirich rich durchgefüht wird oder ist das so silent agreement das ist ein silent agreement also wenn du Library publizierst dann kannst du dir die
Versionsnummer komplett ausdenken und wenn du jetzt immer nur die die die Patch Version änderst aber deine ganze API also alle Methoden und so die du anbietest wenn du die komplett veränderst dann sagt dir keiner Bescheid dann also da ist jeder package Autor quasi für verantwortlich sich an dieses
Semantic versioning zu halten wird aber bei NPM tatsächlich relativ gut praktiziert habe ich das Gefühl und also wenn es irgendwie anders ist also z.B bei angular ähm wenn sich hier die die me warum springe ich da eigentlich ander und hin wenn sich hier die minor Version ändert
Dann ist es bei angular meistens ein bisschen eine größere Änderung ähm das heißt deswegen wird wenn du angular installierst werden immer standardmäßig diese Tilden benutzt aber es gibt auch packages ähm ja wie z.B hier dieses jaess Types da ist das wirklich egal deswegen nimmt man da dann dieses andere Symbol und
Meistens ist das in den readmys von den packages auch äh beschrieben wie wie also inwiefern die sich ihre Version ändern gut ä noch mal hier zu dem command also wir brauchen diesen Monaco language Client und damit ich nicht so viel tippen muss habe ich jetzt gleich noch eine andere dependency das ist den
Die Monaco Editor workers und die brauchen wir heute noch nicht die will ich nur schon mal installieren und auch damit die Version passt und so zeig ich das schon mal die sind noch mal so eine Veränderung von dem Monaco Editor so dass bestimmte Logik von den language
Also von den language Servern nicht in dem in dem Browser uiad passiert sondern eben auch in so einem worker so wie wir das machen aber eben bezogen nicht auf language Clients sondern auf so so so vordefinierte Sprachen wie HTML Javascript Java was auch immer schon dabei ist also das lagert quasi diese
Logik von diesen verschiedenen language services aus in worker so wie wir das selber schon implementieren ähm ist auch später nur eine Zeile die wir hinzufügen müssen aber da bin ich mir noch nicht 100undertprozentig sicher wie äh wir das machen müssen weil wir wollen das kann ich auch schon mal sagen also wir machen
Jetzt erstmal so einen ähm so einen Editor wo man unsere Sprache benutzen kann aber noch nicht ausführen kann oder noch nicht kompilieren kann nächste Woche bauen wir den dann um s dass das so so ein zwei Spalten Layout ist wo man eben auf der einen Seite die Sprache von
Euch bearbeiten kann und auf der anderen Seite immer das Ergebnis vom Compiler sieht also z.B in meinem Fall ist es man man editiert eben den den dival Code und auf der anderen Seite taucht dann sofort der Javascript Code auf der generiert wurde und je nachdem was ihr für eine Output
Sprache habt könnt ihr das natürlich dann auch machen das soll dann so ein bisschen funktionieren eben wie so ein playground wo man das den Compiler halt so im im gesamten testen kann so jetzt sind hier so ein paar warnings wir müssen jetzt nämlich eine Sache machen wo man tatsächlich sehr
Aufpassen muss wir haben jetzt grundsätzlich gesagt wir möchten vs Code und Monaco Editor als dependencies eben mit dieser speziellen ja ich nenn es mal um Umleitung oder sowas haben also wie wie wie ein Redirect könnte man sich das vorstellen m das funktioniert für unsere Ebene also für die direkten Abhängigkeiten wenn wir
Jetzt von Monaco Editor irgendwas importieren dann wird das irgendwie hierauf umleiten aber wenn wir eine Library benutzen die selber den Monaco Editor importiert dann nimmt die wieder den richtigen Monaco Editor also die richtige Implementierung davon und das ist ein Problem also es würden dann quasi zwei verschiedene ähm
Versionen von Monaco Editor bei uns in den dependencies liegen und je nachdem welche Library gerade den versucht zu laden wird unterschiedlich wird wird eine unterschiedliche Version gewählt das ist ein riesen Problem weil der Monaco Editor ist im Wesentlichen man könnte sagen also so von der Benutzung ist es ein sehr großes
Singleton im Browser der hat irgendwelchen globalen Zustand der in dem in dem window Objekt im im Browser abgelegt wird deswegen ist er an sich leicht zu konfigurieren für uns sp später aber da kommen da gehen also da gehen leicht Dinge kaputt wenn man mehrere verschiedene Versionen von
Monaco Editor im selben Projekt hat und das ist mir tatsächlich schon ein bisschen passiert und dann hat man ewig nach den Fehlern gesucht da gibt’s aber zum Glück eine Lösung wo wir jetzt sagen können an pnpm bzw NPM wenn jemand den Monaco Editor irgendwo benutzt also nicht nur
Als direkte dependency sondern auch als transitive dependency dann soll bitte das hier benutzt werden und diese Funktionalität nennt sich overrides in dem in der PowerPoint die ich geschickt habe die ich hochgeladen habe sind steht auch noch mal ein bisschen Doku dazu also das ist etwas was man hier ins package Jason reinschreibt
Und ich kopiere es auch einfach mal rein bevor ich das mache nee das komm wir gleich also overrides die sehen so aus also man sagt hier ja pnpm also das ist spezifisch für diesen Package Manager wenn man das für NPM machen will dann glaube ich muss man das weglassen
Und für jah nennt sich das Ganze resolutions aber wir benutzen glaube ich nicht also ich ich hoffe dass ihr alle pnpm benutzt nur dass ihr das schon mal falls jand was anderes benutzt hat gehört habt wir haben jetzt hier diese overwiites und da sagen wir eben im Wesentlichen alle transitiven dependencies die Monaco
Editor oder forcode sind sollen auch wieder ersetzt werden und normalerweise könnte man jetzt hier auch einfach das hier reinschreiben das auch alles schön und gut funktioniert auch hervorragend so habe ich auch die ganze Zeit jetzt entwickelt das Blöde ist nur wenn man jetzt irgendwas updatet dann wird das hier
Nicht mit aktualisiert also muss man immer an zwei verschiedenen Stellen hier in der package JSON das Aktualisieren wie gesagt durch diese kompatibilitäts Matrix müsst ihr da relativ oft irgendwas ändern wenn ihr wenn ihr eins von diesen ganzen Sachen aktualisiert und wenn man das so schreibt mit diesem Dollarzeichen das eine spezielle Syntax
Eben für diese steht do in der Doku drinne dann nimmt der einfach die Version die hier oben steht also die direkte dependenc Version so also das ist so halt so ein bisschen wodo das sind irgendwelche tief tiefen pnpm Features aber die sind jetzt an der Stelle ausnahmsweise mal
Nützlich um das umzusetzen was wir hier machen deswegen und es ist nicht schlecht sowas mal gesehen zu haben also es ich zeig vielleicht nächste Woche noch mal eine andere Sache die man mit MPM speziell machen kann m wo man in dependencies irgendwelchen Code verändern kann und zwar so dass der
Nicht verloren geht wenn man notde modules löscht das ist in einem Fall also das ist ein super Hack ne das logisch das ist als würde man in also in Java konnte man auch sowas machen da würde man einfach die Klasse kopieren und sich selber in die
Ähm in in den Code reinlegen und dann wird auch diese Version der Klasse benutzt aber das ja ist halt irgendwie bisschen komisch von anderen libraries die haben sich ja meistens schon was gedacht wie Sie Ihren Code programmiert haben aber wenn man es mal irgendwie doch ändern muss dann gibt es diese
Möglichkeit okay so jetzt installiere ich noch die anderen zwei Sachen die ich brauche und zwar ist es das vs Code language Server protocol das ist übrigens auch für die anderen Dinge also wenn man jetzt nicht diese diesen Webeditor bauen will ist es trotzdem eine nützliche dependency weil von
Diesem language Server Protocoll da sind diese ganzen Interfaces definiert die wir ständig importieren in unserem language Service z.B ich gucke mal hier in dem completion Service da importieren wir ja immer hier diese completion params und dieses completion item und so und wenn wir da drauf gehen dann sieht man dass die eigentlich
Gar nicht aus diesem language Server an sich kommen sondern noch mal aus einer anderen dependency nämlich language Server types und die kriegen wir auch wenn wir dieses language Server Protokoll benutzen und das coole ist sogar dass wir dieses Problem was ich immer hatte wenn man man auf dieses automatisch importieren dann wurde ja
Immer von dem language Client importiert wo ich immer gesagt habe das ist blöd dass das macht’s nur kaputt da müsst ihr immer aufpassen aber tatsächlich wenn man das hier installiert dieses language ser Protokoll dann kriegt man auch die Vorschläge und dann funktionieren die tats also ich könnte das hier tatsächlich alles austauschen
Und ähm es würde immer noch der der der Code würde immer noch funktionieren es würde jetzt auch nichts also das ändert tatsächlich rein gar nichts an dem fertigen Bundle weil das sind nur die typdefinitionen aber äh ist eine nützliche dependenc so und dann weiß ich nicht warum hier die ganze Zeit was
Steht dann brauchen wir noch zwei andere Sachen hallo irgendwas ist hier komisch ich glaube mein Computer hät sich mal wieder aufgehangen okay ich glaube jetzt geht wieder alles meine Tod Liste ist auch noch sichtbar gut dann können wir weitermachen ich Brau jetzt noch zwei weitere dependencies und zwar death
Dependencies und die haben was mit Webpack zu tun das hat auch ein bisschen was mit diesem Monaco zu tun da sind so ein paar Dinge also der benutzt so ein paar [Musik] CSS Features und auch irgendwelchen anderen Kram die sich die richtig komisch sind und dafür braucht man so
Zwei Sachen die nennen sich Loader das ist der CSS Loader und der Style Loader das machen wir gleich in die Webpack Config und im Wesentlichen sagt man damit gleich wenn irgendwelche bestimmten Sachen importiert werden in CSS Dateien dann soll der damit auf bestimmte Weise umgehen ich weiß nicht ob ich noch mal
Pnpmi machen muss ja passt okay overwiites haben wir genau dann brauchen wir die Webpack Config und hier müssen wir jetzt was einfügen hier gibt’s jetzt so ein Modul und da gibt’s Regeln und bei diesen Regeln kann man angeben wie soll mit bestimmten Datei umgegangen werden und hier sagen wir z.B CSS Dateien sollen
Mit diesem Style Loader verarbeitet werden und mit diesem CSS Loader und dann gibt’s hier noch so eine Möglichkeit irgendwie so Parameter zu übergeben frag mich nicht warum man das übergeben muss es hat irgendwie also ich habe das benutzt und es hat funktioniert das ist irgendwelche komische Webpack
Magie nächste Woche zeige ich euch noch mal wie man das mit esbild macht das habe ich jetzt auch endlich hinbekommen und das ist generell finde ich es Bild ein bisschen moderner und schöner als Webpack deswegen aber man muss das mal gesehen haben wie man das eben hier machen kann müss ja nur
Copypasten die andere Sache ist hier in diesem Monaco Editor gibt’s irgendwie so komische Datei nämlich einmal eine font das ist für die Icons die an manchen Stellen benutzt werden das ist diese TTF Datei dann gibt’s irgendwelche MP3s keine Ahnung wo die benutzt werden ich nehme an der kann irgendwelche Sounds
Abspielen vielleicht irgendwelche keine Ahung wenn man irgendwas oder so und dann gibt’s hier so ein paar webassembly Dateien ich weiß nicht wofür die sind ich nehme an die sind auch irgendwelche language Server aber im Wesentlichen was hier passiert ist wenn die irgendwo benutzt werden diese Dateien dann sagen wir Webpack die
Sollen einfach in den Assets Ordner kopiert werden und dann referenziert werden mm das ist halt ich glaube in den Folien ist auch dieses eine Beispiel mit diesem pipen pyen Client ich weiß es nicht mehr genau wie es heißt wo die das in diesem ähm Monaco language Client zeigen also das
Quasi das Beispielprojekt von denen da machen die auch sowas hier so aber wir müssen jetzt einfach nur wissen dass man das braucht um ein paar Fehler zu beheben die ansonsten auftreten würden ihr könnt es ja mal irgendwann rauslöschen und gucken was passiert Problem ist halt da kommen eine Millionen fehlernachrichten weil es halt
Viele von diesen Dateien gibt so viel dazu dann müssen wir nur noch ein paar Sachen ändern in der project Jason und das ist auch wieder nur Copy Paste ich kann diese Dinge also diese Schnipsel die ich jetzt hier reinkopiere natürlich auch wieder in den discord schicken D müsst ihr das nicht alles
Abtippen weil kann mir vorstellen hier können ja auch types passieren m wir haben ja hier diese Assets also jetzt in dem Webprojekt ist ganz wichtig und damit sagen wir welche Sachen sollen später in diesem Assets Ordner landen oder generell dass es diesen Assets Ordner geben soll ähm wir brauchen jetzt hier noch drei
Andere Sachen und zwar haben die jetzt auch wieder was mit diesem Monaco Editor zu tun zumindest das hier m es gibt hier irgendwo so eine Fontdatei und die wird irgendwie anders importiert als die anderen Fontdateien deswegen muss man hier m die extra kopieren und damit wird im Wesentlichen
Gesagt aus diesem arkanen Ordner hier soll diese Datei in das root Verzeichnis von unserem fertigen von unserer Anwendung kopiert werden und äh dann sind hier die also hiermit sagen wir noch mal ähm dass von diesem Monaco Editor workers dass da ein paar Dateien auch in dies in so ein
Verzeichnis kopiert werden sollen also unter Assets und Monaco Editor workers können uns gleich den distordner angucken wie das dann fertig aussieht da entschieden halt einfach nur so ein paar Dateien wichtig für uns ist jetzt noch also das ist neu ähm dass wir hier den examplesordner kopieren also das diese
Diese Input äh gibt immer einen fah an und der ist relativ zu dem Projektverzeichnis also nicht zu diesem Verzeichnis hier sondern zu dem von eurer Repository das heißt wir können uns hier auch aus dem examples Ordner z.B Dateien rauskopieren und das ist ganz nützig weil ähm wir wollen ja dann
Immer wenn man diese Webseite die wir oder diesen Webeditor öffnet dann wollen wir einen Beispiel anzeigen und wir kopieren das jetzt rein und dann kann man später über fetch oder über HTTP Client oder sowas sich das einfach holen das funktioniert ganz gut gut so und wenn da mehrere Dateien in eurem
Examplesordner sind dann könnt ihr euch eine aussuchen also in dem in dem Code von der Webanwendung könnt ihr das dann auswählen oder ihr könnt sogar so einen dateiicker oder sowas wählen so also das auch wieder nur CopyPaste Kram mehr müssen wir damit nicht machen so jetzt ist natürlich
Meine Vorbereitung vorbei ab jetzt wird geprreestyt aber ich habe das ja alles schon mal programmiert wir müssen jetzt so ein bisschen schon mal anfangen auch über angular zu sprechen ich weiß nicht wer von euch hat schon mal angular benutzt okay also so die Hälfte kann natürlich nicht jetzt entscheiden wie
Viel die anderen aber ich muss es ein bisschen erklären ich werde jetzt nicht komplett in die Details reingehen es gibt von angular wunderbare Tutorials und auch glaube ich Millionen von anderen Kursen und sonstigen Kram wo angular erklärt wird wir brauchen es tatsächlich auch nicht sonderlich viel also wir werden am
Ende irgendwie zwei Komponenten haben und vielleicht ein Routing oder sowas aber mehr haben wir nicht also unsere Webanwendung wird nicht kompliziert was eingel angeht alles andere passiert dann eben in den Monaco Editor konkret zu allem das ist eine gute Idee das können wir dann vielleicht irgendwie in in den
Discord schicken oder SAS ja gut also eng um das noch mal so ein bisschen aufzufassen wir bauen jetzt natürlich einen Frontend angular ist ein Framework was unsere was uns erlaubt unsere unser Frontend zu strukturieren in verschiedene Komponenten Module und Services und was das so bisschen tut ist diese Komponenten die bestehen aus
Templates und Code die Templates sind in HTML plus so ein bisschen Templat Sprache geschrieben und die werden übersetzt in Javascript und andere Dateien die dann im Browser ausgeführt werden können das passiert zum Glück alles automatisch für uns alles was wir bisher machen mussten vielleicht erinnert ihr euch war ähm eben hier
Dieses dieses Web zu generieren als wir gesagt haben das soll eine angular App sein und jetzt sind hier halt schon viele Dinge entstanden so wie diese Index HTML wo hier der Titel steht und so hier steht dass wir diesen irgendwie so einen rout haben und dann haben wir
Hier schon so ein paar Komponenten bekommen das müsste leere Ordner sein ähm klassische Web gibt’s natürlich auch so CSS und so ein Kram ich glaube ich habe jetzt hier nichts drinne da könntet ihr dann noch mal so ein bisschen Styling machen also meintwegen könnt ihr auch Bootstrap benutzen oder so um jetzt
So das Drumherum also den Monaco Editor an sich könnt ihr natürlich nicht viel verändern der wird immer gleich aussehen aber irgendwie wenn der Hintergrund von eurer Seite wo der Monaco Editor drinne liegt noch eine andere Farbe haben soll könnt ihr das hier machen aber dazu findet ihr wie gesagt eben auch ganz
Viel in den verschiedenen angü Tutorials dann gibt’s hier so eine maints da müssen wir auch erstmal nicht viel machen und eben hier diese Assets und die sind im Moment leer da könnte man theoretisch noch mehr reinpacken aber ist erstmal nicht wichtig so dann gucken wir noch mal kurz
Zurück wir hatten schon hier dieses websf ich weiß nicht ob ich euch das gezeigt habe das einfach dieses dieser Befehl Surf ist nennt sich oder das was das ausführt nennt sich auch Def Server und zwar angular funktioniert im Wesentlichen in zwei verschiedenen Modi entweder ich bin im Def Modus oder ich
Bin im production Modus im deathmus kann ich sagen starte das mal das mache ich jetzt mal hier rüber dann ähm was ist hier los Log Files changed okay ähm dann werden die also dann könnt ihr das im Browser öffnen und wenn ihr irgendwelche Änderungen an den Dateien macht dann aktualisiert sich das
Auch im Browser und dann gibt’s den production Modus da passiert das was ich eben gesagt habe dass der gesamte Code von eurem von eurer Anwendung zusammengepackt wird und dann wird so ein so ein werden quasi statische Dateien generiert die könnt ihr dann auf irgendeinen Webserver packen das werden
Wir übrigens auch noch machen also ihr habt ja ihr könnt euch vielleicht erinnern ich hatte [Musik] diese diese Webanwendung euch mal gezeigt da konnte man drauf zugreifen das ging über dieses GitHub io das nennt sich giitub Pages und da werden wir später dann auch publizieren also die unsere Anwendung
Bereitstellen jetzt versuche ich das noch mal Moment NX Reset und dann noch mal das hier also das dauert jetzt Moment diese generell angular braucht immer eine ganz schöne Zeit um zu kompilieren je nachdem was man macht hier hat jetzt schon über 2 Sekunden gedauert das liegt teilweise eben auch an diesem Webpack nächste
Woche wie gesagt versuchen wir es mal mit esbild das geht alles ein bisschen schneller aber wenn das fertig ist können wir hier auf den Link klicken und dann geht das auf und jetzt haben wir hier im Moment eine leere Anwendung ähm ich weiß nicht ob ich das euch schon
Gezeigt habe aber die Anwendung ach ja genau wir hatten das letzte Woche schon oder oder letztes mal schon gemacht wir haben die Beispieldatei gelöscht und hier diesen diesen worker gestartet ich glaube hier an der Konsole waren den language Server in Webworker also das hatten wir letztes Mal gemacht jetzt
Erinner ich mich wir wollen jetzt halt hier diesen ganzen Bereich füllen und vielleicht gehe ich da erstmal so ein bisschen auf auf Angel ein hier sieht man schon es gibt hier eine bestehende Komponente das ist diese App component und m die gibt es immer also die kann
Man auch nicht löschen ergibt nicht viel Sinn aber wir können eben auch neue erzeugen hier steht jetzt z.B in dem Template das ist immer die html Datei steht nur hier dieses Router Outlet drinne da sage ich gleich noch mal was zu aber erstmal zeige ich euch wie man
Es hier so grundsätzlich macht also ich kann hier z.B irgendwie HTML reinschreiben dann schreibe ich hier irgendwie keine Ahnung Text rein wenn ich das speichere dann wird das automatisch in den Browser hier aktualisiert al es lädt sich immer wieder neu muss so ein bisschen aufpassen also alle Änderungen
Die dann in dem Editor z.B gemacht werden wenn man die nicht wenn man die nicht selber irgendwie im im Local storage oder so speichert sind dann weg aber man kann auf jeden Fall relativ schnell auch so hier diese Webanwendung dann aufbauen weil man immer wieder gucken kann was hat sich
Geändert so ich lass das einfach mal dort das erste ist das in Ordnung aber jetzt kommen wir mal zu diesem Router Outlet und zwar in angular kann man grundsätzlich diese Komponenten immer miteinander verschachteln und in in der einen Komponente irgendeine andere verweisen also z.B m habe ich jetzt hier nur diese
Appcponent aber kann sie glaube ich trotzdem benutzen wenn ich jetzt hier SCC root schreibe dann verweise ich mich auf die App component noch mal also es ist quasi rekursiv das macht in der Webseite nicht viel Sinn weil die dann unendlich groß wird aber ähm so kann man darauf zuweisen ich generiere gleich
Noch mal eine andere dann sieht man es natürlich besser und ähm das ist eine Möglichkeit die andere sind diese Router und wir werden das nicht viel benutzen aber der Router ist im Wesentlichen etwas womit wir über die URL steuern können was gerade angezeigt wird ähm man sieht jetzt gerade wir sind in
Der Adresse selber also ich glaube ich muss es mal stoppen wir sind quasi in dem Root Verzeichnis von diesem Server vielleicht muss ich den Tab auch mal schließen man kann aber hier auch sowas machen wie Slash Editor dann und dann dahinter eine andere Komponente machen wir müssen das aber eigentlich nicht
Machen machen wir vielleicht trotzdem mal gucken ich zeig euch einfach mal gut das heißt wir brauchen jetzt eine neue Komponente und die nennen wir natürlich Editor also das ist das was diesen Monaco Editor so ein bisschen verschachtelt wir machen später noch mal so einen playground da kann man dann
Wieder den Editor drinne benutzen und zwar mehrere davon auch aber erstmal fangen wir mit dem Editor klein an so ihr wisst ja generell wie man Sachen generiert mit NX das geht über dieses nxg und dann brauchen wir jetzt eine Komponente deswegen schreibe ich glaube ich mal component und die soll Editor heißen und
Ich glaube es kann sein dass es zu einem error führt weil er nicht weiß also wir wollen NX angular component okay und dann muss ich sagen Project Web also hier mit damit ich das einschränken kann man kann ja theoretisch auch mehrere angular Anwendungen eine n Projekt packen deswegen muss man es hier
Festlegen dann mache ich hier wieder derived wenn ihr irgendwie nx18 benutzt dann ist es natürlich noch mal anders ich glaube da muss man erst ein paar mal mit CD an in das zeichnes rein okay aber egal jetzt haben wir das wieder zurück und hier ist jetzt diese Editor component aufgetucht
Standardmäßig steht hier immer sowas wie Editor works das auch ganz praktisch weil dann können wir es hier direkt testen nämlich kann ich jetzt hier schreiben SCC Editor und dann verweise ich auf diese andere Komponent die wird quasi an der Stelle wo ich hier den den Namen geschrieben habe wird diese andere Komponente
Eingebunden und wenn man dann dann hier guckt steht hier Editor works jetzt kann man sich natürlich hier mal angucken wie das HTML aufgebaut ist also hier ist dies SCC root also die appconent und darin ist dieses H1 was ich geschrieben habe das Router Outlet und dann kommt hier der Editor und darin
Eben der Inhalt der in dem Template von dem Editor steht also hier dieses Editor works es gibt auch eine Browser Extension von angular die ich letztens entdeckt habe die ganz praktisch ist weil hier kann man diese Komponenten und deren Hierarchie auch noch mal sehen und sich angucken was die für properties haben
Und sowas müsst ihr aber nicht unbedingt benutzen also das ist nur in seltenen Fällen nützlich also so kann man quasi in in so einer eingüler Anwendung dann die Struktur schaffen man kann verschiedene Teile der Anwendung in Komponenten verpacken und die dann miteinander in Verbindung bringen eben indem man sie einfach
Referenziert so mehr muss man eigentlich fast gar nicht über angular Wissen um um jetzt weiterzumachen ich glaube ich mache das aber trotzdem noch mal mit dem Router wir haben ja hier diese roots approots TS das ist ein bisschen andere Syntax als das normal aussehen würde ich glaube wenn man das in älteren Version
Generiert hat wurde dann wurde dann ein roting Modul generiert jetzt ist es halt so ja ist nicht so schlimm im Endeffekt ist es das gleiche nur dass es halt ein bisschen anders geschachtelt ist so die mit dies Routing kann man jetzt sagen zu welchen URLs sollen welche Komponenten zugeordnet sein erstmal
Lösche ich das hier wieder weil wir das natürlich nicht machen wollen und jetzt brauche ich hier diese roots jetzt kann man z.B sagen wenn der Part gleich Editor ist dann möchte ich die Editor component benutzen am Anfang ist jetzt die Wendung immer noch leer weil wir
Sind ja nicht in dem Editor fah aber wenn ich jetzt z.B hier Slash Editor eingebe dann wird hier an der Stelle auch der Inhalt von dieser Editor Komponente angezeigt und ähm für diese Anwendung ist es jetzt nicht sonderlich nützlich weil wir nicht viel untereinander verlinken müssen aber man
Kann jetzt hier z.B links definieren wo man dann in andere Seiten springen kann wenn ihr das Ausbauen wollt könntet ihr dann z.B so ein about oder einen was weiß ich einen Tutorial von eurer Sprache unter einer anderen Route ablegen und dann könnte man da auf einen Link klicken und würde direkt da landen
Ähm man kann glaube ich also was was generell bei so DSLs und so immer cool ist wenn man so eine Doku hat wo man dann direkt ausprobieren kann was m was gerade der Code der da beschrieben ist macht also bei typescript z.B oder ich weiß es gerade kein kein Ding
Aber bei typescript z.B kann man immer äh sehen welche Typen haben die die Sachen die ich gerade mir angucke also kann man drüber Hovern in der Doku und bei cotlin z.B gibt’s immer einen play button also kann man drauf drücken und dann wird das ausgeführt was in dem in
Dem Beispiel steht von der Doku sowas kann man halt cool implementieren und wenn wir sowas haben wie diesen Monaco Editor und diesen ähm diesen language Server dann könnt ihr natürlich eine Doku erstellen wo man eure Sprache richtig gut ausprobieren kann mit errors und so weiter ähm das würde dann hier
Rüber gehen was ich jetzt machen will ist äh wenn man äh so wie das hier vorgeschlagen ist wenn man noch gar nichts ausgewählt hat also wenn man auf der Startseite landet quasi dann soll man automatisch zu diesem Editor kommen und dafür gibt’s hier dieses Redirect und damit das nicht irgendwelche anderen
Sachen noch mitmcht muss man hier per Match wol nutzen also der Doku von dem angular Router findet ihr eigentlich zu diesen Dingen relativ viel ähm das sorgt jetzt dafür wenn hier nicht Editor steht dass ich automatisch weitergeleitet werde also das wird automatisch angehangen an die URL und
Dann dann ändert die sich immer so ähm okay also Editor works ist gut das heißt wir können jetzt ein bisschen weiter machen dieser Editor der wird gleich ein bisschen was machen insbesondere eben so ein Monaco Editor erstellen und dann müssen wir halt noch so ein bisschen mit diesem language Client
Arbeiten das ist alles nicht viel Code man kann aber relativ viel falsch machen m deswegen müssen wir das in Ruhe durchgehen ich kommitte mal bis hierher keine Ahnung Feed Setup App weil sind eben mehrere se jetzt habe ich das hier vergessen super [Musik] m okay ich mache das mal kurz hier
Auf wir fangen mal mit der HTML an die ist nämlich denkbar einfach also die Editor component HTML da brauchen wir nichts anderes als ein DIV und dem geben wir noch so einen Style also und das braucht natürlich eine ID dieser Monaco Editor der wird gleich so funktionieren dass wir dem ein
Element geben also ein Dom Element in dem Fall halt hier dieses Diff Element und dann sagen installierere dich mal bitte in diesem Element und das was wir jetzt hier mit diesem Style noch machen ist zu sagen das soll bitte immer so hoch sein wie der Bildschirm man kann das dann natürlich
Auch halb so groß machen oder so je nachdem wie eure Webseite aufgebaut ist aber ich finde das mit diesem zwei Spalten Layout macht am meisten Sinn m mehr ist hier nicht den mache ich mal aus nur alles andere passiert jetzt eben auch in dieser Editor components die S
Auch leer da müssen wir jetzt erstmal anfangen äh und eine Initialisierung hinzufügen in angular funktioniert das so man implementiert ein Interface das heißt on init und dann braucht man eine Methode die oh nee das ist ja echt schlimm okay wir können weitermachen also es gibt jetzt hier eine Methode die heißt
Uninet das lustige ist dass wir die überhaupt gar nicht brauchen toll die muss nämlich anders heißen wir brauchen nicht on init sondern afterview init das geht jetzt schon eigentlich ein bisschen zu schnell in die Details von angular rein also ich will da nicht so mega viel jetzt zu erklären weil wie
Gesagt das ist alles boilerplate Code angular hat so einen life cycle der beginnt mit so einem init dann gibt es so einen View init und dann kann man sich davor und danach noch mal einklinken mit irgendwelchen Hilfsmethoden und ähm die also die haben eine bestimmte Reihenfolge die könnt ihr einfach
Nachgucken aber ich habe jetzt hier die so gewählt dass es einfach funktioniert ng afterview in IT mit diesem afterview init können wir z.B auf Sachen zugreifen die in der View sprich in diesem Teil in dem in der in der dem Template initialisiert werden also hier z.B dieses dieses Diff das kriegt den
Also das heißt darauf können wir zugreifen und wir müssen eben warten dass das auch wirklich angezeigt wird im Browser und weil erst dann gibt es natürlich das DOM Element und erst dann kann dieser Monaco Editor sich installieren man bekommt das mit so einer lustigen Annotation hier und zwar heißt die View childild
Damit kann man auf Sachen in dem Template zugreifen von dem von dem component aus und hier hier steht eben der Name dann kann man hier static sagen das heißt es ist immer verfügbar das ist ein bisschen Optimierung und das ist dann eine elementwap die kriegen wir auch von angular danach können wir darauf
Zugreifen nämlich indem wir dieses Dom Element uns holen da sagt man einfach Container native Element und also dieses native Element das kommt so ein bisschen daher dass angular an sich nicht unbedingt in dem Browser laufen muss also man kann angular benutzen indem man das als für für sogenanntte serverite Rendering
Benutzt da wird das dann der ganze Code den man in den angular schreibt wird ausgeführt es wird eine html generiert und fertig an den Benutzer geschickt und dann kann er damit weiterarbeiten deswegen haben die da so eine Abstraktionsebene es ist nicht immer alles gleich automatisch ein domelement es gibt manchmal eben auch so
So Rapper wir brauchen jetzt aber das und wir warten ja extra darauf dass die view initialisier wurde das heißt können auch davon ausgehen dass wir in dem Browser sind wenn wir das haben dann können wir mit einem richtigen Import den wir noch brauchen nämlich von Monaco Editor können wir uns diesen
Editor holen und dann kann man sagen Editor create und da gibt man eben dieses D Element mit man kann damit also man kann z.B mit Monaco auch so einen div Editor bauen also ein so ein wo man so zwei Dateien miteinander vergleichen kann z.B wenn man selber
Eine ID programmiert dass man dann so git oder sowas implementieren kann aber wir brauchen nur ein normalen das geht dann mit create und dann brauchen wir hier dieses Element und jetzt kann man hier Optionen mitgeben und die Optionen da habe ich jetzt nur ein paar wenige weil die sind
Teilweise wichtig für den für unsere Sprache ähm das kann ich auch noch mal vorher machen wir brauchen natürlich in diesem Editor component irgendeine variable wo wir uns den Quellcode der geschrieben wurde auch abspeichern können die nenne ich einfach Code und außerdem wollen wir uns auch ähm merken welche Sprache eigentlich
Hier in diesem Editor dargestellt ich habe schon gesagt wir werden später zwei Editoren haben der eine für für ähm generierten Code als z.B JavaScript und einer für die Sprache und damit man das unterscheiden kann brauche ich eben zwei Variablen die ich äh oder ja brauche ich eben diese Variable und dann das hier
Halt für den für den Code der geschrieben wurde da ist jetzt noch wichtig dieses Input das ist ein Feature von angular was uns erlaubt von einem übergeordneten component irgendwelche Daten an einen child component zu übergeben und das wirkt sich im Wesentlichen so aus wenn ich hier z.B STC Editor schreibe
Dann kann ich hier Code und language mitgeben also z.B Code ist gleich und dann hier irgendwie den Quellcode oder man kann das natürlich auch so machen wie bei einem normalen HTML Element language ist GLE divel oder so ähm brauchen wir aber erstmal noch nicht das ergibt sich
Gleich so das brauchen wir auch nicht mehr ein bisschen unübersichtlich wir geben natürlich diese Sachen einfach weiter also value so heißt hier die Option für den den Code das geben wir einfach so mit dann haben wir hier die language und dann brauchen wir noch ein zwei andere Sachen nämlich z.B das Theme
Damit sagen wir wie soll der Editor eigentlich aussehen standardmäßig ist er dann glaube ich weiß können einfach mal so lassen ähm ich hatte hier meinem Beispiel ist das Ganze die ganze Anwendung im Dark Mode deswegen habe ich hier vs ST benutzt deswegen wird übrigens auch dieser Monaco Editor dieses Bundel so weil da
Natürlich auch alle möglichen Themes mit dabei sind ähm dann brauchen wir einen sogenannten glyf margin das ist Platz am Rand vom Editor wo sowas hier dargestellt werden kann also da kann dann z.B so einen ähm so eine so eine Leuchte oder sowas dargestellt werden wenn wir irgendwelche
Quickfixes also so eine hier vcode ist die an der anderen Stelle deswegen müssen wir das Aktivieren und außerdem ist da Platz für so solche Knöpfe womit man ein und ausklappen kann also wir müssen halt hier dem Editor schon mal so ein bisschen sagen was brauchen wir später
Dann die Glühlampe an sich müssen wir auch aktivieren das geht so enable true und dann gibt’s hier noch so ein autom Layout das wir brauchen und für später das ist auch ein bisschen komisch müssen wir noch das Semantic highlighting aktivieren das geht auf diese Weise ich frag mich nicht warum das hier
Nicht geschachtelt in so einem Objekt ist sondern irgendwie so versteht niemand aber so funktioniert’s irgendwie so mehr muss man nicht [Musik] machen dann ach so und wir müssen uns diesen Editor natürlich merken also Editor und das ist ein Editor i standalone code editor so und der wird hier ah der ist
Optional der wird später gesetzt so jetzt haben wir das im Moment so dass wenn wenn der Code gesetzt wird also hier dieses Code Input wenn das in unseren component reinkommt dann wird das am Anfang angezeigt aber wenn dann jemand den Code ändert dann kriegen wir das nie
Mit weil der Text der in den Monaco Editor geschrieben ist der ist natürlich nur in den Monaco Editor gespeichert wir müssen den irgendwie wieder zurück in diese Variable hier reinbekommen und dafür gibt es ein ein Event von diesem Editor das heißt on change Model content also wenn sich quasi intern heißt das
Alles Model ich weiß nicht warum eigentlich kann man dieses dieses mit diesem value und so kann man noch mal komplizierter machen muss uns aber nicht interessieren nur falls euch dann falls ihr da mal irgendwie andere Beispiele seht dann wundert euch nicht warum da immer Model steht Model ist da die Bezeichnung für
Ein eine Art Modell von der von dem Code der da drin existiert so dann brauchen wir jetzt hier noch so einen Code change und das ist in angular das Gegenstück zu diesem Input nämlich ein Output wir können über Input können wir Daten vom parent component in den child component
Reingeben aber wenn wir das rückwärts machen wollen also vom child zum parent irgendwelche Daten schicken wollen dann brauchen wir natürlich einen Output und das geht dann so Code changed und da muss man dann ein Event ememitter machen und hier eben vom Typ String und das erlaubt uns dann auch vom parent
Wieder diesen also von der anderen Komponente diesen Code uns zurückzuholen z.B um den abzuspeichern immer wenn sich was ändert wollen wir den Code in den Local storage schreiben also den den Text den der Benutzer da reingegeben hat in den Editor dafür bräuchten wir dann sowas so und über get value bekommt man
Eben diesen Text so ähm dann brauchen wir noch was und ähm das ist jetzt schon mal so ein bisschen vorbeugend also im Moment ist es auch so dieses Input das kann sich prinzipiell ändern also während das Programm läuft können wir die Inputs von unseren child components verändern also z.B einen
Neuen Text da reinschreiben das ähm funktioniert natürlich gut da steht dann hier drin auch in dieser Variable aber dann weiß dieser Editor natürlich nichts mehr davon der hat ja sein eigene Kopie von dem Text der da drinne steht und der wird dann nicht aktualisiert das werden wir gleich merken wenn wir äh
Dieses dieses Laden von den Beispielen machen da müssen wir jetzt noch mal ein bisschen Code hinzufügen und zwar brauchen wir hier wieder einen neues Interface und zwar heißt es onchanges das benötigt dann natürlich auch eine Methode und die heißt ng on changes da gibt’s dann solche simple
Changes und da kann man mitbekommen wenn sich irgendeine variable des Controllers des components ändert da müsst ihr auch nicht so super viel jetzt drüber nachdenken das ist auch einfach nur boilerplate im Prinzip das sagt aus wenn sich dieser Input verändert also Code verändert wird das aufgerufen dann kann
Man gucken hat sich das verändert und wenn ja holt den current value und schreibt den auch in den Editor rein so das ist der nächste boilerplate und dann brauchen wir jetzt noch was nämlich ähm ein on destroy logischerweise wir erstellen hier irgendwelche Dinge diesen Editor und so und melden da irgendwelche Dinge
Drauf an die müssen wir auch wieder abmelden also wenn z.B der Benutzer irgendwo anders hingeht und dann dieser unser Editor component ausgeblendet wird dann müssen wir das auch wieder aufräumen was wir hier fabrizieren dafür gibt es dann ein ng und destroy und hier kann man jetzt sowas machen wie dis. editor
Dispose und die anderen zwei Sachen machen wir gleich also damit wird dann dieser Editor wieder aufgeräumen wir können das ja einfach alles mal ausprobieren ähm damit das hier nicht zu Problem führt sage ich jetzt einfach mal dieser Code ist da steht einfach mal erst irgendwas drinne und dann gucken wir was hier drüben
Passiert läuft natürlich nicht mehr ähm in dem Moment wo wir hier oben sagen ähm Import Editor von Monaco Editor da holen wir uns diesen ganzen Rattenschwanz mit dazu der zu diesen anderen Problemen führt die wir vorher schon gefixt haben also hier sieht man z.B hier sind ganz viele warnings aufgetaucht irgendwie
IPad Show Keyboard blablabla hier steht was von diesem Style Loader die wir installiert haben ähm wenn wir den nicht hätten dann würden hier an der Stelle errors sein das kann man alles ignorieren man kann leider nicht sagen dass die ignoriert werden sollen also es die gar nicht erst
Angezeigt werden sollen muss ihr die tatsächlich so mental ausblenden gut aber es hat alles kompiliert ist irgendwie sogar ein Wunder aber wir haben es halbwegs geschafft und dann zeige ich euch mal wie das jetzt aussieht wir haben ähm hier an der Stelle natürlich ist jetzt nicht mehr sichtbar dieser Editor compponent und in
Dem Editor compponent gibt’s hier diesen Monaco Editor und hier steht jetzt nur ASD weil das ist der der Code den ich geschrieben habe aber man man man erkennt schon so ein bisschen dass das hier nicht nur le Text ist also hier ist gibt’s ein Cursor der blinkt
Gibt’s eine Box wenn ich hier irgendwie was tippe dann stehen neue Zeilen hier ist eine Scrollbar hier ist sowas ich kann ja mal das kriege ich jetzt hier schlecht rein [Musik] aber nehme mal hier die Beispieldatei so ein bisschen reduziert und Pack die einfach mal hier so
Rein so sieht zwar nicht schön aus aber tut’s erstmal das kann Weg auch so und jetzt sieht man hier schon mal die Beispieldatei also dann man kann jetzt auch schon z.B gucken also wenn ich hier rechtsck mache change all urences und sowas dann kann ich die alle
Ändern man kann hier command F drücken dann taucht h so eine Suche auf und sowas also dieser Editor bietet uns jetzt schon relativ viel an ich weiß nicht welche commands ups ich weiß nicht wie wie man die die Actions aufrufen kann also in in vscod erinnert ihr euch ja da kann man
Dieses actions Menü wo man z.B dieses scope view TextMate scope und sowas machen konnte oder restart language Server das geht eigentlich im Monaco Editor auch aber ich weiß das Kürzel dafür nicht später taucht hier mal so einen einen Punkt auf in dem in dem Kontextmenü jedenfalls ähm ohne dass wir
Viel gemacht haben kann der jetzt schon irgendwie wenigstens als plaintex Editor fungieren äh wir können sogar hier schon ein und ausklappen also er hat schon erkannt dass das irgendwie Klammer oder besser gesagt ich glaube er erkennt dass es einrückungsmäßig ähm zu einem Block gehört das heißt so ein bisschen schlau als
Schlauer als einfach nur den textieren das HTML reinzuklatschen ist das schon mal ähm und hier wie man sieht ist auf jeden Fall Platz für das hier und ich glaube hier drüben ist auch noch mal Platz ähm das haben wir jetzt schon alles also nicht viel Code man muss nur hier so ein bisschen
Initialisieren ich kann ja mal das mit dem FM noch kurz zeigen und ähm ja eben auch aufräumen sieht im darkm aus was noch ein bisschen doof ist also wir haben gesagt dieser Editor soll 100% der Bildschirmhöhe also des der Fensterhöhe quasi haben dadurch hat er hier so ein bisschen unten so ein abgeschittenen
Rand das liegt an der Überschrift hier wenn sie nicht gebe dann würde es wieder passen wenn ihr da irgendwelchen anderen Ramsch noch mit Anzeigen wollt dann ähm kann man z.B auch das hier auf weiß ich 90 oder so stellen das sag dann halt 90% der Höhe des des Bildschirms reicht
Immer noch nicht egal also das das ändert sich dann noch mal ähm jetzt wollen wir natürlich mit diesem äh language Client arbeiten also wir wollen jetzt diese ganze äh dieses highlighting und so machen und äh hier Fehler anzeigen und sowas was ich euch sagen kann was wir heute nicht schaffen
Ist das tatsächlich das Syntax highcken also es ist einfacher jetzt erstmal die ähm semantische Analyse und so ein Kram zu machen als das syntax highlighting in diesem Monaco Editor liegt daran dass ähm hat ich irgendwann mal angekündigt also in den Monaco Editor gibt es eigentlich noch mal eine neue Art wie
Man die ähm wie man den Lexer definiert das ist aber nervig weil dann müsst ihr natürlich euren Lexer noch mal neu aufschreiben in in ein bisschen anderer Syntax es gibt aber auch eine andere Möglichkeit wie man diese TextMate Grammatiken die wir letztes in in dem zweiten meenstein aufwendig gemacht
Haben wie man die hier laden kann ich habe noch nicht hundertprozentig rausgefunden wie das geht muss ich noch ein bisschen rumprobieren aber wir wollen ja nicht so auch noch was machen also gucken wir mal weiter tatsächlich ja das ich mir mal weg wo ist das Fenster
Hier brauchen wir auch gar nicht mehr so super viel wir brauchen jetzt noch gleich eine andere Datei wo wir no ein bisschen was reinschreiben müssen aber wir machen erstmal hier weiter wir müssen uns schon mal merken dass wir gleich gich einen worker haben hier das ist diese dieses worker Ding
Was wir in der anderen Datei was ich jetzt auch mal bearbeite also hier dieser worker ne wo wir uns auf diesen Editor worker verweisen können das lösche ich mal und dann muss ich das auch löschen und das auch ähm den müssen wir natürlich dann später auch wieder aufräumen deswegen merke ich
Mir den mal und dann haben wir hier so einen LSP client das ist jetzt von Monaco language Client also genau das was wir vorhin installiert haben und den müssen wir natürlich initialisieren das geht aber relativ einfach und wir wollen den natürlich nur für unsere Sprache benutzen also habe ich hier eine filunterscheidung
Wen language gleich divil dann initialisier den und das geht jetzt eigentlich relativ einfach wir merken uns erstmal diesen worker den können wir ganz normal anlegen so wie in der Datei eben auch und dann brauchen wir einen Reader und einen writer ich hatte in der bei der in der letzten Vorlesung in
Diesen Folien gezeigt dass es eben zwei verschiedene Prozesse gibt oder zwei verschiedene Threads eigentlich einmal das was angezeigt wird also der Editor und einmal das was im Hintergrund von unserem language Server gemacht wird und die müssen natürlich miteinander sprechen und zwar in zwei Richtungen deswegen brauchen wir zwei verschiedene Objekte die diese
Kommun übernehmen und das sind diese Browser message writer und Leader die kommen von VS Code language Server und zwar Browser also die sind tatsächlich da schon vefiniert und wenn wir die haben können wir diesen LSP Client anlegen nämlich brauchen wir dafür gleich noch eine neue Funktion die mache ich eine andere
Datei und die heißt create language client und da geben wir Reader und wiiter mit das machen wir gleich wenn wir den haben dann können wir ihn natürlich auch starten also der kann gerade nicht wissen dass das nicht undefined ist ähm der Error geht gleich weg und es kann auch passieren dass sich dieser
Reader hier irgendwie ja beendet dafür gibt’s hier so einen onclose und da kann man sagen LSP Client stop so also das ist auch wieder diese Log die man zum Aufräumen braucht genauso braucht man natürlich hier unten auch so ein LSP Client Stop und lustigerweise ist die Funktion glaube ich asynk das heißt wir
Müssen mit dieser Promis irgendwie umgehen das ist aber praktisch wir können hier denn schreiben weil erst dann können wir diesen worker hier auch stoppen also beim aufräumen müssen wir dann eben einmal diesen LSP kin stoppen der sendet dann z.B an den Server so einen so ein Close oder Stoppbefehl der
Server sich noch mal aufräumen könnte und dann terminieren wir einfach diesen worker also wir wir stoppen quasi den Thread wo der Server drinnen läuft und das sollte dann reichen um tatsächlich ordentlich aufzuräumen dann ah haben wir das onesty jetzt brauchen wir natürlich hier diese Methode und die
Packe ich jetzt mal bewusst in eine andere Datei weil die ein bisschen woanders hingehört und zwar wir machen uns jetzt so ein bisschen zu Nutze dass diese also wie das Modulsystem von von Javascript funktioniert aber da kommen wir gleich zu ich brauch eine Datei die nenne ich einfach mal Monaco
TS und da passieren jetzt ein paar Sachen drinne das allererste was in dieser Datei passieren muss und das ist tatsächlich ein passieren in dem Sinne dass das irgendwie eine Methode aufruft und so also wir wir deklarieren hier nicht nur sondern wir wir machen auch in dieser Datei was und das nennt sich init
Services das ist von diesem Monaco language Client und damit sagen wir dem Monaco language Client quasi dass er sich in den Monaco Editor installieren soll bevor wir das machen können müssen wir noch den Monaco Editor importieren und zwar ma ich das diesmal so also wir wollen den gesamten Editor
Diesmal importieren nicht nur dieses Editor Objekt so das hier überspringen wir und jetzt können wir den so ein bisschen umkonfigurieren jetzt kommt diese Geschichte zum Tragen wo ich gesagt habe das ist im Wesentlichen ein großes Singleton sagt jetzt hier Monaco languages Register also hiermit registrieren wir unsere Sprache und das
Passiert auch nur einmal also dieses diese Methode wird nur einmal aufgerufen weil eben wir diese Datei nur einmal importieren es ist ein bisschen komisch aber es gibt keinen anderen Ort wo man das sinnvollerweise diese beiden Methoden hier aufrufen könnte weil wenn wir das z.B hier machen in dieser
Methode dann würde das falls wir zwei Editor component Anzeigen in unserer Anwendung was wir später tun werden dann würde das zweimal diesen Monaco language klein installieren und das fürt zu errors das heißt wir müssen das IR an irgendeiner Stelle machen wo wir wissen dass nur einmal passiert und dafür ist
Es hier an der Stelle ganz praktisch so dann muss man hier bei dieser language muss man halt wieder eine ID angeben die nen ich jetzt mal da will dann braucht man hier aliases das ist im Wesentlichen die Anzeige äh wie die Sprache heißen soll und dann eben auch wieder diese Extensions also
Ähm so ähnlich äh wie in der in [Musik] dem in der vcode Extension definieren musstest was sind die Extensions also die Dateinamenerweiterung und die alias und sowas müsst ihr das eben hier auch in diesem dieser Datei machen dann die andere Sache das machen wir heute nicht
Aber ich zeig’s nur schon mal man kann hier einen monar Tokens Provider definieren und dann würde man z.B hier die language ID benutzen und hier in so einem dann diesen diesen Lexer definieren ich zeig das vielleicht einfach mal ganz kurz aus der Musterlösung das irgendwie so dass ihr schon mal seht wie das
Aussieht es funktioniert natürlich so ähnlich man definiert eine ganze Reihe von verschiedenen regulären Ausdrücken bzw Modi also hier gibt es diesen root Modus und Kommentare und Strings und werden noch mal ein bisschen anders behandelt aber hier gibt’s so ein paar Sonderregeln wie man dann z.B hier mit
So einem add Open und sowas arbeitet das erkläre ich dann glaube ich noch mal in Ruhe falls ihr wirklich dieses monag brauchen also ähm ich find es relativ angenehm mit diesem monag irgendwie ein dexer zu definieren weil man z.B hier schon mal die Schlüsselwörter und die die Type
Schlüsselwörter oder sowas das kann man in einfach in in Listen packen man muss es nicht in so ein regulären Ausdruck irgendwie reinschreiben und außerdem schreibt man ja hier keine B Datei sondern JavaScript da ist mit dem escaping und so ist alles ein bisschen einfach man hier einfach reguläre Ausdrücke direkt als als JavaScript
Sprachfeature benutzen muss die nicht irgendwie escapen und so ein Kram aber ähm wir hatten ja sowieso schon dieses TextMate lexter geschrieben noch mal machen ist jetzt auch irgendwie blöd also aber so würde das im Wesentlichen Aussehen ich kann es dann auch noch mal schicken falls wir es benutzen oder wie
Auch immer kommt wird sich irgendwie im Laufe der nächsten Woche entscheiden ähm wenn wir das haben muss ich gerade noch mal meiner muslösung gucken äh dann kommen jetzt nur noch diese create language Client Funktion die wollen wir exportieren und ähm übrigens warum die eigentlich hier in dieser Datei ist wenn wir nichts von
Dieser Datei importieren exportieren würden könnten wir sie in der anderen Datei nicht importieren also das ist eigentlich streng genommen ist das alles ein bisschen Hacky man könnte auch diesen ganzen Inhalt von diesem Kram hier in die Editor component TS packen ich habe es jetzt aber mal getrennt
Weil das ein bisschen Cleaner ist so create language Client da gibt’s diese Transports als Parameter das heißt einfach nur message Transports und wir geben einen Monaco language Client zurück so hier ist natürlich jetzt noch ein Error aber wenn wir das jetzt hier importieren dann geht auch hier der Error Weg
So hier drin passiert jetzt eigentlich fast nurer deswegen kopiere ich das einfach hier rein m da ist jetzt nichts was man großartig konfigurieren muss man kann da so ein paar Sachen ändern ich glaub bei diesen Client options und so kann man relativ viele andere Dinge noch mit angeben aber wir brauchen das
Alles nicht bei uns ist das relativ einfach dieser language Client weil wir den über diesen Webworker machen man kann auch language Clients so konfigurieren dass sie z.B mit einem Server sprechen also mit einem richtigen Server der irgendwo verfügbar ist und einem anderen Port z.B die kürden dann über einen websocket sprechen oder ja
Doch ich glaube websocket ist die einzige Möglichkeit was man da benutzen kann also man könnte dann das die Architektur von seinem Webeditor so machen dass man dass der Benutzer dieses Frontend sieht aber es eben kein Webworker gibt sondern dieses Frontend immer mit einem von euch gehosteten Backend spricht was den language Server
Part übernimmt ich finde das von der Architektur ziemlich doof weil ihr müsst dann also wenn man das jetzt ausrollen würde dann müsstet ihr die ganzen Kosten für dieses Backend tragen und wenn alle Benutzer von euch alle mit demselben Backend sprechen und da überall die language Server die die Dateien von den
Von den Benutzern durchrödeln dann ist das natürlich erstens große Distanz zwischen dem was der Benutzer macht und dem was auf dem Server passiert das hat immer einen Delay und zweitens natürlich viel zu viel rech Aufwand deswegen ist das mit diesen webworkern schon eigentlich auch so wirklich cool und die
Die die Treffen auch den richtigen tradeoff zwischen die sind benutzbar indem sie die den Editor nicht z.B aufhängen lassen weil der language Server gerade lange braucht das ist ja dadurch dass es in zwei verschiedenen swats läuft ist es gewährleistet und sie sind halt auf dem auf dem Computer von
Dem Benutzer so dann braucht man hier so actions ähm also noch mal von oben nach unten der Name ist eigentlich unbedeutend muss einfach irgendwas stehen der hat hier so einen document Selector damit sagen wir einfach nur welche language und also welche language ID dann das ist dasselbe was hier unter ID steht und
Dann gibt’s hier noch so errorhändlers mit dem connection Provider ich weiß nicht warum das so komisch in get und dann mit so promise und m Callback gemacht oder mit einer Funktion gemacht ist keine Ahnung hier werden nur diese Transports die wir ja vorher schon angelegt haben benutzt könnte die wahrscheinlich hier auch
Dynamisch anlegen aber was weiß ich egal das müsste eigentlich schon ausreichend sein könn mal gucken was hier drüben passiert okay ganz viele can’t resolve Editor workts das ist verständlicherweise ein Problem m hier sagen wir nur punk/editorwker der liegt aber in dem Ordner darüber also wir müssen den noch
Verschieben das war auch eigentlich so vorgesehen letzte Woche habe ich das halt auf die Schnelle anders gemacht der gehört da einfach rein wir machen nachher oder oder nächstes Mal z.B noch so einen anderen worker der heißt dann playground worker und damit trennen wir sogar die diese Funktionalität von wie
Was passiert in der IDE also diese Code Completion und sowas die unser Compiler kann und ähm wie kompilieren wir den Code also das ist dann noch mal was separates das läuft auf einem anderen worker es dupliziert so ein bisschen den Code von dem Compiler aber das ist im Endeffekt nicht so wirklich
Schlimm so jetzt müssen wir mal gucken ähm was steht denn hier eigentlich Export was not found das ist sehr viel ich stte das einfach mal neu also manchmal ist das komisch wenn man diese Sachen installiert hat oder sowas okay es wird nicht gelöst da muss ich gleich noch mal reingucken also ich
Glaube heute sowieso haben wir sowieso genug geschafft das kann ich auch noch nicht so fertig machenm ich vermute quick access Service ich vermute das hat was hiermit zu tun dass das nicht richtig überschrieben wird ich guck es mir noch mal an ansonsten schreibe ich noch mal in dem
Discord dann aber von dem grundlegenden Code den wir brauchen um das zum laufen zu kriegen haben wir jetzt alles es wird sowieso am Ende nicht schön aussehen weil wir eben das syntax highlighting noch nicht implementiert haben das kommt dann nächste Woche noch aber von diesem Monaco editor allisieren und den language
Client anlegen und sowas haben wir jetzt alles geschafft also tatsächlich in dieser Datei wird sich nicht mehr wirklich viel ändern in wir machen dann halt noch diesen playground um da noch mal so ein bisschen mehr drum drumhum zu machen das hier soll auch noch weg das soll dann dynamisch von diesem exampels Ordner
Geladen werden und so weiter aber das können wir alles nächste Woch machen ich glaube wir sind jetzt auch gerade in der guten Zeit was nur noch mal kurz zusammen also wir haben heute diese ganzen dependencies installiert wir haben noch mal in der Webpack Config was geändert damit wir den Monaco Editor benutzen
Könen können haben wir auch schon erfolgreich hinbekommen jetzt scheitert gerade natürlich an diesem Monaco language Client aber das hat hauptsächlich was damit zu tun eben wie die dependencies unterinander funktionieren m wir verlinken noch mal einen Video über wo wo Sel so ein bisschen angul erklärt wir konnen jetzt nicht super ins
Detail gehen aber wenn ihr die Schritte die ich jetzt gemacht habe nachmacht dann kommt ihr auf das gleiche Ergebnis wie ich und viel mehr muss euer webedit jetzt nicht ausmachen also wenn ihr später wollt wie gesagt ihr Können auch sowas machen dass der irgendwie die dateispeichert die der Benutzer
Bearbeitet hat damit die beim nächsten Mal laden wieder da ist oder einen Dropdown wo man die Beispiele auswählen kann oder so ein Kram also das das ist euch dann überlassen aber die genauen Anforderungen für den dritten Meilenstein werde ich ja sowieso noch posten ähm wir hatten vor der Vorlesung
Schon mal kurz besprochen also der dritte Meilenstein ähm wird wahrscheinlich Ende Januar irgendwann äh anstehen bis dahin ist nicht mehr viel zu tun also wir haben nächste Woche noch das noch den bisschen Inhalt das wird wahrscheinlich die anderthalb Stunden irgendwie mit aufnehmen aber dann ist wirklich eigentlich alles getan was wir für den
Webeditor brauchen danach kommt dann noch mal so ein bisschen anderer Content aber stellt euch ja mal drauf ein dass ungefähr in zwei bis dre Wochen der der dritte Meilenstein fertig sein wird also besten schon mal anfangen die Sachen hier nachzoden gut dann haben wir es glaube ich dann bedanke ich mich für die
Aufmerksamkeit und dann B nächste Woche