FlutterMTL September Meetup - Build Full-Stack App in Dart

1. Build Full-Stack Dart Application Jhin Lee, S/W Developer @Unity
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/
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!
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? + +
5. So, What will we build today?
7. Global Architecture • Frontend in Flutter • Backend in Dart Frog • Shared package in pure Dart
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.
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
10. Let’s Code! Dart Frog Flutter Docker Melos Riverpod
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/
12. Questions?
13. Thank you!