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

Presented by shrop at Drupal NoVA

Transcript

1. Decoupled Drupal with Flutter Drupal NoVA Meetup September 15th, 2020
2. Today’s Agenda 1. Why Drupal + Native Applications? 2. What’s Flutter? 3. What’s Firebase? 4. Umami Recipe Magazine Native App 5. Q&A
3. As the Senior Director of Development, Mark “shrop” loves working at the intersection of leadership and technology. Over his 20-plus-year career as a technical team leader, Shrop held IT roles at a large urban research university and a nationally recognized graphic communications company prior to Mediacurrent. He has a passion for personal and team growth, aligning individual purpose with Mediacurrent’s vision. Shrop focuses on empowering teams to excel while using best of class open source technology 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
4. Open Source Expansion Partner
5. Who We Are We are Drupal pioneers, digital strategy experts, open source advocates, researchers, designers, and innovators who solve technology challenges.
6. Our Mission To bring together the most talented team members to provide world-class solutions for the web.
7. Why Drupal + Native Applications?
8. Drupal can be setup as a content hub, providing structured content for all types of user interfaces. It is an excellent CMS (Content Management System) backend for web and native applications where content editing experience and 3rd party integrations are important. | 8 Drupal
9. | 9 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. Progressive Web Apps
10. When to Build a PWA | 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. PWAs can help improve conversions through performance and native-like functionality. They can also improve conversion of users to your fully native mobile applications. Conversions 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. Budget User Experience
11. When to Develop Native Applications | 11 When you need maximum speed of the target device(s). Generally, PWAs will not be as fast as native application languages and SDKs. 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 applications are great for enterprises that need to distribute mobile and desktop applications. App Stores Native application SDKs provide direct access to the latest hardware and features available on each platform. Some platform features are only accessible from native applications (e.g., Push notifications in iOS). Feature Access Speed
12. 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 | 12 Application UX Options Responsive PWA Native
13. What’s Flutter?
14. | 14 Flutter is Google’s UI toolkit for building beautiful, natively compiled applications for mobile, web, and desktop from a single codebase. flutter.dev
15. Google is putting a large amount of resources into building and ensuring Flutter’s chance to succeed. • Dedicated team develops 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 | 15 Google
16. | 16 Who is Using Flutter? Source link
17. | 17 Fast Development Native Performance Expressive and Flexible UI
18. | 18 Everything’s a Widget Source link
19. | 19 Reactive JavaScript Approach Source link
20. | 20 Flutter’s Approach Source link
21. | 21 Not Just for Android and iOS Source link
22. | 22 Productive Multi-Platform Fast
23. | 23 2020 Q2 Dart PRs on Github Source link
24. What’s Firebase?
25. A: It’s not just a cloud database!
26. | 26 Build apps fast, without managing infrastructure. firebase.google.com
27. | 27 Fast Development One Unified Platform No Infrastructure to Manage
28. | 28 Source link
29. Google is putting a large amount of resources into building and ensuring Firebase’s chance to succeed. • Dedicated team develops Firebase • 1st class integrations with Android, iOS, web, Unity, and C++ • Excellent documentation | 29 Google
30. Umami Recipe Magazine Native App
31. | 31 • 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 | 31 Native Mobile App Use Case
32. 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 | 32 Hello, Contenta Flutter! https:/ /github.com/shrop/contenta_flutter
33. | 33 Contenta Flutter Architecture Drupal 8 Backend (Contenta CMS) Firebase Firestore Flutter App Recipes via JSON API (read only) Save and retrieve favorites (+additional data in the future)
34. Umami Recipe Magazine Native App Demo
35. Q&A Let’s talk! @shrop in/markshropshire
36. | 36 Resources • https:/ /flutter.dev • https:/ /firebase.google.com • https:/ /www.contentacms.org • https:/ /github.com/shrop/contenta_flutter
37. Thank you! @Mediacurrent Mediacurrent @Mediacurrent MediacurrentDrupal Mediacurrent.com @Mediacurrent