Examples Templates Store Pricing Docs Turbo CSS Blog Boomla WishList Introducing Turbo UI Named buckets Turbo CSS is Tailwind CSS on steroids Introducing Turbo CSS, the most advanced web-design language Calculate how much storage you use Better login system Collaboration settings Filesystem and Database are not cutting the problem space right What I'm working on 64bit File node IDs New how-to videos Creating buttons gets easier Introducing reusable components HTTPS by default Introducing the Boomla Theme CDN for faster pageloads Write your own website builder on top of Boomla On On composition Shared admin access A fresh config editor Building a multi-purpose theme A filesystem to replace your CMS New file link type: scope Mobile editing support Inline file wrapping changed Package sandboxing New PHP-like JavaScript engine [sjs-4e] Send emails to the website owner New JavaScript engine [sjs-4] A better editing experience New email service provider Glossary and other changes New panel changes Improved registration flow Boomla goes multiplayer Using local dev tools Why Boomla doesn't need Git File Panel Let's build a community Automatic updates Improved sjs-3 API New Frontend CSS modules Work offline with Boomla Faster page loads via caching Drag & drop supercharged Supporting CommonJS modulesĀ  Paranoid about loosing data IDE usability improvements Simple App install flow Meetups in Budapest Goodbye broken links Flow control from user space Customizing apps Contextmenu support for apps Deprecating the .Class file Hello Changelog Embedding 3rd party plugins Introducing Tools Installing apps just got amazing Public beta Host on our servers Simple deploy with push/pull Version Control for the Web 350M files on a 1TB disk 2 weeks in review
Control Panel

Introducing reusable components

2020-07-07

Make sure to watch this video in high definition!

 

The problem

At first, Boomla had a few fixed page layouts, which included the menu, the page background color, etc. That was very limiting, especially when you wanted to create modern websites that often included full-width content blocks.

To address that, the Boomla Theme that was released ~2.5 months ago came with a very stripped-down page app: it contained nothing. One could finally define all the elements on the page by adding them one-by-one, including the menu and the footer.

This brought complete flexibility at the cost of a maintenance hell: if you had 50 pages, you would end up with 50 individual menu elements, each with their own configuration. As a consequence, if you wanted to change them, you would have to apply the change 50x! Obviously, that's not the way to go. This was in practice limiting Boomla to be used for very small websites.

Solution: Components

Components allow you to reuse those elements in multiple places. Turn an element or element structure into a component and then you can create instances of it. A menu component instance would simply display the menu component in all those place where you want to reuse it.

That would be in itself extremely cool, but there is more.

Page components

Using components, you can create centrally managed page layouts. (Some systems call it page templates.)

To create a page component, simply turn a page into a component and define where page-specific contents should go. After that, you can create multiple page instances that share the same layout.

Encapsulated

Every organism has some kind of a shell to protect its parts from the external world. We humans have a skin. So do component instances: you can't edit them directly and that's important.

If we could edit the component instances directly, we would make changes to them without realizing that we are editing the same element in lots of other places. To prevent this, you have to explicitly open the component editor first. This means that the elements that make up a component instance are not selectable, nor editable, except in the component editor.

Simple maintenance

The major consequence of this is that now you can create much larger websites with Boomla, without being lost in a maintenance hell. And critically, you can do this without writing a single line of code.


Cheers,

you can follow me on Twitter