What is Atlaskit??

Their site just assumes every visitor already knows what it is or has the time to fart around for hours trying to figure out what it’s for. I don’t have that time.

Atlas Kit is a React-based UI library / toolkit that we use in our cloud products and that we make available to third-party app developers to incorporate into their Atlassian apps. The UI library is built according to the Atlassian Design Guidelines (ADG). Atlas Kit has a whole bunch of components and APIs for building rich designs and interfaces that are consistent with our products’ design and experience.

For example, if you want to render a drop-down menu, you’d use the Dropdown menu component. In the docs, you can see examples of a rendered drop-down, as well as example code for generating it. This is true across all (or at least most) of the other components, too.

2 Likes

Thanks nmansilla,

Are Atlassian “apps” the same as add-ons or plugins?

Ah, the taxonomy. So, yes.

apps = [ “add-ons”, “plugins”, “integrations” ]

Guessing you’re new to the whole thing… so, here’s a little info that could also help. If you’re building for our server (on-premises) products, your app will utilize the Plug-in (P2) framework - where your app runs within an internal OSGi container, on the customer’s server instance. Your app will also have access to the product’s REST API.

If you’re building an app for our cloud products, your app will utilize the Connect framework (see Jira docs) - where your app will leverage Connect for installation, authentication, and seamless integration into the UI. Apps built for the cloud require you host your application backend in the cloud (on your own architecture – thus, you can build in any language you want on your backend). Your app also has access to the product REST API – callable from your cloud backend, or from within your integrated front-end. If you’re just starting out, and you’re building for Jira cloud, I recommend you check out the getting started guide linked at the top of this paragraph.

3 Likes

Yeah, I’m a little new. Ok, so what is an “integration”?

Also, can/should Atlas Kit be used in place of the AUI components? Is one preferred over the other?

We typically use the term integration in the context of a backend integration. Meaning that an app is you’re running/hosted on your end (i.e. at your own hosting provider), and you access data from Atlassian via the API to incorporate into your backend app (as opposed to an app that’s running within the UI of the Atlassian product). It’s just nomenclature – and not an axiom. Depending on what type of developer you are, what era you were born in, often determines which term you use. :slight_smile:

1 Like

Hi,

Is there any sample example where Jira cloud app developed in node using Atlaskit (React) instead of AUI?

Hi @AmmarHassan!

I’m not sure if there are guides published on developer.atlassian.com that make extensive use of Atlaskit in their UI. The getting started tutorial for a Jira Cloud app makes use of Atlaskit’s CSS, which is a gentle introduction.

If you’re interested in learning from other people’s code, I’d suggest one of these repositories:

If you’re interested more in learning from other developer’s experience, I’d recommend checking the following things:

@krzysztof.skoropada from Deviniti wrote a blog about their experience using Atlaskit to implement their apps on Medium: https://medium.com/@kskoropada/building-user-interfaces-of-atlassian-apps-with-atlaskit-and-aui-212975921511

@naiara from Comalatech presented at Atlascamp about moving from AUI to Atlaskit in their apps, too: https://www.atlassian.com/atlascamp/watch-sessions/2019/advanced-app-development/from-aui-to-atlaskit-streamlining-development-for-server-cloud-apps

In case you wanted to use Atlaskit in Server, too, @scott.dudley from Cenote Labs gave a presentation to help you get started: https://www.youtube.com/watch?v=7pIudmkpHh0

I hope that gives you a few leads to get off the ground!

Hi Daz,

Thanks for the reply, It was quite helpful for me to get started.

Regards,

Ammar Hassan.