In this talk you will see how a Tooling Pipeline and Library Architecture could help you establish one Design Language into all your Applications and Products. We’ll talk about our Tooling Pipelines that we’ve to build up for our Library Development and how much the new UI5 tooling helped us to realize them. Additionally, we will share our Best Practices about how a Custom UI Library Architecture should look like to easily scale and automate some processes and lower the ramp-up time for new Developers. You will see how easy it could be to White Label your Products and which UI5 concepts, components, and paradigms you can use to be flexible and compliant to the Styleguides of your customer. At the end, you will see how the new Demokit can be used as an Entry point and documentation tool for your own Custom Library and you will see that Code documentation doesn’t have to be time-consuming. Live coding, Code structuring, Library Architectures and different Control Samples during this talk will lead you to one Question: Isn’t it time to build your own UI5 Library?

1. 11/17 – 1 / 20
sovanta AG, 28.06.2019
How to build the ultimate Custom Controls UI5 Library
Daniel Barthel, Sebastian Mahr

2. © sovanta AG 2019 2
Who we are ...
Daniel Barthel
Software Engineer
Daniel.Barthel@sovanta.com
• Development Lead of UI5 Custom Control
Library
• 2.5 years experience in OpenUI5
Sebastian Mahr
Software Engineer
Sebastian.Mahr@sovanta.com
• DevOps Lead of UI5 Custom Control Library
• 2.5 years experience in OpenUI5

3. © sovanta AG 2019 3
sovanta AG
Leading in SAP User Experience
simplicity first
Founded with the goal of fundamentally simplifying the way business software is used.
One team – all competences
Experts from the areas of business, design, and technology.
Design Driven Development
Standardized method set from ideation through to operation.
SHAPE® – systematic digitalization
Our building blocks for the development of user-centered business solutions.
§ UI5 Experience since 2013
§ 180 employees
§ 250 projects and 1 million users
§ 100 customers
§ Offices in Heidelberg, Hamburg and Buenos Aires
§ Close partnership with SAP in product development and technology
§ Awarded several times as top innovator

4. 11/17 – 4 / 20
Agenda

5. © sovanta AG 2019 5
What we will show
§ Painpoints in our first Library project
§ Improvements for our current Libraries
§ White-Label strategy and Theme concepts
§ Inhouse Tooling for development
§ Demokit extension for custom Library documentation

6. © sovanta AG 2019 6
What you should know
§ Basic Control development
§ Styling development

7. 11/17 – 7 / 20
Why we started building Custom Control Libraries

8. © sovanta AG 2019 8
The beginning of building Control Libraries ...
§ 1 Customer, multiple applications
§ Cluster often used controls, code and concepts
§ Reuse code instead of copy & paste in every application
§ Customer CI, Fiori Design not fitting to Customer Styleguide

9. © sovanta AG 2019 9
Issues we ran into ...
Development of new controls inside the application first
§ Most of the time with a lot of Business Logic
§ Copied it into the Library when needed somewhere else
We've build very specific Controls
§ Often not customizable / flexible enough
§ Build multiple Variants (e.g.
Button, LightButton, PanelWithHeader, ...)
§ Bad extensibility
§ Too many internal dependencies
One single Theme
Build on one specific UI5 Version
Developer driven Controls

10. 11/17 – 10 / 20
- Alan Cooper
"The value of a prototype is in the education it gives you, not
in the code itself."

11. 11/17 – 11 / 20
What we have learned

12. © sovanta AG 2019 12
Architecture is key ...
Design first, development second
§ Which controls do we need all the time ?
§ How should they behave ?
§ How should they look like ?
Architecture and planning
§ Which UI5 Control we can use as base ?
§ Define Properties, Events, Aggregations the control
need before development
Development
§ Cluster and encapsulate (e.g. own namespaces, ...)
§ Build lightweight controls
§ Avoid dependencies that you can't control

13. © sovanta AG 2019 13
Design Systems lay the foundation...
§ We’ve our own internally used Design System called
SHAPE®
§ A set of components, connected patterns and shared
practices, coherently organized to serve the purpose of
digital products.
§ We use Customer Design Systems as a base for Libraries to
fit their CI and Design specifications
§ Design Systems are good foundation for the communication
between Design and Development

14. © sovanta AG 2019 14
Our demands on UI5 Libraries ...
§ Coexistence with UI5
§ White-Label possibilities
§ Easy to use development Tools
§ Documentation, a damn good documentation
§ No need to reinvent the wheel
§ Know your framework
§ Use the features
§ Stay by the standard

15. 11/17 – 15 / 20
Themes and White-Labeling

16. © sovanta AG 2019 16
Theme Designer
Base Theme Customer Theme
Theming/White-Labeling
Requirements
§ Extension of UI5 Theme (Theme Designer)
§ Standard UI5 Control styling can coexist with Library Control styling

17. © sovanta AG 2019 17
Base Theme
Base Theme architecture
Includes Font, Color, Layout, Spacing definitions
One LESS-File for each control
Base-Theme color definition Base-Theme color usage

18. © sovanta AG 2019 18
Customer Theme
Customer Theme extension
Easy to set up
Fully flexible to customize
Customer Theme needs a animation that was not designed in the base themeCustomer-Theme color redefinition

19. © sovanta AG 2019 19
Control styling
Minimum overstyle of extended controls
Encapsulate all style Rules via distinct CSS Class
Control.lessControl.js

20. 11/17 – 20 / 20
Tooling

21. © sovanta AG 2019 21
Tooling
Tooling for assisting the library development
Currently grunt base
Tasks for the building process
§ Sync theme less files with the controls in the library
§ Update Control samples
§ Register Iconfont
§ Update the test suite with all unit tests
§ Run UI5 CLI tooling
§ NPM deployment

22. © sovanta AG 2019 22
Tooling
Tooling for assisting the library development
Tasks for the developer
§ Add Control
§ Add Sample
§ Add Unit Test
§ Delete Control
Add Control
</> Control.js
</> Sample
</> …
</> UnitTest.js
</> Controll.less

23. © sovanta AG 2019 23
Tooling
UI5-Tooling
Rootproject
§ Control library
§ Theme x
§ Theme y
§ …
UI5 YAML is included in every module
Subfolder (Library, Themes) managed as dependencies

24. 11/17 – 24 / 20
Custom Demokit / Documentation

25. © sovanta AG 2019 25
Demokit
Demokit extension as documentation tool
§ Hook into UI5 Demokit
§ Use Demokit to show custom Library Documentation
§ Provide custom Samples
§ Theme change
§ Show external Iconfonts in Icon Explorer

26. © sovanta AG 2019 26
Summary ...
What we‘ve shown today
Development process with
Design and Architecture
White-Label concepts and
Theme strategies
Supporting development
and Build Tooling
Demokit documentation for
custom Libraries

27. © sovanta AG 2019 27
We are hiring …
www.github.com/sovantaTel. +49 (0)6221 18733-0
Fax +49 (0)6221 18733-44
info@sovanta.com
www.sovanta.com
sovanta AG
X-House

28. 11/17 – 28 / 20
Have a nice UI5Con