Helix
Work in progress ⚠️
Adobe Helix is the next generation CMS. Its built author first and has no developer facing backend. Everything development wise happens client side. CSS and vanilla JS only, hosted on GitHub.
The main difference to other cms is, that all content is hosted exclusively on either SharePoint or GoogleDrive. Helix grabs that content, transforms it to markdown and HTML. These fragments are being made statically available via fastly CDN.
A client requests the html and executes the referenced scripts. These are a developers only possibility to alter the Websites appearance. Dom Manipulation, third party requests and CSS Styling transform the generated html into the desired visual outcome.
Everybody can go through the official tutorial and give helix a try. It's free! I highly recommend it - you need roughly 20 minutes.
Technical Setup
A Helix development domain is constructed from three parts: Branch Name, Repository Name and Repository Owner username.
Example: https://branchname--reponame--githubusername.hlx3.page/site/path
💡 As mentioned initially, a Helix Developer works "frontend only". The backend architecture has been summarized well by the development team.
Best Practices
Merge only via GitHub PullRequest. Add a Helix url to the pull requests branch and utilize the Helix Bot Core Web Vital[^1] analysis for every commit. This ensures, that you never heavily change a pages' performance to the worse.
❗ This is especially important, since its fairly easy to mess with a pages' core web vitals via DOM manipulation.
This pages has some great information on Helix Block design: milo.adobe.com/blog/drafts/block-design.