Choosing our Tech Stack

As a developer, I'm always interested in what apps use for their tech stack. It's wild to see where the app started compared to where the app is currently and how the tech stack has migrated along with it. I figured "let's be one of those companies" from the get go.

From the tech side, I find it inspiring to see what is possible with certain technology solutions. Fathom Analytics does an absolutely amazing job of inspiring and guiding while also being transparent. At Bugflow, there are a lot of moving parts which I find fascinating. Let's dive in!

Backend and API is Laravel

We've been working with Laravel since 4.2 and absolutely love it. Laravel provides the perfect amount of flexibility, while handling security and allowing you to design custom solutions without getting in the way. Not only have we been working with PHP for over 13 years, the future has never looked brighter. Laravel integrates with so many powerful technology packages, we can customize and scale to any level.

Bugflow is built with scalability in mind to handle a hundreds, if not thousands of simultaneous API requests and callbacks. Since PHP 8, performance has been the heart PHP releases and Laravel has been pushing the envelope. When it comes to scalability, Laravel works flawlessly with Redis and is flexible enough to be deployed across multiple servers.

We handle websockets with Soketi & Laravel

Soketi is a "blazing fast open-source WebSockets Server". Soketi provides a simple, scalable solution to handling real time communication between the frontend and backend of your application. Websockets are relatively tricky to deal with, but the combination of Laravel and Soketi make it a breeze!

Laravel has built in tools for handling websockets both on the front and back end. Since Soketi is built around the Pusher API, there's a PHP package that works out of the box. On the frontend, Laravel provides Laravel Echo which allows you to quickly connect to your backend websocket server for handling events.

When it comes to handling feedback, both on the Bugflow application side and on the Bugflow embed, we want it to be real time. The goal of Bugflow is to allow users to get feedback and solve bugs as quickly as possible. Using Soketi allows us to send feedback directly from the user's site, to the repo, ticketing app, support solution, etc. instantaneously. Upon handling the request, we can communicate right back to the user without them refreshing the page. This keeps all issues in sync at all times!

Redis handles our Queues and Caching

Redis orchestrates our application. From handling queued tasks to caching high-availability routes, Redis is behind the scenes making sure tasks get handled and data is available. When submitting visual feedback, there is a multiple step process that takes place. If we did this synchronously, without a queue, it could easily take 3-4 seconds leading to a stagnant, weird user experience. So we send those tasks off to a queue. This ensures we get the feedback to where it needs to go and the user, or project manager can continue to debug the application quickly.

When it comes to returning high availability data, Redis is there as well. Redis is a slick caching engine that can quickly return data that is needed so no one is left with a spinning icon when they are trying to get work done. Oh, and the best part? Redis' queues and caching are fully supported within Laravel so implementation came naturally.

Vue 3 & Tailwind For the UI

Vue 3 combined with the magic of Tailwind makes building our UI as quick and seamless as possible. Using Vue 3 allows us to build a wonderful user experience that makes the app as responsive and functional as possible. Tailwind makes it look beautiful.

When customers use Bugflow, there are a lot of moving parts to get set up. Vue 3 allows us to quickly wrap the functionality into a beautiful experience so the complexity is as hidden and beautiful as possible. Tailwind allows us to keep package size small, and UI clean.

Pure Javascript to build the Embed

But what about the embed, it's kind of the most important piece? The embed that allows users to submit visual feedback is 100% pure Javascript. No framework, just vanilla JS. We chose to build the embed this way so it's highly optimized and as light weight as possible. Designing the embed this way has multiple benefits. First, it's lightweight, so when you embed it on your site, it loads extremely fast. Second, we can easily wrap it in a native browser extension using the same code (more on that soon)!

Wrapping Up

A lot of thought went into tech stack that we chose. Being a two person company at the moment, we wanted to find the balance of speed and flexibility along with solid and secure. We didn't want to get caught in a situation where we couldn't maneuver our app to where we wanted it to go. Also, we strive for proper security and development principles.

I wanted to provide a little insight and transparency and to open the door for any questions on how to build apps or have any questions about using the tech we shared. There are many wonderful solutions out there and multiple ways to approach developing an app. If you have any questions about development or how Bugflow can help you speed up app development, DMs are open on Twitter (@danpastori).