Want the perfect frontend architecture for your website?
We would like to showcase how you can construct scalable and modular frontend architecture with Fathym.
Modular frontends definition
In the modular approach, we use “routes” which allow you to run as many apps or pages as you want under each route. Think of a route as a subpath of a website. And since it’s fully modular, each app/page can be created by a single developer or by a separate team.
For instance, with a /blog route, you could put multiple different blog pages inside/underneath it. Like: The blog home page, blog1, blog2, blog3, a list of content links on another page, and even a photo gallery on another page - all under that /blog route!
“Each app/page under a route is its own NPM package or GitHub repo,” director of engineering Jeremy Tomlinson explained. “That means you can use separate teams. It also means no more blocking!”
We host each route, app/page independently on your domain. That means no more subdomains, making your site easier to find by customers.
To the end user, all of the routes (blog, pricing, docs etc.) seem as if everything is written in the same monolithic codebase. However, it’s not, which means the codebases are smaller and therefore easier to update, replace, change, scale and fix bugs!
Composable frontend definition
Modular frontends are the structure we need to build composable frontends on top of.
What exactly are composable frontends?
It's GitHub repos, NPM packages, zip files, etc. which are put together in any combination the developer – or citizen developer – wants to use. That means using high-code, low-code or no-code all together.
High-code vs. Low-code vs. No-code
In the world of web development, there are three classifications of tools: High-code, low-code and no-code.
High-code refers to a developer using JavaScript (or another language) to create something from scratch, or adding onto an existing code by using a repository. That takes a lot of work as well as expertise in building a site – or even a single page. It’s a time-consuming process, of building and testing and then fixing bugs. But we certainly support that workflow.
Low-code refers to tools which take much less knowledge of programming to use than high-code, but there is still a barrier to entry. Low-code tools are great for people who are somewhat technical and/or those who can lean on teammates who have more experience. What that means is knowing a bit about coding and having to use some code while implementing the tools.
Finally, no-code means what it implies: No code. There is no need to know, understand or learn code or how it works. No-code tools are usually visual builders or design programs which allow anyone – with any experience – to design and build a website’s frontend. Then, the no-code tool takes those designs and creates the code, allowing users to integrate it into their codebase. Read more about the positives and negatives of no-code tools from our previous blog, here.
Now, with Fathym’s composable frontends, you can use all three – high-code, low-code and no-code tools – together in one website! Or, simply use your favorite of the three; like a website completely designed and built with only no-code tools.
“Bringing a series of no-code tools together to make an application can take your total application cost from $100,000 to $100. That's insane,” Fathym CEO Matt Smith explained recently. “That's a collapse in the world of technology. That's a revolution.”
Join the composable frontend revolution
Thanks to composable – or combinatorial – technologies, there is a new freedom associated with building the frontend user interface of websites.
For experienced developers, who can use and manipulate JavaScript frameworks, it means picking the best tool for the job. That means combining multiple different frameworks together inside of one frontend, if you choose to do so.
At the very least, composable frontends allows for dividing and delegating tasks. It’s a way to divide and conquer bigger goals, faster.
Since each section of your site is a separate “route,” or micro app, and can be maintained by different individuals or teams of devs, it means multiple people working concurrently on their own goals while the entire group works to satisfy the larger objective.
Which can help enterprise-level businesses with complex, interactive, and unique web apps and web experiences. Simply, there’s a high demand for fast, functional, smart sites when it comes to user experience.
Composable frontends give developers the flexibility to work smarter, not harder.
Sure, go out and use React for that new shop where people can buy your merch. And when you’re asked to create a simple landing page on the fly, maybe you’ll choose to use Svelte for its lightweight capabilities. Or, even a no-code tool.
And that brings us back to the less experienced, less technical people who want to build a site. “Citizen developers” as they’ve been coined.
Lowering the bar and allowing anyone to build a website is a goal of Fathym.
Why should building a website be shrouded in mystery? Simply, it shouldn’t be.
We aim to be inclusive, collaborative and support freedom for our users.
We’re talking a baby boomer with zero technical abilities or a kindergartener with little life experience; anyone can design and build a website now thanks to an ever-growing library of no-code tools and this combinatorial approach.
Conclusion
Composable or combinatorial frontend architecture is amazing.
In the modern world of composable applications, most of that composability is often presented at the headless, API layer. Fathym facilitates that but also believes there should be true composability on the frontend, presentation layer too.
By using combinatorial frontends, there are many benefits.
First, they are time-saving and easy-to-use. By utilizing brilliant no-code tools, anyone can build a site and deploy it on Fathym in one day.
That means no more waiting weeks or months to get a site up and running; launch a website today.
Second, composable frontends save money for small, medium, and enterprise-level businesses. Any size business can better leverage their resources by allowing the marketing team – with no coding experience – to build their new blog using a no-code tool.
And by using those no-code tools, companies can cut the oversight of DevOps teams, further saving money.
“Composable frontends and no-code tools – plus Fathym – allow you not to have a DevOps team,” Smith continued. “They allow you to start getting more done faster for far less money. We're not talking like $5 less. We're talking in order to order of magnitude.”
Finally, combinatorial frontends allow for incredible flexibility and freedom when building a site. Stack your micro apps however you see fit. Use JavaScript – and multiple, different frameworks – alongside no-code and low-code tools. Or, use the same framework for your entire site, but still breaking it up into those micro apps which means: Smaller codebases, easier fixes, faster deployments and much more.
Join Fathym for free today and start using composable frontends.
Top comments (0)