Building Faster With Your Team's UI Kit
•
0 likes•9,328 views
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.
Recommended
More Related Content
What's hot
What's hot (20)
Similar to Building Faster With Your Team's UI Kit
Similar to Building Faster With Your Team's UI Kit (20)
More from Atlassian
More from Atlassian (20)
Recently uploaded
Recently uploaded (20)
Building Faster With Your Team's UI Kit
- 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?
- 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!