Majid Hajian
mhadaily
Architectural thinking
on Flutter
State Management
mhadaily
We learn
- Flutter State Managements
- Architecture Characteristics
- Architectural Thinking
- Decision Making
ME.dart
import 'package:flutter/material.dart';
MaterialApp(
ThemeData(
name: "Majid Hajian",
location: "Oslo, Norway",
description: '''
Google Developer Expert
Passionate Software engineer,
Community Leader, Author and international Speaker
''',
main: "Flutter/Dart, PWA, Performance",
homepage: "https://www.majidhajian.com",
socials: {
twitter: "https://www.twitter.com/mhadaily",
github: "https://www.github.com/mhadaily"
youtube: "https://www.youtube.com/mhadaily"
},
author: {
Pluralsight: "www.pluralsight.com/authors/majid-hajian",
Apress: "Progressive Web App with Angular, Book",
PacktPub: "PWA development",
Udemy: "PWA development",
}
founder: "Softiware As (www.Softiware.com)"
devDependencies: {
tea: "Ginger",
mac: "10.14+",
},
community: {
FlutterVikings: "Orginizer",
FlutterDartOslo: "Orginizer",
GDGOslo: "Co-Orginizer",
DevFestNorway: "Orginizer",
...more
}));
mhadaily
Find me on the internet by
invertase.link/arBd
Share anything about the conference on social media and tag GDGCraiova, @Zapp_run and fill this form
Architectural Thinking
Majid Hajian
mhadaily
- Business / Team Drive
- Breadth of knowldge
- Architecture Tradeoffs
?
- Safety
- Structural strength
- Maintenance
- Aerodynamics
- Cost
- Ground clearance
?
IT DEPENDS
Triple Pattern
Segmented State Pattern
Flutter
State Managements
Majid Hajian
mhadaily
Why?
Majid Hajian
mhadaily
MaterialApp
Screen1
Screen3
Screen2
state
state
state
MaterialApp
Screen1
Screen3
Screen2
state
IT DEPENDS
STATE
Who needs it?
all (most) widgets
some widgets
Single widgets
App State
Ephemeral State
https://flutter.dev/docs/development/data-and-backend/state-mgmt/options
Provider
Riverpod
setState
InheritedWidget & InheritedModel
setState
Redux
Fish-Redux
BLoC / Rx
GetIt
MobX
Flutter Commands
Binder
GetX
Triple Pattern (Segmented State Pattern)
Wrapper based
on Flutter features
Provider
Riverprod
Flutter Hooks & ...
Reactive
programming base
Mobx
BLoc
Cubit & ...
Functional
programming base
Redux
async_redux
- CodeCov > 70%
- Good Docs
- Widely used
- A good DI is a plus
- Only state management
- Active repository
| Domain Concerns | Architecture characterstics | Flutter concerns |
|---|---|---|
| Mergers | Scalability, adaptability, extensibility | Boilerplate code, easily extend, maintainer support |
| Time to market | Agility, testability, deployability | easily adapt and develop, deploy a feature |
| Dev satisfaction | Performance, productivity, Error handling, agility, testability, maintainability, | Code generation, DevTools, Docs, examples and etc |
| Time & budget | Simplicity, feasibility | Complexity, Team size & knowledge and size of project |
https://github.com/brianegan/flutter_architecture_samples
setState()
| Simplicity | Productivity | Testability | Scalability | Maintainability | Adaptability | Agility | Deployability |
|---|---|---|---|---|---|---|---|
| ***** | *** | ** | * | ** | ***** | ***** | ** |
- Perfect for ephemeral state
- Good for very simple projects / demos / prototypes, or in cases when there is no complex hierarchical structure of widgets
Provider & ChangeNotifier
| Simplicity | Productivity | Testability | Scalability | Maintainability | Adaptability | Agility | Deployability |
|---|---|---|---|---|---|---|---|
| ***** | ***** | *** | *** | *** | **** | ***** | **** |
- Most small to medium
- Project without stream/observable or reactive programing pattern
Riverpod
| Simplicity | Productivity | Testability | Scalability | Maintainability | Adaptability | Agility | Deployability |
|---|---|---|---|---|---|---|---|
| *** | **** | ***** | ***** | ***** | *** | **** | **** |
- Most applications
- Applications without reactive approach
- Teams with senior developer
BLoC
| Simplicity | Productivity | Testability | Scalability | Maintainability | Adaptability | Agility | Deployability |
|---|---|---|---|---|---|---|---|
| ** | *** | ***** | ***** | *** | *** | *** | **** |
- Project with stream/observable or reactive programing pattern
- Large scale applications
MobX
| Simplicity | Productivity | Testability | Scalability | Maintainability | Adaptability | Agility | Deployability |
|---|---|---|---|---|---|---|---|
| *** | **** | *** | **** | **** | *** | *** | ***** |
- Project with stream/observable or reactive programming pattern
- Fan of code generation
- Medium to large application
Redux
| Simplicity | Productivity | Testability | Scalability | Maintainability | Adaptability | Agility | Deployability |
|---|---|---|---|---|---|---|---|
| ** | ** | **** | **** | *** | ** | *** | ** |
- Teams with web developers
- Medium application
GetIt / GetIT_mixin
| Simplicity | Productivity | Testability | Scalability | Maintainability | Adaptability | Agility | Deployability |
|---|---|---|---|---|---|---|---|
| **** | **** | *** | **** | **** | *** | *** | *** |
- If you don't like context
- Most applications without reactive pattern
setState()
Riverpod
BLoC
MobX
Redux
| Simplicity | Productivity | Testability | Scalability | Maintainability | Adaptability | Agility | Deployability |
|---|---|---|---|---|---|---|---|
| * | *** | **** | **** | **** | ** | *** | *** |
GetIt / GetIT_mixin
| Simplicity | Productivity | Testability | Scalability | Maintainability | Adaptability | Agility | Deployability |
|---|---|---|---|---|---|---|---|
| ***** | *** | ** | * | ** | ***** | ***** | ** |
| Simplicity | Productivity | Testability | Scalability | Maintainability | Adaptability | Agility | Deployability |
|---|---|---|---|---|---|---|---|
| *** | **** | ***** | ***** | ***** | *** | **** | **** |
| Simplicity | Productivity | Testability | Scalability | Maintainability | Adaptability | Agility | Deployability |
|---|---|---|---|---|---|---|---|
| ** | *** | ***** | ***** | *** | *** | *** | **** |
| Simplicity | Productivity | Testability | Scalability | Maintainability | Adaptability | Agility | Deployability |
|---|---|---|---|---|---|---|---|
| *** | **** | *** | **** | **** | *** | *** | ***** |
| Simplicity | Productivity | Testability | Scalability | Maintainability | Adaptability | Agility | Deployability |
|---|---|---|---|---|---|---|---|
| **** | **** | *** | **** | **** | *** | *** | *** |
setState()
Riverpod
BLoC
MobX
Redux
| Simplicity | Productivity | Testability | Scalability | Maintainability | Adaptability | Agility | Deployability |
|---|---|---|---|---|---|---|---|
| * | *** | **** | **** | **** | ** | *** | *** |
GetIt / GetIT_mixin
| Simplicity | Productivity | Testability | Scalability | Maintainability | Adaptability | Agility | Deployability |
|---|---|---|---|---|---|---|---|
| ***** | *** | ** | * | ** | ***** | ***** | ** |
| Simplicity | Productivity | Testability | Scalability | Maintainability | Adaptability | Agility | Deployability |
|---|---|---|---|---|---|---|---|
| *** | **** | ***** | ***** | ***** | *** | **** | **** |
| Simplicity | Productivity | Testability | Scalability | Maintainability | Adaptability | Agility | Deployability |
|---|---|---|---|---|---|---|---|
| ** | *** | ***** | ***** | *** | *** | *** | **** |
| Simplicity | Productivity | Testability | Scalability | Maintainability | Adaptability | Agility | Deployability |
|---|---|---|---|---|---|---|---|
| *** | **** | *** | **** | **** | *** | *** | ***** |
| Simplicity | Productivity | Testability | Scalability | Maintainability | Adaptability | Agility | Deployability |
|---|---|---|---|---|---|---|---|
| **** | **** | *** | **** | **** | *** | *** | *** |
- Project evolves
- Team
Application
Infrastructure
Presentation
Presentation
Application
Application
Infrastructure
Presentation
Presentation
Application
Summary
Majid Hajian
mhadaily
mhadaily
We learned
- Flutter State Managements
- Architecture Characteristics
- Architectural Thinking
- Decision Making
?
IT DEPENDS
Majid Hajian
mhadaily
Slides/Codes
slides.com/mhadaily
SVG icons credited to undraw.co
