Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Replace Pug with Preact #21

Merged
merged 31 commits into from
Oct 4, 2021
Merged

Replace Pug with Preact #21

merged 31 commits into from
Oct 4, 2021

Conversation

mtsknn
Copy link
Owner

@mtsknn mtsknn commented Oct 4, 2021

I hope I didn't break anything... 😅

Why ditch Pug? Because:

  • Compiling Pug templates is slow because Eleventy doesn't cache Pug templates.
  • Pug isn't well suited for component-driven development. Pug does have mixins, but they are a hassle, partly because:
  • It's impossible, or at least unclear how, to import things to Pug layouts, so you have to add stuff to the global scope (e.g. via Eleventy data files, or declare variables in a top-level layout so the variables are available in child layouts).
  • Using Tailwind with Pug is uncomfortable because you can't use Pug's .classname syntax with classes that contain some special characters like a colon (:). So instead of e.g. ul.px-2.md:px-4, you have to type either ul.px-2(class="md:px-4") or ul(class="px-2 md:px-4").

I'm using HTM instead of JSX because HTM doesn't require a transpiler. HTM is OK, but JSX would be better. See my blog post JSX vs HTM for some differences.

Now that I'm using Preact, I can later implement partial hydration and use Preact and these same components in the browser as well.

mtsknn added 30 commits October 2, 2021 13:41
Also rename `feed-rss` layout to `FeedAtom`
because the feeds are actually Atom
(but I call them RSS/Atom because I think the term "RSS" is more common)
It was only needed in Pug templates
Only `site.js` is used in content files (Markdown),
so it'll remain under `data/`.

Moving the files out from `data/` simplifies the global scope.
Previously they had to be under `data/`
because JS files can't be imported from Pug files,
so I had to add the stuff to the global scope.

`utils/utils.js` looks silly, but I'll tackle it soon.
Allows importing the file with just `.../utils`
instead of `.../utils/utils`
Not a fan of these;
I might create separate listings for drafts and scheduled posts...
@netlify
Copy link

netlify bot commented Oct 4, 2021

✔️ Deploy Preview for mtsknn ready!

🔨 Explore the source changes: 01de3f3

🔍 Inspect the deploy log: https://app.netlify.com/sites/mtsknn/deploys/615b4183cbb5d01eea6d95d5

😎 Browse the preview: https://deploy-preview-21--mtsknn.netlify.app

@mtsknn mtsknn merged commit 2810f0e into master Oct 4, 2021
@mtsknn mtsknn deleted the preact branch October 4, 2021 18:26
@mtsknn
Copy link
Owner Author

mtsknn commented Oct 17, 2021

Simple benchmarks from Netlify before and after the PR:

  • Before: "[Eleventy] Wrote 112 files in 10.18 seconds" (average of 5 production builds)
  • After: "[Eleventy] Wrote 112 files in 3.10 seconds" (average of 5 production builds)

Nice.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

1 participant