Thank you for landing on this page. This article explains how we use HTML parsing in the process of automatic app generation used to transform flat HTML designs into fully coded apps. For new comers, the idea behind the AppSeed service is a simple one:
Any FLAT design can be transformed into a fully-coded app using automation tools.
To achieve this goal, we split our process into two big parts:
- HTML parsing and translation to various formats: PUG, Jinja, Mustache
- Boilerplate code provisioning with design, tools and modules
App Generator - Intro
The whole idea behind an app generator is to get a stable and tested code-base equipped with a few modules useful for a future project or app. Compared to other app generators, AppSeed aims to build apps using only flat HTML as input and based on this, will generate fully coded apps in modern pattern and architectures.
AppSeed is able to provide apps in two ways:
- Through the visual app generator, users can combine the design, front end and back end technologies and the code is sent via email or listed on their dashboard in case they have an account on AppSeed platform.
- Pre-built apps for various technologies and languages: JAMstack, Flask, Full-Stack, Admin Dashboards, Server-Side boilerplate code
In this article we will explain why we are using an HTML parser and how this tool help us to generate apps in different technologies and languages.
Without an html parser, we were forced to manually process the HTML themes and extract the layouts, components, replace the hard coded texts with variables. In one sentence, this was a nightmare. Despite the fact that we spent around 1 year to develop the parser, the result was very satisfying. I will summarize here a short lis of features:
- Load any html styled with Bootstrap, Bulma, Tailwind or Foundation
- Full-control over the HTML DOM structure to edit nodes and attributes (href's, span texts, images src .. )
- Components extraction for various template engines: PUG, Jinja, Blade
- Master layout detection by comparing multiple screen-shots
The HTML parser tool is implemented as an interactive console and the developer is able to move over the HTML Dom and visualize and later on, edit all elements.
Load the HTML page
HTML Parsing Sample
- Index file: original version and normalized version
- JSON descriptor is generated by the HTML parser tool and encapsulate the assets and resources used by the HTML files
- Navigation component
- HTML version
- PUG version
- Jinja2 Version
- Php version
- JSON descriptor - holds the contextual information for components or pages
nav#nav ul li a.active.newclass(href='https://appseed.us/html-parser'). Introduction li a(href='#first'). First Section li a(href='#second'). Second Section li a(href='#cta'). Get Started
<nav id="nav"> <ul> <li> <a class="active newclass" href="https://appseed.us/html-parser"> <?php echo $var_1?> </a> </li> <li> <a href="#first"> <?php echo $var_2?> </a> </li> <li> <a href="#second"> <?php echo $var_3?> </a> </li> <li> <a href="#cta"> <?php echo $var_4?> </a> </li> </ul> </nav>
Apps Generated Samples
The HTML parser plays an important role in our app generation process and at the time we are writing this article (sep.2019) our public repository contains more than 120 apps, generated based on the HTML extracted and processed by the parser. The apps sorted by architecture, languages and typology:
- JAMstack apps - 40+ apps
- Full-Stack Flask Apps enhanced with database, ORM and tooling
- Admin Dashboards - open-source and commercial apps
- Full-Stack apps with Vue, React front ends built in two-tier architecture
- Boilerplate code server-side apps coded in Flask, Nodejs and Laravel
Where to go from here?
- Get more boilerplate code provided by AppSeed
- Need support? We are providing 24/7 LIVE support via Discord and eMail for paid plans.