A List of DSLs for a Website

-Ben

The most basic form of a website needs ~4 or 5 languages.

written after reading this article

  1. HTML
  2. CSS
  3. Javascript
  4. SQL
  5. backend language

3 are required to use the browser most effectively. 1 is required for solid data management. The last one is the only one we really get to choose. Even if we chose Javascript, I could agree it’s 5 languages: Node and other runtimes are very close but ultimately different environments for the same language and they should be treated differently.

In a production Node application, with a React frontend, we could easily double that count.

  1. HTML
  2. JSX
  3. CSS
  4. Panda CSS
  5. React
  6. Javascript/Typescript/Node
  7. SQL
  8. Prisma
  9. Lua

9 languages! 6 or 7 DSLs! Some are over top of others, but you write better JSX if you understand HTML better. Same for Panda and CSS, Prisma and SQL. For every DSL layer on top of a DSL doesn’t abstract it away as much as you’d think.

What makes a DSL?

Would any templating language be considered a DSL? Something like Liquid or Nunjucks? They’re such simpler abstractions than JSX/React, you really get the semantics of the underlying DSL much, much more clearly. There’s hardly even another layer to think about. Ultimately they do require a little more knowledge, but they also don’t really know anything about the HTML layer beneath them. They could be used to template Javascript or SQL the exact same way.

More advanced templaters like ERB (with Rails) or Laravel’s Blade definitely feel like they spill over into DSL land. They start to feel more aware of the langauge they’re abstracting. Since they ultimately render down to HTML though, they’re still better at separating what they do vs the templated code than a React/JSX that tries to mix the two and bring a runtime into the mix.

Do we gain enough through the abstraction, the additional DSL, to justify it?

Each person and group can decide for themselves and has a different tolerance for then. 10-15 years ago, React, SASS, etc. smoothed a lot of rough edges on the DSLs that make up web pages. But the platform has come a long way since then. For me, I prefer working with the DSLs directly and dropping into the full Javascript language when needed over just smoothing edges that aren’t rough or pointy anymore.