McFly
McFly is a metaframework
that assists in building on the Web
## 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](https://developer.mozilla.org/en-US/docs/Web/HTML) and I can have a dynamic web page from that?
- What if I knew how to build [custom elements](https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_custom_elements) and that's all the component system I needed?
- What if I can write [HTML fragments](https://developer.mozilla.org/en-US/docs/Web/API/DocumentFragment) and [assemble them](https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_shadow_DOM) 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](https://ayos.blog/places-in-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.
👉 [Road to v1.0.0 todo items](https://github.com/ayoayco/McFly/issues?q=is%3Aissue%20state%3Aopen%20milestone%3Av1.0.0)
## 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](https://nitro.build). 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.
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)
✅ Write server-powered .html pages
✅ "Use the Platform™" on both server runtimes & browsers
✅ Use server-side rendering
✅ Deploy anywhere, even the Edge
## Special directories
**1. `./src/pages/`**
- file-based routing for `.html` files
- directly use custom elements & static fragments (no imports or registry maintenance needed)
- use `