Building Loveable UIs - Speaker Deck

Slide 1

Slide 1 text

BUILDING ABLE UIS REACT AMSTERDAM 2016 @HEALVES82

Slide 2

Slide 2 text

DEVELOPER EXPERIENCE WHEN BUILDING PRODUCTS

Slide 3

Slide 3 text

BEFORE REACT…

Slide 4

Slide 4 text

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

HTML WEB PAGE  DOCUMENT JS CSS PDD PAGE DRIVEN DEVELOPMENT

Slide 7

Slide 7 text

HTML MARKUP HOLY GRAIL OF   WEBMASTER JS UI CSS STYLING – THE EARLY DAYS –

Slide 8

Slide 8 text

No content

Slide 9

Slide 9 text

MARKUP, JAVASCRIPT AND STYLING   COMPOSES THE UI

Slide 10

Slide 10 text

MARKUP HTML/JSX STYLING CSS/INLINE JAVASCRIPT UI

Slide 11

Slide 11 text

NOWADAYS…

Slide 12

Slide 12 text

BUILDING AMBITIOUS USER INTERFACES REACT IS A LIBRARY FOR

Slide 13

Slide 13 text

COMPONENTS ARE THE BUILDING BLOCKS OF AN APP

Slide 14

Slide 14 text

DESIGNING COMPONENTS — ENCAPSULATION — COMPOSITION

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

const StaticReadingList = () => ( // Let's render only one item );

Slide 17

Slide 17 text

GITHUB.COM/RECON-JS/RECON

Slide 18

Slide 18 text

ENCAPSULATION EASY TO REUSE, MAINTAIN AND TEST.

Slide 19

Slide 19 text

COMPOSITION — COMBINING ELEMENTS — BUILDING BLOCKS

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

COMPOSITION ENCAPSULATION DEVELOPER EXPERIENCE – and –

Slide 22

Slide 22 text

DOCUMENT YOUR COMPONENTS

Slide 23

Slide 23 text

JXNBLK.COM/REBASS

Slide 24

Slide 24 text

VISUAL CONSISTENCY  COMES FOR FREE * * NOT ALWAYS

Slide 25

Slide 25 text

GETTING THERE

Slide 26

Slide 26 text

DESIGN COMPONENTS NOT PAGES

Slide 27

Slide 27 text

LEARN HOW TO ABSTRACT.  BORROW CONCEPTS.  — ATOMIC DESIGN — CONTENT & DISPLAY PATTERNS — FUNCTIONAL CSS

Slide 28

Slide 28 text

//

// //

Slide 29

Slide 29 text

LOW LEVEL COMPONENTS

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

// 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 }; }

Slide 32

Slide 32 text

NAMING IS HARD

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

NAMING COMPONENTS COOL NOT COOL      

Slide 35

Slide 35 text

CONTENT-BASED NAMES THE CONTENT THEY CONTAIN.

Slide 36

Slide 36 text

VISUAL NAMES STYLING AND LOOKING.

Slide 37

Slide 37 text

{text}

Slide 38

Slide 38 text

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

Slide 39

Slide 39 text

CONTAINER PRESENTATIONAL – and –

Slide 40

Slide 40 text

CONTAINER TALKS TO STORES PRESENTATIONAL RENDER MARKUP

Slide 41

Slide 41 text

CONTAINER — NO MARKUP OR STYLING  — OFTEN STATEFUL  — SERVE AS DATA SOURCES

Slide 42

Slide 42 text

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 } }

Slide 43

Slide 43 text

PRESENTATIONAL — MARKUP AND STYLING  — NO STATE  — OFTEN FUNCTIONAL COMPONENTS

Slide 44

Slide 44 text

const ReadingList = ({data}) => (

);

Slide 45

Slide 45 text

PURE COMPONENTS   — CLASS OR FUNCTION  — OFTEN PURE FUNCTIONS  — STATELESS

Slide 46

Slide 46 text

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

Slide 47

Slide 47 text

CLASSES FUNCTIONS – or –

Slide 48

Slide 48 text

CLASSES COMPONENTS   — STATES  — LIFECYCLE HOOKS componentWillMount()  — OPTIMISED shallowCompare()

Slide 49

Slide 49 text

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 }

Slide 50

Slide 50 text

FUNCTIONAL COMPONENTS — NO SIDE EFFECTS  — GOOD TO BUILD ABSTRACTIONS  — WORKS IN SMALL AND LARGE

Slide 51

Slide 51 text

CLASSES FUNCTIONS – or – — STATELESS FUNCTIONS WHEN POSSIBLE  — UNDERSTAND THE DRAWBACKS — HAVE FUN

Slide 52

Slide 52 text

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

Slide 53

Slide 53 text

INLINE STYLES — EASY TO BUNDLE — CONSTANTS  — PRIVATE BY DEFAULT

Slide 54

Slide 54 text

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' };

Slide 55

Slide 55 text

ANIMATION IMPROVE THE USABILITY FEELS NATURAL  GIVE FEEDBACK

Slide 56

Slide 56 text

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

Slide 57

Slide 57 text

// 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}; }

Slide 58

Slide 58 text

{/* ... */}

Slide 59

Slide 59 text

FUTURE REACT? – of –

Slide 60

Slide 60 text

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

Slide 61

Slide 61 text

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

Slide 62

Slide 62 text

DANK U @HEALVES82 #REACTAMSTERDAM