Tired of rebuilding your brand's UI in every new app your team works on? Whatever happened to DRY? This is exactly the reason why you should use a robust UI kit, like the AtlasKit, or build your own from scratch. In this talk, Árni Freyr Snorrason, Developer and Team Lead at Tempo, will share Tempo's journey into the world of custom UI kits. He'll share how Tempo's growing visual identity for its products across multiple ecosystems, (most notably Jira Cloud and Jira Server) led to the decision to design, implement and maintain their very own Tempo UI kit, and also how the kit proved to be a crucial tool for developers to move faster and become more autonomous when developing front end features for cloud and server at the same time.

1. ÁRNI FREYR SNORRASON | TEAM LEAD | TEMPO
Building faster with your
team’s UI kit

2. Tempo Timesheets
Cloud and server
Tempo add-ons for Jira
Tempo Budgets
Server only
Tempo Planner
Cloud and server

3. Tempo goes to the cloud

4. Away with the old
Goodbye velocity templates,
jQuery, backbone
Exciting times for front end developers!
And in with the new
Hello React, Redux, and
Styled components
Rewrite
Almost all Tempo UI had to be
rewritten

5. $£#!@% deadlines
Many teams working on the rewrite
across two countries to meet the
deadline.
We had to
move fast
Deadlines
DRY
We need a UI-kit
AUI and AtlasKit

6. Don’t repeat yourself
We felt like we were creating the same
basic UI components again and again.
We had to
move fast
DRY
Deadlines
We need a UI-kit
AUI and AtlasKit

7. We need a UI-kit
Finally decided to only use Bootstrap
and react-bootstrap.
We had to
move fast
We need a UI-kit
Deadlines
DRY
AUI and AtlasKit

8. AUI and AtlasKit
At that time, we did not feel that AUI
suited our needs, and the AtlasKit was
still in its very early days.
We had to
move fast
AUI and AtlasKit
Deadlines
DRY
AUI and AtlasKit
We need a UI-kit

9. In 2017 new Tempo is
released to the cloud
Mid 2017, the rewrite is officially finished.
What about server?
One codebase for cloud and server, write once for
both platforms at the same time
Bootstrap is a problem
CSS bleed causes problems on server. Also,
doesn’t look very good
The rewrite is
finished,
what now?

10. In 2017 new Tempo is
released to the cloud
Mid 2017, the rewrite is officially finished.
What about server?
One codebase for cloud and server, write once for
both platforms at the same time
Bootstrap is a problem
CSS bleed causes problems on server. Also,
doesn’t look very good
The rewrite is
finished,
what now?

11. In 2017 new Tempo is
released to the cloud
Mid 2017, the rewrite is officially finished.
What about server?
One codebase for cloud and server, write once for
both platforms at the same time
Bootstrap is a problem
CSS bleed causes problems on server. Also,
doesn’t look very good
The rewrite is
finished,
what now?

12. Tempo Design language

13. UI discipline

14. But how?

15. Align on requirements
Who will use it? Will it be
open source? How complex
can the components in the kit
be?
What is most important in the beginning?
Align on technology
This is where we made a
costly mistake
Designers
Work closely with designers,
get sketch files, share vision
of how it should look like.

16. After
Only one UI kit using React and Styled
components
Before
Hybrid - Vanilla kit and React kit

17. Technologies and tools used in the Tempo UI kit
Bitbucket Pipelines
Repository is hosted on Bitbucket and
pipelines are awesome
Styled components
I cannot stress this enough
Storybook
Interactive documentation for the kit
Jest
Unit testing in React

18. Lerna
Package management
library to keep dependencies
in sync. Conventional
commits to generate
changelogs
Husky
Lint commit messages, so
we definitely follow
conventional commits
Prettier & EsLint
Code formatting. Lint-staged
rurns before push
Tools that improved the dev experience

25. Some best practices
Be a part of it
Encourage devs to contribute to the
kit
Carefully construct your APIs
The UI kit will be one of the most
important APIs at your company
Be mindful of complexity
Hard to maintain huge components.
Focus on reusability
Fix bugs in the kit
Don’t work around bugs where you
use the components, fix the source!

26. Two UI kits
CSS that bleeds everywhere
Too complex components
Too many lib dependencies
React + Styled components
Prettier + EsLint
Lerna
Work closely with designers
Alignment between UI devs
Make it visible in-house
Documentation (storybook)
Generate changelogs
DO’S DONT’S

27. Maintain
Front end development is
rapidly evolving, maintaining
a complex UI kit takes time
Why should you NOT build your own UI kit?
AtlasKit
A great, robust UI kit that all
Atlassian only vendors should
use
Team capacity
This takes time and effort,
needs a designer and some
devs

28. Biggest benefits of building your own UI kit
Move faster
No DRY.
More developer autonomy
Developers have different skillsets
Complete control of your UI
You are your own champion. You can
establish your own visual identity
One place to change/fix it all
Change the look and feel of all your
products by only changing your UI kit

29. ÁRNI FREYR SNORRASON | TEAM LEAD | TEMPO
Thank you!