Introduction
Imagine a smart factory that offers a web application for designing cars, a catalog listing parts needed for assembly (manufactured by partners), a facility to manufacture car bodies, and an assembly line capable of producing cars of varying complexity.
This factory is a multi tenant factory and offers car manufacturing as a service on pay as you go basis to accommodate every type of customer who is interested in manufacturing cars with their unique needs. It is having four types of customers -
Car companies which are interested in manufacturing thousands of cars every month and want to offer 4-5 different types of models only.
Startups or Small teams which are interested in manufacturing a handful of car every month or every 3 months. It is ensured that two cars delivered to their customers are not same.
Individuals who interested in manufacturing one car every 3 months. Customers in this category design very unique cars for their customers as per their needs making sure every car delivered to a customer is unique and so same design will not be offered to any other customer.
While the factory is capable of manufacturing a car body of any complexity, it relies on the partners to manufacture and supply other parts (engine, gear box, tyres etc) required to assemble a complete car and to meet the unique needs of its customers.
Mech in MechCloud has been taken from the word Mechanical, as I am a mechanical engineer (by education), while the word Cloud has been taken from cloud computing. So it is all about solving some challenging problems related to cloud computing, containerized apps etc with the thinking of a mechanical engineer. This is also the reason why names of various MechCloud modules (Piston, Turbine) are mechanical terms.
In the context of MechCloud website builder, every website is like a car and each page of a website is like a part (e.g. chassis, bonnet/hood etc) of the car body. MechCloud Piston (website builder) module provides everything you need to define the complex layout for a webpage. However, the content for different areas of a page is generated by the vue components which are either built into Piston or developed by the Partners similar to how the smart factory described above depends on its partners to supply the parts which are mounted on different parts of a car body.
What is a micro app?
In the realm of client-side frameworks and SPAs, the norm involves consuming a components library at build time, which is not scalable for situationswhere components are being developed by countless number of independent parties. We can't create components for hundreds of use cases ourselves; instead, we depend on partners to build these components.
However, this results in another problem. The problem is that we can't build the frontend of the MechCloud (a SPA based on vuejs) everytime a new component is created / updated by a partner. To solve this problem we rely on the micro app architecture where a micro app consisting of a number of components and any microservice, which these components depend on, are deployed as a unit and hosted by the partners themselves. This makes it possible to consume such components in different pages across a number of websites focused on solving different business problems.
We want to offer some features covering hyperscalers (aws, azure and gcp), cloudflare, kubernetes, CI/CD , observability tools etc which either improve user experience around an existing feature or offer a new feature missing in the consoles of these tools. These features are required to create a 360 degree experience for users playing different roles (developer, devops etc) around a system or an application. While our primary focus will be on cloud computing, continuous deployment and containerized apps etc, you can actually build components for any purpose. So you can create components which can be used in landing pages for different types of requirements or to create websites focused on fintech, edtech, sales, HR, marketing etc etc. In other words, you can use MechCloud website builder to create a website for any business problem or anything else which you can imagine.
A micro app is nothing but a components library which is consumed at run time instead of build time. So it has a folder structure which will be similar to a project one will create in order to create a vuejs components library but it should be deployed as a normal vuejs application instead of creating a package out of it and then uploading it to the npm registry.
Because it is a micro app, it will NOT have any html file as it is meant to be consumed in the MechCloud website builder at runtime instead of being accessed by a user directly in the browser.
Types of components in a micro app
Everything in a (vuejs based) SPA is a component which can either render a simple control like button or a complex thing like a complete page. Components created for the MechCloud website designer may vary, depending on their specific roles. MechCloud website designer supports three types of components as of today.
Frame - A frame a component which is responsible for rendering commons areas (e.g. header, footer etc) of a website across all of its pages.
Layout - A label created under a site is equivalent of a folder which can have one or more pages as its children. When a layout (e.g. a two columns layout where left column display secondary navigation while right column renders the requested page) is applied to a label then all the pages under the label will be rendered inside that layout.
External Page - It is a fact that some pages are highly complex and so can't be designed with a page builder. MechCloud website builder offers external pages to handle such scenarios where you can code a complex page, include it in a micro app and then consume it in a website at the runtime.
Any general purpose component which does not belong to one of the three types listed above is simply referred as a component under MechCloud website builder.
We will be publishing a number of blog posts in coming days describing how to create Frames, Layouts, External Page and general purpose components and how to consume these into MechCloud page builder to build fully functional websites right from the browser. Some of our upcoming series are -
How to create a custom Frame in MechCloud
Creating tailwind powered vuejs websites right from the browser without any build step
Combining a css framework with any headless (styleless) UI library to build websites right from the browser
Designing and managing a static website right from the browser
Creating landing pages using built-in / partner provided (UI) components
- In this series we will build mechcloud.io landing page using MechCloud website builder.
Conclusion
The micro-app architecture empowers client-side frameworks to evolve beyond their current limitations. By allowing independent deployment of components and microservices, we unlock a world of flexibility and scalability. Stay tuned for future blog posts where we'll dive into the practical applications of this exciting approach. Also join our discord server to learn more about MechCloud WebSite Builder.