5258 of 7435

Frontend Post #5766, on Dec 21, 2023 in TG

SQL, But Make It JSX

Why is this Frontend meme funny?

Level 1: Soup In A Cake Pan

This is like trying to cook soup by putting all the ingredients into a cake pan because cake pans are your favorite kitchen tool. You might still end up with food, but everyone watching wonders why soup had to become cake-shaped. The meme is funny because programmers sometimes force every problem to look like the tool they already like.

Level 2: Tags For Queries

SQL is the common language used to ask relational databases for data. A normal query might say, “Find rows where status is paid and name is bob, then return at most five results.” An ORM, or object-relational mapper, is a library that lets developers work with database records through programming-language objects instead of writing raw SQL every time.

JSX is syntax used heavily with React. It lets developers write markup-like tags inside JavaScript:

<Button disabled={isSaving}>Save</Button>

The image combines those worlds. It uses JSX tags to describe a SQL-like query. That feels funny because <Select> and <Where> look like UI components, but they are being used to talk to a database. For a beginner, this might even look readable at first. The trouble starts when the query becomes more complicated than two filters and a limit.

This is why developers argue about DSLs, or domain-specific languages. A DSL can make one kind of task pleasant, but if it copies the wrong shape from another domain, it becomes confusing. SQL already has a compact way to express database logic. JSX already has a compact way to express UI trees. Smashing them together creates something that is clever enough to be dangerous.

Level 3: Hydrate The Database

The screenshot shows a dark code editor with a JavaScript or TypeScript function:

export default async function Home() {
  const data = await query(
    <Select>
      <Where>
        <Column name="status" value="paid" />
        <Column name="name" value="bob" />
      </Where>
      <Limit amount={5} />
    </Select>
  );

The post message says, “We’re so cursed,” and the image earns it. The joke is that a database query has been expressed as a React-style component tree. Instead of SQL like SELECT ... WHERE status = 'paid' AND name = 'bob' LIMIT 5, or a normal ORM query builder, the code uses JSX tags such as <Select>, <Where>, <Column>, and <Limit>. It looks like the frontend ecosystem stared at a database long enough to ask whether it needed components.

Senior developers wince because this is not just weird syntax; it is a familiar abstraction temptation. JSX is good at describing nested UI structure because UI is naturally tree-shaped. SQL is declarative too, but a query is not a DOM subtree. It has relational semantics: projection, filtering, joining, grouping, ordering, cardinality, indexes, query planning, parameterization, and transaction context. Turning it into tags can make the simplest case look cute while making the real cases deeply awkward. What does <Join> look like? How do you express OR, subqueries, window functions, common table expressions, null handling, or parameter binding? Somewhere in the distance, a query optimizer starts updating its resume.

The satire hits the JavaScript ecosystem specifically because JavaScript has a habit of absorbing every domain into its dominant idioms. Configuration becomes JavaScript. Styling becomes JavaScript. Server rendering becomes JavaScript. Database access becomes JavaScript. Now SQL, an already successful domain-specific language, is being dressed in JSX because the toolchain can parse it and the demo looks memorable. That is the cursed part: it is technically possible, and technical possibility has never been a sufficient design review.

There is a real trade-off buried under the joke. A JSX query DSL could offer type checking, composability, editor autocomplete, and safe parameter construction. Those are legitimate goals. But the abstraction must pay rent. If it makes simple filters look friendly while hiding the actual database model, it risks teaching developers a toy version of querying and then abandoning them when production asks for EXPLAIN ANALYZE.

Description

A dark themed code editor screenshot shows syntax-highlighted JavaScript or TypeScript code beginning with `export default async function Home() {` and `const data = await query(`. Inside the query call, the code uses XML/JSX-like tags: `<Select>`, `<Where>`, two `<Column>` elements with `name="status" value="paid"` and `name="name" value="bob"`, then `<Limit amount={5} />`, before closing `</Select>` and `);`. The joke is that database querying has been expressed as a React-style component tree, as if SQL, an ORM, and JSX all collided in a frontend framework. For senior developers, it pokes at the tendency of JavaScript ecosystems to turn every domain-specific language into familiar component syntax, regardless of whether that improves the abstraction.

Comments

Anonymous ★ Top Pick When your ORM has a render tree, the database starts asking whether it needs hydration too.

Anonymous ★ Top Pick

When your ORM has a render tree, the database starts asking whether it needs hydration too.
@purplesyringa 2y

JESUS
@Sp1cyP3pp3r 2y

I do not understand the Joke edit: wait wtf
@ZgGPuo8dZef58K6hxxGVj3Z2 2y

EWWWW is this sql in xml
1. @purplesyringa 2y
  
  worse, this is SQL in JSX
  
  @ZgGPuo8dZef58K6hxxGVj3Z2 2y
  
  Tf is that
@sylfn 2y

WHY WHY WHY WHY
@danogentili 2y

NOOOOOOOOOOOOOOOO
@Vincent_Hawks 2y

finally sqxml
@danogentili 2y

WHYYYY
@callofvoid0 2y

SQML
@purplesyringa 2y

this is SQL-in-JS
@ZgGPuo8dZef58K6hxxGVj3Z2 2y

I just installed ms sql server manager, don't make me uninstall it
@IliaKurenkov 2y

wow, my coworker once created a json to sql converter so frontend developers could write queries directly for db This is so much worse
1. @purplesyringa 2y
  
  this is TERRIBLE
2. @despac1to 2y
  
  It's literally Sequelize
@Vincent_Hawks 2y

ok ok ok but what if const data = await query({ select: { where: [ { column: "status", value: "paid" }, { column: "name", value: "bob" } ], limit: 5 } });
1. @ZgGPuo8dZef58K6hxxGVj3Z2 2y
  
  Better still not good
  
  @Vincent_Hawks 2y
  
  wdym better this was supposed to be worse
  
  @EricKotato 2y
  
  Worse than XML? Impossible.
  
  @ZgGPuo8dZef58K6hxxGVj3Z2 2y
  
  Same
2. @CcxCZ 2y
  
  JS is a suck at data types
3. Денис 2y
  
  const data = await query({ select: { where: [ { column: "status", value: "paid" }, { column: "name", value: "bob" } ], limit: 5 } });
  
  @Vincent_Hawks 2y
  
  is this the triple backtick block like in markdown?
  
  Денис 2y
  
  Yep, just open with `javascript
  
  @Vincent_Hawks 2y
  
  apparently it can autodetect the language
4. @GLXBX 2y
  
  Sounds like fun thing
@GLXBX 2y

Wow
@GLXBX 2y

But, I mean, why not?
@Jiujiteir0 2y

mfw I saw this
1. @callofvoid0 2y
  
  mfw ?
  
  @Jiujiteir0 2y
  
  my face when
@dsmagikswsa 2y

Is it fake?
1. dev_meme 2y
  
  You better pray for it being fake 👀
  
  @dsmagikswsa 2y
  
  Well …. hard to believe it can be true from the choice of jsx for SQL. Even style components use the backtick technique for css…
  
  @purplesyringa 2y
  
  I mean, styled-components use backticks because they are designed to be practical, as opposed to this
  
  @x4erem6a 2y
  
  I wonder how backticks are practical. Why use strings and write weird custom plugins to have at least syntax highlighting in them when you can just implement a dsl in JavaScript and get all of its extensive tooling for free?
  
  @purplesyringa 2y
  
  apparently because people want CSS, not something that looks like but isn't quite CSS
  
  @dsmagikswsa 2y
  
  Damn it becomes real now https://blogs.oracle.com/mysql/post/introducing-javascript-support-in-mysql
  
  @callofvoid0 2y
  
  wtf
Deleted Account 2y

lol… am I the only one thinking where’s the FROM?
1. @callofvoid0 2y
  
  or select what?
  
  Deleted Account 2y
  
  Probably select all if not specified 😂
@oljimenez 2y

const data = await.db .from("programming_languages") .select({ name: true, }) .where({ skill: "lower", }) .orderBy({ dev_count: "ASC" }) .limit(3) .execute(); Better?
1. @callofvoid0 2y
  
  fatal error
@paul_thunder 2y

Wtf is this?
1. @callofvoid0 2y
  
  jsqml
@azizhakberdiev 2y

Content-type: "query/select" Location: "http://whe.re?status=paid&name=bob" Content-length=5
@im_ali_pj 2y

select from which table?
1. @purplesyringa 2y
  
  THE table
  
  @purplesyringa 2y
  
  don't you know there is only one table?
  
  @purplesyringa 2y
  
  containing, among other columns, "table_id", which is itself linked to a title via a master meta-sub-table
  
  Deleted Account 2y
  
  Wonder what a Delete; would do
@edmorra 2y

See liquibase migrations, same xml style, although you can write native queries there too
@x4erem6a 2y

BTW JSX is really expressive and could've been used for so much more than just HTML if only it was standardized and properly supported in typescript.
Deleted Account 2y

It is
@Art3m_1502 2y

Canonical event
Deleted Account 2y

Lol.. some people are trying to implement this shit
1. Deleted Account 2y
  
  Reason what makes me hate tech world
  
  @CcxCZ 2y
  
  https://www.stilldrinking.org/programming-sucks
  
  Deleted Account 2y
  
  When I say I hate this tech world, I don't mean I hate programming. Programming is fun...love it.
@FunnyGuyU 2y

Waiting till this appears in the frontend pages lol
Deleted Account 2y

@riedlers_dev_bot

Use J and K for navigation

SQL, But Make It JSX

Why is this Frontend meme funny?

Level 1: Soup In A Cake Pan

Level 2: Tags For Queries

Level 3: Hydrate The Database

Description

Categories

Common Tags

Comments

SQL, But Make It JSX

Why is this Frontend meme funny?

Level 1: Soup In A Cake Pan

Level 2: Tags For Queries

Level 3: Hydrate The Database

Description

Categories

Common Tags

Comments

Related Memes

IDE Dark Themes Go Full Rave

Rubber Duck Debugging Reaches Its Breaking Point: 'Nothings Working Mr Duck'

Ad Networks as Westworld Directors: Shift the Page at the Perfect Tap