Thank you for landing on this page. This article describe briefly the app generation process implemented by the AppSeed service.
The problems we are addressing
- The same design is replicated for many technologies manually
- Flat design is manually integrated and processed to become a usable app, no matter the underline technology or framework
The solutions presented bellow are a WIP, and we are iterating on many automation blocks at once until the workflow and the tools are mature enough to pass all the points and use-cases.
#1 - Design once - export automatically in any format
This feature aims to help web agencies offer their products to more than one market (e.g. Bootstrap)
CSS translations: Bootstrap to Bulma CSS and Tailwind
Flat HTML translations: HTML to Jinja2, PUG, Mustache or Blade templates
#2 - Sell your design as a fully coded app
AppSeed helps agencies to sell their work as fully-coded apps in any new technology that become a trend in the market. Instead of selling a flat HTML, imagine that your agency will sell a design as Laravel, Flask, Node.js fully-coded apps.
AppSeed - Service Architecture
The idea behind the service is quite simple: Any flat design can be transformed to a fully-coded app, automatically using tools and boilerplate code. After a few iterations over the service architecture, we decided to split the process into two big parts:
Phase #1 — Flat HTML parsing and conversion
Phase #2 — Boilerplate code provisioning with the new HTML design
At the moment this article is written (sept.2019), we are quite close to a real production-ready level, with more than 100 generated apps released as open-source products on Github. Implementing the HTML parsing and translation took more than one year, more than expected to be honest, but the result was very satisfying. A short-list with the parser features:
- full control over the HTML DOM structure: traverse and locate elements
- edit nodes and properties (href attributes, class names, the inner content of spans and divs)
- replace the hard-coded text with variables
- extract components for various template engines: PUG, Jinja, Blade, core PHP, Mustache
- detect and extract the master layouts by comparing pages
Curious how we parse and extract components for various engines? Please access this article to find out more.
App Generation — Boilerplate Provisioning
All our boilerplates are releases as open-source projects and include a basic set of features, modules, and tools. For instance, Flask, Laravel, and NodeJS starters are using the same API nodes, JWT authentication feature, an ORM on top of a database and basic tooling (Webpack, Gulp) to use the app. The short-list with open-source boilerplates actively supported by us:
- Nodejs Starter — Express / Nodejs starter with JWT authentication, SQLite database, Sequelize ORM, unit tests and basic tooling
- Laravel Boilerplate — Basic Php / Laravel starter with JWT authentication and REST API
- Flask Boierplate — Simple Flask Starter enhanced with JWT authentication and REST API
The automation process injects the template and components into boilerplates and the result is a tested fully-coded app.
App Generator - App Samples
When the project was started, we decided to provide all our apps as open-source products. We know, some voices told us this is crazy and the fraud will be huge. We don't think is like this. Moreover, the service is opened to everyone and the app generator we provide, can be used without an account. Using this relaxed approach, in three months, without a marketing budget, more than 500 developers create an account on our platform, and this was a clear good sign to us.
Now back to the generated apps, all are published on Github on this repository. In this section we will mention only a few from each category.
#1 Generated JAMstack Apps
More than 40 apps with the design provided by well-known web agencies:
- Free Apps (MIT license) - Argon Design, Material Kit, Now UI, Paper Kit
- Free (CCA 3.0 License, preserve the footer) - Fractal, Landed, BigPicture
#2 Generated Flask Apps
All apps (free & commercial) are using the same underline boilerplate enhanced with SQLite database, ORM, Authentication, helpers and basic tooling (static export via Flask-Frozen and FTP deploy script)
- Free Apps (MIT License) - Paper Kit, FlaskPlay
- Free Apps (CCA 3.0 License - preserve the footer) - Phantom, SolidState
#3 Generated Admin Dashboards
All admin dashboards are coded in Flask Microframework with SQLite database, authentication ORM and basic tooling - full list here
- Flask Dashboard Argon - MIT License
- Flask Dashboard Material - MIT License
- Flask Dashboard NowUi - MIT License
Other (Generated) Apps and Boilerplates
- Full-Stack - two tier architecture with Vue, React frontend - MIT License
- Nodejs, Laravel and Flask boilerplate code - MIT License
Where to go from here
- Access the official repository to see what we are providing
- Generate a full-stack app in minutes using our service
- Need support? We are providing 24/7 LIVE support via Discord and eMail for paid plans.
- Follow us on Twitter and Facebook