Under the hood of Contentful's App Framework

Header image for blog post: Under the hood of the App Framework
Published
February 26, 2020
Category

Developers

Contentful’s just-released App Framework changes how you extend Contentful and integrate external services. With new capabilities, an improved deployment model and a marketplace of ready-to-use apps, it takes UI extensions to the next level. Read on to learn about the differences between a UI extension and an app, why we built apps, and what you get when you make the switch.

From UI extensions to the App Framework

The Contentful App Framework is the culmination of more than three years of hard work and focus on making Contentful the most extensible, cloud-native content platform available to developers. Starting with their introduction back in 2016, UI extensions gave developers the tools to create custom editing experiences for their teams. We’ve been floored with what our customers and developer community built on top of Contentful, from experimentation, to WYSIWYG editors to an Apple Music integration.

Not satisfied with field editors as the only customizable area, we expanded the UI extension SDK to allow for dialog extensions, whole entry extensions and sidebar extensions.

While UI extensions give developers and partners freedom to customize the editing experience and integrate external services, we realized that UI extensions created some challenges with governance and deployment: UI extensions are usually bespoke pieces of code, created for a single project, deployed to a single space. Sharing UI extensions across spaces within an organization or sharing them with the community is cumbersome — extensions, once installed, don’t automatically update with any bug fixes or improvements made by the original developer.

The App Framework: UI extensions, supercharged

Our answer to these issues is the App Framework. Apps powered by Contentful’s App Framework can be seamlessly shared across spaces. The good news: everything you’ve learned about developing UI extensions still applies to apps.

What’s different about apps vs. UI extensions:

  • Apps implement their own configuration screen for easier installation and configuration

  • Apps manage their own state and parameters

  • Apps are defined on the organization level and installed into spaces to enable sharing them easily across spaces

Everything else about apps is the same as with UI extensions. You still use the same SDK, still use create-contentful-extension to create a scaffolding and use Forma 36 to make sure your app visually fits into the Contentful web app.

What you now need to do differently with apps:

  • Add the app-config location to manage the configuration

  • Create an AppDefinition in your organization

  • Host the code on an HTTPS capable host.

To learn how to migrate an existing UI extension over into an app, check out our guide on converting UI extensions to apps.

We will continuously expand the capabilities of the App Framework, allowing you to hook deeper into the Contentful experience. All future improvements will only be available to apps and not to UI extensions, so investing into the migration will allow you make use of the App Framework’s new features as they go live.

Live now: 15 ready-to-use apps and more open source resources

We’ve also released 15 ready-to-use apps to enhance your Contentful experience. They range from custom editing experiences, like the Image Focal Point App, to integrations with external tools like Cloudinary, Netlify and Google Analytics. These are now live in the Contentful marketplace, where we’ll be publishing additional selected apps over time.

screenshot of Contentful image focal point app

All currently-released apps are open source and published on GitHub. You can use them as a reference to implement your app following our existing patterns. We also welcome your contributions and feedback.

We went a step further and created libraries for two use cases. These shared apps for DAMs (Digital Asset Management) and SKUs (ecommerce services) contain all the generic code to support apps in these categories, allowing you to very quickly build apps by implementing only the vendor-specific pieces.

Currently, we only publish apps from select technology partners on the marketplace. If you’re interested in becoming part of this group, we’d love to hear from you.

Learn more in our April 7 developer webinar, or just try it out!

If you want to learn more about how you can use the App Framework to integrate external services and roll out custom editing experiences for your teams, join for our webinar on April 7 and watch David Fateh, one of the extensibility developers, build an app live.

But that’s no reason to wait — we have a tutorial live now that shows you how to build your first app using Contentful’s App Framework. Try it out and let us know what you think!

About the author

Don't miss the latest

Get updates in your inbox
Discover new insights from the Contentful developer community each month.
add-circle arrow-right remove style-two-pin-marker subtract-circle remove