AppSeed App Generator - Generate Full-Stack apps from Flat HTML

Hello Coders,

This article describe briefly the app generation workflow implemented in the AppSeed service. The idea is quite simple:

Design once and get a LIVE app in any relevant framework you want. A real life sample: JAMstack app and Flask app (both apps are using the same UI).

Sample Generated App - JAMstack pattern

JAMstack pattern is a trendy architecture in web development and stands for Javascript, API and Markdown. Writing simple apps in this architecture is very easy, because the HTML is generated using markdown files as input. let's take a look at the JAMstack sample mentioned in this section:

JAMstack Paper Kit - Gif animated intro.

Sample Generated App - Flask / Python

Flask is one on the most popular Python frameworks suitable for all kind of apps: one-page, API servers or complex eCommerce apps.

Flask Paper Kit - Gif animated intro.

If we look at both apps from a functional point of view, just by clicking on the links or perform a speed benchmark, the fact that one is coded in JAMstack and another one in Python is not visible or relevant. This use case, is the main use case that describe the AppSeed service and mission:

AppSeed use automation tools to convert any design into modern apps

Sounds good? Let's go further with the implementation.

The app generation process is not a new one. There are many app generators out there, for many technologies and architectures. Let's list a few:

  • GatsbyJS - a static site generator based on React and GraphQL
  • Gridsome - a static site generator based on Vue and GraphQL
  • Nuxt - a Vue.js framework for generating SPA's, Static Sites and Desktop Apps
  • Quasar - SPA, SSR, PWA and Hybrid Mobile app generator

In this context, AppSeed bring something new because the process starts always from the design and the final product is an usable app with menus, database and other common modules already in place.

App generation process

AppSeed generation process consist into execution of two big steps:

  • HTML parsing and conversion of a flat HTML design
  • Boilerplate HTML injection and bootstrap

Phase #1 - HTML parsing

During this phase the HTML flat design is analyzed and prepared to be used and translated to various template engines:

Having full control over the HTML DOM, we are able to mutate the HTML tree: adding or delete nodes, edit attributes (href's, src for images, etc).

For more information, please read this article that explain in deep the parsing process.

Phase #2 - Boilerplate Injection

The processed design is injected into existing boilerplates pre-built for various languages and frameworks: JAMstack, Python, Javascript and two tier architecture:

What's next?

We will extend the automation process for other tasks:

  • Convert legacy HTML design to Vue, React, Angular themes
  • Generate themes for modern frameworks (GatsbyJS, Gridsome, HUGO) starting from a Bootstrap based design
  • Design migrations from legacy CSS frameworks (Bootstrap) to Bulma and Tailwind.
  • Add more boilerplates to be used in the pipeline: Django, Fastify .. you name it.

Generated Apps - LIVE Samples

The apps listed in this section are built using the process described in the previous sections. Now we have 100+ apps published on the official repository.

Generated JAMstack Apps

Generated Flask Apps

Generated Full-Stack Apps

Generated apps thumbnails

JAMstack Transit - Gif animated intro.

JAMstack Paradigm - Gif animated intro.

JAMstack ethereal - Gif animated intro.

JAMstack Lens - Gif animated intro.

Thank you for reading!

Show Comments

Get the latest posts delivered right to your inbox.