Web framework
- Dart course
- Advanced
- Lesson 53/83
- 5 min
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.
Practice 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').
Starter code
// import the jaspr package
// define the App component (StatelessComponent)
void main() {
// print jaspr info
}Sample 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');
}Expected output
jaspr: web framework Component: App
Questions and answers
Review the lesson questions together with their answers. To test yourself, solve the lesson interactively.
1 The jaspr import
import 'package:____/jaspr/jaspr.dart';import 'package:jaspr/jaspr/jaspr.dart';Explanation: jaspr is imported via package:jaspr/jaspr.dart.
2 Match the jaspr parts
| Term | Meaning |
|---|---|
jaspr |
Web framework |
StatelessComponent |
Component |
build |
Render method |
SSR |
Server render |
3 Which model does jaspr use?
- Component Correct answer
- MVP
- MVC
- Singleton
Explanation: jaspr uses a component model.