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

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

Architectural thinking on Flutter State Management

By Majid Hajian

Architectural thinking on Flutter State Management

Sometimes state management shapes the application architecture, which we even interchangeably call state management, app architecture. State management is a controversial topic among all developers, and it's, at the same time, one of the most complex topics that developers should decide on when they are building a Flutter app. Many developers say one solution is the best, whereas some disagree! What if I tell you that, in my opinion, there is no right and wrong answer! If you ask a software architect, which state management is the best for an application? The answer is evident; It Depends. This talk discusses how to think like an architect and understand, recognize, and analyze tradeoffs and characteristics when choosing state management. I will show you why all state management might be best and worst, at the same time for your application which eventually helps you to make your mind to determine your appropriate solution.

  • 1,040