The kaBeech Heart - click to go to Home Page
The kaBeech Heart - click to go to Home Page
Beechy, kaBeech's avatar
Menu Button

What is the POQD stack?

This website is built using next-generation JavaScript software in a group (or 'stack') I like to call 'POQD'

I first learned professional web development using a software stack known as MERN, which stands for 'MongoDB, Express, React, and Node.js'. The POQD stack is a similar concept using newer technology and stands for 'PostgreSQL, Oak, Qwik, and Deno'

Comparing MERN and POQD

MERNPOQD
DatabaseMongoDBPostgreSQL
BackendExpressOak
FrontendReactQwik
RuntimeNode.jsDeno

Database

MongoDB

Non-Relational Database

PostgreSQL

Relational Database

Why PostgreSQL?

The more I grow, the less dogmatic I get about database choices. These days non-relational databases like MongoDB (using NoSQL) can do most of what relational databases like Postgres (using SQL) do and vice versa. Because of this, the remainder of this section is more flowery and less science-based than the others - feel free to skip ahead. You've been warned

MongoDB's great. It's easy to use, has friendly documentation, and notably offers a very accessible multi-cloud developer data platform in MongoDB Atlas

But I just like Postgres. It feels good on my brain. The color scheme is nice. The community is great. The elephant is a kind and noble creature

SQL just makes sense to me. I understand I'm in the minority here, but I'm more likely to feel frustrated than relieved when working in a system that tries to map program execution onto natural language. Not that MongoDB does that per se, but the firm and simple logic of SQL feels good to me

SQL is fast and it provides easy methods to combine data. The advantages of NoSQL are that it's easily expansible and you don't have to plan ahead as much

Again, these days both SQL and NoSQL have evolved to the point that they're both viable options for many projects. It just depends on how you prefer to think about your data. It sounds like an old kōan by now: do you want a document full of tables (MongoDB) or a table full of documents (Postgres)?

I like speed by default and I'm the kind of person who both a) likes to plan ahead before actually building a project and b) doesn't mind rewriting things if I really need to. PostgreSQL for me, please

Backend

Express

Middleware framework for Node.js

Oak

Middleware framework for Deno

Why Oak?

Oak does exactly what I want, when I want, and nothing else. It is a middleware framework, which means I can patch together functions to enhance the functionality of the runtime (in this case Deno) when I want to, and leave out unnecessary code when I don't

This developer experience feels natural to me. It reminds me of chaining together guitar effects on a pedal board

Now, the same is true for Express, but Oak is designed to be used with Deno! There are some nice things about the way Oak works (many inherited from its spiritual predecessor in Node, Koa), but at the end of the day, I mostly use Oak because it's the most widely-used and supported analog to Express in Deno Land

Frontend

React

Unopinionated, component-based frontend JavaScript library

Next.js

Web development framework for React with opinionated routing. Uses server-side rendering to create static pages. Responsive web design is made possible by hydrating components

Qwik

Unopinionated, component-based frontend JavaScript framework. Uses server-side rendering to create static pages. Responsive web design is made possible through resumability

Qwik City

Web development framework for Qwik with opinionated routing

Why Qwik?

Because it's fast! How is it so fast? Resumability!

Traditional server-side rendered applications use a process called hydration to inject interactivity into static pages. Qwik takes a different approach by pausing interactive elements during execution on the server and sending them as serialized HTML to be resumed in the browser

How does Hydration work?

(Used by Next.js)

  1. 1. A static site is generated on the server
  2. 2. When it's ready, the server sends three pieces of information (potentially as lots of JavaScript) to the client in order to run the application: the page's structure (Component Tree), what's currently on the page (Application State), and the bits of logic that respond to a user's interaction (Event Listeners)
  3. 3. The client downloads the HTML for the page. This part is FAST!
  4. 4. The client then downloads all the JavaScript. This can be a lot of JavaScript, which can take a while to download, so this part is SLOW!
  5. 5. The client then parses all the JavaScript. That means the client looks at the JavaScript and has to figure out what the heck is going on. This can be a lot of JavaScript to understand, so this part is SLOW!
  6. 6. The client then executes all the JavaScript. This means the client does what the JavaScript says to catch the page up to the point where the server had it. This can be a lot to do, so this part is SLOW!
  7. 7. The client then binds all the Event Listeners to their respective pieces of code. The process of doing this is pretty quick, but there could potentially be a lot of Listeners, so we'll say this part is MEDIUM FAST!
  8. 8. At this point the user can view and interact with the application

How does Resumability work?

(Used by Qwik)

  1. 1. A static site is generated on the server
  2. 2. When it's ready, the server pauses execution of the code. It then takes all the JavaScript that would be sent to the client and serializes it (including its state) into HTML. Only this HTML gets sent to the client
  3. 3. The client downloads this HTML from the server and displays it. Doing so, it resumes execution of the code in the browser, using the serialized JavaScript. This part is FAST!
  4. 4. At this point the user can view and interact with the application
  5. 5. If a part of the code is interactive, the necessary JavaScript is downloaded and run only right when it needs to be

Runtime

Node.js

Backend JavaScript runtime environment created by Ryan Dahl in 2009. Commonly used with a package manager like npm or Yarn. Written in C

Deno

Backend JavaScript/TypeScript runtime environment and package manager created by Ryan Dahl in 2018. Written in Rust

Why Deno?

Fast, secure, robust. Less configuring, more doing. Typescript works right out of the box!

For example, Deno assumes that it doesn't have permission to do pretty much anything without asking. Consent is sexy, including in data privacy and security. Deno supports ES Modules by default rather than CommonJS, which encourages future-facing development. Deno caches needed dependencies on your file system, doing away with super-dense node_modules directories

Deno is created by the same person who created the industry standard runtime that it replaces and it's supported by a thriving, passionate community. It's already being adopted by industry leaders like Netlify, who uses it to power their edge functions. Competing with Node is an ambitious task, but Deno is here to stay

Now, all that being said, the Number One reason I use Deno is... because I'm lazy

When I start building a project, I don't want to spend time setting up my linter, formatter, test runner, and TypeScript compiler. I want to work on my project!

Thankfully, Deno takes care of all of that for me and I can start building silly language games right away!

Summary

Okay, but give it to me in a nutshell. Why do you use POQD?

1. It's Accessible for Developers

I value tools that enable me to start working right away. The less time I have to use at the start of a new project to configure my setup and learn new methods of doing things, the better. Getting to focus on the meat of my project quickly pays dividends

POQD has a low configuration overhead. Instead of having to set up a TypeScript compiler, a linter, a package manager, a bundler, and so forth, it's already built in!

POQD is easy to learn! The next-generation software it uses was designed to be familiar to those using software in the MERN stack. If you're comfortable with MERN, you're most of the way there already!

2. It's Performant

Sites built with POQD can be fast. Like really really fast. BLAZINGLY FAST, some might say

Go ahead and click around this site. See how much time you spend waiting for a page to load. Run a Lighthouse test (Performance usually hovers around 100 for me). There may not be many fancy bells and whistles here yet, but I have more content planned that will demonstrate further how quick and responsive it is. To get a taste for now, try playing around with this flower

3. It's Smart

The software in POQD is built in a way that encourages good coding practices. I'll give a couple examples:

Example 1: Deno only supports URLs for loading dependencies (as opposed to Node, which supports both URLs and modules). Why would I want to use a tool that does less things? Well, (perhaps obviously), browsers also only support URLs. Using a runtime that loads dependencies in the same way a browser does forces me to write code that is more easily consumable by browsers

Maybe the code I'm writing isn't expected to run on a browser. But we all know that plans evolve, and writing code this way allows me to be more modular in case a browser may want to consume my code someday

Example 2: Deno restricts file system and network access by default. That means if I use Deno to run a program that sends information over my network (without explicitly saying it can do that), Deno will ask first before sending any info. This may be a small annoyance if you forget to allow permission - and 'deno run --allow-read --allow-net app' may be more keystrokes than 'npm run app' - but the peace of mind knowing I won't accidentally send data where I don't mean to is worth it to me

Example 3: Qwik uses symbolic slots. Qwik renders parents and children in perfect isolation. This means it can render the parent component without re-rendering the children and vice versa

However, because slots are symbolic, the children can NOT be read or transformed by the components, like is possible in React. This means if you're a lazy kaBeech just hacking together a website real fast, you might hit a point where your mind is screaming "Why can't I just pass this state in to every possible child of this slot component the way I can with React????"

But after a minute (you are a very smart and attractive kaBeech after all), you'll start to ask yourself "Okay, but why do I need to pass state to components that I haven't even built yet?" And then you'll realize that you could structure the whole thing in a more organized, more performant way

I like tools that encourage me to grow ♡

<-- Back to Tech

PostgreSQL Oak Qwik Deno Back
Menu Button