Jellybean Experience SDK

This SDK allows to create plugins for the Jellybean ecosystem. Plugins are used:

• In the CMS, by brands, to dynamically add components / services / features into their end users "experiences". For that, they use the CMS experience builder.
• Then on experiences pages. Once added by brands from the CMS, plugins are instantiated on experience pages seen by end users.

Plugins are written in Typescript and can use any framework like React, Vue, Angular to build the components.

Plugin structure

A plugin is made of:

• A configuration file (jellybean-plugin.config.yml)
• A client (eg: ui/visual/react components) and a server (serverless functions) folders.
• A JellybeanPlugin entry point, used to load the plugin.
• 0 to many (UI) components, which are UI components rendered on the host application.
• 0 to many (Server) functions, which can be called by the plugin (or by others) to execute custom logic in a trusted environment (contrary to the untrusted client side).

Installation

• Install the Jellybean CLI:
  • npm i -g @jellybeanxyz/cli
• Initialize the plugin:
  • jellybean plugins init
  • This creates a default config file, and empty client and server folders.
• Create a regular frontend app (without SSR) in the client folder:
  • npx create-react-app my-app --template typescript
• Edit jellybean-plugin.config.yml and set a unique plugin ID, a name and entry points.
  • TBD: explain more what those entry points are.
• Edit your bundler to:
  • Export the plugin as a SystemJS module. This is usually done by changing bundler's output target, for example config.output.libraryTarget = "system" with webpack.
  • Set a fixed bundle output name, for example config.output.filename = "jellybean-plugin.js". Use this bundle in your plugin configuration (bundle/libraryUrl).

Optimizations

• TODO: ability to use shared libraries or not / reason why