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

First presented by shrop at Florida Drupalcamp 2020

66915a7bf21d69f3ec3207fd9c493504?s=128

Mark Shropshire

February 22, 2020
Tweet

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.
  6. None
  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