In The World of JS Frameworks
It's an HTML Framework

Saurabh Daware

Senior Frontend Engineer

  • saurabhdaware
  • saurabhdawaree
<html>
<body>
  <h1>Hello, World!</h1>
  <script src="./app.js"></script>
</body>
</html>

HTML is pretty cool, actually

HTML is pretty cool, actually

  • Easy to Get Started
  • Flexible
  • Smaller Learning Curve
  • Super Fast

Lets Build Everything in HTML then!!

  • Can you build Documentation Site in Vanilla HTML?
  • Blog Site
  • Portfolio / Landing Pages
  • ❌

Missing Features in HTML 😢

  • No Reusability
  • MDX / MD / TS / JSX Integrations
  • Plugins
  • Dynamic Routing

???

Good Parts of HTML

  • Super Fast
  • Flexible
  • Smaller Learning Curve

Missing Features in HTML

  • Reusability
  • MDX / MD / TS / JSX Integrations
  • Dynamic Routing

???

Good Parts of HTML

  • Super Fast
  • Flexible
  • Smaller Learning Curve

Missing Features in HTML

  • Reusability
  • MDX / MD / TS / JSX Integrations
  • Dynamic Routing

Why?

index.xyz

<html>
<body>
  <% 'hello'.toUpperCase() %>
</body>
</html>

index.html

<html>
<body>
  HELLO
</body>
</html>

index.xyz

<%
  const content = require('./content.mdx');
  const three: number = 3;
%>
<html>
<body>
  <% three %>
  <% content %>
</body>
</html>
→ PROCESS ⚙️ →

index.html

<html>
<body>
  3
  <!-- MDX content as HTML here -->
</body>
</html>

.vue

index.xyz

<%
  import content from './content.mdx';
  const three: number = 3;
%>
<html>
<body>
  <% three %>
  <% content %>
</body>
</html>

temp-index.ts

import content from './content.mdx';
const three: number = 3;

export function html() {
  return `
    <html>
    <body>
      ${three}
      ${content}
    </body>
    </html>
  `
}
→ Pass it to Bundler ⚙️ →

???

Good Parts of HTML

  • Super Fast
  • Flexible
  • Smaller Learning Curve

Missing Features in HTML

  • Reusability
  • MDX / MD / TS / JSX Integrations
  • Dynamic Routing

???

Good Parts of HTML

  • Super Fast
  • Flexible
  • Smaller Learning Curve

Missing Features in HTML

  • Reusability
  • MDX / MD / TS / JSX Integrations
  • Dynamic Routing

???

  • Low-Level like Jekyll
  • Integrates with Modern Tools like Astro
  • Small Learning Curve like Vanilla HTML

Introducing

Introducing

Abell Logo

Abell

A Low-Level, Framework Agnostic,
Vite Powered Static-Site-Generator

Abell is a Low-Level Static Site Generator

Abell is a Framework Agnostic Static Site Generator

Abell is a Vite Powered Static Site Generator

Abell Plugins?

Abell Plugins?

  • How to use Sitemap? vite-plugin-sitemap
  • How to use Markdown? vite-plugin-md-to-html
  • How to use MDX? @mdx-js/rollup
// vite.config.ts
import { defineConfig } from 'abell';
import mdx from '@mdx-js/rollup';
import { vitePluginJSXToHTML } from 'vite-plugin-jsx-to-html';

export default defineConfig({
  plugins: [
    mdx(), // Turns MDX to JSX
    vitePluginJSXToHTML({ extensions: ['.mdx'] }), // Turns JSX to HTML
  ]
})

// vite.config.ts
import { defineConfig } from 'abell';
import mdx from '@mdx-js/rollup';
import { vitePluginJSXToHTML } from 'vite-plugin-jsx-to-html';
import rehypeSlug from 'rehype-slug';

export default defineConfig({
  plugins: [
    mdx({
      rehypePlugins: [rehypeSlug]
    }), // Turns MDX to JSX
    vitePluginJSXToHTML({ extensions: ['.mdx'] }), // Turns JSX to HTML
  ]
})

Source Plugins?

import index from './index.abell';
import layout from './layout.abell';

const response = await fetch('https://your-wordpress-site.com/wp-json/wp/v2/posts').then((res) => res.json());
const posts = response.data;

export const makeRoutes = () => {
  return [
    {
      path: '/',
      render: () => index()
    }
    ...posts.map((post) => ({
      path: post.slug,
      render: () => layout(post.content.rendered)
    }))
  ]
}

Ecosystem?

All of JS Ecosystem 🫡

And finally...

🥁

Abell Logo

Abell

✨ v1 beta ✨

Abell Logo

Abell

✨ v1 beta ✨

npx create-abell
  • abelljs.org
  • github.com/abelljs/abell
  • saurabhdawaree

Thank You