FlutterMTL September Meetup - Build Full-Stack App in Dart

Transcript

1. Build Full-Stack
   Dart Application
   Jhin Lee, S/W Developer @Unity
   

   View Slide

2. Jhin Lee
   Full-Stack Developer @Unity | GDG & Flutter Montreal Organizer
   ● Full Stack Developer (Android, iOS, Flutter, Web, DevOps or anything!)
   ● 10yr+ Android and Embedded System Engineer (AOSP, Linux Kernel, HAL, etc.)
   ● Scrum Master (PSM2)
   ● https://www.linkedin.com/in/leehack/
   

   View Slide

3. Agenda
   1
   2
   3
   4
   5
   Why full-stack in Dart?
   What do we build?
   Global Architecture
   Project Structure
   Reset APIs
   6 Let’s Code!
   

   View Slide

4. One Programming Language
   Share codes between Backend and Frontend
   Flutter (and Dart Frog!)
   It’s easy and fun!
   Performance???
   +
   +
   +
   Why Full Stack in Dart?
   +
   +
   

   View Slide

5. So, What will we build
   today?
   

   View Slide

6. View Slide

7. Global
   Architecture
   ● Frontend in Flutter
   ● Backend in Dart Frog
   ● Shared package in pure
   Dart
   

   View Slide

8. Project Structure
   Mono repo
   ● Frontend Flutter Codes in
   /packages/frontend_flutter
   ○ Flutter UI and REST API Client
   ● Backend Dart Frog Codes in
   /packages/backend_frog
   ○ Dart Frog REST API Server
   ● Shared library in /packages/todo
   ○ Data Model
   ○ Repository Interface
   Frontend and Backend uses the Shared library as a dependency.
   

   View Slide

9. REST APIs
   ● /todos
   ○ POST - Add a new todo
   ○ GET - Get all todo list
   ● /todos/:id
   ○ GET - Get a todo by id
   ○ PUT - Update a todo
   ○ DELETE - Delete a todo by id
   

   View Slide

10. Let’s Code!
    Dart Frog
    Flutter
    Docker
    Melos
    Riverpod
    

    View Slide

11. References
    ● Article for more detail - https://dev.to/leehack/lets-build-a-full-stack-dart-app-36lm
    ● Dart Frog Website - https://dartfrog.vgv.dev/
    ● Melos Website - https://melos.invertase.dev/
    ● Riverpod Website - https://riverpod.dev/
    

    View Slide

12. Questions?
    

    View Slide

13. Thank you!
    

    View Slide