Extended

Vietnam

Scalable Flutter projects

Practical tips

TruongSinh Tran-Nguyen, Inspectorio

@truongsinhtn
❌
About Speaker
● “Sinh”

● 10y+ working w/ European and VN

startups

● People's Choice CTO of the Year

2016 – Nordic Startup Award
Finland
About Speaker
● Engineering Director,

● Flutter advocate

● @truongsinhtn
About
● Startup, 13 quarters-old
● Quality and compliance platform, powered by AI
● B2B, serving Fortune 100 factories, brands, retailers
● Always looking for new talents 😉
About

Source: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis non erat sem
About

Source: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis non erat sem
Agenda (in the order of seniority/difficulty)
1. source version control
2. linter/formatter
3. Theme & atomic design
4. Test automation
5. design pattern (out of time?)
6. CI/CD (out of time?)
7. Profiling/Benchmarking (out of time?)
 Extended
Vietnam

Source version control

 Extended
Vietnam

Formatter/Linter
● https://pub.dev/packages/pedantic for opinionated styles
● `flutter analyze` and `flutter format`
● IDE’s tools
 Extended
Vietnam

Live demo
 Extended
Vietnam

Theme & Atomic design

 Extended
Vietnam

Live demo
 Extended
Vietnam

Test Automation
Test Automation
Test Automation
Unit Widget Integration
Confidence Low Higher Highest
Maintenance cost Low Higher Highest
Dependencies Few More Most
Execution speed Quick Slower Slowest
 Extended
Vietnam

Live demo
 Extended
Vietnam

Design Pattern
In general
Any system can be broken into:

1. Input/Output (do not confuse this with I/O vs CPU)

2. Logic
3. Side effect/peripherals

Have a clear boundaries among these 3 parts, with the the

interface as small as possible
In general
1 way import only

1. Input/Output parts import logic parts

2. Input/Output parts import dependency parts
3. Logic parts know nothing about Input/Output nor Side
effects/Peripheral
4. Side effects/Peripheral parts know nothing about
Input/Output or logic
For user-facing apps
1. User interaction (click, tap, touch, swipe) and screen
display
2. Logic
3. Local peripheral and network (local storage, session,
bluetooth connection, http request)
For a Flutter app
1. Widget
2. Logic must be purely dart code, should be pure functions
(data in, data out, no side effects)
3. Peripheral, platform channels and network

⇒ Functional reactive programming

In general
1 way import only

1. Input/Output parts import logic parts

2. Input/Output parts import dependency parts
3. Logic parts know nothing about Input/Output nor Side
effects/Peripheral
4. Side effects/Peripheral parts know nothing about
Input/Output or logic
For a Flutter app
1 way import only

1. Files containing widgets imports files containing BLoC or

logic code
2. Files containing widgets imports files containing “repo”s
3. Better use RxDart (BLoC)
○ or Provider

4. Keep most “state” in the logic, not widget

 Extended
Vietnam

What could go wrong

 Extended
Vietnam

CI/CD
❌
 Extended
Vietnam

Profiling/Benchmarking
 Extended
Vietnam

Thank You
 Extended
Vietnam

Let’s welcome
Lea Truc & Quynh Ruby
To have a beginner’s perspective of React
Native vs Flutter

I, Lea Truc & Quynh Ruby will be available

for Q&A later