Component-Oriented UX For The Win… But How?

Upfront #62, Nov 10th 2015

Benjamin Kampmann

@SirDonQui

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:

      beavy.xyz

Find the ben:

      twitter.com/SirDonQui

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/

  • 2,862