🦁

Elmo

Elmo is a curated, zero-configuration, 4-kilobyte web framework inspired by the best ideas from the React community.

import { fetch, Head, Style } from 'elmo'
import theme from './theme'

export default async function ({ url, redirect }) {
  const res = await fetch(`/posts/${url.query.slug}`)
  if (!res.ok) return redirect('/404')
  const post = await res.json()
  return <Post post={post} />
}

const Post = (post) => (
  <div>
    <Head>
      <title>{post.title}</title>
    </Head>
    <h1 class="title">{post.title}</h1>
    <article>{post.body}</article>
    <Style>{`
      .title {
        font-size: ${theme.font[1]};
        color: ${theme.color.gray[9]};
      }
    `}</Style>
  </div>
)
  • ✓  Prerender and SSR support
  • ✓  Familiar API
  • ✓  4kb runtime
  • ✓  Built on Preact and Webpack
  • ✓  No configuration files
  • ✓  Deploy anywhere
  • ✓  Code splitting on every page
  • ✓  Hot reloading during development
  • ✓  Scoped CSS
  • ✓  Macro support
  • ✓  Built-in router and routing
  • ✓  Rigorously tested
  • ✓  In production since 2017
  • ✓  98% browser support
  • ✓  Open Source
  • ✓  MIT License

Quick Start

  1. mkdir elmo-example
  2. cd elmo-example
  3. yarn add elmo
  4. yarn elmo new
  5. yarn elmo

Principles

  • Build websites quickly in a consistent way that scales well in size and maintainability
  • Performance, readability, tests and stability are more important than new features
  • Elmo should get smaller and faster over time, not bigger and slower
  • Follow the Heroku way of learning from the environment, not from configuration files
  • Internals can change, but the contract between the developer and Elmo should not
  • Works as expected, you shouldn't have to keep this documentation open.
  • Minimal set of deployment requirements. Can be deployed to any cloud service.

Tradeoffs

All software has tradeoffs. Authors that don't talk about the tradeoffs they've made are asking you to forge ahead blindly only to discover these issues later on. Let's not do that here.

Here's some reasons I can think of why you should skip Elmo.

You're taking the road less traveled

Elmo is primarily driven by Preact. Preact has a much smaller community than React. Often you'll end up writing your own components rather than using community components.

In practice, I find most websites end up doing this anyway, but for certain components (react-select & slate come to mind) it can be really nice to lean on the community. In those cases, you'll most likely need to fork and modify the community components to fit inside your application.

Personally, I've been using Preact for about 4 years now and have never felt like I was missing something that React offers.

We have opinions

There's one way to write CSS, one way to do routing, one way to do code splitting and a couple of supported languages. These opinions are rooted in making websites for a long time but you may like to do things differently.

If you're a fan of tweaking your frontend just to your liking then Elmo is not right for you.

Originally created by one person

Elmo is not an organizational endeavor. There's no business plan or marketing strategy. Elmo was originally designed and created by just one dude who loves making websites.

This means that there may be weeks without updates or years without a new version. If you like shiny new things than Elmo may not be for you.

With that being said, Elmo is primarily glue code between two mature projects: Webpack and Preact, so upstream improvements will find their way into Elmo.

Lastly, one of my personal goals with the project is to have it be so well-tested that there aren't any known bugs. At that time, commits will slow and the project will have reached maturity.