This content originally appeared on DEV Community 👩💻👨💻 and was authored by Thomas Reggi
The suite of meta frameworks Remix, Qwik, Astro, Fresh, Next, Solid Start, Svelte Kit all don't do this one thing, they don't have the ability to import a package that is encapsulated with route(s), client component(S), ssr data, and have it run within the framework.
I fundamentally want to write applications in a different way then most of the file-based-routing meta-frameworks do. I want write small ui components with server actions and server loaded data all to be defined in one file, and have the ability to load that file in as a "plugin" to the framework. I want global contexts that allow plugins to access things like databases, env vars, and 3rd party api clients.
Meta frameworks all do one thing well they glue components / server code together with file based routing making projects have more structure then they previously did. It's easy to navigate a project set up with file based routing.
File based routing has one fatal flaw composability, it does not let you break the form.
File-based routing will be treated similar to SPAs in a few years - really nice initially but overused and painful when you do hard things02:34 AM - 21 Oct 2022
I think express / oak did routing the right way on the server by allowing you to compose and nest full routers that could be npm modules. We've stepped away from this and it means we can't break our code down into sharable chunks.
thomas 🌻@thomasreggi
5️⃣ I want component modularity so I can write an encapsulated component (with access to extend the full server, add extra routes, db access, webhooks, add global styleheet, css, anything) and plug it into the system, call it from ANY page. If its not on the page = zero overhead.16:52 PM - 21 Oct 2022
Kent C. Dodds recently published an article called "Full Stack Components" a concept that is very similar to my idea of having all the endpoint code in one file. However remix doesn't allow for anything other then file based routing, meaning no programatic way to add in a Full Stack Component from NPM.
I see one of two futures either frameworks start to see the benefit of adding modularity to their codebases and add the ability for plugins / modules / url imports to contain routes, components, islands, database access, context, etc. or we come up with another way using Micro Frontends.
Why is this desirable?
Without the ability to import code things we write can't be shared, apps are two dimensional / single use. Why is it not easy to boilerplate simple site functionality? The problem is that everyone is to preoccupied with static site generators, front-end frameworks, and file-based-routing. You're missing the mark! The future is isolated server + client ui elements "full stack components" and this doesn't need sight of a bigger framework / system to run.
I essentially want wordpress plugins. Wordpress had an amazing ecosystem of plugins that could do anything to the system, and new database tables, new ui elements, new themes. I even dabbled in drupal too, so much control and very complicated to use.
I imagine a whole framework with clean supabase plugins, shopify plugins, google drive plugins, to allow for local caching of information from third party api's.
thomas 🌻@thomasreggiTo refocus, my goal is still to have a way to create plugins like a calendar scheduling component that sets up everything involved for this mini app. Google Cal integration, Db Cache Table, Webhook for cal updates. There's no framework that exists to wire all this up.18:21 PM - 20 Sep 2022
Fred the creator of astro even gave this a shoutout, even though it sadly isn't possible within astro.
@thomasreggi I love this idea! I think an Astro integration could do everything here (except the DB stuff) using injectRoute to add automatic webhooks for auth, cal updates, etc.19:26 PM - 20 Sep 2022
const calendar = wireCalendarScheduler({
google: {
client: GOOGLE_CLIENT,
secret: GOOGLE_SECRET,
},
...calendarSettings
})
// what might calendar return?
const { routes, headtags, styles, components } = calendar
const { Calendar } = components
Thinking about all the things that go into a "calendar scheduling" app like calendly.
- Have access to google calendar
- Create Webhook routes for calendar event updates
- Have access to supabase
- Create a database table in a service like supabase
- Cache the calendar data locally supabase
- Ship SSR Server Code
- Ship interactive Client code (if any)
Deno even made a clone of calendly called meet-me built with fresh. It's a standalone thing, you need to boot an server to use it. Why can't this just be a thing I can add on to my custom fresh website?
Alternative to Files / Folder Structure for using 3rd party islands / api endpoints #693
Implement plugins for islands and routes (meet-me as plugin)
RSC and Next.js
I really thought that this new era of "server components" and Next.js was going to open the flood-gates for innovation. The issue is they haven't even figured out how to have "one-off" components that's backed by the server, let alone components coming from a package...
Random thought
Perhaps truly embracing "server components" as just functions could liberate us?
thomas 🌻@thomasreggiI think server components have broken my brain. I can't tell if I want this or not. I blame @astrodotbuild. This reminds of of that scene in the matrix reloaded, where Agent Smith is like me me me me, this is HTMLification.17:00 PM - 20 Sep 2022
Prior Posts:
- Example Meta Framework Where Client + Server Code Self-Split Within the Same File
- What Are Micro-Frontends, What Problem Do They Solve?
- Declarative Server & Client Code to Enable Linting and Splitting.
- Federated Widgets: Frontend Components and Backend Endpoints in One Module
This content originally appeared on DEV Community 👩💻👨💻 and was authored by Thomas Reggi
Thomas Reggi | Sciencx (2022-11-03T04:50:05+00:00) What no meta-framework does.. Retrieved from https://www.scien.cx/2022/11/03/what-no-meta-framework-does/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.