Thank you for landing here. This article presents the development streamline implemented by the AppSeed service to deliver full-stack apps, generated or prototyped in various technologies.
In the last 5yrs, the technology field was changing fast. A few facts, related to this:
- The adoption of Headless, JAMstack pattern is growing.
- Gatsby, HUGO, Gridsome dig a nice grave to Wordpress, and this happens for some good reasons.
- Serverless, such a beautiful thing.
- MVC - thank you old friend, but now is time for SSG, PWA, SPA, full-stack serverless.
The goal of an app generator is to help the developer to deliver faster and better his products. The underline technology you're using, I'm not sure it's important because this layer is under continuous change. How about staying relevant in the market as a developer by using an app generator built to automate a few simple tasks, usually time-consuming and not so creative:
- Integrate the design
- Choosing the stack and architecture of the future product
- Automate the deployment
Let's debate one by one, and analyze the value-added provided for each step.
Integrate the UI
The HTML themes come, usually with hard-coded texts and standard pages. To integrate the UI into an app, written in whatever technology, the developer should manually extract the layout, components, remove hard-coded texts, configure the project in Webpack, Parcel, Gulp. To pass with speed over this phase, we've written an HTML parser tool. The design is processed and injected into pre-built boilerplates (this part is detailed in the next section). Steps performed by the parser:
- Flat HTML is loaded into memory
- The HTML is normalized. Normalization means to align the page assets to be loaded from a standardized file system structure. A sample:
Assets before normalization
<ROOT> |---- index.html |---- app.css |---- js/app.js |---- images/logo.png |---- top-cover.jpg
Assets after normalization
<ROOT> |---- index.html |---- assets/css/app.css |---- assets/js/app.js |---- assets/images/logo.png |---- assets/images/top-cover.jpg
The "normalized" structure is reflected in the index.html file and now can be easily integrated into any built tool like Webpack, Parcel or Gulp.
- All HTML elements are available for editing: span, paragraphs, anchors
- Hard coded strings can be removed an replaced by real variables for various template engines: PUG, Jinja2, Blade.
Read more about this html parsing on this article: HTML Parser - Developer Tools
Ok, now we have processed the UI, but we need to actually use it. No worries, just read the next section.
Choosing the Technology Stack
We can code a new app in many ways and architectures: old-school MVC, two-tier (the front end is decoupled from the back end), JAMstack, Static. With AppSeed you have the freedom to choose the desired architecture because the same design (processed in the previous step) can be injected in various architectures. Let's take a look at some free samples provided on Git.
- JAMstack apps: Fractal, BigPicture, Landed
- MVC Flask: Material Dashboard, NowUI Dashboard
- Full-Stack: Flask/React, Express/Vuejs, Laravel/React
All above apps are fully-coded with authentication, database and helpers. Most of them are free apps, released under the MIT license.
In the next few years AppSeed aim to become a strong player in this dynamic technology field. Question? Ask us anything via email support @ appseed.us