Articles
From React to Svelte - A Devshop's Journey
Whether you're a software developer or a CEO, you've likely heard the term "tech stack". So what is a tech stack? What are the elements of a tech stack? And why is it important to understand your tech stack? We'll answer (out of order, no less!) those questions in this week's article.
A tech stack is a combination of programming languages, frameworks, and tools used to develop and run web and mobile applications. It's a critical factor in software development that affects performance, scalability, and security, among others.
Let's dive into the details.
So what even is this tech stack? First, let's zoom out to the macro level. A macro tech stack refers to the collection of apps, websites and software suites that a company uses to accomplish business. Think quickbooks for accounting, Pipedrive for a CRM, Gmail suite for business tools, and so on. This is NOT what we are here to discuss. Now zoom in to the micro level.
This represents the technology used to enable a single piece of software. The term tech stack refers to a combination of programming languages, frameworks, libraries, databases, and other software components used to build a software application. These languages, frameworks, libraries, etc, often layer on top of each other to create your application or website. Hence, our layering of technologies makes up our tech stack.
Thanks Bing for the "multi-layered cake with beautiful decorations"
Think of your tech stack as a tasty cake, such as the [Bing] AI art we created above (I ran out of MidJourney credits, sorry). Just as a cake is made up of different layers with distinct functions, a tech stack is made up of different layers of tech and tools that work together to achieve a specific goal. The bottom layer of the cake provides the foundation, similar to the infrastructure layer of a tech stack, which includes the hardware, operating system, and network components. The middle layers of the cake, such as the filling or frosting, are akin to the development and middleware layers of the tech stack, which includes programming languages, frameworks, and libraries.
Finally, the top layer of the cake, which has all the glitz and glamor, is comparable to the user interface layer of a tech stack, which includes the graphical user interface (GUI) and the user experience (UX). Overall, just as a cake's layers work together to create a delectable treat, a tech stack's layers work together to create a delectable, and functional, piece of software.
Before we dive into the specifics of what elements make up a tech stack, it's important to understand the implications of whichever stack you decide to go with. When considering the list below, consider how your tech stack solves you needs today, and your future needs.
A tech stack that only meets today's needs and won't grow with you is a bad look.
Talent Pool: The tech stack you choose will affect which talent you attract. This one is personal, so it goes first! If you are developing using a less common tech stack, it will be much harder and much more expensive to draw the right talent.
Development speed: The tech stack you choose will impact how quickly you can develop your software. If you choose a tech stack that you or your team is not familiar with or is known to be more time intensive (here's looking at you Angular!), it could take more time to learn and develop in it.
Scalability: The tech stack you choose will affect how easily you can scale your software. Some tech stacks are better suited for smaller applications, while others are best for mass scale. And there are some tech stacks that can start small and go big, while others do not grow with you.
Performance: The tech stack you choose will impact your software's performance. Some languages are better suited for speed (such as C or C++), while others are better suited for ease of use (such as Python). Another example of this is no-code sites compared to custom sites. We once took over an existing website that leveraged the Wordpress Ecosystem. Their site required over 70+ wordpress plugins, which resulted in extremely slow loading times (A big no-no for websites and apps!). No-code exchanges performance for ease of use.
Integration: The tech stack you choose will affect your ability to integrate with other software and systems. If you do not go with a popular tech stack integration examples may not be available. This often means developers have to read wonderful, entertaining and very well written documentation so they can create their own interface. For example, React is a common framework which already has thousands of native integrations with 3rd party apps, such as Stripe, Storybook, ChartJS and TinyMCE.
Security: The tech stack you choose will affect your software's security. No one tech stack is necessarily more secure than the other, but each one will have trade-offs which should be considered.
For example, choosing a closed-source (vs open-sourced) tech stack can mean less open source communities are reporting bugs, providing fixes, and recommending security updates. This can lead to well known vulnerabilities that, if not addressed, can lead to security breaches.
One example, which affected several of us here at RedSky Engineering, was the 2017 Equifax data breach. Equifax, one of the largest credit reporting agencies in the United States, suffered a massive cyberattack that resulted in the theft of personal data, including names, social security numbers, birth dates, addresses, and driver's license numbers of over 147 million people.
The hackers were able to exploit a vulnerability in Equifax's Apache Struts web application framework, which had a known security flaw that had been fixed months before the attack. As a result of the breach, the company was forced to pay a $700 million settlement to the Federal Trade Commission and other agencies.
Each company's needs are going to be individual, so each of these will carry a different weight.
This is a very high-level description of the elements of a tech stack. If you are looking for a more detailed article on what options are available for each element, I would suggest looking at what heap.io or fullscale.io has written up.
The front end of a website or application is the visible part with which users interact. It is commonly referred to as the "client-side". The front end enables users to interact with buttons, dropdown menus, forms, and other graphical elements. Front-end development focuses on building the user interface experience, including the design and layout of the interface. To build these components, front-end developers use languages such as HTML, CSS, and JavaScript.The front-end components are designed to interact with the server-side components, commonly known as the "back end."
The back-end of a website typically contains the meat of the application. Unlike the frontend, the back-end is not visible to end-users because it's handled behind the scenes on a server. It's where many of the crucial functions that support the frontend occur. Using programming languages such as Java, Python, Ruby, and PHP, the back-end is responsible for tasks such as, storing data, processing data, integrations and handling frontend requests.
A back-end performs other functions, such as creating dynamic content, manipulating data, implementing security, user management and, of course, mass data storage. Ultimately, the back-end is equally, if not more important, than the front end.
When developing software, a database is a collection of organized data that allows for easy access, storage, retrieval, and manipulation. It is used to store large amounts of data that can be managed by various users of the database. Databases are the backbone of software and provide a way to store and manage data ranging from customer information to transaction records. There are a number of databases available for use.
Before we part ways, we'll explore which tech stack we selected and why for the app we developed for Mixhers.
Mobile App: Ionic Hybrid App utilizing React JS and a custom UI framework. Ease of use was a primary factor in developing this app. A hybrid application provides the greatest speed and flexibility because most of the development process can be done without a device.
Admin Site Front End: React JS and a custom UI framework.
Back-end: NodeJS + Typescript, Redis caching system, Proxy load balancer. This stack was chosen because of RedSky Engineering's familiarity and the performance benefits associated with a fully asynchronous programming language.
Database: MariaDB is used for the Relations Database Management System (RDBMS). MariaDB was selected because of its combination of high performance, cross platform compatibility and security features.
You can check out more of the details on the app and admin site at our Mixhers Portfolio Page.
We hope you enjoyed a different take on what a tech stack is and why it's important to you and your business. RedSky is a full stack development shop, meaning we can design, create and implement all aspects of your tech stack. We also have a wide skill set so we can support most tech stacks out there. We look forward to baking your tech stack cake!
In this episode, Josh and Tanner discuss some of the more "interesting people" they have interviewed during the hiring process and how they manage to separate the good interviewees from the bad.
In this episode, we discuss the value of code reviews and what happens when a developer pushes unchecked code.
In this episode, Ryan joins us to discuss layoffs and how they are currently affecting the world.