App Generator — The technology-agnostic way

#appseed #generator #automation

Sm0ke Apr 10, 2020 ・Updated on Mar 15 ・8 min read

Hello Coders,

My real name is Adrian (aka Sm0ke) and I’ve built AppSeed — a simple App Generator that uses automation tools to generate UI-Ready, usable web apps using flat, lifeless HTML as input. In a single sentence, the user can choose the design and the preferred stack and modules to work with: Vue, React and Flask, Laravel, or Django for the backend. Thanks for reading! Let me know your thoughts in the comments.

The Concept

Any UI Kit or design should be converted into usable, tested Web Apps coded in different languages and modern patterns using automation tools, … FAST (minutes or seconds).

Sounds good, .. but why?!

If we pick up randomly a few web agencies and take a look at their products we can see the same UI/Design usually is coded in different technologies. For instance, this admin dashboard (free product, no affiliate link) is built by the provider in three different flavors: BS4/jQuery — React — Vuejs.
The sample itself is not relevant, but the conclusion might be: many agencies provide the same UI in different technologies using mostly manual, repetitive work.

All UI Kits are built on top of the same input (Sketch mockup) and the final products are coded manually, during weeks. This migration from one technology to another is quite costly, and a singe kit migration might require a serious budget for the initial migration and also for the maintenance (bug fix, UI kits updates, etc).
If we multiply this use-case to many web agencies, we can assume that automation tools could help to win time and reduce production costs. The next problem is, of course, the execution - how to solve this challenging problem using tools and ZERO manual work.

A few with sample apps & categories

Django Datta Able - Simple Django Starter
Flask Bootstrap 5 Volt - Open-source starter
Django Soft UI Design - Bootstrap 5 design

AppSeed

The concept implemented in the AppSeed platform is not fully automatized but allows us to generate multiple products using flat HTML in less than one hour. The process was heavily tested during 2018/early 2019 and the first apps generated by the platform were sold starting with Nov.2019.
Also, the official repository contains more than 300 web apps, around 200 are public (MIT License) and the rest are private (commercial and experimental apps).

App Generator — Workflow

To have a production-ready workflow asap, we decided to split the process into small, testable steps:

Input processing to have access to the entire DOM tree, components, layouts
Boilerplate Code injection with the new UI prepared for different engines
Automatized tests to find out quickly if we can really use the end-product. The goal, as mentioned in the first part of the article is to generate production-ready end-products super fast (minutes or seconds).

The idea was, let's say, useful, how about the implementation?!
In those two years, we had some big dilemmas regarding the primary input type, boilerplate code features, and what patterns to adopt first .. etc.

Input type — What format?! We had so many options here: HTML, PUG, Liquid, Jinja, and the list was endless.
Boilerplate code — what modules, patterns, and tooling should be added.

We didn’t have answers for all those pertinent questions from the beginning but during the continuous 2yrs R&D work, we finally got some answers and tools to produce something with commercial value.

App Generator - Input Format

We decided to use plain HTML as an input format for many reasons:

HTML IS the standard format used in browsers, mobile phones, despite the underline technology. In other words, if you write your app in Vue, React, Quasar, Laravel, or whatever technology, in the end, you need to produce HTML to make the app usable in browsers.
HTML is also used for legacy web apps, and theoretically, we can pull old projects into the same workflow. We’ve experiment this during 2019 when we migrate a LIVE website to a super simple Flask application by converting the rendered HTML into Jinja2 templates.

The implementation of this phase was achieved using an HTML parser developed in-house during 2018 and 2019 (also under development as we speak) with a basic set of features:

Load/Process entire directories or websites
Mutate the DOM to extract the page master layout, components
Control the page assets (CSS, Javascript, Images) to mutate the paths
Convert the pages and components to different engines like React, Vue, Jinja, Blade, … etc.

Note for geeks

The HTML parser was coded in BS4 Python library and few basic articles that explain the concepts were published here on Dev:

HTML Parser — The current state

At the moment the article is written, the conversion to PUG, Jinja, Blade is 100% stable and we are moving forward with more conversions:

At CSS Framework level

This might sound crazy, but we really think is doable based on the fact that we have access to the class property for each DOM element and also, we can easily build a map between CSS frameworks classes.

From Bootstrap to Bulma CSS — experimental @WIP
Bootstrap to Tailwind — experimental @WIP

Render engine translation

HTML to React — experimental @WIP
HTML to Vue — experimental @WIP
HTML to Svelte — experimental @WIP

This section will be updated periodically with more information regarding the status of each translation.

Boilerplate Code

To provide usable end-products the boilerplate code should provide enough quality to really help the developers in their work. More issues occur in this phase:

What pattern should we use — two-tier, old school MVC, SPA, PWA
What modules, what databases and tools
How to update the code-base when issues are detected later on.

Not so easy at first look. The first step was to identify some trendy and super-used technologies and extract the best practices for those specific technologies. Regarding the number of modules, we decided to provide only the basics like authentication, SQLite/Mysql support, ORM/Migration DB tools. Deployment is also covered for some popular options like Docker, Heroku, AWS, and standalone mode (Gunicorn, Nginx).

To stay connected to the real world we are constantly monitoring Github for trendy patterns and encourage the community to vote their preferred UI's, technologies, and patterns using an anonymous voting system.

App Generator — Final products

Using the UI mentioned in the first section — Black Dashboard, somewhere in the middle of 2019, we succeed to generate the first usable products in two different technologies using an identical set of features:

Soft UI Design System Django

Soft UI Design System is a Premium Bootstrap 5 UI Kit designed by Creative-Tim designed for those who like bold elements and beautiful websites. Soft UI Design System Django is a simple Django seed project provided by AppSeed with a modular codebase, database, authentication and deployment scripts - Features:

Soft UI Design System Django - product page
Soft UI Design System Django - Demo - LIVE Deployment

Datta Able Django

Datta Able Bootstrap Lite is the most stylised Bootstrap 4 Lite Admin Template, around all other Lite/Free admin templates in the market. It comes with high feature-rich pages and components with fully developer-centric code. Before developing Datta Able our key points were performance and design. While developing we have gone through various testing & code optimization process, for making this performance and design-centric backend application.

Datta Able Django - Product page
Datta Able Django PRO - more components and pages, LIVE Support

Flask Bootstrap 5 Volt

Volt Dashboard is a free and open source Bootstrap 5 Admin Dashboard featuring over 100 components, 11 example pages and 3 plugins with Vanilla JS. There are more than 100 free Bootstrap 5 components included some of them being buttons, alerts, modals, datepickers and so on.

Flask Bootstrap 5 Volt - product page
Flask Bootstrap 5 Volt - Demo - LIVE deployment

AppSeed — some insights

During 2019, this concept was extended to many patterns to see how it goes from a commercial perspective. The patterns that we are using to prototype and generate the apps are carefully selected from this technology noise where many projects appear and also die quite fast. What patterns we provide (for now):

Admin Dashboards coded with basic modules, free and paid
JAMstack — free & paid
SSG starters — 11ty boilerplate code (mostly) with free and PRO UI Kits
Full-Stack Web Apps, two-tier architecture with React and Vue in the frontend
Gatsby JS starters — not coded or generated by us, but used as a knowledge base in the near future

Where to go from this point

Even after two years of R&D work, AppSeed is still a super young concept and we expect a slow adoption in the next few years, that might accelerate once the automation tools we are developing are getting matured, exposed as a stable SaaS to anyone.

In case you are interested to find out more about AppSeed, feel free to talk with the team on Facebook, Twitter or LIVE on Discord.

Thanks for reading! AMA in the comments.