zap

Zap is a Dart-powered web framework. Heavily inspired by Svelte, zap makes it easy to write modular and reactive components:

<script>
  // Updates to this variable are reflected in the component
  // right away!
  var counter = 0;

  void handleClick() => counter++;
</script>

<button on:click={handleClick}>
  You've clicked this button { counter }
  { counter == 1 ? 'time' : 'times' }
</button>

Why zap?

Dart is an amazing language for building modern web applications. Its sound type system helps you catch errors quickly, a well-designed standard library is so much nicer to use than all the quirks in old web APIs and the powerful dart2js compiler translates your entire app into efficient JavaScript.

Unfortunately, there aren't many frameworks making good use of Dart for small to medium-sized webapps: Flutter Web is more suited for full-blown webapps and AngularDart has effectively been discontinued for public use. Zap attempts to be a reasonably lightweight framework making it easy to write modular webapps in Dart. Zap also works well for websites with just a bit of interactivity, like this static page embedding some zap components.

Zap embraces Dart at every step and fits perfectly into the ecosystem: Futures and Streams replace the callback mess you know from JavaScript. It uses Dart's build system for compilation, so you can easily use it together with other builders like freezed. Of course, it has builtin support for scoped CSS and Sass. State management is easy thanks to first-class support for riverpod.

Similar to Svelte, zap uses a smart compiler to make your life easier. Instead of relying on complex boilerplate or state management techniques, zap makes your Dart code reactive!

First steps

Under getting started, you can scaffold a new zap project with all dependencies fully set up.

Also, be sure to checkout the documentation and a collection of examples highlighting common blocks of zap.

Contributions welcome!

Zap is at a very early stage of development, and I would love for you to play around with it! At the time, I'm adapting it to my own needs as necessary.

Some things on my todo list are:

• An animation framework, potentially similar to the one from Svelte.
• Support for server-side rendering and hydration.
• Tricks in the compiler to emit much less code.

All kinds of feedback, help or other contributions with these or other features are most welcome!