Web App Generator — The technology-agnostic way

#appseed #generator #automation

Sm0ke Apr 10, 2020 ・Updated on Jul 8, 2020 ・7 min read

Hello Coders,

My real name is Adrian (aka Sm0ke on different platforms like Dev, Twitter, Reddit, and Discord ) and I’ve built AppSeed — a platform that uses automation tools to generate UI-Ready, usable web apps using flat, lifeless HTML as input.

Web App Generator - 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 short-list with sample apps

Flask Dashboard - Black Design - Simple Flask Dashboard
Django Dashboard - DattaAble Design - Free Django Dashboard
Flask App - IraDesign - Free Flask App

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).

Web 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.

Web 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 on 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.

Web App Generator — Final products

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

Flask Dashboard — Black Design - Free Product

The app is released under the MIT license on Github and was the first production-ready web app prototyped by the AppSeed platform. Took almost two years to generate a simple Flask Dashboard, using only flat HTML as input. App features:

Design pattern: MVC, Blueprints, App Factory Pattern
DBMS: SQLite, PostgreSQL (dual profile)
DB Tools: Flask-SQLAlchemy ORM, Alembic (schema migrations)
Session-Based Authentication, Forms validation
Deployment scripts: Docker, Gunicorn / Nginx

Flask App Links

Flask Dashboard - Black Design — Product page
Flask Dashboard Black — Documentation
Flask Dashboard Black — LIVE demo

Django Dashboard — Black Design - Free Product

In about two weeks after prototyping the Flask dashboard, were able to generate a Django version of the same UI, with an identical set of features:

Design pattern: MVC, Modular code-base
SQLite Database, Django Native ORM
Session-Based Authentication, Forms validation
Deployment scripts: Heroku, Docker, Gunicorn / Nginx

Django App Links

Django Dashboard Black — product page
Django Dashboard Black — Documentation
Django Dashboard Black — LIVE Demo

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.