HTML Parser - Production Guide

Hello Coders,

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
  • full assets control (CSS, Javascript, Images)
  • 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

WIP features:
  • 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

The results

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:


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.


Resources


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

Thank you!

Show Comments

Get the latest posts delivered right to your inbox.