Hello Coders,
My 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) 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 700 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 — 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 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:
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.
- 👉 Datta Able Django -
Product Page - 👉 Datta Able Django -
LIVE Demo
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 -
Product page - 👉 Soft UI Design System Django - Demo -
LIVE Demo
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 -
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.
Top comments (8)
Thank you for sharing valuable information.
Hello Shallina & ty for reading this content.
The new version of AppSeed will provide a visual generator for many technologies:
new.appseed.us/
🚀🚀
Definetly Sm0ke would love to visit new version of Appseed.
🚀🚀
This is indeed very nice work!
Thank you Alex .. <('_')>..
AI entails the development of machines that are capable of undertaking tasks that traditionally Technology require human intelligence, such as decision-making, language translation, and image recognition.
lol nice 🔝🔝