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.

Transcript

1. BUILDING
   ABLE UIS
   REACT AMSTERDAM 2016
   @HEALVES82
   

   View Slide

2. DEVELOPER EXPERIENCE
   WHEN BUILDING PRODUCTS
   

   View Slide

3. BEFORE REACT…
   

   View Slide

4. 
   
   
   

   View Slide

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

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

   View Slide

6. HTML
   WEB PAGE

   DOCUMENT
   JS CSS
   PDD
   PAGE DRIVEN DEVELOPMENT
   

   View Slide

7. HTML
   MARKUP
   HOLY GRAIL OF 

   WEBMASTER
   JS
   UI
   CSS
   STYLING
   – THE EARLY DAYS –
   

   View Slide

8. View Slide

9. MARKUP, JAVASCRIPT AND STYLING 

   COMPOSES THE UI
   

   View Slide

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

    View Slide

11. NOWADAYS…
    

    View Slide

12. BUILDING AMBITIOUS
    USER INTERFACES
    REACT IS A LIBRARY FOR
    

    View Slide

13. COMPONENTS ARE THE
    BUILDING BLOCKS
    OF AN APP
    

    View Slide

14. DESIGNING COMPONENTS
    — ENCAPSULATION
    — COMPOSITION
    

    View Slide

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

    View Slide

16. 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 Slide

17. GITHUB.COM/RECON-JS/RECON
    

    View Slide

18. ENCAPSULATION
    EASY TO REUSE, MAINTAIN AND TEST.
    

    View Slide

19. COMPOSITION
    — COMBINING ELEMENTS
    — BUILDING BLOCKS
    
    
    

    View Slide

20. const ReadingItem = ({headline, description, imageSrc}) => (
    
    
    {headline}
    {description}
    Read Article
    
    
    
    
    
    );
    

    View Slide

21. COMPOSITION
    ENCAPSULATION
    DEVELOPER
    EXPERIENCE
    – and –
    

    View Slide

22. DOCUMENT YOUR
    COMPONENTS
    

    View Slide

23. JXNBLK.COM/REBASS
    

    View Slide

24. VISUAL CONSISTENCY

    COMES FOR FREE *
    * NOT ALWAYS
    

    View Slide

25. GETTING THERE
    

    View Slide

26. DESIGN COMPONENTS
    NOT PAGES
    

    View Slide

27. LEARN HOW TO ABSTRACT.

    BORROW CONCEPTS.

    — ATOMIC DESIGN
    — CONTENT & DISPLAY PATTERNS
    — FUNCTIONAL CSS
    

    View Slide

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

    View Slide

29. LOW LEVEL
    COMPONENTS
    

    View Slide

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

    View Slide

31. // 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 Slide

32. NAMING IS HARD
    

    View Slide

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

    View Slide

34. NAMING COMPONENTS
    COOL NOT COOL
    

    
    

    
    

    
    
    
    

    View Slide

35. CONTENT-BASED NAMES
    THE CONTENT THEY CONTAIN.
    
    

    View Slide

36. VISUAL NAMES
    STYLING AND LOOKING.
    

    View Slide

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

    View Slide

38. FUNCTIONAL NAMES
    THEIR FUNCTION OR UTILITY.
    
    {/* Menu list */}
    
    

    View Slide

39. CONTAINER
    PRESENTATIONAL
    – and –
    

    View Slide

40. 
    CONTAINER
    TALKS TO STORES
    
    PRESENTATIONAL
    RENDER MARKUP
    

    View Slide

41. CONTAINER
    — NO MARKUP OR STYLING

    — OFTEN STATEFUL

    — SERVE AS DATA SOURCES
    

    View Slide

42. 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 Slide

43. PRESENTATIONAL
    — MARKUP AND STYLING

    — NO STATE

    — OFTEN FUNCTIONAL COMPONENTS
    

    View Slide

44. const ReadingList = ({data}) => (
    
    {data.map(
    (story, key) => (
    
    headline={story.headline}
    subHeadline={story.site}
    description={story.description}
    imageSrc={story.imageSrc}
    />
    
    )
    )}
    
    );
    

    View Slide

45. PURE COMPONENTS
    

    — CLASS OR FUNCTION

    — OFTEN PURE FUNCTIONS

    — STATELESS
    

    View Slide

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

    View Slide

47. CLASSES
    FUNCTIONS
    – or –
    

    View Slide

48. CLASSES COMPONENTS
    

    — STATES

    — LIFECYCLE HOOKS componentWillMount()

    — OPTIMISED shallowCompare()
    

    View Slide

49. 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 Slide

50. FUNCTIONAL COMPONENTS
    — NO SIDE EFFECTS

    — GOOD TO BUILD ABSTRACTIONS

    — WORKS IN SMALL AND LARGE
    

    View Slide

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

    — UNDERSTAND THE DRAWBACKS
    — HAVE FUN
    

    View Slide

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

    View Slide

53. INLINE STYLES
    — EASY TO BUNDLE
    — CONSTANTS

    — PRIVATE BY DEFAULT
    

    View Slide

54. 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 Slide

55. ANIMATION
    IMPROVE THE USABILITY
    FEELS NATURAL

    GIVE FEEDBACK
    

    View Slide

56. const ReadingItem = ({animate, headline, description, imageSrc}) => (
    
    
    
    {headline}
    {description}
    Read Article
    
    
    
    
    
    
    );
    

    View Slide

57. // 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 Slide

58. 
    {/* ... */}
    
    

    View Slide

59. FUTURE
    REACT?
    – of –
    

    View Slide

60. REACT-FUTURE *
    

    — ANIMATION
    — GESTURES

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

    View Slide

61. 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 Slide

62. DANK U
    @HEALVES82
    #REACTAMSTERDAM
    

    View Slide