Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Henrique Alves, DADI+, London — Building Loveable UIs

Henrique Alves, DADI+, London — Building Loveable UIs

Henrique Alves, DADI+, London — Building Loveable UIs

Sharing my experience building loveable UIs. Talking about presentational components and pattern types for build scalable web apps in React.

React Amsterdam

April 21, 2016
Tweet

More Decks by React Amsterdam

Other Decks in Technology

Transcript

  1. BUILDING
    ABLE UIS
    REACT AMSTERDAM 2016
    @HEALVES82

    View full-size slide

  2. DEVELOPER EXPERIENCE
    WHEN BUILDING PRODUCTS

    View full-size slide

  3. BEFORE REACT…

    View full-size slide

  4. // home.scss
    @import "variables";
    @import "components/header";
    @import "components/footer";

    @import "components/buttons";
    @import "pages/home";

    View full-size slide

  5. HTML
    WEB PAGE

    DOCUMENT
    JS CSS
    PDD
    PAGE DRIVEN DEVELOPMENT

    View full-size slide

  6. HTML
    MARKUP
    HOLY GRAIL OF 

    WEBMASTER
    JS
    UI
    CSS
    STYLING
    – THE EARLY DAYS –

    View full-size slide

  7. MARKUP, JAVASCRIPT AND STYLING 

    COMPOSES THE UI

    View full-size slide

  8. MARKUP
    HTML/JSX
    STYLING
    CSS/INLINE
    JAVASCRIPT
    UI

    View full-size slide

  9. BUILDING AMBITIOUS
    USER INTERFACES
    REACT IS A LIBRARY FOR

    View full-size slide

  10. COMPONENTS ARE THE
    BUILDING BLOCKS
    OF AN APP

    View full-size slide

  11. DESIGNING COMPONENTS
    — ENCAPSULATION
    — COMPOSITION

    View full-size slide

  12. ENCAPSULATION
    — SELF CONTAINED
    — DOESN’T CARE ABOUT DATA
    — NO ACCESS TO APP’S STATE

    View full-size slide

  13. const StaticReadingList = () => (
    // Let's render only one item
    headline="The End of Ice"
    subHeadline="The New Yorker"
    description={
    `A team of scientists
    hikes to investigate
    how quickly its ice is
    melting.`
    }
    imageSrc="//cldup.com/1rbk08vtLj.jpg"
    />
    );

    View full-size slide

  14. GITHUB.COM/RECON-JS/RECON

    View full-size slide

  15. ENCAPSULATION
    EASY TO REUSE, MAINTAIN AND TEST.

    View full-size slide

  16. COMPOSITION
    — COMBINING ELEMENTS
    — BUILDING BLOCKS


    View full-size slide

  17. const ReadingItem = ({headline, description, imageSrc}) => (


    {headline}
    {description}
    Read Article





    );

    View full-size slide

  18. COMPOSITION
    ENCAPSULATION
    DEVELOPER
    EXPERIENCE
    – and –

    View full-size slide

  19. DOCUMENT YOUR
    COMPONENTS

    View full-size slide

  20. JXNBLK.COM/REBASS

    View full-size slide

  21. VISUAL CONSISTENCY

    COMES FOR FREE *
    * NOT ALWAYS

    View full-size slide

  22. GETTING THERE

    View full-size slide

  23. DESIGN COMPONENTS
    NOT PAGES

    View full-size slide

  24. LEARN HOW TO ABSTRACT.

    BORROW CONCEPTS.

    — ATOMIC DESIGN
    — CONTENT & DISPLAY PATTERNS
    — FUNCTIONAL CSS

    View full-size slide

  25. //
    //
    //
    //
    headline="Article Title"
    subHeadline="Site Name"
    description="Random copy"
    imageSrc="thumb.jpg"
    />
    //

    View full-size slide

  26. LOW LEVEL
    COMPONENTS

    View full-size slide

  27. // layout.js
    export const Box = ({
    element: Element = 'div',
    children,
    ...otherProps
    }) => (

    {children}

    );

    View full-size slide

  28. // layout.js
    // compose style object from props
    function composeStyle({style, ...otherProps}) {
    const bodyStyle = document.body.style;
    return {
    ...pickBy((v, k) => bodyStyle.hasOwnProperty(k), otherProps),
    ...style
    };
    }

    View full-size slide

  29. NAMING IS HARD

    View full-size slide

  30. NAMING IS HARD
    — CONTENT-BASED NAMES
    — VISUAL NAMES
    — FUNCTIONAL NAMES

    View full-size slide

  31. NAMING COMPONENTS
    COOL NOT COOL








    View full-size slide

  32. CONTENT-BASED NAMES
    THE CONTENT THEY CONTAIN.

    View full-size slide

  33. VISUAL NAMES
    STYLING AND LOOKING.

    View full-size slide

  34. level={5}
    color="#9E9E9E"
    fontWeight={500}
    theme="dark"
    {...otherProps}
    >
    {text}

    View full-size slide

  35. FUNCTIONAL NAMES
    THEIR FUNCTION OR UTILITY.

    {/* Menu list */}

    View full-size slide

  36. CONTAINER
    PRESENTATIONAL
    – and –

    View full-size slide


  37. CONTAINER
    TALKS TO STORES

    PRESENTATIONAL
    RENDER MARKUP

    View full-size slide

  38. CONTAINER
    — NO MARKUP OR STYLING

    — OFTEN STATEFUL

    — SERVE AS DATA SOURCES

    View full-size slide

  39. class ReadingListPage extends Component {
    constructor(props) {
    super(props);
    this.state = {data: []};
    }
    componentWillMount() {
    fetch('http://localhost:8000/reading-list.json')
    .then((response) => {
    if (response.status >= 400) {
    return Promise.reject(new Error('Something went wrong!'));
    }
    return response.json();
    })
    .then((stories) => this.setState({data: stories}));
    }
    render() {
    const {data} = this.state;
    return
    }
    }

    View full-size slide

  40. PRESENTATIONAL
    — MARKUP AND STYLING

    — NO STATE

    — OFTEN FUNCTIONAL COMPONENTS

    View full-size slide

  41. const ReadingList = ({data}) => (

    {data.map(
    (story, key) => (

    headline={story.headline}
    subHeadline={story.site}
    description={story.description}
    imageSrc={story.imageSrc}
    />

    )
    )}

    );

    View full-size slide

  42. PURE COMPONENTS

    — CLASS OR FUNCTION

    — OFTEN PURE FUNCTIONS

    — STATELESS

    View full-size slide

  43. const Text = ({children}) =>
    {children};

    View full-size slide

  44. CLASSES
    FUNCTIONS
    – or –

    View full-size slide

  45. CLASSES COMPONENTS

    — STATES

    — LIFECYCLE HOOKS componentWillMount()

    — OPTIMISED shallowCompare()

    View full-size slide

  46. SHALLOW COMPARE
    // react-addons-shallow-compare
    shouldComponentUpdate(nextProps, nextState) {
    return shallowCompare(this, nextProps, nextState);
    }
    // Using immutable objects
    shouldComponentUpdate(nextProps) {
    // Avoid object deep comparison
    return this.props.title !== nextProps.title
    }

    View full-size slide

  47. FUNCTIONAL COMPONENTS
    — NO SIDE EFFECTS

    — GOOD TO BUILD ABSTRACTIONS

    — WORKS IN SMALL AND LARGE

    View full-size slide

  48. CLASSES
    FUNCTIONS
    – or –
    — STATELESS FUNCTIONS WHEN POSSIBLE

    — UNDERSTAND THE DRAWBACKS
    — HAVE FUN

    View full-size slide

  49. INLINE
    STYLES
    • HERE TO STAY •
    – SINCE 2013 ? –

    View full-size slide

  50. INLINE STYLES
    — EASY TO BUNDLE
    — CONSTANTS

    — PRIVATE BY DEFAULT

    View full-size slide

  51. const CONTENT_SPACING = 15;
    const BORDER_RADIUS = 3;
    const styles = {
    padding: CONTENT_SPACING,
    borderRadius: BORDER_RADIUS,
    width: 500,
    flexDirection: 'row',
    flexWrap: 'wrap',
    overflow: 'hidden',
    backgroundColor: '#fff',
    boxShadow: 'rgba(0, 0, 0, 0.0470588) 0px 2px 3px 0px'
    };

    View full-size slide

  52. ANIMATION
    IMPROVE THE USABILITY
    FEELS NATURAL

    GIVE FEEDBACK

    View full-size slide

  53. const ReadingItem = ({animate, headline, description, imageSrc}) => (



    {headline}
    {description}
    Read Article






    );

    View full-size slide

  54. // animate.js
    const styles = {
    root: {
    position: 'relative',
    zIndex: 2,
    transition: 'all 1s cubic-bezier(.75,.1,.1,1)',
    transformStyle: 'preserve-3d',
    transform: 'translateX(-1000px) rotate(30deg) translateY(1000px)',
    visibility: 'hidden'
    },
    animate: {
    transform: 'translateZ(0)',
    visibility: 'visible'
    }
    };
    const Animate = ({children, animate}) => {
    const style = Object.assign({},
    styles.root,
    animate && styles.animate
    );
    return {children};
    }

    View full-size slide

  55. FUTURE
    REACT?
    – of –

    View full-size slide

  56. REACT-FUTURE *

    — ANIMATION
    — GESTURES

    — LAYOUT SYSTEM (DEPENDS ON INLINE STYLING)
    * GITHUB.COM/REACTJS/REACT-FUTURE

    View full-size slide

  57. LINKS & REFERENCES
    GITHUB.COM/HENRIQUEA/REACT-AMSTERDAM-2016-TALK
    GITHUB.COM/REACTJS/REACT-FUTURE
    GITHUB.COM/RECON-JS/RECON
    GITHUB.COM/KADIRAHQ/REACT-STORYBOOK
    GITHUB.COM/SKIDDING/COSMOS
    GITHUB.COM/SCUP/ATELLIER
    DANIELMALL.COM/ARTICLES/CONTENT-DISPLAY-PATTERNS
    BRADFROST.COM/BLOG/POST/ATOMIC-WEB-DESIGN
    PATTERNLAB.IO
    JON.GOLD/2015/07/FUNCTIONAL-CSS
    MEDIUM.COM/@DAN_ABRAMOV/SMART-AND-DUMB-COMPONENTS-7CA2F9A7C7D0
    JXNBLK.COM/REBASS
    GITHUB.COM/CHENGLOU/REACT-MOTION
    GITHUB.COM/JSSTYLES/JSS
    GITHUB.COM/CSS-MODULES/CSS-MODULES

    View full-size slide

  58. DANK U
    @HEALVES82
    #REACTAMSTERDAM

    View full-size slide