Decoupled Drupal with Flutter

Decoupled Drupal has become commonplace with JavaScript front-end frameworks. That setup makes a lot of sense for decoupled websites and progressive web applications. What about accessing Drupal content from within native mobile Android and iOS applications, native desktop applications, and more? That is just what this session will dive into; combining the power of Drupal as a CMS, and Flutter for super fast and beautiful native apps.

Flutter is a Google-developed open source UI toolkit for building amazing, natively compiled applications for mobile, web, and desktop from one codebase. Flutter is user and developer-focused around four vision pillars: beautiful, fast, productive, and open. While it is best known for helping launch mobile native apps, such as the official Hamilton app, it is now being used for building native desktop and web applications.

We will kick off this session discussing how native applications can benefit from integration with Drupal for content delivery to your users. Attendees will learn about native application use cases and when to use native application vs. PWAs (Progressive Web Applications). The session will wrap with a live mobile app demo, including code examples from the Contenta Flutter open source project!

Topics Covered

Why consume Drupal content with native applications?
Drupal and native application architecture
What’s Flutter?
Demo - Recipe magazine companion mobile app
Consuming content via Contenta CMS API
Saving persistent state and user data with Google Firebase

First presented by shrop at Florida Drupalcamp 2020

Transcript

1. Decoupled Drupal with Flutter Florida Drupalcamp February 22, 2020
2. | 2 As the Senior Director of Development, Mark “shrop” loves working at the intersection of leadership and technology. Over his 20 plus year career leading technical teams, Shrop has gained experience in IT roles at a large urban research university, a nationally recognized graphic communications company, and Mediacurrent. He has a passion for personal and team growth, aligning individual purpose with Mediacurrent vision. Shrop focuses on empowering teams to excel while using best of class open source technical solutions. In addition, Shrop is an organizer and frequent public speaker at meetups and conferences, talking about leadership, technology, productivity, and mentorship. Mark Shropshire Senior Director of Development /in/markshropshire @shrop
3. | 3 Today’s Agenda I. Why Drupal + Native Applications? II. What’s Flutter? III. What’s Firebase? IV. Umami Recipe Magazine Native App V. Q&A
4. | 4 About Mediacurrent
5. Who We Are Mediacurrent is a full-service digital agency that implements world class open source software development, strategy, and design to achieve defined goals for enterprise organizations seeking a better return on investment.
7. | 7 Why Drupal + Native Applications?
8. | 8 Drupal is a content hub Excellent CMS backend for web and native application user interface frontends
9. | 9 Progressive Web Apps In 2015 Alex Russell and Frances Berriman coined the name Progressive Web Apps to describe a collection of open web APIs and progressive enhancement strategies that allow for cross-platform compatibility. PWA user experience rivals that of native applications.
10. | 10 PWAs allow users to have native-like application experience. Applications can work and feel more like native applications on mobile and desktop. PWAs have Improved performance and offline access vs. traditional web sites. When to Build a PWA PWAs can help improve conversions through performance and native-like functionality. They can also improve conversion of users to your fully native mobile applications. PWAs are good when there is a lack of budget for native application development. Existing web development teams can build PWAs much easier than native applications because they can continue to use HTML, CSS, and JavaScript. User Experience Conversions Budget
11. | 11 When you need maximum speed of the target device(s). Generally, PWAs will not be as fast as native application languages and SDKs. When to Develop Native Applications Native applications make sense when you need to be in an App Store such as the Apple App Store or the Google Play Store. Native application SDKs provide direct access to the latest hardware and features available in each platform. Some platform features are only accessible from native applications (e.g. Push notifications in iOS). Speed App Stores Feature Access
12. | 12 Application UX Options Responsive PWA Native Always start with responsive web applications and consider using PWA-related technologies. Native applications become options based on project needs: • Marketing in app stores • Enterprise deployment • Application features and performance
13. | 13 Decoupled Drupal Example Drupal 8 Backend Mobile Phone, Tablet, etc. API (JSON API / GraphQL)
14. | 14 What’s Flutter?
15. | 15 What’s Flutter? Flutter is Google’s UI toolkit for building beautiful, natively compiled applications for mobile, web, and desktop from a single codebase. flutter.dev
16. | 16 Google Google is putting a large amount of resources into building and ensuring Flutter’s chance to succeed. • Dedicated teams develop Flutter • 1st class integrations with Firebase, Android Developer Studio, Visual Studio Code, and more • Fully open! • Excellent documentation • https:/ /pub.dev - Dart and Flutter packages What’s Flutter?
17. | 17 Benefits of Flutter Everything’s a Widget Source link
18. | 18 What’s Flutter? Reactive JavaScript Approach Source link
19. | 19 What’s Flutter? Flutter’s Approach Source link
20. | 20 What’s Flutter? Source link Apps Built with Flutter
21. | 21 What’s Flutter? Source link Not Just for Android and iOS
22. | 22 What’s Flutter? Fast Development Native Performance Expressive and Flexible UI
23. | 23 What’s Flutter? Productive Multi-Platform Fast
24. | 24 Dart Trends (Up from 22 in 2019 Q1) Source link 2019 Q3 Dart PRs on Github
25. | 25 Benefits of Flutter Fuchsia OS May replace Android and Chrome OS in the future. Fuchsia apps are built with Flutter.
26. | 26 What’s Firebase?
27. | 27 What’s Firebase? A: It’s not just a cloud database!
28. | 28 What’s Firebase? Build apps fast, without managing infrastructure firebase.google.com
29. | 29 What’s Firebase? Fast Development One Unified Platform No Infrastructure to Manage
30. | 30 Google Google is putting a large amount of resources into building and ensuring Firebase’s chance to succeed. • Dedicated teams develop Flutter • 1st class integrations with Android, iOS, web, Unity, and C++ • Excellent documentation What’s Firebase?
31. | 31 Umami Recipe Magazine Native App
32. | 32 • Utilize the Google Play and Apple App Store to market Umami • Keep the Umami Recipe Magazine brand top of mind • Provide useful features not available on the website • Utilize native platform functionality not available with PWA technology Native Mobile App Use Case
33. | 33 Hello, Contenta Flutter! Flutter frontend for Contenta CMS goals • Flutter app for Android and iOS • Decouple Drupal 8 content (read only) • Use Firestore to store app user data • Open source codebase for learning Flutter https:/ /github.com/shrop/contenta_flutter
34. | 34 Contenta Flutter Architecture Drupal 8 Backend (Contenta CMS) Firebase Firestore Flutter App
35. | 35 Umami Recipe Magazine Native App Demo
36. | 36 Resources • https:/ /flutter.dev • https:/ /firebase.google.com • https:/ /mark.shropshires.net/blog/understanding-progressive-web-apps-a nd-why-you-should-care • https:/ /www.drupal.org/docs/8/umami-drupal-8-demonstration-installatio n-profile • https:/ /www.contentacms.org • https:/ /github.com/shrop/contenta_flutter
37. Thank you! @Mediacurrent Mediacurrent.com Facebook.com/mediacurrent @Mediacurrent