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

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 <script server:setup> to define logic that runs on the server, which then gets stripped away

2. ./src/components/

• custom element constructor files (only .js files for now)
• all components are automatically registered using their file names; a hello-world.js component can be used as <hello-world>
• static .html fragments; a my-header.html fragment can be directly used as <my-header>

3. ./src/api/

• file-based routing for REST API endpoints
• e.g., ./src/api/users.ts can be accessed via http://<domain>/api/users
• TypeScript or JavaScript welcome!

Packages

The following are the project packages published on the NPM registry:

| Package | Description | Version | | ------------------------------------------------------ | -------------------------------------------- | ---------------------------------------------------------------- | | @mcflyjs/cli | The McFly CLI tooling | | | @mcflyjs/config | Nitro server config for McFly projects | | | @mcflyjs/core | Route event and config handlers | | | create-mcfly | Script for scaffolding a new McFly workspace | |

More info

This framework is a result of an exploration for using Nitro and vanilla JS custom elements using a minimal Web Component Base class.

Nitro is the same production-grade web server powering Nuxt

Just keep building A project by Ayo Ayco