Coding Stream 2026! - PremiereRemote, aber von vorne - Tech Stack: Adobe UXP, TypeScript, ...? 702.gg

Einleitung und technische Vorbereitung

00:00:01

Der Stream beginnt mit dem Streamer, der über seine musikalische Auswahl debattiert und sich zwischen Rock-Metal und YouTube-Multistreaming unsicher ist. Er erwähnt technische Probleme mit Stream Elements Overlay und wechselt zu Stream Awesome. Nach persönlichen Begrüßungen und Witzen über Abonnements und Unterstützer stellt er sein Projekt Premiere Remote vor und erklärt seine Motivation für die Umstellung von CEP auf UXP, da die alte Technologie veraltet war und die neue UXP-Schnittstelle modernere APIs bietet.

Projekt Premiere Remote und UXP-Einführung

00:14:46

Der Streamer stellt das Projekt Premiere Remote vor, das seit 2018 besteht und nun modernisiert werden soll. Er erklärt, dass Adobe UXP (User Experience Platform) die Nachfolgetechnologie der veralteten CEP-Schnittstelle ist und bessere Entwicklererfahrungen bietet. Nach anfänglicher Skepsis entschied er sich aufgrund eines Migration Impact Assessments, das zeigte, dass die meisten Funktionen in UXP übertragbar sind. Er beginnt mit dem Setup der UXP-Entwicklungstools und der Erstellung eines neuen Plugin-Templates.

Erste Schritte mit UXP-Entwicklung

00:37:44

Der Streamer richtet die UXP-Entwicklungsumgebung ein, installiert die notwendigen Tools und startet das Tutorial. Er wählt das Quick-Starter-Template für Premiere Pro und erstellt ein neues Plugin. Nach einigen technischen Schwierigkeiten bei der Verbindung des Plugins mit Premiere Pro, gelingt es ihm, die Verbindung herzustellen. Er zeigt das fertige Plugin in Premiere und beginnt mit der Anpassung des Codes im Editor.

Code-Anpassung und Praxistests

00:51:52

Nachdem das Plugin erfolgreich geladen wurde, öffnet der Streamer den generierten Code in VS Code und beginnt mit Anpassungen. Er zeigt die Vorteile von Hot Reload, bei dem Änderungen sofort sichtbar sind. Er experimentiert mit der UXP-API, greift auf Premiere-Projekte und Sequenzen zu und demonstriert, wie man Informationen wie Projektname und Sequenzdetails abrufen kann. Er arbeitet mit asynchronen Funktionen und zeigt die verbesserte Entwicklererfahrung im Vergleich zur alten CEP-Technologie.

Fortgeschrittene API-Funktionen

01:09:39

Der Streamer vertieft sich in die fortgeschrittenen Funktionen der UXP-API, indem er mit Promises arbeitet und dynamisch Code in den Developer Tools schreibt. Er greift auf Video- und Audio-Tracks zu und testet verschiedene Methoden zur Abruf von Informationen wie Anzahl der Clips und Spuren. Er betont die verbesserte Entwicklererfahrung und die erweiterten Möglichkeiten, die UXP im Vergleich zu CEP bietet, und zeigt, wie man die TypeScript-Definitionen zur besseren Dokumentation nutzen kann.

Arbeit mit Commands in UXP

01:14:51

Der Streamer experimentiert mit Commands in der Adobe UXP-Umgebung. Er erklärt, dass Commands Ausführungsbefehle sind, die im Gegensatz zu Panels funktionieren. Es werden verschiedene Möglichkeiten der Implementierung und Integration in bestehende Projekte vorgestellt, wobei er versucht, Commands mit Shortcuts zu verbinden. Die Dokumentation wird als unzureichend beschrieben, was das Verständnis der Funktionsweise erschwert.

Probleme beim Laden von Commands

01:26:53

Es treten wiederholt Fehler beim Versuch auf, einen Command namens myCommand zu laden. Die Fehlermeldung 'Could not find command myCommand in manifest' erscheint trotz scheinbar korrekter Konfiguration. Der Streamer versucht verschiedene Lösungsmöglichkeiten, dar das Wechseln zwischen Main.js und Index.js sowie das Anpassen des Manifests, wobei die Lösung zunächst nicht gefunden wird.

UXP-Pakete und TypeScript-Definitionen

01:35:28

Der Streamer untersucht verschiedene UXP-Vorlagen wie den WebView Quickstarter und den React Quickstarter. Er hebt hervor, wie TypeScript-Definitionen die Entwicklung erleichtern und einen besseren Einblick in die API-Struktur ermöglichen. Insbesondere die Zugriffsmöglichkeiten auf Track-Items wie Videos durch die Definitionen wird ausführlich demonstriert und praktisch getestet.

Vergleich altes vs. neues System

01:55:35

Es wird ein Vergleich zwischen dem alten CEP-System und dem neuen UXP-System vorgenommen. Im alten System war ein Host-Client-Modell erforderlich, das über tausend Zeilen CS-Interface-Code benötigte und auf Evaluierung von JavaScript-Strings angewiesen war. UXP ermöglicht einen direkteren Zugriff über das DOM und Web-Services, was die Komplexität erheblich reduziert und die Entwicklung vereinfacht.

Überlegungen zur Testbarkeit

02:02:02

Der Streamer reflektiert über Teststrategien für UXP-Plugins. Er diskutiert verschiedene Ansätze wie Integrationstests mit vordefinierten Premiere-Projekten, Mocking von Objekten und den Einsatz von Frameworks. Da UXP keine eingebaute Testlösung bietet, muss eine eigene Testumgebung aufgebaut werden, die Kommandos ausführt und deren Zustände überprüft.

Konzept für Test-Framework

02:20:43

Ein praktisches Konzept für ein Test-Framework wird vorgestellt, das zwei Hauptkomponenten umfasst: Ein Produktivpanel für die eigentliche Anwendung und ein separates technisches Panel für Tests. Dieses Framework nutzt Konventionen, um Testfälle zuzuordnen, lädt Testprojekte und führt Validierungen durch, obwohl es nicht für CI/CD-Pipelines ausgelegt ist.

Zusammenfassung und Ausblick

02:25:48

Der Stream fasst die positiven Erfahrungen mit UXP zusammen: Im Vergleich zum alten CEP-System ist UXP deutlich anfängerfreundlicher und einfacher zu handhaben. Die Komplexität des Projekts 'Premiere Remote' wird durch den Wechsel auf UXP erheblich reduziert. Der Ausblick beinhaltet die Neuentwicklung des Projekts mit modernen Technologien, wobei weitere Coding-Streams und Videos geplant sind.