UX as an API

UX as an API

William Bartlett

• e-mail: w.bartlett@treeptik.fr
• Twitter: @bartlettstarman
• LinkedIn: punkstarman
• GitHub: punkstarman

7 November, 2019 William Bartlett (@bartlettstarman) #Devoxx #uxasanapi 7 November, 2019 1 / 29

William Bartlett

• Programmer
• Agile coach
• DevOps consultant
• Fan of ergonomics

Mandatory Hand Raising Time

Disclaimers

This talk is not about

• amazing UX
• gorgeous graphic design
• fully-loaded APIs

This talk is about a cool way of combining all of the above

Introduction

APIs abound

What are we using APIs for?

APIs abound

What are we using APIs for?

What tactics are we using to build our API landscape?

The English Plan

The Italian Plan

The Brazilian Plan

The French Plan

The Goal

The goal is the end-user

The Goal

The goal is the end-user

The end-user usually consumes a GUI

Micro-frontends

https://micro-frontends.org/

Third Party APIs

Problem

How to help customers seamlessly integrate your API into their UI?

Solution

Have API serve themeable UI fragments!

Related Work

There is nothing new under the sun

All of this has happened before, and it will all happen again. — J.M. Barrie, Peter Pan

Examples

Embedding

• Ads
• Chatbots
• Charts
• YouTube videos
• Authentication
• Payment
• GDPR compliance

Related Solutions

Related Solutions

• <iframe></iframe>
• JavaScript SDK
• Popup or redirection

Web Components as API

Web Components

• Part of the platform (webcomponents.org)
• JavaScript modules served over HTTP
• Custom HTML elements
• Scoped CSS
• Properties

Examples

• YouTube
• Google Maps
• GitHub
• Atlassian Jira, Confluence
• Cookie consent

Demo

O gods of Demo, we beseech thee

Gotchas

• CORS
• Dependency versions ➡️ Rollup
• Package size vs developer experience ➡️ Lit-Element

Conclusion

Conclusion

UI fragment API

• themeable
• seamless
• documenting API usage

Going Further

Going Further

• Security, trust
• Edge side includes
• Organisms vs and molecules (Atomic Design, Brad Frost)
• Animations