McFly
Back to the Basics. Into the Future.
Install / Use
/learn @ayo-run/McFlyREADME
Why?
I often wonder what it would look like to build sites & apps knowing just the basics.
I thought:
- What if I knew how to write HTML and I can have a dynamic web page from that?
- What if I knew how to build custom elements and that's all the component system I needed?
- What if I can write HTML fragments and assemble them easily in a page?
- What if I did not have to worry about the ever-growing number of ways to have a place on the Web?
McFly is my reimagination of web development: Back to the basics. Into the future.
Project Status
We are currently in a Proof of Concept phase. All parts are subject to breaking changes in minor releases.
Try it today
Run the following to generate a McFly starter project.
npm create mcfly@latest
How it works (for the nerds)
It is primarily a runtime middleware for Nitro. Every time a page is requested, the McFly middleware intercepts and assembles the view for the requestor. McFly does this with the assets it knows about which are mostly: pages, components, public assets. Additionally, Nitro is also capable of generating static assets on build time.
These patterns are commonly referred to as Server-Side Rendering and Static Site Generation (SSR & SSG).
The idea is to have a plugin system which allows for the core functionality to only "lean" on web platform features. Anything not yet a standard is implemented as a plugin which will be easily "swapped" away when the platform catches up.
Features
✅ Use vanilla custom elements (or sugar-coated web components)<br> ✅ Write server-powered .html pages<br> ✅ "Use the Platform™" on both server runtimes & browsers<br> ✅ Use server-side rendering<br> ✅ Deploy anywhere, even the Edge<br>
Special directories
1. ./src/pages/
- file-based routing for
.htmlfiles - directly use custom elements & static fragments (no imports or registry maintenance needed)
- use
<script server:setup>to define logic that runs on the server, which then gets stripped away
2. ./src/components/
- custom element constructor files (only
.jsfiles for now) - all components are automatically registered using their file names; a
hello-world.jscomponent can be used as<hello-world> - static
.htmlfragments; amy-header.htmlfragment can be directly used as<my-header>
3. ./src/api/
- file-based routing for REST API endpoints
- e.g.,
./src/api/users.jscan be accessed viahttp://<domain>/api/users
Packages
The following are the project packages published on the NPM registry:
| Package | Description | Version |
| :----------------------------------------------------- | -------------------------------------------- | ---------------------------------------------------------------- |
| @mcflyjs/config | Nitro server config for McFly projects | 
@mcflyjs/core | Route event and config handlers | 
create-mcfly | Script for scaffolding a new McFly workspace | 
Project setup
After cloning the project, you will need node and pnpm installed. When you are sure that you have node and pnpm, then run the following to download the dependencies:
corepack enable
pnpm i
The following commands are available to you on this project. Add more, or modify them as needed in your ./package.json file.
| Command | Action |
| ----------------------- | :---------------------------------------------------- |
| pnpm run site | Start the development server for https://mcfly.js.org |
| pnpm run template:basic | Start the development server for the basic template |
| pnpm run build | Locally generate the app's build files to ./output |
| pnpm run preview | Preview the built app locally |
More info
This framework is a result of an exploration for using Nitro and custom elements using a minimal Web Component Base class.
Nitro is the same production-grade web server powering Nuxt
Just keep building.<br> A project by Ayo
