Composing Modern UI

A Inexor Hackathon Lightning Talk

Inexor

OPEN NEXT GENERATION
FPS SANDBOX

s

Problems & Solutions

A good default

Browser

  • ServiceWorker
  • App Manifest

Transpiler

  • NPM front-end imports
  • CSS Post/Preprocessor
  • Font Setup
  • Babel
  • Codesplitting

​Framework

  • Routing
  • Components
  • Templating
  • 2-Way-Databinding
  • Global Store
  • Eventbus (Publish/Subscriber)
  • Lifecycle
  • CLI tools
  • Devtools Extension

CLI project scaffolding

devtools Extension

Abstracting Interaction

What interaction?

  • Groupings and Lists (cards, tables, carousel, timelines, lists, tree)
  • Layouts and Popups (dialog, modal, notifications)
  • Controls and filters (sort, filter, group, ranges, options, full-text search, labels)
  • Navigation (buttons, pagination, breadcrumbs,
    toolbars, tabs, context menus, infinity scroll)

Abstracting Interaction

How we used to do interaction

Abstracting Interaction

Re-usable Components

We are getting there...

Composable UI Building blocks

SearchInput

Checkbox

GhostButton

Badge

ToggleArrow

InlineSelections

FilterDropdown

checked: true

value: ''

direction: down

type: positive

name: Resolved

open: true

value: ['Open', 'In Progress']

Component Interface

  • Events
  • Properties
  • Slots

Instead of pre-defining how the component looks like, this filterdropdown could be re-used in a different shape.

Thank you

Questions?

https://wireupyourfrontend.com

https://happy-css.com/

Made with Slides.com