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).
Flask is one on the most popular Python frameworks suitable for all kind of apps: one-page, API servers or complex eCommerce apps.
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
- JAMstack apps - 40+ apps generated on top of various designs from Html5 Up, Pixelarity and Creative-Tim: Argon, Fractal, Lens, Inverse
- Flask apps: 40+ apps (free & commercial) generated and fully equipped with database, ORM and helpers: FlaskPlay, Solid, Bulma
- Full-Stack (two tier architecture): Flask / Vue.js with Argon design, Express / React with Material design
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.
- Argon Design
- Material Kit
- Html5 Up - Fractal
- Pixelarity - Hologram
- Pixelarity - Drift
- Pixelarity - Optics
Generated Full-Stack Apps
- Vue Argon Design / Flask backend
- Vue Argon Desing / Laravel backend
- Vue Argon Design / Express backend
- React Material Kit / Express backend
- React Material Kit / Laravel backend
- React Material Kit / Flask backend
Generated apps thumbnails
Thank you for reading!