SQL, But Make It JSX

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

Description

Categories

Common Tags

Comments

SQL, But Make It JSX

Description

Categories

Common Tags

Comments

More like this

Documentation Writes a Paragraph to Avoid Saying 'Callback'

AWS Infrastructure as React JSX: Terraform Generation via Component Syntax

My Body Is a Machine That Turns React Code Into Race Conditions