Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Decoupled Drupal with Flutter

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


Mark Shropshire

September 15, 2020


  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

  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