Component-Oriented UX For The Win… But How?
beavy
modular
multi purpose
social community framework
Comments
Sharing
Tagging
private messaging
Likes
modular
EACH MODULE
- Server Code Python (Flask), Database migration
- Web Client Code Javascript: React on ES2015
- Styles CSS (SCSS / CSS-Modules)
- Tests Unit tests, Behave (Cucumber) Helpers
Beavy App
- Ships the overall design
- Customizes the various modules
- Configures and connects the various modules
Problem Statement
How can we deliver modular designs, which ARE still highly customisable per app?
The STACK
webpack
+ Babel for es2015 syntax support
+ React 0.13.1
+ SCSS bourbon, neat, bitters & refills
+ hot-reloading
Conclusion
and prospects
thanks
Find the slides:
slides.com/benjaminkampmann/component-oriented-ux
Find the code:
github.com/beavyHQ/experiment-customisable-component-ux
Find beavy:
Find the ben:
Component-Oriented UX For The Win… But How?
By Benjamin Kampmann
Component-Oriented UX For The Win… But How?
Understanding UI as reusable components and building it in a modular way are the new black in web development. But how exactly do you apply these latest technologies while still allowing overall themes and customization as we are used to? In this case study, we will look under the hood of beavy to understand how it uses CSS Modules and React to marry having highly complex, reusable UI-components and ensuring they can be completely customized at the same time. And what that means for the overall design process. --- This talk has been presented at UpFront #62, Nov 10th 2015, Berlin: http://www.meetup.com/up-front-ug/events/226053994/
