JS vs Elixir Stack - Part 0

JS vs Elixir Stack - Part 0

The Experiment

@miz and I (@nert) are going to build a bookmark app. Yeah, yeah, i get it. It's another bookmark app but there is a twist, two actually.

First twist

We are going to be implementing the bookmark twice. @miz is going to implement the bookmark using a JS stack - React, GraphQL, Postgresql, NodeJS, and looking into possible Firebase implementation as well as Tailwind for faster UI development. And I am going to implement it using an elixir stack - elixir, phoenix, liveview postgresql, tail - to be precise.

Why 🤷🏽‍♀️? You might be asking. @miz and I have always been curious to see the pros and cons between these two stacks. But we were unable to find an apple to apple comparison. So we decided to conduct the experiment ourself. By building the same application @miz and I will be able to evaluate these two stacks accurately.

Second twist

This bookmark app is slightly different from the usual ones. Most bookmarks only allow you to save the information at hand but they overlook the background information as to why you are saving the bookmark. With this bookmark you can save the url and upload meta informations associated with it. The meta information can be:

  • Why are you saving this bookmark? Does it solve a weird bug that you are currently trying to debug?
  • Who's is the author of this post? Is it someone you follow on twitter or youtube?
  • What is this site about? Is it a site about js tutorials and tips?
  • Where? Are you saving this url for work or is it family related,?
  • When? Are you saving this url because you are in the middle of solving a critical issue and it's Q4 🤯!

The App


The wireframe is simple and rudimentary, but it conveys the main functionalities of the app:

  • Create a bookmark
  • Create a content or link an existing context
  • View and edit a bookmark
  • Search for bookmarks

Database schema

The database schema depicts the following relationships:

  • A user can have many bookmarks. A bookmark can belong to a single user.
  • A bookmark can have many contexts.
  • A contexts can have many bookmarks.

What are we comparing


Here we'll compare the time that was logged strictly for development. Think about the time you will charge a client on an hourly basis.

Time we are logging

  • Development
  • Testing

Time we aren't logging

  • Research
  • Setup
  • Deployment


Since the project will be hosted on different platform, we will be measuring the web speed of the application. Although it's on 100% accurate, it does allow for easy testing.

Developer Experience

This is subjective topic but it's worth expressing our experience building the application.