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/
Composing Modern UIs
By Martin Muzatko
