Designing for Developers

Table of Contents

Hello y'all!

Have you ever worked with an API that made you stop and think, "Wow, this just works!"? As developers, we've all encountered tools that empower us to build or leave us scratching our heads in frustration. When we set out to build the foundation of our WebRTC library, we knew one thing for sure: we wanted to create an API that developers would enjoy using.

At its core, Flottform bridges two devices: a Host, typically your main application, and a Client, often a lightweight external page. The Host initiates the connection to create a secure channel for peer-to-peer communication, while the Client sends the actual data, whether it's text, files, or any other payload. We've even included generic client implementations to get you started, but these are fully customizable to fit your specific needs.

What makes Flottform stand out is its event-driven architecture. With our API, developers gain granular control over key moments, such as establishing connections, handling errors, or processing incoming data. This flexibility empowers you to update your user interface dynamically, creating workflows and designs that align perfectly with your application's requirements.

By structuring the library this way, we ensure developers can integrate Flottform into their projects.

In this post, we'll take you behind the scenes of Flottform's design, explore the challenges of WebRTC, and show how our event-driven approach gives you the tools to create custom workflows and interfaces. Let's dive in!

Simplifying WebRTC: Why We Chose Events

When we set out to build Flottform, we aimed to make peer-to-peer communication as smooth and developer-friendly as possible. WebRTC, while powerful, has a steep learning curve, with processes like signaling, ICE gathering, and connection negotiation requiring intricate handling. For those unfamiliar with these concepts, our WebRTC Demystified series breaks them down for you. Instead of overwhelming developers with low-level details like Signaling or ICE Gathering, we designed Flottform to surface the critical moments in the connection lifecycle in a clear, manageable way.

With an event-driven API, developers don't need to worry about the inner workings of WebRTC. Instead, they can focus on what matters most: delivering dynamic user experiences. Events provide a natural way to interact with the library, ensuring Flottform adapts to diverse use cases while abstracting the complexity.

How It Works: Making Connections Clear

WebRTC's connection process can seem daunting, but Flottform breaks it down into digestible steps and surfaces actionable events for each stage:

• Signaling Exchange: Devices share information to negotiate a connection.
• ICE Candidate Gathering: The system identifies potential network routes.
• Connection Establishment: Once a suitable route is found, data starts flowing.

Each of these stages generates insights that Flottform exposes through events. Whether you need to handle errors, track progress, or confirm that a connection is established, our event-based design ensures you're always in the loop.

For example, the endpoint-created event delivers essential data like connection links and QR codes right when they're ready:

flottform.on('endpoint-created', ({ link, qrCode }) => {
    console.log('Connection link:', link);
    displayQRCode(qrCode);
});

Built for Custom UI Workflows

Not every developer uses tools the same way, and we wanted our library to adapt to a wide range of use cases. By providing triggering events for key moments, we enable developers to:

• React dynamically to connection updates.
• Build customized interfaces tailored to their users.
• Easily embed WebRTC-powered functionality into pre-existing workflows and interfaces.

For example, when a client uploads a file, the Host receives an event that notifies it of the incoming data. Developers can then decide how to handle that data—whether displaying a progress bar, saving the file, or triggering additional logic.

By surfacing these actionable moments, Flottform ensures that while we handle WebRTC's intricacies, you retain full control over how your application looks and feels.

Innovative Solutions, Delivered by compose.us

At compose.us, our experienced developers turn your ideas into innovative solutions.

Launch your next project with us.

View Our Portfolio

How Flottform's Event-Based API Works

At the heart of our library lies an event-based API designed to give developers full control over how peer-to-peer data transfers unfold. Whether you're building a custom UI or integrating file-sharing capabilities into your application, our API offers a clear and intuitive way to interact with the WebRTC connection process.

The Core Principles

Flottform's API was built around three principles in mind:

• Transparency: Expose key moments in the connection process to keep developers informed.
• Simplicity: Provide an easy-to-learn API that minimizes setup time.
• Flexibility: Allow developers to adapt the library's behavior to meet their unique needs.

To achieve these goals, we structured our API around the key events in the WebRTC workflow.

The Key Events

Flottform's event-driven API equips developers to handle various stages of the WebRTC workflow easily. While the library supports numerous advanced use cases, here are three essential triggers that cover the most common scenarios:

• endpoint-created: Fired when the connection link and QR code are generated. It's perfect for updating your UI to display these details, making it easy for a client to join the connection process.
• progress: Triggered during data transfers, this event delivers progress updates, allowing you to provide real-time feedback such as a progress bar or percentage display.
• done: Marks the completion of a successful transfer, making it easy to take post-transfer actions such as displaying a success message or resetting your interface.

These API hooks allow developers to build responsive, dynamic interfaces while Flottform handles the underlying complexities. Whether you're enabling file sharing or real-time text communication, these milestones are key to creating a seamless user experience.

Event Handling in Action

Here's how you can use Flottform's event-based API to build dynamic interactions:

flottform.on('endpoint-created', ({ link, qrCode }) => {
    displayQRCode(qrCode);
    showConnectionLink(link);
});

flottform.on('done', () => {
    showSuccessMessage();
});

flottform.on('error', (error) => {
    showError('An error occurred: ' + error.message);
});

With just a few lines of code, developers can build highly interactive, user-friendly applications.

Putting the Developer in Control

Unlike rigid, pre-configured solutions, Flottform's event-driven design lets you define exactly how the connection process looks and feels. Whether you're building a sleek file-sharing page or embedding real-time text transfers into an existing app, the API adapts to your workflow.

By listening to events like endpoint-created, progress, and done, you can:

• Provide visual feedback during connection and transfer stages.
• Debug issues with detailed error events.
• Integrate Flottform into existing workflows.

With Flottform, you're not just using a library, you're gaining the tools to build unique, intuitive, and flexible user experiences with WebRTC at their core.

Designing APIs for Developers: The Journey Ahead

Creating an event-based API for our WebRTC library has been an exciting challenge. In this post, we explored the why behind our decision to adopt an event-driven approach and how it empowers developers to build flexible, custom workflows. By breaking down the complexities of WebRTC into intuitive events, we've aimed to put developers in control while ensuring transparency and simplicity.

This is just the beginning. Our event-based architecture opens the door to countless possibilities, from creating custom UIs to integrating data-sharing functionality into existing applications. As we continue refining the library, we're eager to hear from you. What features would make this tool even more useful?

Let's keep the conversation going! Reach out to us on LinkedIn or Twitter / X to share your feedback and ideas. We can't wait to see the innovative ways you'll use this library to create amazing user experiences. and - your feedback helps shape our future developments.

Cheers,

Tamara and Jörn and Nidhal