Full-stack Dart with Flutter

by Ryan Edge

Feedback welcome

https://forms.gle/Vxa7ZDmkb5Hv6fc78

Ryan Edge

ryanedge.page

Fullstack with a front-end lean
I build applications for Web, Desktop, and Mobile
❤️'s Flutter and React

Today's agenda

Cognitive load
Developing horizontally vs. vertically
Developing using a single language stack
Options for the backend when building Flutter apps

Developers are unhappy

According to StackOverflow's 2024 survey

only 20% of developers are happy
commonly frustrated by the complexity of the tech stack (specifically building & deploying)

What is cognitive load?

Cognitive load is how much a developer needs to think in order to complete a task.

Confusion costs time and money.

Types of Cognitive Load

Intrinsic

The inherent level of difficulty associated with a specific problem we are solving.

Extraneous

The level of difficulty imposed by factors not directly relevant to the problem we are trying to solve.

Types of Cognitive Load cont'd

Examples of cognitive load

Cool, complex architectures
Poorly documented code or systems
Fancy libraries
Trendy technologies
Multi-domain teams

How can we combat cognitive load?

Limit responsibilities or simplify domains

Developing horizontally

Tradeoffs

🚀 Tasks not features
⬆️ Horizontal knowledge
⬇️ Vertical knowledge

Developing vertically

Tradeoffs

🚀 Features not tasks
⬆️ Vertical knowledge
⬇️ Horizontal knowledge

Tradeoffs of vertical slice development cont'd

Benefits	Drawbacks
Great for product teams	Not great for functional teams
Vertical knowledge sharing	Increased cognitive load
No horizontal feature juggling	Context switching
Should translate to faster development cycles

Enter Monoglot vertical stack development

Constructing a system using a single language.

Benefits of Monoglot development

Learn language once, write everywhere
Less context switching
- Better developer efficiency
- Quicker onboarding
Code reuse

Some examples of monoglot?

Expo, Next.js, Remix, Sveltkit, etc. (Node.js)
Kotlin Multiplatform + Kotlin server-side
Swift + Vapor
What else?

Full-stack Dart

Wait, what is Dart again? And what is Flutter?

What is Dart?

Strongly typed, object-oriented language
Optimized for UI development
Developed by Google
That language that browsers hate.

What is Flutter?

Open-source, reactive framework
Mobile, web, desktop, embedded
Uses the Dart language
Developed by Google

What is Flutter? A Reactive framework

Sky: the experiment

The brainchild of Ian Hickson & Eric Siedel
"What if browsers broke backwards compatibility?"

Why Flutter?

Is Flutter popular?

Who contributes to Flutter?

Who uses Flutter?

Flutter's ideas are not new

Feature	Like
Ship the framework with the application	Game development
Multiplatform targets	React Native, Xamarin, etc.
Extensible component system	Like web, Android, iOS

What differentiates Flutter?

Provides cost-effective feature parity
Provides availability & reliability

Speed dating code intro

import 'package:flutter/material.dart';

void main() => runApp(const MainApp());

class MainApp extends StatelessWidget {
  const MainApp({super.key});

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: Scaffold(
        body: Center(
          child: Text('Hello World!'),
        ),
      ),
    );
  }
}

Full-stack Dart

Implement from scratch
Implement using a minimalist backend framework
Implement using full-fledged backend framework

Minimalistic backend framework: Dart Frog

Open-source (by VGV)
Simple API inspired by the likes of remix.run, next.js, and express.js.

Features of Dart Frog

Hot reload
Dart DevTools
File System Routing
Middleware
🚧 Full-stack type safety (with client generation)
🚧 API Documentation generation

A simple Dart Frog example

routes/hello/[name].dart

import 'package:dart_frog/dart_frog.dart';

Response onRequest(RequestContext ctx, String name) {
  final request = ctx.request;

  return Response(body: 'Hello $name!');
}

Full-fledged backend framework: Serverpod

Serverpod is an open-source, scalable app server written in Dart for the Flutter community.

Open-source (own company)
Backed by a Googler Viktor Lidholt
Full-stack framework inspired by .NET, Nest, etc.

Features of Serverpod

RPC-like communication & serialization (codegen)
DevOps included (Terraform & Docker)
Built-in Logging, ORM & Caching

Task scheduling, Authentication, File upload
Companion application for development

Serverpod Cloud coming Q4 2024

Vercel but for Dart

Easy Deployment
Global Availability
Cost Efficiency

A simple Serverpod example

class ExampleEndpoint extends Endpoint {
 Future<String> hello(
   Session session, 
   String name,
 ) async {
  return ‘Hello, $name!’;
 }
}

Consuming a Serverpod request

var result = await client.example.hello('World');

Serverpod vs. Dart Frog: What's different?

Serverpod has

built-in codegen for terraform
built-in migration
built-in resources
strong opinions

Dart Frog has

file-based routing
REST conventions
Next.js influenced middleware
simplicity

Celest: The Vercel of Flutter

Build, deploy, and scale your app's backend. All in Dart. All without leaving your IDE.

YCombinator success story
Backed by AWS Amplitude alums
Own company

Features of Celest

Full-stack type safety (with client generation)
Authentication & Functions
Dart native
Backend-as-a-service

A simple Celest example

import 'package:celest/celest.dart';
 
@cloud
Future<String> sayHello(String name) async {
  return 'Hello, $name!';
}

Serverpod vs. Celest: What's different?

Serverpod

More feature complete
More established, well funded
More flexible

Celest

Dart-native, no serialization step
Less cognitive load
Less flexibility
Potential vendor lock-in

Cool story bro, what about infrastructure?

Infrastructure from Code

Infer infrastructure from application code

IaC vs. IfC: abstraction, not replacement

Benefits of IfC

Self-provisioning infrastructure
Portability across technologies and providers
Focus on code, not infrastructure

Nitric: Flutter for the backend

The cloud-aware application framework

Open-source
Investor backed
100% free
Learn once, write everywhere

Features of Nitric

Multi-provider: write once, deploy everywhere
Language agnostic: JS/TS, Go, Python, Dart, C#
DevOps optional

Autoscaling serverless primitives
- API Gateway, Tasks, File upload, KV, Database...
Fast local development
- Emulated cloud environment
- Devtools w/architecture diagrams.
- Pulumi dashboard
Empathetic, experienced code owners

How Nitric works

A Burgeoning Dart SDK

import 'package:nitric_sdk/nitric.dart';

final publicApi = Nitric.api("public");
profileApi.post("/hello/:name", (ctx) async {
  final nameArg = ctx.req.pathParams["name"]!;

  ctx.res.body = "Hello, $name!";

  return ctx;
});