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 — How to extract HTML information
- HTML Parser — Extract information from a LIVE website
- HTML Parser — Developer Tools
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.
Discussion (2)
This is indeed very nice work!
Thank you Alex .. <('_')>..