Project Binky - Architecture

[StampixSMO]

Starting this discussion to gather my thoughts on the architecture of project Binky - our new customisable SaaS platform for photo rewards.

Following the SaaS serverless workshop from AWS for inspiration:

[StampixSMO]

Evaluation of some front end website builders

Contentful

See https://app.asana.com/0/0/1202604550646230/f
Need to evaluate the links they sent me (Charlie from Contentful).

Commercetools (Frontastic)

Frontastic is the front end, Commercetools is the back end.
Is going to set me up with an account executive for a more technical talk.

Follow up

Pretty similar to builder.io in a lot of ways, but the pitch is quite different. I need a demo to understand how it works technically, need to deep dive similar to builder.io
They always work with an implementation partner.

Demo call

Everything revolves around React components, you build component (button) or component groups (product listing page). High-level, it looks quite similar to builder.io.
The preview is on your actual phone, quite nice with websocket communication or smth. Multi-language built-in for all components and settings (which languages configured in a YAML file somewhere).

The site builder sets up not only the menu, but also just your routing names, etc ..

The page builder only contains rows/columns and component groups to layout, then you add components to it.

They don't offer a built-in CMS.

The entire CI pipelines are also on the dashboard.

We get access to a Netlify platform where we can use NextJS to use server side rendering etc.. ?

Multi tenancy is handled by multiple projects in a dropdown at the top, you can only see what you have permission to. You can share the components, but you can also create custom ones per project.
However, creating new projects is a dev task and you even have to reach out to their support. However, it's on the roadmap to make it so that a business user can also create a new project. They'll get back to me with info on the release.

For permissions, it's granular with 3 levels within a project, but to create a new project etc you need to talk to CommerceTools itself, aka per sale.

To create e.g. green buttons everywhere, you need a project setting (aka similar to Contentful right now) to set an option that the component then reads out.

Templates for a project would need to be defined in the repo, containing the logic.

Next steps:

• When can projects be automated? ==> Long-term on the roadmap, medium-term this needs to go via a CS manager and could take 1-2 days per project. Could also pre-provision some projects up-front.
• What's a good integration partner?
• Do we need a separate folder per project? There's shared components but you can customise components per project, do we need dev people to add smth to the repo per project?
• Pricing
  See https://commercetools.showpad.biz/s/udouZerW

Builder.io

Disco call

Looking really promising tbh, builder.io is basically an SDK. They can whitelabel it for 200k/year, if we have to build that ourselves, we might've spend that much money already too.
They also have an enterprise version for 22k/year, is the starting point and depends on e.g. amount of spaces.
To be technically evaluated.

Follow up

The data saving etc .. has to go to our side, the behaviour is coded by us and we create modules that the customers can then visually use and customise. We can define how much of a component is editable by the editor.

Page, section, data models, in that order. You can choose with which granularity you integrate the entire thing.

Enterprise version is using their own web app, with custom roles and permissions. They also have different spaces, a space can be considered a "tenant". Automating the parts where we need synchronisation across spaces, e.g. generic copy. The admin can all be automated when e.g. onboarding a new client and adding a new space, etc ..

They have a template feature, where we can add boilerplate pages and components as kind of use case examples where the user can start from to modify the end-result.

To make certain modules required: we can check all these things in kind of pre-publish hooks or something.

Next up: play around with the platform and test all the stuff above

Technical assessment

They've made a custom JSON scheme that gets read out and renders pages and they've managed to build a really nice visual editor for it. Basically, they've made what we have for PDF generation but then 100x times better for the visual editing and supporting of course websites instead of PDFs.

They offer a builder/visual layer, but also an underlying CMS which works exactly the same as any other headless CMS. We could use builder.io for the visual layer only and hook up our own (or e.g. Contentful) for the actual content. Using builder.io for everything makes more sense though.

The hosting is all done by us, e.g. using NextJs. We just pull the builder JSON and make it render using their own components and our own custom ones.

Any content on Builder can also be A/B tested!

We can also customize the builder itself.

Questions to ask them

• How do you make a custom component for questionnaires, e.g. the list input seems to need a defaultValue, which doesn't make sense per se. It looks like you can also create custom types for input, is that correct?
• How does i18n work? We offer all our whitelabeled websites in multiple languages (based on the target audience). I see you can i18n the custom fields on e.g. pages, but what about the content of e.g. text blocks in a page?
• Rendering and how builder.io works lifecycle-wise is clear, but how can we set up a flow to define the order of pages? I.e. how can we make routing flexible? Is this to be done using a plugin, see e.g. the campaign builder.
• To understand routing, how would it work to e.g. set up a full company "facade" website similar to our current Wordpress?
• Is it possible to build a custom "campaign builder" plugin with all our own logic and that can drag/drop the pages together to form a flow that makes sense?
• So to separate customers, we'd need multiple spaces, correct?
  • Is there any references to how to properly manage multiple spaces?
    • The roles inside the spaces
    • Our own role inside each customer's space
    • The custom components, types, editor modifications, ...
    • User management for our clients (and internally)
    • Is media also seperated?
  • Is spaces the same as environments?
  • I don't seem to have access to spaces in the settings
  • How could a development workflow for us look like? We've got multiple spaces in production, each for a client. Do we have separated spaces for our team to develop new features in? How do we then "roll out" these features to all the other spaces?
• What's the difference between a Section and a Page model? Can't you just use a section as page, since pages also have some other components that you can choose (e.g. the header). Is the only difference that a page has a URL associated with it?
• Out of interest to get the full picture, how does the following work:
  • The use case "marketing tile targeting a specific persona on certain pages" from the "Models intro" page, how is it decided when to show the tile?
  • In case of a section model for a seasonal promotion banner, where is it decided to show/hide the banner? In builder.io or by code?
  • Similar to the former, a seasonal banner would be a "content entry" but there's only one since it's not e.g. a list of products. Coming from Contentful, would this mean there's a "seasonal banner model" but always only 1 entry for it?
  • Apparently the builder.io docs is made using builder.io itself. How does the left-nav communicate with the body the shows the actual docs? How does the page communicate with the data model to get colors?
• You've got a typo here:
  
• How does the DevEx look like?
• What about theming? E.g. make all buttons green

Answers to those questions:

• i18n is easy, similar to whatever other tool, allowed locales are set up per space. An entire page can be switched per locale (= targeting feature), but also per value in a component.
• Questionnaires just need a custom input type
• Theming is done using more classical CMS approach, e.g. a primary button color
• Setting up a funnel cfr. question 3 is possible, they have a github example and CSB for it, they'll send info about it too
• Most likely will need a custom plugin for the funnel though, cfr. a flow chart
• Environments are like on contentful: for dev work only and are per-space, so not really used by business users
• One organisation: Stampix, one space per client
• Space generation can be automated, seed it with content
• Components (e.g. questionnaires) and plugins etc , are they organisation-level or space-level? I.e. do we have to sync them to each space when we update it? ==> They will update me on it, they have to do homework for it.
• Page has a required URL, that's the only difference
• DevEx, all custom stuff is defined in the application itself, the builder just talks to it ==> means that the components are by default shared! If we want them customised per space, we can always register them conditionally.
• DevEx, for plugins and builder customisation, it's different ==> They'll send documentation on it, but you instantiate the plugin directly in builder from the repo. Might have to build automation on top.
• DevEx, use a Stampix space with different environments to test out new components.
• Also sending over the documentation app, which is open source
• We can probably even handle multiple websites/campaign per space, if we use targeting smartly. If routing is completely different, might need a different space unless our plugin can handle it.

Get Help

We can even request help for a reasonable price from experts, although I'm sure the builder.io team will help out too. BuildQuick is a consultancy that was set up by an ex-engineer and helps you out with your builder.io project(s).

Stackbit

Visual layer over Contentful, multi tenancy is an issue again though.
However, you can't move around buttons etc, that's defined in code, etc ..
I don't think this is going to be a proper fit, but he'll set me up with a demo environment. I need to understand if we can implement our features. He'll also set me up with a solution engineer to try to really understand the base architecture.

Shopstory

They offer an app that is a field in Contentful that then opens a visual editor with a simple json state. You pass the json through their state to get renderable state.
Could be very useful for e.g. a thank you page, to allow customisation there at least.

[StampixSMO]

Application logic flow

I've been sketching the logic a bit in a Miro board: https://miro.com/welcomeonboard/YVNJSXNFWVI5YWdKcGlmWVR3WVJmZTczRnE0V3d1Z3hYMGZ6azJ0amlwR3duemNZNVZLRVZyYTduRWM2djZJQ3wzNDU4NzY0NTI2NDgwMDE0NTg1?share_link_id=52329324450

Currently finished most of the configuration and routing logic, the whitelabeling part is still an open TODO

[StampixSMO]

Two-point-o meeting

https://remix.run/

Gatsby: static sites
nextjs: ssr and static
remix: more lightwight, ssr on the edge, caching, ... (lower cost than nextjs because edge), focused on dashboard and forms --> admin panel??

Cloudflare preferred over CloudFront, etc .. let's look into it

Theming could be nice to use e.g. Tailwind, so just using a CMS to adjust the theme. One deployment per campaign.

I think they might be valuable to get some consultancy/analysis/sparring for the project, let's get their rates ..