Revolutioniere deinen Development Workflow mit Project IDX

23.10.2024•Tom Trapp
Tech Artificial Intelligence Cloud Computing Developer Experience Development Integration DevOps Web Development

Banner

Google will mit Project IDX die Entwicklung von Full-Stack-Anwendungen revolutionieren. Schauen wir uns das mal genauer an:

  • Was ist IDX❓
  • Wie funktioniert IDX❓
  • IDX im Einsatz❗️
  • Vorteile und Nachteile❓
  • Fazit❓

Was ist IDX❓

Project IDX von Google ist eine webbasierte IDE für Full-Stack Entwicklung. Das bedeutet, dass du deine Application nicht mehr lokal, sondern auf einer bei Google gehosteten Debian VM entwickelst. Das Projekt wurde im August 2023 angekündigt, IDX ist aktuell in einer Beta-Phase. Zum jetzigen Zeitpunkt ist es kostenlos, man muss lediglich einen Google Account besitzen und Teil des Google Developer Programs sein, welches ebenfalls kostenlos ist.

Technisch gesehen verbirgt sich Code-OSS, also Visual Studio Code kombiniert mit dem Package Manager Nix, darunter. Also werden grundsätzlich Open-Source-Tools genutzt.

Ok gut, VS Code im Browser, das kennen wir bereits, da kann man einfach https://vscode.dev/ nutzen, oder? Nicht ganz! Der Unterschied ist, dass bei vscode.dev nur der Code Editor im Browser läuft, bei IDX hingegen ein ganzer Workspace mit einer Linux VM darunter. Bei VS Code im Browser interagiere ich mit meinen lokalen Tools, meinem lokalen Filesystem. Bei IDX dagegen läuft dies komplett dezentral in der Cloud.

Schauen wir noch kurz unter die Haube, wie funktioniert IDX im Detail❓

Wie funktioniert IDX❓

Technisch gesehen verbirgt sich unter IDX das Tool Nix. Hierbei handelt es sich um ein Tool, welches es erlaubt, deklarative Build und Deployment Umgebungen aufzubauen sowie das Management von Packages und System-Konfigurationen. Weitere Informationen zum Einsatz von Nix bei IDX sind hier zu finden.

Das komplette Config-File für IDX (und Nix) liegt im .idx Ordner, schauen wir uns die dev.nix doch einmal in der Theorie an!

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

# To learn more about how to use Nix to configure your environment
# see: https://developers.google.com/idx/guides/customize-idx-env
{ pkgs, ... }: {
  # Which nixpkgs channel to use.
  channel = "stable-23.11"; # or "unstable"
  # Use https://search.nixos.org/packages to find packages
  packages = [
    pkgs.nodejs_20
  ];
  # Sets environment variables in the workspace
  env = {};
  idx = {
    # Search for the extensions you want on https://open-vsx.org/ and use "publisher.id"
    extensions = [
      "svelte.svelte-vscode"
    ];
    workspace = {
      # Runs when a workspace is first created with this `dev.nix` file
      onCreate = {
        npm-install = "npm ci --no-audit --prefer-offline --no-progress --timing";
      };
      # To run something each time the workspace is (re)started, use the `onStart` hook
    };
    # Enable previews and customize configuration
    previews = {
      enable = true;
      previews = {
        web = {
          command = ["npm" "run" "dev" "--" "--port" "$PORT" "--host" "0.0.0.0"];
          manager = "web";
        };
      };
    };
  };
}

Direkt fällt auf: Eine JSON-Syntax mit Kommentaren! Schauen wir uns mal Zeile für Zeile die wichtigsten Sachen an:

  • Mittels channel spezifizieren wir, welche Nix Version wir nutzen
  • Über packages können spezielle Nix Packages installiert werden, dies ist die Basisinstallation, hier wird beispielsweise Node.js 20 installiert
  • Mittels env könnten Umgebungsvariablen spezifiziert werden
  • Und dann kommt der IDX Block, alle vorherigen Settings sind standard Nix-Settings
  • Über extensions können VS-Code Extensions installiert werden, ähnlich auch wie bei DevContainers
  • Mit unterschiedlichen Workspace Lifecycle Hooks wie onCreate können Commands ausgeführt werden, hier werden beispielsweise alle Dependencys direkt beim Erstellen des IDX Workspaces installiert
  • Via previews können Vorschaukonfigurationen angelegt werden, dies ist speziell für Webanwendungen sehr nützlich, mehr dazu später!

Gut, nun wollen wir IDX aber Hands-On ausprobieren!

IDX im Einsatz❗️

Wir wollen:

  • ein Button-Counter-Project mit Svelte erstellen
  • ein vorhandenes Java Repo importieren, mit einem Microservice herumspielen, Port-Forwarding erkunden
  • Ausprobieren, ob schon die letzte Java Version verfügbar ist
  • Die Konfiguration massgeschneidert anpassen

Button Counter

Los gehts mit einem einfachen Hello-World-Beispiel! Hierfür wollen wir Svelte nutzen!

Wir navigieren zu idx.google.com und können einen neuen Workspace anlegen. Initial werden wir gefragt, ob wir einen leeren Workspace oder einen Workspace anhand eines Templates aufsetzen wollen.

IDX bietet hier eine Vielzahl von Templates an. Unter anderem für:

  • Web Apps Wie Angular, NextJS, Svelte, React, Vue.js etc.
  • Backends wie Go, Python, Node Express, Rust, Java etc.
  • Mobile Apps wie Flutter und React Native
  • AI & ML Apps mit Firebase, Gemini, LangChain etc.
  • Databases wie Postgres, MySXL etc.

Sehr cool hier ist der User Voice Bereich, hier können neue Ideen für Template, Features o.ä. eingegeben oder für vorhandene abgestimmt werden. Hier zeigt sich auch deutlich die bereits aktive Community sowie die kontinuierliche Weiterentwicklung von IDX. Google ist hier klar am Investieren und hört der Community zu!

Nun aber Back2Topic, wir wollen ja unseren Button Counter anlegen!

Wir wählen das Svelte Template aus und geben unserem Workspace einen Namen. Selbstverständlich wählen wir TypeScript als Sprache.

img_13.png

Nach kurzer Wartezeit ist unser erster IDX Workspace komplett erstellt. Es fällt direkt auf, dass IDX auch schon ein npm install ausgeführt hat und das Demo-Projekt gestartet hat.

Technisch funktioniert dies mit dem Lifecycles sowie der Preview, beide Configs haben wir oben im dev.nix File schon kennengelernt.

Ebenfalls angenehm ist, dass wir sofort loslegen können zu entwickeln, sämtliche Vorbereitungen, Setups usw. sind bereits gemacht.

img_14.png

Bei einer Änderung im Sourcecode haben wir selbstverständlich ein Hot-Code-Replacement und können unsere Änderungen so direkt im Preview-Browser anschauen.

Im Commando-Menü haben wir zahlreiche Optionen, um mit IDX zu interagieren. Beispielsweise können wir den Workspace auch sharen! Leider funktioniert dies nicht wie z.B. bei IntelliJs CodeWithMe. Es wird lediglich der Workspace geteilt, die Zusammenarbeit gestaltet sich aber schwierig, hier ist sicherlich noch Potenzial!

img_6.png

An dieser Stelle sei erwähnt, dass es nicht nur eine Web-Preview gibt, sondern auch eine Android- und iOS-Preview. Diese Emulatoren sind allerdings nur für mobile Projekte wie Flutter-Projekte verfügbar. Trotzdem aber ein tolles Feature, sicher sehr nützlich für App-Development.

Und damit haben wir unsere erste IDX Applikation erstellt!

Java Rest API

Nun zum zweiten Use-Case, wir wollen eine Rest-API in Java implementieren!

Auch hier bietet uns IDX glücklicherweise ein Template an, welches uns direkt ein Maven Projekt mit Spring instanziiert.

Im Gegensatz zu DevContainers haben wir hier beim Erstellen eines Workspaces aus einem Template keinerlei Konfigurationsmöglichkeiten – weder können wir eine Version noch etwas Ähnliches angeben.

img_3.png

Und schwups, nach kurzer Wartezeit ist auch unser Java-Rest-Projekt erstellt und wurde auch hier direkt schon gebaut und gestartet! Wir haben also auch hier direkt ein development-ready Setup erstellt!

img_5.png

Nun wollen wir unser Projekt direkt testen, wir öffnen also im IDX unser Terminal und führen folgenden Befehl aus:

1

curl localhost:3000/greet/tom

Und wir sehen, unser Projekt begrüsst uns!

Hello tom, nice to meet you!

Wir müssen hier das Terminal im VS Code nutzen, da IDX die Ports nicht an das lokale System weiterleitet.

Schauen wir uns nun aber an, was sich hinter unserem IDX-Workspace verbirgt, wagen wir einen Blick in die dev.nix Datei.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

# To learn more about how to use Nix to configure your environment
# see: https://developers.google.com/idx/guides/customize-idx-env
{ pkgs, ... }: {
  # Which nixpkgs channel to use.
  channel = "stable-23.11"; # or "unstable"
  # Use https://search.nixos.org/packages to find packages
  packages = [
    pkgs.zulu17
    pkgs.maven
  ];
  # Sets environment variables in the workspace
  env = {};
  idx = {
    # Search for the extensions you want on https://open-vsx.org/ and use "publisher.id"
    extensions = [
      "vscjava.vscode-java-pack"
      "rangav.vscode-thunder-client"
    ];
    workspace = {
      # Runs when a workspace is first created with this `dev.nix` file
      onCreate = {
        install = "mvn clean install";
      };
      # Runs when a workspace is (re)started
      onStart = {
        run-server = "PORT=3000 mvn spring-boot:run";
      };
    };
  };
}

Wir sehen den klassischen Aufbau aus dem ersten Beispiel, schön zu sehen ist hier, dass wir mehrere Packages benutzen, namentlich eine JDK und Maven. Ebenfalls sehen wir, dass wir hier Extensions für VS Code installieren, hier das Java Pack und Thunder Client. Mittels den Workspace Lifecycle-Hooks wird beim Erstellen des Workspaces das Projekt gebaut und beim Starten des Workspaces der Server gestartet.

Port-Forwarding

Ein weiteres nützliches Feature ist das Port-Forwarding ins Internet. Im IDX-Menü finden wir unter Backend Port die bereits automatisch gemappten Ports inklusive externer URL, welche wir direkt aufrufen können.

img_12.png

In meinem Beispiel war das folgende URL: https://3000-idx-techup-java-demo-1720097409845.cluster-4ezwrnmkojawstf2k7vqy36oe6.cloudworkstations.dev

Diese können wir nun im Browser öffnen oder auch in unserem lokalen Terminal via curl aufrufen.

AI

Selbstverständlich, wie heutzutage üblich, hat auch IDX eine starke und umfangreiche AI-Integration, hierbei wird die KI Gemini voll integriert. Diese ermöglicht unter anderem Codebase Indexing und Inline Completion.

Gemini kann die besten Ergebnisse liefern, wenn das Codebase Indexing aktiviert wird, sprich das komplette Projekt mit in den Kontext gepackt wird. Dieses setting lässt sich via Einstellungen festlegen.

img_19.png

Ausserdem können solche Settings in VS Code auch direkt in der settings.json festgelegt und eingechecked werden.

1
2
3
4

{
    "IDX.aI.enableCodebaseIndexing": true,
    "IDX.aI.enableInlineCompletion": true
}

Anschliessend können wir uns den markierten Code direkt im Editor erklären lassen. Der Code muss nicht lästig hin und her kopiert werden. Sehr nützlich!

img_10.png

Auch Empfehlungen und Changes von der künstlichen Intelligenz können wir direkt in unseren Code übernehmen.

img_11.png

Dies funktioniert auch mit komplett neuen Endpunkten, die wir in unserem Projekt erstellen.

img_9.png

Grundlegen ist die AI Unterstützung tadellos, klar, stellt man sich auch hier die Frage nach Datenschutz und Privatsphäre, aber das ist ein anderes Thema. (Der Code liegt ja eh schon im Internet bei GitHub, aber das ist wirklich ein anderes Thema.) 🤓

JDK 22

Wie kann ich IDX nun mit vorhandenen Repos nutzen? Ist das kompliziert?

Nein, natürlich nicht, wir können IDX auch mit einem vorhandenen Repo starten. Wir nutzen hier das Repo aus meinem JDK22 TechUp (bald kommt JDK23), dieses Repo hat noch nie etwas von IDX oder Nix gehört und gesehen.

img_15.png

Nachdem wir das Repo per URL importiert haben und der Workspace gestartet wurde, frägt IDX uns, ob wir eim Config-File generieren wollen.

img_16.png

Ja wollen wir! Sämtliche Infos, Möglichkeiten und Parameter sind hier zu finden.

Und nun wollen wir unsere dev.nix Datei anpassen, um das Projekt zu bauen und zu starten. Unsere Datei weiss nämlich noch nicht, dass unser Projekt ein Java-Projekt ist und wie es gebaut und gestartet werden soll.

Also passen wir die dev.nix Datei mal an, hier der erste Versuch:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20

# To learn more about how to use Nix to configure your environment
# see: https://developers.google.com/idx/guides/customize-idx-env
{ pkgs, ... }: {
  # Which nixpkgs channel to use.
  channel = "stable-24.05"; # or "unstable"

  # Use https://search.nixos.org/packages to find packages
  packages = [
    jdk22
  ];

  # Sets environment variables in the workspace
  env = {};
  idx = {
    # Search for the extensions you want on https://open-vsx.org/ and use "publisher.id"
    extensions = [
      "vscjava"
    ];
  };
}

Sehr cool ist, dass es bei Nix zahlreiche Packages gibt, welche man alle hier finden kann. Aktuell gibt es über 100'000 Packages!

Nach jeder Anpassung an der dev.nix-Datei muss der Workspace neu gebaut werden. Mist, klappt nicht. 💥

img_17.png

Glücklicherweise können wir einen Recovery-Mode starten und die Datei nochmals genau anschauen. Problem ist, dass das Package “pkgs.jdk22” heisst und nicht nur “jdk22”.

Anschliessend können wir dann unseren Workspace neu bauen und wieder starten. Nun haben wir Java installiert und können unser Projekt bauen und starten.

img_20.png

Wunderbar, klappt! 🎉

Und so haben wir ein eigenes Repo in IDX onboarded und mit massgeschneiderter Konfiguration versehen!

Collaboration

IDX bietet auch die Möglichkeit, zusammen an einem Projekt zu arbeiten. Leider ist dies nicht oder noch nicht so ausgereift wie z.B. bei IntelliJs CodeWithMe, man teilt sich einfach einen Workspace, sieht aber nicht, wer gerade wo arbeitet oder was geändert hat.

Hosting

Selbstverständlich lässt sich ein IDX Projekt, wer hätte es gedacht, auch direkt auf Google Cloud Dienste deployen, hierfür gibt es eine eigene Schaltfläche im Menü. Dies spricht von guter Integration und das IDX aus Googles Sicht wohl nicht nur eine kleine Spielerei ist.

Vorteile und Nachteile❓

Vorteile

  • Kein lokales Setup mehr nötig
  • Kein leistungsstarker Computer mehr nötig
  • Geräteunabhängig, man benötigt nur einen Browser und Internet
  • Grosse Anzahl von Packages
  • Gute Dokumentation, einfaches Customizing

Nachteile

  • Wartezeit, wenn man ein Projekt länger nicht genutzt hat
  • Generell ist die Wartezeit beim Starten, im Vergleich zu lokalen Entwicklungsumgebungen, länger (logisch)
  • GitHub muss immer mal wieder neu authentifiziert werden
  • Sicherheit, Datenschutz
  • Ausfallrisiko, Abhängigkeit, wenn Google down ist, ist auch IDX down
  • VS-Code Lock-In, keine andere IDE möglich

Wie geht es weiter?

Aktuell befindet sich IDX noch in einer Beta-Version, da es ein Google Produkt ist, ist ein Ausblick schwierig.

Wird IDX kostenlos bleiben? Wird es überhaupt bleiben oder ist es ein weiteres Projekt auf dem Google Friedhof?

Blickt man über den Tellerrand, ist dieses Konzept sicherlich spannend und wird uns in der Zukunft weiterhin begleiten, Remote Development anstatt leistungsstarke Rechner und Laptops.

Fazit❓

Inzwischen ist IDX mehr als ein Jahr alt, das wird gefeiert in diesem Blogpost von IDX.

Aus meiner Sicht ein super cooles Projekt, dieses TechUp wurde zum grössten Teil mit IDX geschrieben, ich bin ein Fan!

Spannend ist sicherlich, wie es mit dem Projekt weitergeht und falls, wie hoch der Preis sein wird.

Aus meiner Sicht wäre noch ein Docker Support eventuell wünschenswert, um eigene Packages zu installieren oder eigene Images zu nutzen. Ebenfalls drängt sich die Frage in den Vordergrund, was passiert bei internen Abhängigkeiten wie einer internen Datenbank, welche für die Entwicklung benötigt wird. Klar, Mocking, lokale DB usw. wäre wünschenswert, aber manchmal einfach nicht vermeidbar.

Ich werde IDX auf jeden Fall weiter nutzen, und auch fleissig TechUps darüber schreiben, der nächste Step wäre, die mobile Fähigkeit von IDX zu testen, TechUps mit dem Handy oder dem iPad zu schreiben, das wäre cool! 🚀

Tom Trapp

Tom Trapp – Problemlöser, Innovator, Sportler. Am liebsten feilt Tom den ganzen Tag an der moderner Software und legt viel Wert auf objektiv sauberen, leanen Code.