The Ultimate Modern Tech Stack for Atlassian Cloud Apps

Introduction

As Atlassian Cloud continues to evolve in 2024, the opportunities for developers to build custom apps for the Atlassian Marketplace are more exciting than ever. However, creating a truly robust and efficient app for Atlassian Cloud applications like Jira or Confluence requires more than basic JavaScript skills. It involves selecting the right tools and technologies that not only meet current needs but are also positioned for future growth.

So, what does the ideal tech stack for Atlassian Cloud app development in 2024 look like?

In this article, we’ll dive deep into the components of a modern development tech stack, including front-end and back-end technologies, testing frameworks, and deployment tools. We’ll also explore how to start small while laying the groundwork for future scalability. While this tech stack is somewhat opinionated, it’s grounded in proven best practices and shaped by my personal experience as a seasoned Atlassian Cloud developer.

Essential Tech Stack for Atlassian Cloud App Development

Our goal is to create a tech stack that caters to developers' needs by focusing on three key areas:

• Modern Tech Stack: Popular languages, frameworks, and libraries.
• Efficient and Comfortable Development Cycle: Tools that streamline your workflow.
• Code Maintainability and Debugging: Approaches that make code easier to maintain and debug.

To ensure these recommendations are well-rounded, I’ll draw from several sources: insights from The State of JavaScript 2023 (https://2023.stateofjs.com/), feedback from the Atlassian Developer Community (https://community.developer.atlassian.com/), and my own experiences. Each section will break down the most suitable options, helping you make informed decisions as you build for Atlassian Cloud.

Front-End

Language

For front-end development, the choice typically comes down to JavaScript or TypeScript. While most of Atlassian’s documentation examples still use JavaScript, it's worth focusing on TypeScript.

Why TypeScript: TypeScript's static typing, interfaces, enums, and robust tooling support lead to fewer bugs, better code quality, and enhanced productivity, making it ideal for large projects.

Dependency Manager

Tools like Yarn or npm are used to manage project dependencies and packages. While either works, I recommend Yarn.

Why Yarn: In our experience, Yarn outperforms npm, especially when managing monorepos with multiple projects and dependencies.

Linting

Linting tools help enforce coding standards. For a TypeScript project, ESLint is the best choice — it's widely used and highly customizable.

Why ESLint: ESLint ensures a consistent coding style, which is crucial when multiple developers are involved. It also helps prevent common coding mistakes.

Formatting

Code formatters like Prettier or dprint automate formatting to maintain consistency. While formatting can spark endless debates in teams, to keep things simple, I suggest using ESLint with the eslint-stylistic plugin for rules on indentation, quotes, and semicolons. The ESLint team now recommends this plugin for formatting.

Unit Tests

Unit testing frameworks allow you to test individual parts of your front-end code. I recommend Vitest, which integrates seamlessly with Vite (our chosen build tool).

Why Vitest: Vitest offers a zero-config approach and high performance, making it easy to write fast, reliable tests. Combined with Testing Library, it simplifies UI interaction testing. Vitest is also one of the fastest-growing testing frameworks, as reported in The State of JavaScript 2023.

Framework

For front-end frameworks, options include React, Angular, and Vue. React is the clear leader.

Why React 18: Atlassian uses React internally, and Atlaskit, its UI components library, is built with React. It makes sense to align with this choice, as it allows you to create complex, dynamic interfaces easily. We'll cover Forge UI component options in more detail in future articles.

Build

Build tools compile and bundle your front-end code for production. Options include Vite, Webpack, and Parcel.

Why Vite: Vite optimizes build times and ensures all team members use the same dependencies, reducing versioning issues. Vite is also highly popular and fast-growing, as noted in The State of JavaScript 2023.

UI Library

For creating a UI that feels native to Atlassian products like Jira and Confluence, Atlaskit is your best option.

Why Atlaskit: It's a UI library designed for seamless integration with Atlassian’s ecosystem, supporting both dark and light themes out of the box.

State Manager

Managing state is key in modern front-end applications. Options include Redux, Recoil, and the React Context API. The choice depends on personal preference, but I recommend giving RTK Query a try — I'm a fan.

Back-End

Now that we’ve made our decisions for the front end, it makes sense to reuse as many of the same tools as possible for the back end. Fewer tools mean less time spent debating code style rules and more time focusing on development.

So, let’s apply the same approach to the back end when it comes to language, dependency manager, linting, formatting, unit tests, and build tools. If we’ve chosen TypeScript for the front end, why use anything else for the back end? Using one language across the entire app is the most efficient approach. After some trial and error, I’ve found a solid way to implement TypeScript in Forge, so we can confidently say it will be our go-to language for the front end, back end, and even end-to-end testing.

Naturally, it also makes sense to use the same dependency manager for all parts of the app. Yarn, which we’ve chosen for the front end, can easily handle back-end dependencies in the Forge app as well.

What’s left for the back end?

Framework

We have a few options: Atlassian Connect and Atlassian Forge. Forge, built and maintained by Atlassian, allows you to quickly develop, host, and run apps within the Atlassian cloud. One of its greatest strengths is that it handles much of the infrastructure, enabling you to focus on business logic and front-end functionality. When it comes to the framework, Forge is the best option—and fortunately, it’s a good one.

Why Forge: Integrated security, automatic scaling, and direct interaction with Atlassian APIs and products make Forge an indispensable part of this tech stack.

Database

Data Storage

To fully leverage Forge's built-in data residency and security features, it's best to store app-related data either in Forge Storage or within the application itself. For a more in-depth exploration, check out my previous guide on data storage options for Atlassian Cloud applications.

Why Forge Storage: Forge Storage is integrated with Atlassian's cloud infrastructure, providing automatic scalability, security, and compliance with Atlassian's data residency requirements. It ensures that your app data is secure, consistent, and readily accessible without the need to manage an external database.

Monorepo

Tool

Managing multiple projects or packages in a single repository is streamlined by tools like Yarn Workspaces, Nx, or Lerna.

Yarn Workspaces is an excellent way to organize code across multiple projects in a single repository. This structure simplifies code sharing between projects and ensures that shared libraries, such as types, constants, and utilities, are easily maintained in a common environment.

Why Yarn Workspaces: Yarn Workspaces simplify dependency management across multiple projects in a monorepo setup, reducing redundancy and ensuring consistency. By centralizing your dependencies, it’s easier to share code between the front end, back end, and common libraries without repetitive configurations or version conflicts.

E2E Tests (End-to-End Testing)

Framework

End-to-end testing frameworks validate the entire application flow, including both front-end and back-end components. Popular options include Puppeteer, Cypress, and Playwright. Among these, Playwright has gained the most momentum in terms of interest, positive feedback, and usage. I made the switch from Puppeteer to Playwright a few years ago and have never regretted it.

Why Playwright: Playwright offers several advantages, such as better multi-browser support (including Chromium, Firefox, and WebKit) and powerful capabilities for parallel testing, making it ideal for complex modern web apps. Its API is developer-friendly, and it handles cross-browser testing efficiently. Additionally, Playwright's community and toolset continue to grow rapidly, offering strong future-proofing for your test strategy.

CI/CD (Continuous Integration/Continuous Deployment)

Application

CI/CD platforms automate testing, building, and deployment processes, with popular choices being GitHub Actions, Jenkins, and CircleCI. Since we’re building for the Atlassian ecosystem, it’s worth exploring Bitbucket Cloud with Pipelines for seamless integration.

Why Bitbucket Pipelines: Bitbucket Pipelines is tightly integrated with the Atlassian suite, allowing for a smoother workflow when building Forge apps. It offers native support for continuous deployment into the Atlassian Cloud environment, reducing the complexity of setting up and managing external CI/CD pipelines. This choice ensures compatibility, simplicity, and speed when pushing code into production.

Modern Tech Stack for Atlassian Cloud Development

As a result of our earlier review, here is a detailed breakdown of the recommended tech stack:

What makes this stack ideal (at least for me)?

This tech stack is crafted with scalability, efficiency, and maintainability in mind. Each tool and technology mentioned above adds unique value that enhances the overall development experience. The Forge framework simplifies cloud app deployment, while tools like Vite, React, and TypeScript accelerate development and help reduce bugs. Testing frameworks such as Vitest ensure your app remains robust, and UI libraries like Atlaskit facilitate seamless integration within the Atlassian ecosystem.

I’m actively working on further improvements, but this stack can already serve as a solid template for your next Forge app. You can check it out https://github.com/andrei-pisklenov/forge-starter. I’ll continue to refine it and share articles on how to use and adapt it for various needs. Any suggestions for improvements—whether through pull requests in the repository or comments here—are more than welcome!

I’d love to hear your thoughts:

• How are you developing Atlassian Cloud apps?
• What does your ideal tech stack for Atlassian Cloud app development look like?