Willhaben Markup Language WHML

We usually associate changes in the UI with frontend developers, but that's not always true. At willhaben we have developed a new markup language that helped us to decouple the UI from the frontend team, empowering the API devs to have the knowledge as well for the UI, as well as the project managers. In my talk I will show you the code of an app developed with the open source tool kit from SUI (Schibted User Interface) and the new WHML (willhaben markup language), so you can see how we build our user interfaces dynamically from an API.

YouTube video of the talk: https://www.youtube.com/watch?v=tJXzyHHh4pc

Transcript

1. WHML The new markup language at willhaben Adrián Bolonio willhaben markup language
2. Adrián Bolonio Frontend Developer Madrid (Spain) @bolonio github.com/bolonio
3. WHML (willhaben markup language)
4. WHML (willhaben markup language) Markup API
5. WHML (willhaben markup language) • Key-value pair to be send to the API: attributeKey • It is a required and readOnly field • The type of the INPUT is “text” • Allows reuse of types that differ only marginally Children • Other elements (recursive structure) • The placeholder is an element inside the children Type • Defines ONLY one element type: INPUT Properties
6. WHML (willhaben markup language) Information the server is NOT sending: • Padding, borders, colors… • Any other layout information: • Label position: right/left or above/below • Titel style: bold or not bold • Hint-text: smaller/bigger Where is this information coming from? • Everything is in the WHML structure • “type”: “money” -> label is in the left side • “type”: “unit” -> label is in the right side
7. WHML (willhaben markup language) “type”: “money” “type”: “unit” “type”: “number” “type”: “text”
8. WHML (willhaben markup language)
9. WHML (willhaben markup language)
10. WHML (willhaben markup language) whml-input whml-group whml-address whml-text dsl Markup API Component Layout Factory
11. WHML (willhaben markup language) whml-input whml-group whml-address whml-text dsl Markup API Component Layout Factory SSR SUI
12. SUI https://github.com/SUI-Components/sui Schibsted User Interface
13. SUI (Schibsted User Interface) SUI Philosophy SUI Tools Involves FE in producing a set of isolated tools that solve common FE development problems. One tool solves ONLY one problem. SUI Components The core principles: Open Source Mindset, Separation of concerns, Finest granularity. Involves FE and UX in producing a common set of UI components that are reusable, customizable and reliable.
14. SUI Tools Involves FE in producing a set of isolated tools that solve common FE development problems. One tool solves ONLY one problem.
15. SUI (Schibsted User Interface) SUI Components SUI Theme • A SUI Component is a presentational component. • Should be reusable in other part of the application. • Should not implement business logic. For example making a request to an external service. • SUI Theme is one of the keys of the convergence success. • It’s a “style specification” that doesn’t belong to any vertical. • All the aspects of an UI design were abstracted into a set of variables. All components use the same variables. Site Theme • Each site implement its own theme. Each theme only overwrites sui-theme variables (no css overwrite). • Themes are published via npm as private packages. • These packages are installed as dependencies on our sites.
16. DEMO
17. Want to know more? https://tech.willhaben.at/ https://github.com/bolonio/viennajs https://twitter.com/willhabentech https://github.com/SUI-Components/sui
18. THANKS Adrián Bolonio (@bolonio)