Thank you for landing on this page. This article present a few production use-cases for an HTML parser tool. The tool mentioned in this article stands as the first layer in the automation flow, implemented by the AppSeed platform.
HTML Parser - what is it
According to Wikipedia, Parsing or syntactic analysis is the process of analyzing a string of symbols, either in natural language or in computer languages, according to the rules of a formal grammar.
Why writing such a tool in 2019?
We decided to build a proprietary parser, mostly to cut the manual work that inevitably occur in the web development process:
- process the flat HTML files to be included in a new project
- extract components for various template engines
- detecting automatically the master layout by comparing pages
- transform chaotic HTML projects to tooling system: webpack, parcel, gulp.
Using the HTML parser we succeed to automate the UI integration into various real productions apps, coded in different technologies and patterns. As a result of the automated processing, we've released 100+ open-source apps on Github, and i will mention only a few here, sorted by topology:
- Admin dashboards - fully-c0ded admin panels on top of some well-know UI kits
- JAMstack apps - generated on top of Pixelarity and Html5Up designs
- Flask Apps - fully-coded with authentication, database and ORM on top of amazing designs
The parsing process
The goal was to implement a tool that allows us to have 100% DOM control over the flat HTML files. After 1 year of hard R&D work, the HTML parser was ready to be used in production, with a basic set of features:
- load HTML themes or single files
- traverse the DOM tree and edit the elements (attributes, texts)
- extract components for various engines: PUG, Jinja, Blade
- detect the master layout by comparing pages
Using this first version of the HTML parser, we were able to automate the app production flow by injecting the processed UI kits into pre-built boilerplates prototyped in different technologies and patterns: Flask, JAMstack, Full-Stack apps
- Migrate Bootstrap based HTML themes Bulma CSS and Tailwind and preserve the layout. This might sound futuristic, but is doable if you have access to the classes that style the components. And we have this access granted by the HTML parser.
- Convert Bootstrap themes to UIDL TeleportHQ format
- Convert HTML components to React, Vue or Angular components, automatically.
- Generate Gatsby, HUGO themes from legacy Bootstrap themes.
Off course, this is not an easy path, but we are determined to automate entirely the manual work involved int the UI processing and integration into a new project.
As mention in this article: Design once, Use anywhere, published on the Dev platform, our goal is to build a system that automate the UI transformation from flat HTML to any frontend technology: React, Vue, Angular, Blade, Jinja, Mustache
As mentioned we are using the HTML parser to provide fully-coded apps in different patterns and programming languages. All app (free & commercial) are published on Github on a public repository, and I will mention only a few here, in this article:
- Admin Dashboards - Fully-coded open-source admin panels equipped with Database, ORM, Authentication flow (login, register) and basic tooling
- Static Sites - prototyped in Eleventy , Panini SSG
- Flask Apps - Free & Commercial
- JAMstack Apps - Free & Commercial
As we see, using tools in our development can help us to work less an skip over the manual work involved in our daily routine.
- HTML Parser - the official repository
- HTML Parser - Extract information from a LIVE website - this article explains how to pull information from a LIVE websites
- HTML Parser - Design once, Use anywhere - a crazy article published on Dev platform
- HTML Parser - Extract HTML information with ease - A short list with code snippets in case you want to experiment the concept
Where to go from here
- You are an agency and have issues migrating Bootstrap themes to React, Vue or any other UI engine? Give us a sign.
- Follow us on Twitter and Facebook