Download to read offline
Uploaded byAtlassian
Building Faster With Your Team's UI Kit
The document discusses the development of a new UI kit for Tempo, highlighting the transition from older technologies to modern frameworks like React and Styled Components. Challenges included meeting tight deadlines and ensuring consistency across cloud and server platforms, as well as addressing issues with CSS and component complexity. The document emphasizes the importance of alignment between development and design teams and the benefits of having a custom UI kit to enhance developer autonomy and visual identity.
More Related Content
Similar to Building Faster With Your Team's UI Kit
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 andserver Tempo add-ons for Jira Tempo Budgets Server only Tempo Planner Cloud and server
- 3. Tempo goes tothe cloud
- 4. Away with theold 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 teamsworking 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 Wefelt 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 aUI-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 Atthat 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 newTempo 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 newTempo 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 newTempo 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.
- 13.
- 14.
- 15. Align on requirements Whowill 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 UIkit using React and Styled components Before Hybrid - Vanilla kit and React kit
- 17. Technologies and toolsused 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 tokeep 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 Bea 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 CSSthat 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 developmentis 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 ofbuilding 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!