Applications

The Application Framework

At the heart of it, any frontend application is built on top of these 3 key players:

• The Builder (Vite)
• The Interfacer (Svelte)
• The Designer (UnoCSS)

For several scenarios, we could stop here and via a few configs and plugins

build these frontends:

• Single Page Application (SPA)
• Static Site
• Browser Extensions
• Embeddable Widgets
• Mobile
• Desktop

However, if we need a backend, we call on this guy:

• The Server (FeathersJS)

And naturally, we might store stuff and want to interact with our data.

For that, we pull in:

• The Inquirer (Prisma)

When things get this big, sometimes you end up working with 3rd-party tools. We integrate with the outside world via The Integrator: n8n.

But now, things might get outside of the static hosting world.

We can package up our projects with Docker and manage it all easily with:

• The Manager (Caprover)

In the end, we might end up with a structure much like this one below:

What’s Cool About This

What’s really cool about this is the ability to work on multiple projects without losing flow. You can switch between a web app or browser extension or desktop app and infrastructure and dev flow will be closely the same.

Digging Deeper

Chain of Responsibility with data flow

Once you understand this, you simply hook into the chain and implement your code at the appropriate point.

What could a big Frontier project look like?

└── My Frontier Project
  ├── frontier.config.js
  ├── api
  │   ├── config
  │   ├── deploy
  │   ├── dist
  │   ├── public
  │   ├── src
  │   │   ├── core
  │   │   ├── middleware
  │   │   ├── models
  │   │   └── services
  │   └── test
  ├── db
  │   ├── backups
  │   └── prisma
  │       └── migrations
  ├── embeds
  │   ├── deploy
  │   ├── dist
  │   ├── src
  │   └── test
  ├── tests
  ├── web
  │   ├── config
  │   ├── deploy
  │   ├── dist
  │   ├── public
  │   ├── src
  │   │   ├── components
  │   │   ├── core
  │   │   ├── layouts
  │   │   ├── routes
  │   │   └── resources
  │   └── test
  └── wiki

├── config
├── deploy
├── dist
├── public
├── src
│   ├── core
└── test

├── config (configure you're settings)
├── src (develop your project)
├── public (include an static assets)
├── test (test your code)
├── dist (build and get ready for distribution)
└── deploy (everything related to shipping the app)

Some Key Concepts

• Everything has a Context, so we expose that and use it to our advantage
• Hooks are good, but they’re GREAT in context. We use conventions of before and after a lot.

What else is out there and how does Frontier compare?

Frontier falls into the latest “trendy” stuff out there called “Fullstack JAMstack”.

Some others of note

• Remix (React)
• Gridsome (Vue)

You can research more at fsjam.org.