1 of 15

#F3Prague

2 of 15

My name is Russell Wheatley

https://twitter.com/rustic_dev

https://github.com/russellwheatley

A few projects I work on:

FlutterFire

https://github.com/firebase/flutterfire

FlutterFire CLI

https://github.com/invertase/flutterfire_cli

Zapp

https://github.com/invertase/zapp.run

#F3Prague

3 of 15

https://invertase.io

#F3Prague

4 of 15

What is Zapp?

https://zapp.run/

Zapp is a free online code sandbox for building and sharing Dart and Flutter apps.

#F3Prague

What is Zapp - https://zapp.run/
online code sandbox, similar to the codesandox for JS except for Dart/Flutter projects.
Open Zapp project

Similarity to VS Code - we use Monaco code editor.
File explorer

contains your source code
Contains compiled app code in the build directory. Show the contents of build folder
We build by compiling the source code in the browser.

Console

To display analyser information and build information.

Code editor demonstration

Demonstrate the documentation tooltips
linting errors & warnings
autocompletion.
How do we have this? We have the analyser running in the browser communicating with the monaco code edito via LSP. Explain later how.

Preview panel

Wrapped in an Iframe, this can be a standalone browser tab as it is hosted separate from the editor itself which I will explain later.

5 of 15

Why Zapp?

Share code and embed live examples in your documentation.

https://docs-v2.riverpod.dev/docs/introduction/getting_started

Rapidly prototype your idea and share it.

Reproduce bugs and attach them to a GitHub issue.

Teach Flutter without needing to set up a local environment.

#F3Prague

6 of 15

Architecture

A peek under the hood

#F3Prague

7 of 15

How do we mimic a file system in the browser?

Solution

The Flutter SDK runs locally on your machine, it assumes there is a file system that contains the source code.

We use a memory file system to mimic the nodeJS file system API.

Dependencies are loaded into the in-memory file system.

#F3Prague

8 of 15

Architectural Overview

Browser

Cloudflare Service Worker

Google Cloud Storage

#F3Prague

9 of 15

How do we run Dart tools in the browser?

Solution

"dart analyse" & "dart build" - are executables built for your local dev environment, not possible to run in the browser.

We patch up the tools we need in the Dart & Flutter SDK, and compile to JavaScript so they can run in separate Web service workers.

#F3Prague

10 of 15

Overview of how we patch up Dart & Flutter SDK

Requires a couple of layers of inception:

#F3Prague

11 of 15

Custom Dart analyser and compiler at work

zapp_analyser.js

zapp_compiler.js

CDN

When Zapp code editor is opened on your browser.

#F3Prague

12 of 15

How do we pull in dependencies?

Some Dart dependencies can be over 500mb in size when downloading from "pub" the Dart dependency manager.

Solution

We created a facade over Pub to pull in dependencies called “Zub”.

#F3Prague

13 of 15

Zub at work

Zub

Zub retrieves the dependencies required, strips out unnecessary content.

Caches stripped out dependencies by version.

#F3Prague

14 of 15

Upcoming Zapp features

Delete projects from Zapp dashboard.

Import GitHub & Pub projects directly into Zapp editor.

Integrating VS Code web editor into Zapp.

Ability to favourite projects and track in Zapp dashboard.

Ability to pool projects into collections on the Zapp dashboard and share link.

Support for Dart 3.

#F3Prague

15 of 15

Thank you for listening to my talk!

#F3Prague