App Generator - The Modern Way

Hello Coder,

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

AppSeed solutions

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

App GenerationHTML parsing

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 GenerationBoilerplate 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:

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:

JAMstack Lens - Gif animated intro.

#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)

Flask Locus - Gif animated intro.

#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

Other (Generated) Apps and Boilerplates

Where to go from here

Thank you!

Show Comments

Get the latest posts delivered right to your inbox.