With a strong presence in the industry, WordPress is employed by 40% of all websites. Even two decades since its inception, it continues to be the preferred platform for crafting blogs and websites. However, viewed from an engineer's perspective, the system poses numerous challenges.
I'm currently offering an open-source Headless CMS named Collections, a project I've been passionately developing over the past year. My motivation stems from a commitment to redefine the CMS landscape, addressing the issues I encountered with WordPress. Below is a summary of the development journey over the past year.
The Darkness of Black Magic
WordPress is a meticulously designed system, offering the convenience of updating the software from the admin panel to ensure users always have access to the latest version. It boasts extensive customization options and can be further enhanced through external plugins.
Yet, contamination from haphazardly added plugins and what some refer to as Black Magic code has hindered updates and exposed the system to vulnerabilities.
Indeed, the responsibility for this issue lies squarely with certain users.
Nevertheless, it's possible that this wasn't driven by malicious intent but rather a pursuit of a more advanced specification. In this context, extending beyond a user-specific problem, it suggests that humanity might no longer find satisfaction in the default WordPress.
Possibilities felt for headless
Headless is an architecture that separates the front end from the back end.
Traditional CMSs integrate both the front end and back end. By separating them, the front end can be tailored to diverse user segments, offering simplicity for light users and high customizability for advanced users. This system's separation naturally enhances maintainability.
Although adopting a headless approach may initially appear to exclude light users, we are confident that, in the long run, it's a system capable of satisfying a broad range of users.
Headless is beginning in other industries
The headless trend is already underway in other industries.
Tiptap, a tool that's becoming more prevalent in technical articles, serves as a specialized backend editor. Naturally, it doesn't operate as a standalone editor.
Leecason
/
element-tiptap
๐ธA modern WYSIWYG rich-text editor using tiptap and Element UI for Vue3 (1.0 for Vue2)
Element Tiptap Editor
A WYSIWYG rich-text editor using tiptap2 and Element Plus for Vue3
that's easy to use, friendly to developers, fully extensible and clean in design.
๐ง Legacy
๐ Languages
English | ็ฎไฝไธญๆ
๐ Demo
๐https://leecason.github.io/element-tiptap
๐พCode Sandbox
โจ Features
- ๐จUse element-plus components
- ๐ Many out of box extensions (welcome to submit an issue for feature request๐)
- ๐Markdown support
- ๐TypeScript support
- ๐I18n support(
en,zh,pl,ru,de,ko,es,zh_tw,fr,pt_br,nl,he). welcome to contribute more languages - ๐Events you might use:
create,transaction,focus,blur,destroy - ๐Fully extensible, you can customize editor extension and its menu button view
- ๐ปAlso can control the behavior of the editor directly, customize the editor for yourself.
๐ฆ Installation
NPM
yarn add element-tiptap
Or
npm install --save element-tiptap
Install plugin
importโฆBy integrating it with the front end or developing a custom editor, Tiptap becomes adaptable to various user groups.
Users find the flexibility to switch the UI based on their proficiency level appealing. For Tiptap, separating the front end, with its numerous issues and requests, enables a concentrated focus on back-end feature development.
In the end, integrated software tends to diverge from the preferences of power users. Therefore, adopting a headless approach becomes an inevitable trend.
Collections was born!
Taking these considerations into account, I personally created an open-source headless CMS called Collections!
Index โ Collections
A headless CMS that transforms your WordPress into an API. No need to copy and paste old posts anymore.
collections.dev
Here is a brief introduction to the features.
Define the data model
Fields can be added, ranging from text and markdown to images, etc., and the data model is established. Upon completion of the registration, the database schema is dynamically generated.
Register your content
Next, register content according to the data model.
Call as API
The endpoint is now set up!๐ฅณ
You can retrieve the registered content by making an API call from the front end or a smartphone app.
Support for migration from WordPress
Easily import your exported article data from WordPress by simply dragging and dropping. Say goodbye to the tedious task of copying and pasting old articles to get started!
Three Commitments
Must be open source
Effective collaboration with the front end is crucial for a headless CMS. Consequently, having open code becomes essential as a shared language for comprehending the interface and exchanging feature requests.
In contrast to Tiptap, transitioning to a headless CMS incurs a relatively high cost. This is due to the fact that, unlike editors which are easily replaceable tools, CMSs entail the complexity of data migration.
Moreover, the absence of normalized data in WordPress poses a migration challenge. To address this directly, Collections has crafted a migration tool as a plugin, which is also open source and available to the community.
https://github.com/collectionscms/plugin-wp-importer
Currently, we only have article data, but with the collaboration of developers worldwide, we aim to develop a tool that enables the transfer of all types of data!
Developer First
Collections is designed with a strong emphasis on developers. It can be deployed in any environment, offers ease of use, and comes with comprehensive documentation. A supportive developer community is also accessible on Discord.
In addition, the UI provides
- ๐ป Markdown with GFM
- ๐ Dark mode
- ๐ฑ Responsive
We've got a complete set of essential tools for engineers to do their writing! ๐
Can be introduced with a one-liner
No matter how fantastic a product is, if it's challenging to implement, people won't use it. But, of course, there's no need to worry!
npx create-collections-app my-app
Installing the software is a breeze with just a few commands!
All that's left is to respond to the installer's questions to finalize the setup process.
// Select your database client
? Which one? SQLite is the simplest. (Use arrow keys)
โฏ SQLite
MySQL / MariaDB
PostgreSQL
Collections Architecture
Backend UI
The backend UI is a combination of React + MUI + Ant Design.
For a headless CMS, all you need is an administration screen, so there's no requirement for an overly elaborate UI. That's why we opted for MUI due to its refined components. We chose Ant Design solely for its icons, as we personally appreciate its aesthetic.
API
The API is a powerful blend of Node.js + Express. When evaluating backend combinations, a crucial aspect is that it can be deployed in any environment. Hence, vendor-locked options like Next.js were excluded from the candidate list.
Database
Opting for RDB and supporting multiple vendors, we chose RDB for its versatility in deployment environments, ease of migration from WordPress, and the preference of many engineers who find RDB more user-friendly than NoSQL.
Given the dynamic nature of the schema, we employ Knex, a query builder, for database access.
Image
Currently, S3 is supported. Looking ahead, we plan to expand support to include Google and Azure storage, along with CDN delivery. There's quite a bit of work ahead... ๐
Hosting
As evident from the architecture, it comprises a fundamental structure. Consequently, it is adaptable to various environments, whether within or outside the network!
For your convenience, we've provided instructions for deploying on Lightsail, which is essential for cost-effective usage. Feel free to give it a try!
Amazon Lightsail โ Collections
A headless CMS that transforms your WordPress into an API. No need to copy and paste old posts anymore.
collections.dev
Future Development
Launch of cloud version
In 2024, we're gearing up to introduce a cloud version. While it will come at a modest cost, it's perfect for those seeking swift implementation without the hassle of software updates. Stay tuned for its release, and we hope you're as excited about it as we are!
Build out migration tools from WordPress
Migrating 40% of our websites is a formidable undertaking, but we're collaborating with developers worldwide to tackle the challenge! We're counting on the support of developers from across the globe to help us overcome this hurdle!
Build an ecosystem with front-end
Observing examples like Tiptap and CMS, I anticipate a continued trend of increasing separation between the front and back end, leading to a more loosely coupled relationship between software components.
If you're a developer interested in creating applications in conjunction with Collections in the future, we'd love to collaborate with you! Let's work together to build a robust ecosystem ๐ช
Feedback and Request
Want to try Collections?
Collections is open source, available for free use by anyone. If you need help with implementation, feel free to join us on Discord ๐
Finally
A CMS is a product whose value is derived from its enduring appeal. The enduring popularity of WordPress, even after two decades, attests to this. I firmly believe that this is the very realm where engineers should leverage their strengths and dedicate their careers.
Resources
GitHub โ Open source repository
Demo โ Demo for those who want to get a taste of Collections functionality
Document โ General Information, API Information
Discord โ Developer Community
X โ Latest Product Information
Your appreciation in the form of liking our articles or simply giving us a star on GitHub would be truly uplifting!
Thank you for your support!! ๐
Top comments (0)