Express vs Sinatra & Open-Source Considerations
Published: 2021-11-14 19:50:05

When considering the implications of becoming a web developer as a beginner like myself, one might think the oft touted “problem-solving” skill required of us begins and ends with the coding process itself. While coding is certainly at the crux of how we make our applications function, the forest comprising every branch of code we’ll eventually write slowly becomes apparent as we begin to build a new project. Actually, it becomes immediately apparent as soon as we ask ourselves the following question: what stack should we use to implement our code?

Let’s provide context to this end by comparing two web development frameworks: Express and Sinatra, and in the process highlight what considerations to make when comparing any two open source libraries so that fellow beginners may make a (slightly) more informed decision. And, like with any pseudo-coding approach to, say, retrieve a key from an array of objects, we begin by defining our questions first.

Framework

First things first- what is a framework? Our friends at Codecademy define the term broadly as a structure that you can build software on. Frameworks are commonly open sourced, although some in-house frameworks like Windows MFC do exist (this is becoming more and more outdated). Furthermore, there are two types of frameworks: web development and mobile development. For the purposes of this article, and since we’ve chosen to compare Express with Sinatra, we will focus on web development frameworks.

Middleware

When comparing our two aforementioned frameworks, it is important to consider a key element of the framework structure: middleware. As Kalex Bica describes it, middleware is the part of the framework structure responsible for letting our web applications interact with the rest of the world and not just [our] local machine. More specifically, it lets us transfer data with the browser using a set of functions that have access to request req and response res object- critical components of HTTP data transfer. One of the key distinctions between the Express framework and Sinatra lies in how each uses middleware. As we explore this, we’ll quickly discover our next question: what development environment do our frameworks exist in?

Integrated Development Environment (IDE)

An integrated development environment can be defined as collection of processes and tools that are used to develop the source code for a program or software product. These can include programming languages, testing libraries, debugging tools, production servers- in short, all of the overarching processes of developing an application. In other words, the IDE is a development tool that developers use to “write, build, test and debug software programs”. This is often applied with the use of text editors like VS Code or Sublime, but what’s important is that frameworks exist within an integrated development environment. We can now explore what distinguishes Express from Sinatra, and how each uses middleware respectively.

Express

The express framework is designed for the Node runtime environment, which adopts Javascript as the programming language. When running middleware functions using express, developers aren’t expected to implement their solutions using a standard method, meaning it is an un-opinionated framework. This allows for more flexibility when defining functions while still following the request/response cycle. HTTP requests are handled asynchronously which allows for optimized performance and reduced load times.

Sinatra

Leavins Programming notes that the Sinatra framework is small and focused, as well as easy to use. It runs with Ruby as the primary programming language, and is built on the Rack system, which results in compatibility with many Ruby libraries as well. HTTP requests are also handled asynchronously, and rely on fewer dependencies than express (more on this later).
If we put this to practice, what does our workflow look like?

Workflow/Implementation

Let’s reconsider the primary task of middleware before jumping into each workflow: handling requests and responses between our local environment and the browser. In other words, transferring data with HTTP!
For Express, our file might look something like this when establishing the server configuration:

Let’s observe the same process with Sinatra:

Routes

As we can see almost immediately, one certainly looks cleaner than the other. While our Express server’s configuration may quickly lead to many lines of code, it does have the benefit of organizing them modularly. Using Express’ build-in app method, GET and POST requests can be handled seamlessly in readable fashion. When we add our routes to Express, it will look something like this:

Sinatra organizes its routes similarly, but since we write with Ruby our requests are paired into blocks, and looks something like this:

The main takeaway here is that the same request/response objects are used to transfer HTTP, just composed with their respective languages. This distinction leads us to consider each framework’s code library- each consisting of their own methods and dependencies.

Library

When considering any open-source framework for a project, the associated code library is of primary concern. Libraries are the reason why developers use frameworks in the first place, since they consist of sets of methods and dependencies which help us avoid repetitive code. These methods and dependencies cover a vast array of applications (from caching to templates, data validation to the routing example we explored), so it is important to explore what the documentation offers us.

A brief summary of the Express.js documentation uncovers a host of middleware packages that deal with almost any problem developers can think of when it comes to the web; from body-parser to cookie sessions, to various security measures, express is considered by many developers as minimalist because of this approach to package-handling.
Sinatra, as mentioned before, operates using the Rack interface, and has a much smaller variety of middleware than Express. For straightforward projects that have little scope and aren’t concerned with growth so much as a robust system, developers can draw from Rack’s tried and true packages like Rack Parser, Commonlogger, and Rack Auth Basic And Digest.

Conclusion

After briefly exploring documentation for Express and Sinatra respectively, the takeaway, as with any documentation when considering what framework to choose, should focus on the scope of our project. Express is widely used and considered minimalist and effective, with large-scale applications and robust asynchronous handling. Sinatra is a much smaller framework, but great for basic data transfers and general purpose projects.
Overall, when comparing different open source frameworks the questions we ask will be the same- what does the documentation look like? What environment are we working with? What does the library offer us in terms of packages, and is the workflow easy to follow? Hopefully this article helps to elaborate on these questions, and can facilitate the process for your next project!

Sources

https://www.codecademy.com/resources/blog/what-is-a-framework/
https://www.suse.com/suse-defines/definition/development-environment/
https://leavinsprogramming.blogspot.com/2012/05/pros-and-cons-of-using-sinatra.html
https://developercommunity.visualstudio.com/t/microsoft-should-make-mfc-open-source/351420
https://dev.to/evybauer/express-vs-sinatra-what-s-the-best-framework-for-a-web-app-4cjd
https://medium.com/@kalex.bica/expressjs-vs-sinatra-e02d1496ba64
https://expressjs.com/en/api.html
https://expressjs.com/en/resources/middleware.html
sinatrarb.com
www.idtech.com
https://www.rubyguides.com/2018/09/rack-middleware/
https://expressjs.com/en/api.html
https://expressjs.com/en/resources/middleware.html
http://sinatrarb.com/documentation.html