On June 30th 2020 I began a small journey into creating a Website Builder. At the start I thought, "hey I could probably get this done in 2 months." Almost a year later and here I am with the software at a "almost" complete state.

Many bugs still exist in the software and the flow is wonky however here we are and this is the NEW beginning of Marketlify.

In this post I want to quickly touch on parts of the development that kept me interested and what I learned along the way.

The Tech Foundation

Personally I still love using Ruby on Rails. The web app today is written in Ruby using a few of the modern techniques the RoR community provides, such as StimulusReflex, ActionCable and StimulusJS.

The JavaScript heavy parts of the app such as the Web Page Builder is written in Vue 2.0. In future I might upgrade to Vue 3.0 however I tried and it broke everything... :)

Originally I developed the entire app with NuxtJS which is a framework for Vue for Single Page Applications. It was fun and learned alot about Vue during this time. But the real issue for me as I worked inside NuxtJS was that most features required a "micro service".

Before I knew it I had the single JS app connected to a variety of 3rd party services to run GraphQL, Database, etc. This is the modern way, however as a small start up it becomes costly. Also there are more variables that change. Since then one of those services deprecated certain features. That would suck to have live app and have functionality stop working because a 3rd party service stopped servicing it.

So that's why Ruby on Rails with Vue is the best of both worlds.

The Page Builder

This is the part where I spent alot of time developing, but also at the same time developing areas the user never sees. At the moment there are definitely bugs in the editor. No doubt. However most of my work has not been on that side. Most of my work is on the optimization behind the scenes to output simple and fast html.

The beauty of Vue.js is the state management. You can have a dynamic variable where if you change it any where in that app. It will update everywhere instantly.

Since changing state updates every where this is perfect for a page builder. You change a variable such as Text Size and instantly it will change on the canvas.

Developing a ClickFunnels editor at the time we hand coded the entire logic for updating the state across the editor. In Marketlify the editor happens almost as by product of just updating variables.

The main difference here between us and CF editor is that we store the page data as JSON data structure. So when you load the editor your browser will parse the JSON and build out the editable page for you.

Every setting is actually just changing one large JSON file that gets managed via the state inside of Vue.js -- pretty cool right?

Moving Elements

All of the sections, rows and elements are stored as an Array. Changing the position of an item in array is very easy. Since Vue.js auto-magically updates the state, change the array, change the position of elements. Boom. It's like magic.

To quote DHH when he launched Ruby on Rails, "look at the things I'm not doing" haha :D

Obviously this part of the development has been the most enjoyable for me since it has taken so much work off the table. If you don't love Vue than React is the best alternative which can be much more robust.

Using TailwindCSS

The entire editor is based on classes from the TailwindCSS framework. This is an amazing utility-first framework, so this works perfectly for a page builder.

This does work and has required me to setup the purgeCSS mechanism when rendering HTML files, because TailwindCSS is HUGE!

Also they use every CSS hack you can think of in their CSS. So it has caused me some annoyance when trying to properly cut out all of the CSS the page is not using.

Google is very happy when the web page you serve has ONLY what that page needs on it. Meaning no extra CSS or JS. Google also complains about the images as well.

Using LazyLoad and Cloudinary to load in images when they are actually visible and Cloudinary auto optimizes the size of the image according to the view port.

I can do as much as possible to optimize the web pages so that Google is happy, however it can be all for nothing if use a 20mb image as a background.

The real goal for me with Marketlify is to provide a tool where people can create multi-page marketing websites (by themselves) and export to host forever anywhere they want.

Own what you create.

The Future of Marketlify

Over the last year I have worked with developers and talked with many people about positioning Marketlify into the marketplace.

After giving it much thought. I've decided to use this as my platform to publish content, training and actually use the software I create.

Eventually there will be paid accounts. There will always be a free plan.

Right now there is only a free plan for using the software. Like any website builder being able to create something from day 1 is unlikely. So it is my job to use the software myself, publish and continue to build the software.

Keep doing this and one day there will be enough training, content and features to start a monthly service fee for using Marketlify.

That's the goal!

Also this page was created in the editor!

Thanks for reading!