$30 off During Our Annual Pro Sale. View Details »

FlutterMTL September Meetup - Build Full-Stack App in Dart

GDG Montreal
September 21, 2023

FlutterMTL September Meetup - Build Full-Stack App in Dart

GDG Montreal

September 21, 2023
Tweet

More Decks by GDG Montreal

Other Decks in Programming

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