Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/ngasull/classic
Classic web apps on modern standards
https://github.com/ngasull/classic
bundler deno js jsx nodejs ts web
Last synced: about 4 hours ago
JSON representation
Classic web apps on modern standards
- Host: GitHub
- URL: https://github.com/ngasull/classic
- Owner: ngasull
- License: mit
- Created: 2024-01-29T09:32:16.000Z (9 months ago)
- Default Branch: master
- Last Pushed: 2024-07-24T23:04:49.000Z (3 months ago)
- Last Synced: 2024-07-25T02:28:03.317Z (3 months ago)
- Topics: bundler, deno, js, jsx, nodejs, ts, web
- Language: TypeScript
- Homepage:
- Size: 556 KB
- Stars: 3
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Classic web apps on modern standards
Server-side middle-end prioritizing page load times and simplicity.
## Features
- **Reactive resources**
- **Server-side async JSX**
- Generate dynamic HTML thanks to resources and JS
- **Explicit client-side JavaScript boundaries**
- Manipulate and attach JS to sent HTML through JSX refs
- **TypeScript-first**
- Even for JS manipulation
- **Industrial-grade navigation** *(à la Remix)*
- Dynamic nested routes
- Actions through `form`s to update reactive resources
- Minimum amount of bytes sent over the wire
- **Modular design**
- Share modules exposing HTML|JS|CSS thanks to the programmatic bundling API
- Extend functionalities and integrate in larger frameworks
- **Programmatic workflow**
- Optimized bundling *([esbuild](https://esbuild.github.io/) under the hood)*
- Buildless development
- Simple explicit production build
**Classic is not a UI library and depends on none**, but you can optionally use some.
Classic integrates with existing technologies rather than reinventing them.
Typical Classic stack:
- [Deno](https://deno.com/) - Runtime, LSP, lint, test, DB...
- [Hono](https://hono.dev/) - Backend router
- Classic - Reactive HTML/JS/CSS generation
NodeJS support is planned, however we strongly recommend Deno in general.
## Get started
```sh
# Prompts a folder name and creates the template
deno run -r --allow-write=. --allow-net https://raw.githubusercontent.com/ngasull/classic/master/init.ts
```
## Code examples
_Remember: everything runs server-side except what is explicitly wrapped in JS types!_
### JSX Components
```tsx
import { db } from "./my-db.ts";
export const YourName = async ({ userId }: { userId: string }) => {
const user = await db.user.find(userId);
return (
Your name will be {user.name}
);
};
```
### Add client-side JS bits
```tsx
import { js } from "classic-web/js.ts"
export const YourName = () => {
return (
js`${div}.innerText = "Your name will be H4CK3D!"`}
>
Your name will be ...
);
};
```
### Bundle a JS/TS file
```tsx
import { bundle } from "./bundle.ts";
/*
* Proxied to keep client code explicitly client-side and typed.
* Check the development workflow for more info.
*/
const yourName = bundle.add("./your-name.web.ts");
export const YourName = () => {
return (
yourName.hack(div, "H4CK3D")}>
Your name will be ...
);
};
```
```ts
// your-name.web.ts
export const hack = (el: HTMLElement, name: string) => {
el.innerText = `Your name will be ${name}`;
};
```
### As a sharable module, for library developers
```tsx
import type { Bundle } from "classic-web/bundle.ts";
export const yourName = (bundle: Bundle): JSX.Component => {
const yourName = bundle.add(
"./your-name.web.ts",
);
return () => {
return (
Your name will be ...
);
};
};
```
### Hello world
You may check [hello-world example](./examples/hello-world)