Web framework

Learn web frameworks like jaspr.

jaspr

jaspr is a reactive web framework for Dart. It uses a React-like component model. It supports server-side rendering (SSR). It offers a modern, type-safe alternative to dart:html.

A component is defined as class App extends StatelessComponent { ... }. The build method produces the view. jaspr both generates HTML on the server and adds interactivity on the client. This makes it easy to build full-stack web applications with Dart.

Component definition

In jaspr a component extends StatelessComponent. The build method produces an Iterable<Component>; usually sync* with yield is used. Example: class App extends StatelessComponent { @override Iterable<Component> build() sync* { yield text('Hello'); } }.

This model resembles functional components in React but is strengthened by Dart's type system. jaspr also offers StatefulComponent for state management. In this lesson we learn the basic StatelessComponent definition.

Exercise Define the App component

Add import 'package:jaspr/jaspr.dart';. Define class App extends StatelessComponent with @override Iterable<Component> build() sync* { yield text('Hello jaspr'); } inside. In main add print('jaspr: web framework') and print('Component: App').

Show example solution

import 'package:jaspr/jaspr.dart';

class App extends StatelessComponent {
  @override
  Iterable<Component> build() sync* {
    yield text('Hello jaspr');
  }
}

void main() {
  print('jaspr: web framework');
  print('Component: App');
}

Test yourself

The jaspr import

import 'package:____/jaspr/jaspr.dart';

Show answer

import 'package:jaspr/jaspr/jaspr.dart';

Match the jaspr parts

jaspr

Web framework
StatelessComponent

Component
build

Render method
SSR

Server render
Which model does jaspr use?
- Component
- MVP
- MVC
- Singleton
Show answer

Component — jaspr uses a component model.

Next lesson: Summary - Web Dart

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies