What is a development stack?
A web development stack is an ecosystem of technology. This ecosystem is a collection of languages, libraries and tools used to build your website. Like any ecosystem, its elements need to coexist efficiently and collaboratively. There are various languages and frameworks that you can use to develop a website, each with its unique capabilities, limitations and compatibilities.
When choosing a development stack for your project, there is no “one size fits all” solution. Factors like performance, security, scalability, functionality, the level of visual detail and of course your time and budget constraints, all play a role in determining the right stack for your project. Taking the time to consider your options can be hugely beneficial to the longevity of your project, saving you time and money in the long run.
We will take you through the different options you have available to you, the pros and cons of each, and what technologies pair well together depending on the needs of your project.
What to consider when choosing your stack
The primary focus of our approach in choosing a web development stack is “purpose” – what purpose or role is this website going to play for your business. We like to break this down into 3 main categories; visual, functional & flexible:
Visual – when attractiveness is key
This focus is for clients who want their website to be a visual representation of their company. We think of this as a storefront or business card; the first point of interaction that a potential customer has with your business. This focuses on portraying your company’s tone and values while being enticing and welcoming to visitors. It tends to be the primary focus for industries like hospitality, media, agencies, PR and marketing. If this is the primary objective for your website, then you need to carefully consider front-end frameworks. The front-end stack you choose will provide your users with an immersive experience, and give them a real taste of what your company is about. Here are some examples of some visually focused websites we have created; Zandbeek, Glasnost & Recharge
Functional – for process based platforms
Functional websites are purposeful; to provide a service to their users. This type of focus is primarily used on platforms, online tools, e-commerce or booking systems. They have a very defined purpose and so the focus for web development is mainly on back-end technologies. In this scenario, you want to carefully consider your database architecture, security, performance and usability. In these projects, looking nice isn’t always as important as working correctly and efficiently.
Flexible – for companies that are always evolving
A website can be dynamic and ever-changing. This is particularly apparent in industries like journalism, events or education. These online spaces are constantly evolving with new content. This calls for a somewhat different approach to web development. In this scenario, you need to consider scalability, usability, and most of all flexibility. When we are approached by clients with this focus, we like to develop websites that give them the control – creating flexible templates and blocks that they can use to update their content regularly, with very little technical ability. An example of this is Ron Mandos. We developed this website in a way in which the client can add new art exhibitions, viewing rooms and artist portfolios with ease.
Of course, it can be the case that you need to have all 3 of these categories a part of your website, but understanding the separate components can guide you towards where the importance lies in the purpose of your website. This clears the path for choosing a stack that nails the foundational objective of your project.
Next, we will evaluate the pros and cons of each technology, to try to best match their capabilities with the needs of your project.
Some options worth considering
Front-end frameworks and libraries:
Vue: This is an open-source JavaScript framework used to build user interfaces and single-page applications. A SPA (single page application) is an application that dynamically rewrites the contents of the page, rather than loading different static web pages. This means the page does not reload. Instead certain elements of the page change dynamically. Examples of this are Twitter, Gmail and Facebook. These applications are faster and provide a better user experience. The dynamic and component-based structure of SPA’s means you have an expanded ability to create smooth transitions and loading.
React: This is also an open-source Javascript framework, maintained by Facebook and used to create front-end user interfaces. The differences between React and Vue are mainly architectural and come down to developer preference in most cases. The main points to take away from the difference between the 2 is that React is more easily scalable, and Vue has more support, through online communities and 3rd party tools & plugins.
WebGL & ThreeJS: are JavaScript API’s used to render 2D & 3D graphics in a web browser. The browser rendering capabilities of WebGl & Three js means that you can push the boundaries of visual experience, transforming 2d web pages into a 3d interactive journey. Using this type of API rendering as a front-end technology for your website is a big undertaking for development, performance and visual content, but the results are visually superior to any other front-end technology.
Custom built themes: A lot of CMS (content management systems) and e-commerce platforms use themes. Basic themes are usually free, you can pay for premium ones, or you can develop your own. Theme development has become increasingly popular amongst businesses as it provides the custom aesthetic clients look for while utilising the functionality and content management of CMS like WordPress or Shopify.
Back-end frameworks and Content Management Systems
WordPress
According to wordpress.com, WordPress websites make up 35% of all websites. From simple blogs to fortune 500 companies, it is the most widely used web platform ever. Due to its long-standing popularity, WordPress has a large community backing, from forums to plugin and theme development, it’s been widely adopted by the web development community. Its minimal back-end UI makes it easy for non-technical users to make changes or update content. This appeals to a lot of clients.
With the recent Gutenberg update WordPress have adopted a component based structure of programming using React JS. This means it can be extended with custom components and other React based functionality.
Laravel
Laravel scores highly in comparison with other development frameworks, mainly due to its advanced features and development tools that facilitate rapid web application development. Laravel provides some out of the box features that every application needs. These features don’t just save time but provide a robust solution to key elements of a website. Most notably, its use of authentication means that developers can quickly create a safe and secure website. This can be a laborious and difficult task to manually implement, but Laravel’s authentication solution provides a robust and supported implementation model.
Drupal
Drupal is a CMS (Content Management System) and customizable platform used by enterprises worldwide. It’s a scalable, versatile, open-source framework that has been used to develop websites worldwide ranging from blogs to corporate, political and government sites.
Shopify
Shopify is an increasingly popular online store builder. It uses themes, which can be purchased or custom made. Shopify has both free and paid versions and has gained great community support. Shopify, WordPress with Woo Commerce & Magento are the most commonly used e-commerce platforms.
Express
Express JS is a lightweight back end technology used to handle database and API requests. It’s light, fast and works great with NODE js packages. Express is commonly used as a middleware between your application and its database
Ruby on Rails
Is an open-source, object-oriented back end technology. It’s great for quickly developing back-end for web applications and frameworks, but can lack in performance and scalability.
Future-Proofing your website
There are some long term variables to consider when choosing your web development stack. There are different ways to build a website, some more scalable and sustainable than others. It can be tempting from a time and cost standpoint, to want to get your website built and live as quickly as possible. This can lead to problems down the line, most of the time resulting in having to revamp completely within a couple of years.
Here at Studio Vi, we take a structural and methodical approach to building our websites. We design and develop our websites to be scalable, flexible and sustainable so that our clients can always build upon their website, rather than needing a new one.
Adding things like server-side rendering can really boost the longevity of your website. Server side rendering does not only increase the speed of your website drastically, but is great for search engine optimization and increases the security of your data. Server side rendering can also help with browser compatibility, meaning that future updates in browsers will be less likely to negatively affect your website. Some of the most popular frameworks for SSR are Nuxt for Vue JS, NEXT for React JS & Gatsby for Laravel/PHP.
The development techniques are not the only factor in the longevity of a website or application. Certain technologies are better supported than others. This support can be from the founders and creators or come from community sources such as libraries and plugins. The adoption of a certain technology determines its longevity.
The amount of upkeep and maintenance on each platform varies. A CMS like WordPress has been around for 18 years, meaning its major issues have already been fixed; any updates tend to be add ons or improvements, rather than stability fixes. The opposite is true for newer technologies, Angular JS, for instance, has a major release every 3 months and is already on its 12th major version. Although a powerful technology backed and created by Google, it means that regular and significant adjustments need to be made to keep your website up to date.
Our recommendations
Again, we jump back to the purpose of your website. As previously mentioned we break this down into 3 main categories; visual, functional & flexible. Your primary objective for your website will be the main determining factor in what stack you choose.
We build websites for a wide range of clients, spread across a vast array of industries; from hospitality to transport, PR agencies to clothing brands, each has a goal in mind and an idea or identity they want to communicate to their users. Our experience with these clients has provided us with an in-depth knowledge of what stack works best for you. Here are some of our suggestions:
Visual – WebGL & Three JS
If your focus is on the aesthetic, visual appeal, and portraying your identity and values to your users, then you want a visual stack. These stacks rely on animation capability, rendering capacity and performance. To achieve a highly visually appealing website takes more graphical processing power. This is why you need to consider the performance and architecture of your design.
The most powerful of these tools is WebGL. You can create next-level front end interfaces with this technology, using browsers to render complicated 3d models. A relatively new technology, it can be difficult to acquire skilful developers, but the results speak for themselves – check out our article on WebGL where we include some example websites.
Functional – Express, WooCommerce & Shopify
E-commerce, information and task-driven websites need to be designed and developed differently. Performance, user-friendliness and functionality are paramount. For this, we recommend certain technology stacks that are robust and scalable.
For e-commerce websites, there are 2 free and widely used options; WordPress with WooCommerce and Shopify. Both of these options use themes, which can be custom-built to give your online storefront an authentic feel. For larger e-commerce shops you might want to consider using Magento. It’s more expensive but more suited to larger companies with detailed inventory handling and auditing.
If your website is intended to provide a service, function, or information, you need to consider more technical areas of your website such as data handling. For this, we recommend building an express back-end. It’s light, fast, flexible and done in vanilla JS.
Flexible – WordPress custom built themes
Clients who want a flexible website tend to have regular content updates and conduct regular online campaigns. This is quite common amongst marketing and PR companies. For this, we recommend using WordPress CMS with a custom theme.
We build lightweight WordPress themes from scratch, giving you a unique and authentic font-end while having all the benefits of WordPress CMS. We build the back-end to be user friendly and structured so that our clients can change their online content without having to consult a developer.
Conclusion
We hope this article has helped you better understand your options when it comes to choosing the technology stack for your project. Our professional team has extensive experience with building websites and applications with different stacks. Feel free to reach out if you are looking for some advice on what web development stack to use for your project.