Entwicklung
06.09.2024
Als wir Documenso erstmals gestartet haben, war eine der meistgefragten Funktionen das Einbetten. Wir wussten, dass es wichtig war und mit unserem Wunsch übereinstimmte, nicht nur eine E-Signatur-Anwendung zu sein, sondern stattdessen die E-Signatur-Infrastruktur für das Web und darüber hinaus bereitzustellen.
In diesem Sinne haben wir uns entschieden, zunächst abzuwarten, um uns auf den Aufbau einer soliden, gut ausgestatteten Kernanwendung zu konzentrieren. Rückblickend war dies definitiv die richtige Entscheidung. Einbetten ist nur so gut wie die Funktionen, die dahinterstecken, und wir wollten nichts veröffentlicht, das nicht bereit war, die Erwartungen der Benutzer und Entwickler zu erfüllen.
Im vergangenen Jahr waren wir damit beschäftigt, eine Vielzahl neuer Funktionen hinzuzufügen und neue Compliance-Stufen zu erreichen, wie zum Beispiel 21 CFR Teil 11. Wir haben auch neue Felder, eine API entwickelt, Webhooks, Integrationen mit Zapier und vieles mehr eingeführt.
Jetzt, da wir eine solide Grundlage gelegt haben, ist es endlich an der Zeit, uns auf das Einbetten zu konzentrieren, die am häufigsten angeforderte Funktion sowohl von unseren Benutzern als auch von denjenigen, die unsere Plattform self-hosted.
Warum das Einbetten Zeit in Anspruch nahm
In früheren Projekten habe ich oft gesehen, dass das Einbetten durch die Bündelung von Komponenten für die Verwendung auf der Website oder der App eines Kunden erfolgt. Diese Methode gibt den Benutzern maximale Flexibilität für Styling und Verhalten und vermeidet gleichzeitig bestimmte Cross-Origin-Probleme. Es kann jedoch auch Probleme wie Codekonflikte oder Engpässe bei der Leistung einführen. Zum Beispiel können Tools von Dritten wie Google Tag Manager (GTM) oder andere Marketing-Skripte mit Ihrem SDK interferieren. Darüber hinaus muss das SDK leichtgewichtig bleiben, um die Ladegeschwindigkeit der Seite des Clients nicht zu beeinträchtigen.
Für Documenso entschieden wir uns, einen anderen Ansatz zu verfolgen. Nach sorgfältiger Prüfung unserer Optionen wählten wir eine iframe-basierte Lösung. Während iframes typischerweise weniger flexibel sind – insbesondere wenn es um Theming oder das Übertragen von vorausgefüllten Daten mit personenbezogenen Informationen (PII) geht – identifizierten wir Möglichkeiten, diese Bedenken zu mindern.
Eines der größten Herausforderungen bestand darin, sicherzustellen, dass wir sensible Daten, wie E-Mails zum Vorausfüllen von Formularen, übermitteln konnten, ohne PII unserem Server auszusetzen. Um dies zu lösen, verwendeten wir Fragment-Identifikatoren in der URL, die clientseitig verarbeitet werden und niemals in Netzwerkanfragen gesendet werden. Diese Methode stellt sicher, dass PII geschützt und nicht von unserem Server oder anderen zwischenliegenden Webdiensten protokolliert wird.
Verwendung der PostMessage-API für die Kommunikation
Um ein hohes Maß an Interaktivität aufrechtzuerhalten, kommunizieren unsere iframes mit dem übergeordneten Fenster über die PostMessage-API. Dies ermöglicht es uns, die übergeordnete Anwendung zu benachrichtigen, wenn bestimmte Ereignisse innerhalb des iframes auftreten, was zu einer dynamischeren Benutzererfahrung führt und die Lücke zwischen unserer iframe-basierten Lösung und typischen umfangreichen SDKs überbrückt.
Darüber hinaus werden Eigenschaften in den iframe über den Fragment-Identifikator der URL übergeben. Dies vermeidet die Notwendigkeit einer komplexen bidirektionalen Datensynchronisierung zwischen den übergeordneten und untergeordneten Frames und macht das System stabiler und zuverlässiger.
Erstellung der Einbettungen mit Mitosis
Da unsere iframe-Lösung ziemlich leichtgewichtig ist, sahen wir dies als großartige Gelegenheit, mit Mitosis zu experimentieren, das uns ermöglichen würde, etwas ganz Besonderes zu tun. Für diejenigen, die nicht vertraut sind: Mitosis ist ein Projekt von Builder.io, das es Ihnen ermöglicht, Komponenten einmal zu schreiben und sie dann in eine Vielzahl von Frameworks wie React, Vue und Svelte zu transpilieren.
Wir haben Mitosis verwendet, um zwei zentrale Komponenten zu erstellen: eine direkte Template-Einbettung und eine Dokumentenunterzeichnungseinbettung. Die direkte Vorlage ermöglicht es den Benutzern, eine Vorlage zu verwenden, als ob sie ein dauerhaftes Dokument wäre – das bedeutet, dass, wenn jemand die Vorlage ausfüllt, automatisch ein neues Dokument generiert wird. Dies ist der Anwendungsfall, den wir erwarten, dass die meisten Benutzer für das Einbetten annehmen. Für anspruchsvollere Arbeitsabläufe bieten wir außerdem eine Dokumentenunterzeichnungseinbettung an, die mehrfache Empfänger-Workflows und andere komplexe Szenarien behandeln kann, die für die Verwendung in tieferen, reichhaltigen Integrationen vorgesehen sind.
Mitosis ermöglichte es uns, schnell auf mehrere beliebte Frameworks abzuzielen, einschließlich React, Preact, Vue, Svelte und SolidJS.
Ich hatte auch gehofft, Angular einzubeziehen, aber während Mitosis das Transpilieren von Komponenten wirklich einfach macht, müssen wir dennoch dafür sorgen, dass die resultierende Komponente selbst gebündelt und verpackt wird. Während die oben genannten Frameworks alle mit Vite.js gebündelt werden können, hat Angular immer noch seine eigene Reihe von Tools, die wir lernen und nutzen müssten. Angesichts dieser Einschränkung haben wir uns entschieden, Angular vorerst hintenanzustellen, während wir darauf warten, dass die neuere Vite.js-Unterstützung reift.
Herausforderungen und Lektionen mit Mitosis und mehr
Während unsere Erfahrungen mit Mitosis größtenteils positiv waren, gab es einige Herausforderungen auf dem Weg. Beispielsweise führten bestimmte Zustandseigenschaften mit denselben Namen wie Props zu Problemen während des Transpilationsprozesses, was zu Typfehlern und unerwarteten Transpilationsergebnissen mit einigen Zielen führte.
Dies war auch eine Herausforderung, da unsere anfängliche Implementierung der beiden Komponenten einige geringfügige Trennungen der Anliegen hatte, die ebenfalls zu einigen Transpilationsproblemen mit einigen Zielen führten. Wir haben dies adressiert, indem wir die Trennung der Anliegen vorerst entfernt haben, da sie größtenteils nur aus ästhetischen Gründen vorhanden war und nicht aus Notwendigkeit.
Außerdem gab es beim Verpacken und Veröffentlichen der Einbettungen eine eigene Reihe von Herausforderungen, insbesondere angesichts der wachsenden Komplexität des JavaScript-Paketmanagements. Tools wie Publint haben dazu beigetragen, den Prozess zu optimieren, indem wir sicherstellen, dass wir bewährte Methoden für sowohl CommonJS- als auch ESM-Formate befolgen.
In die Zukunft, die Documenso-Plattform
Mit der jetzt vorhandenen Einbettungsfunktion freuen wir uns darauf, die Fähigkeiten von Documenso weiter auszubauen. Einbettungen sind nur der Anfang von dem, was wir die Documenso-Plattform nennen. Durch unsere Benutzerforschung haben wir gelernt, dass viele Unternehmen zwar ein flexibles E-Signatur-Tool zu schätzen wissen, sie jedoch noch mehr daran interessiert sind, unsere Tools zu verwenden, um die Unterzeichnungsfunktionalität direkt in ihre eigenen Apps einzubauen – ohne sich über die technischen Komplexitäten der Einhaltung und Sicherheit, die mit der E-Signatur verbunden sind, Gedanken machen zu müssen.
In den kommenden Monaten werden wir daran arbeiten, unsere API zu verbessern, die Integrationen mit Tools wie Zapier zu stärken und unser Webhook-System zu verbessern. Unser Ziel ist es, den Benutzern die Möglichkeit zu geben, E-Signaturen und Dokumentenmanagement überall dort einzubetten, wo sie es benötigen, sei es durch Self-Hosting oder indem sie Documenso als Plattform nutzen. Wir können es kaum erwarten zu sehen, wie unsere Benutzer und Self-Hoster diese neuen Möglichkeiten nutzen!
Bereit, um zu starten?
Wenn Sie bereit sind, die Dokumentenunterzeichnung in Ihre eigene App oder Website einzubetten, werfen Sie einen Blick in unsere Einbettungsdokumentation, um zu sehen, wie einfach es ist, loszulegen. Sie finden alles, was Sie benötigen, um heute zu beginnen!
Wir sind immer hier, um zu helfen! Wenn Sie Fragen haben oder Unterstützung benötigen, treten Sie unserer Discord oder buchen Sie eine Demo bei. Wir würden uns freuen, zu hören, wie Sie Documenso verwenden oder verwenden möchten, um Ihren Workflow zu verbessern.
Bleiben Sie dran für weitere Updates, während wir die Documenso-Plattform weiterentwickeln und es noch einfacher machen, die Dokumentenunterzeichnung in Ihre Arbeitsabläufe zu integrieren.