Pake: Dieses CLI-Tool erstellt 5MB-Desktop-Apps
BBetter Stack
Computing/SoftwareSmall Business/StartupsInternet Technology
Transcript
00:00:00Das ist Paik, ein Befehlszeilentool, das jede beliebige Website in eine native Desktop-App verwandelt, und zwar mit nur einem
00:00:05Befehl. Es ist in Rust geschrieben, daher sind die erzeugten Apps etwa 5 MB groß, was winzig ist im Vergleich
00:00:10zu Electron, das in jeder App eine komplette Kopie von Chrome bündelt. Man kann sogar eigenes
00:00:15CSS und JavaScript einfügen, ein Tray-Icon hinzufügen und den Stil der Titelleiste ändern, alles ohne eine einzige
00:00:20Zeile Rust zu schreiben. Aber warum sollte ich das anderen ähnlichen Tools vorziehen, und warum verlangt Paik
00:00:25von mir, dass PNPM oder NPM installiert ist, wenn es auf Rust basiert? Ich will es eigentlich gar nicht wissen,
00:00:31aber abonniert den Kanal und lasst es uns herausfinden. Paik wurde 2022 von TW93 erstellt, einem Product Engineer
00:00:40aus China, der auch Mole entwickelt hat, das unglaublich populäre Mac-Optimierungstool, das ich tatsächlich
00:00:45schon eine Weile benutze. Aber die Idee hinter Paik ergibt absolut Sinn, denn wenn man darüber nachdenkt,
00:00:49haben Apps wie YouTube Music, Gmail und Instagram keine eigenen offiziellen nativen Apps. Sie leben nur
00:00:55innerhalb von Browser-Tabs, was völlig in Ordnung ist, wenn man die volle Browser-Funktionalität will, aber wenn man eine
00:00:59performantere Website mit einem eigenen Dock-Icon zur Trennung möchte, dann kann eine eigenständige App
00:01:04dafür sehr nützlich sein. Hier kommt Paik ins Spiel, das viel besser ist als Electron,
00:01:09da es auf Tauri 2 basiert, welches die native Webview des Systems nutzt, wodurch die Apps
00:01:14kleiner und schneller werden und weniger Arbeitsspeicher verbrauchen, ähnlich wie Electro, Bun oder Vercels Zero Native funktionieren,
00:01:19worüber ich später in diesem Video noch mehr sprechen werde. Aber der eigentliche benutzerdefinierte Code, den TW93 auf
00:01:24Tauri 2 geschrieben hat, umfasst etwa 1800 Zeilen Rust und kümmert sich um Dinge wie Fensterverwaltung, native Menüs
00:01:30und JavaScript-Injection. Man führt einfach einen Befehl aus und Paik erledigt den Rest. Tatsächlich,
00:01:35versuchen wir mal, Paik zu verwenden, um mein Film-Emulationsprojekt in eine eigenständige App zu verwandeln. Also, nach der Installation
00:01:40der Paik CLI werdet ihr feststellen, dass sie Mole sehr ähnlich sieht, falls ihr Mole jemals benutzt habt, und es gibt nicht
00:01:45viele Flags, was meiner Meinung nach eine gute Sache ist. Mit meinem laufenden Projektserver kann ich Paik also mit
00:01:50der URL und dem Namen, den ich der App geben möchte, starten. Wenn ich es jetzt eingebe, lädt es das Icon und durchläuft den
00:01:55Prozess der App-Erstellung, was etwa fünf bis zehn Minuten dauern kann. Und sobald es fertig ist, erstellt es
00:02:00diese DNG-Datei, die wir hier bei 4,3 Megabyte finden können. Und wenn man darauf klickt, haben wir unsere App,
00:02:05die wir durch Ziehen in den Programme-Ordner installieren können. Es sieht zwar so aus, als hätte es das Icon nicht übernommen, aber das ist
00:02:10in Ordnung. Und jetzt, wenn wir die App öffnen, sehen wir, dass sie sofort funktioniert, inklusive Icon im Dock.
00:02:14Ich kann ein Video auswählen und alles scheint einwandfrei zu funktionieren. Und wenn wir uns die Aktivitätsanzeige ansehen,
00:02:19können wir sehen, dass unsere App nur 61 Megabyte Speicher verbraucht, im Vergleich zum ARC-Browser, der extrem viel verbraucht.
00:02:24Und wenn wir uns die Größe der Anwendung ansehen, sind es 55 Megabyte im Vergleich zu einer Electron-App wie Slack,
00:02:30die 310 Megabyte groß ist. Aber wie ihr vorhin gesehen habt, hat Paik einige ziemlich interessante Optionen. Zum
00:02:35Beispiel kann ich dieselbe App mit dem Debug-Flag bauen, um Zugriff auf die DevTools zu erhalten. Und ich kann
00:02:40die Statusleiste bearbeiten, damit es sich mehr wie eine App anfühlt, indem ich das Flag “hide title bar” verwende, das
00:02:46eine rahmenlose Titelleiste erzeugt. Aber diese App war offensichtlich nicht dafür ausgelegt, rahmenlos zu sein. Aber zum Glück gibt uns Paik
00:02:51die Möglichkeit, das zu beheben, ohne den Quellcode der App zu bearbeiten. Ich könnte etwas benutzerdefiniertes CSS schreiben und es mit
00:02:56dem Inject-Flag in meine App einfügen, was das Padding am oberen Rand hinzugefügt hat, aber auch bedeutet, dass
00:03:01unten mehr Platz zum Scrollen vorhanden ist. Wir können das Flag “show system tray” verwenden, um ein Icon im
00:03:06System-Tray anzuzeigen, wodurch wir unsere App ein- und ausblenden können. Und wir können sogar JavaScript sowie CSS injizieren.
00:03:12Aber im Moment scheint es so, als könne man die Menüpunkte, die Paik einem standardmäßig gibt, nicht bearbeiten.
00:03:17Und Paik funktioniert nur mit laufenden URLs. Wenn ich also meinen Server schließe und dann versuche, die App zu öffnen,
00:03:23zeigt es mir nur einen leeren Bildschirm. Aber um fair zu sein, Paik war nicht für lokale Apps gedacht. Ich habe tatsächlich
00:03:28eine YouTube Music-App getestet, die überraschend gut funktioniert, wenn man sie mit einem einzigen Befehl startet. Und sie funktioniert sogar offline,
00:03:33weil die YouTube Music-Website eben so funktioniert. Ich benutze sie also als meinen Haupt-Musikplayer,
00:03:38aber es ist im Grunde nicht das richtige Werkzeug für Desktop-Apps, die man selbst entwickelt, da Paik eine Live-URL
00:03:42umschließt und deinen Code nicht bündelt, es sei denn, man verwendet die Option “use local file”, was ich erst herausfand,
00:03:48nachdem ich dieses Video erstellt hatte. Ich würde auch nicht sagen, dass es sehr gut gebaut ist. Hört mir zu. Ich habe Paik
00:03:53mit BUN anstelle von PNPM oder NPM installiert, aber es benötigt intern eines von beiden, um den Tauri-Build einzurichten.
00:04:00Und meine PNPM-Version war neuer als die erforderliche, was bedeutete, dass es sich weigerte, die App zu bauen
00:04:05und zu installieren, die ich wollte. Also musste ich Claude Code verwenden, um den Quellcode von Paik zu bearbeiten, nur damit es funktioniert.
00:04:11Ich habe zwar ein Issue dafür gefunden, aber das hätte alles gelöst werden können, wenn Paik mit einer
00:04:15kompilierten Binärdatei ausgeliefert würde, was ein Vorteil von Dingen wie ElectroBun oder ZeroNative ist,
00:04:20denn ElectroBun bietet dir eine echte BUN-Laufzeitumgebung hinter einer Webview, was bedeutet, dass du Backend-Logik
00:04:25ausführen kannst, und ZeroNative geht sogar noch weiter und gibt dir eine vollständige Zig-Shell, die C-Bibliotheken direkt aufrufen kann.
00:04:31Paik ist also der schnellste Weg, eine Live-Website zu verpacken, aber wenn du mehr als das brauchst,
00:04:36solltest du besser zu etwas anderem greifen.
Community Posts
No posts yet. Be the first to write about this video!
Write about this video