DEV Community

Kilian Schulte
Kilian Schulte

Posted on

Introducing Jaspr - A complete web-framework written in Dart

Hi fellow developers,

I'm really excited to finally share with you what I've been working on over the last few months:

Banner

Jaspr is a complete web-framework that is written in Dart. It takes inspiration from frameworks like React or Remix, but most importantly Flutter. While it renders normal HTML & CSS, it looks and feels very much like Flutter. So while you get all the benefits of an actual web app (fast page load, seo, server-side rendering, etc.) you get the familiar structure of stateless, stateful and inherited widgets.

There is so much to talk about, but here are some highlights:

💙 1. Familiar component model similar to Flutter widgets but adapted for the web

It was made to look and feel just like Flutter, while rendering normal HTML and CSS. It is therefore targeted mainly at Flutter developers that want to build websites but don't want to use Flutter Web (for various good reasons).

With Dart as its language, it also has some general advantages over JS (in my opinion) like type- and null-safety.

🖼 2. Server-side rendering out of the box!

A simple jaspr serve and you will have a running debug server with SSR and automatic reloads. You can still do SPAs but it's not that satisfying.

(And I'm also planning to support static site generation in the future)

📖 3. Good documentation is vital

So I made sure everything is well documented right from the start. Check out the wiki.

🛝 4. Online Playground inspired by DartPad

I love DartPad, the online code-editor for Dart. However it only supports selected packages, so I made my own version. It's called JasprPad and you can check it out here.

Like DartPad you can write and execute jaspr apps right in your browser. It also comes with a range of examples that you can check out, and I even made a tutorial to get you started.

JasprPad Showcase

As a bonus, JasprPad is not only for writing jaspr apps, but is written with jaspr itself, so it doubles as a real-world showcase.

🌊 5. Riverpod for Jaspr

State-Management will be the same for jaspr as it is for Flutter thanks to the shared widget structure. Riverpod is a popular state management package for Flutter and I added jaspr_riverpod, porting over flutter_riverpod to jaspr.

🧪 6. Testing

Yes, I even made a testing package for 'jaspr', out of the need to test the framework itself. Jaspr is already well test atm. with a coverage of around 70%, but I'm planning to improve this even more in the future.

The package itself jaspr_test takes inspiration from flutter_test but has some unique concepts because jaspr apps need to be both tested for the server and client.


This is just the initial release, so expect more awesome stuff coming soon. I'm very eager to get feedback on this since it was quite some while in the making.

Here again the most important links:

Jaspr on Github
Wiki
JasprPad


In the future I plan to write some more articles about its features, development or how it works, so if you are interested feel free to follow me here on DEV.

Discussion (0)