Organizations with multiple websites and apps often struggle with setting up their UI infrastructure. There are many questions without clear answers. Do we choose a third-party solution or roll our own? How do we write a scalable component toolkit? What is the proper way of publishing our toolkit? and more... A scalable UI component toolkit is essential for any organization looking to start building apps. It will keep the code clean and will enable accurate effort estimations. We will explore the process and the decisions involved in building a UI component toolkit and how to get it right the first time.

1. Building a UI Foundation
for Scalability
Eyal Ellenbogen
Web Developer and Architect
eyale@codevalue.net
@eyalel

2. A common occurrence
 Company X builds an app
 Foundation is lacking
 Development struggles
 Realizing the problem too late

3. What is a UI foundation?
A generic set of building blocks that
acts as the foundation for any app in
the organization

4. The problem with the common UI foundation
 Poorly implemented
 Doesn’t follow the design
 No ownership
 It won’t fit
 “We used bootstrap instead”

5. Your average Israeli Cyber Security
solution provider

6. FancyPants’ current status…
 Backend is production ready
 Frontend is SilverLight ¯_(ツ)_/¯
 Clients are fed up
 Where is the web app?!?!?

7. FancyPants’ current status…
 Backend is production ready
 Frontend is SilverLight ¯_(ツ)_/¯
 Clients are fed up
 Where is the web app?!?!?

8. The plan
Recruit a
team
Design and
style
Lay down
foundations
Build

9. The client-side team
They will do great things…

10. The core client team
BUILD THE
INFRASTRUCTURE
TEACH AND
GUIDE
BUILD THE APP MONITOR
DEVELOPMENT

11. Building the team
 Client-side work is hard
 Training isn’t enough
 Experience is a must

12. The UI dev
team
 Architect
 Team lead
 Scrum master
 QA
 Developers

13. The UX
Developer
 Part developer – part designer
 The bridge between two worlds
 Saves precious time

14. We have a core client team!

15. Design and style
Making it look good

16. UX team goes in first
 Skeleton and wireframe
 Style guide
 Core components
 Screens

17. What about using
what’s out there?
 Many 3rd party solutions out there
 What can we use?
 Trade offs?
 Reach a decision
 Final design considers chosen
libraries

18. We have a
design!
Now what?

19. Building the
foundation
The fun part

20. Let’s start with…
CSS

21. CSS is tricky
UNDERESTIMATED REQUIRES DISCIPLINE MANUAL WORK

22. CSS is tricky
UNDERESTIMATED REQUIRES DISCIPLINE MANUAL WORK

23. How to deal with CSS
 Education and training
 The right tools
 Methodology
 Avoid writing it
“The only good CSS is NOCSS” - AZ
Encapsulation
OOCSS/SMACSS

24. Utility first –
semantic second
• Composition over inheritance
• Constant CSS codebase size
• Safe - constraints are enforced
• Extractable components
.font-weight-bold {
font-weight: bold;
}
.text-align-center{
text-align: center;
}
.button {
font-weight: bold;
border: 1px solid #ccc;
padding: 10px;
}

25. npm install @fancypants/style-kit
eyal@fancy-laptop: ~ $

26. The UI toolkit
Taking it one step further

27. Why do we need a UI
toolkit?
 Reusable code
 Plug and play
 Separation of concerns
 Focus on building the app

28. UI toolkit
principles
 Follows the style guide
 Available
 Part of the build pipeline
 Robust and template-able
 Locked
 Documented and showcased

29. npm install @fancypants/ui-kit
eyal@fancy-laptop: ~ $

30. Foundation
done!

31. Building the app
While maintaining the core

32. The shift…
 UI foundation is mostly finished
 Ongoing patches
 New features

33. Don’t neglect the
foundation
 Assign ownership
 Use PRs and CRs
 Advertise new features

35. Summary
 Build a core client team
 UX + Dev = style guide
 Robust foundation
 Building and maintaining

36. Eyal Ellenbogen
Web Developer and Architect
eyale@codevalue.net
@eyalel