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

ReactJS: From upside down to right side up!

Pedro Nauck
November 26, 2016

ReactJS: From upside down to right side up!

My talk about how to build a right side up environment in the frontend using the React ecosystem.

Pedro Nauck

November 26, 2016
Tweet

More Decks by Pedro Nauck

Other Decks in Technology

Transcript

  1. @pedronauck
    FRONTEND DEVELOPER

    View full-size slide

  2. we technology
    new technologies

    View full-size slide

  3. modularity
    performance
    adaptability
    maintainability
    consistency
    work fluid
    }We want

    View full-size slide

  4. but startups...

    View full-size slide

  5. products
    upside down monsters

    View full-size slide

  6. how
    build
    to
    right side up
    enva

    View full-size slide

  7. backend
    inspiration

    View full-size slide

  8. our environment
    front-end

    View full-size slide

  9. checkout admin
    landing
    page
    react projects
    @reusable-modules
    monorepo

    View full-size slide

  10. MODULAR STRUCTURE
    shazam basecss components
    frontend project
    domain reicons

    View full-size slide

  11. monorepo
    Unified source code repository used
    by an organisation to host as much of
    its code as possible.

    View full-size slide

  12. who’s using

    View full-size slide

  13. ✓ single lint, build, test and release process
    ✓ easy to coordinate changes across modules
    ✓ single place to report issues
    ✓ code review are easier
    ✓ less management, everything is centralized
    ✓ dependency management
    ✓ cheaper
    pros

    View full-size slide

  14. ✓ codebase looks more intimidating
    ✓ repo is bigger in size
    ✓ . . .
    cons

    View full-size slide

  15. packages/project/package.json
    Symbolic Link

    View full-size slide

  16. components
    Our awesome and reusable
    React components

    View full-size slide

  17. ✓ focus on your components
    ✓ based on stories
    ✓ internal hot reload
    ✓ less configurations
    ✓ easy to maintain
    advantages

    View full-size slide

  18. Gold tip
    #1 use to update data inside stories
    recompose

    View full-size slide

  19. A React utility belt for function components
    and higher-order components.
    recompose

    View full-size slide

  20. domain
    data layer of our projects

    View full-size slide

  21. AP I user
    partner
    appointments

    View full-size slide

  22. Predictable state container based on Flux
    One store. Single Source of Truth!
    State is Read-only (modified by action)
    Changes are made with Pure Functions

    View full-size slide

  23. #1 use a duck-based architecture

    View full-size slide

  24. #2 use redux-actions to handle your ducks

    View full-size slide

  25. #3 normalize your entities

    View full-size slide

  26. Normalizr takes JSON and a schema
    and replaces nested entities with their
    IDs, gathering all entities in dictionaries.

    View full-size slide

  27. turn this...

    View full-size slide

  28. ✓ work with objects, less array iterations
    ✓ most expressive structure
    advantages

    View full-size slide

  29. #4 use one single reducer for your entities

    View full-size slide

  30. #5 use redux-ui to manage ui state

    View full-size slide


  31. ui('App')

    ui()

    ui()
    {context}
    {context}
    updateUI()
    ui.isSidebarOpened
    {context}

    View full-size slide

  32. modular structure
    module based architecture for
    scalable apps

    View full-size slide

  33. modules/User/index.js

    View full-size slide

  34. Application Setup
    react-router, redux, etc

    View full-size slide

  35. shazam
    Node module to create and
    manage react apps

    View full-size slide

  36. alternatives
    facebookincubator/create-react-app insin/nwb

    View full-size slide

  37. and tricks
    webpack tips

    View full-size slide

  38. #1 split your config by environment using
    webpack-config

    View full-size slide

  39. webpack.config.js

    View full-size slide

  40. webpack/${environment}.js

    View full-size slide

  41. shazam.config.js

    View full-size slide

  42. webpack/common.js

    View full-size slide

  43. #2 use alias to relative paths

    View full-size slide

  44. webpack/common.js

    View full-size slide

  45. #3 use [chunkhash:8] in production bundles

    View full-size slide

  46. webpack/development.js
    webpack/production.js

    View full-size slide

  47. webpack/development.js
    webpack/production.js

    View full-size slide

  48. reicons
    CLI tool to generate React icon
    components based on svg files

    View full-size slide

  49. manage
    is boring
    icons

    View full-size slide

  50. ✓ different icons of different sets
    ✓ components to manage svg
    ✓ bundle just our icons
    ✓ easy to update the set
    ✓ build differente sets
    we needed

    View full-size slide

  51. we
    DON' T
    needed

    View full-size slide

  52. http://github.com/drvem/reicons

    View full-size slide

  53. $ npm i -g reicons

    View full-size slide

  54. $ reicons -p [] -s images/ -b components/Icons
    Set directory and
    a custom prefix
    The source of your
    icons sets
    Folder to bundle
    your icons
    components

    View full-size slide

  55. .
    └── images
    ├── font-awesome
    │ ├── book.svg
    │ ├── credit-card.svg
    │ └── github-logo.svg
    └── icons
    ├── home.svg
    ├── location.svg
    └── search.svg

    View full-size slide

  56. $ reicons
    -p font-awesome:fa icons:ic
    -s images/
    -b components/Icons

    View full-size slide

  57. .
    ├── components
    │ └── Icons
    │ ├── Fa
    │ └── Ic
    └── images
    ├── font-awesome
    └── icons

    View full-size slide

  58. .
    └── components
    └── Icons
    ├── Fa
    │ ├── Book.js
    │ ├── CreditCard.js
    │ └── GithubLogo.js
    ├── Ic
    │ ├── Home.js
    │ ├── Location.js
    │ └── Search.js
    └── index.js

    View full-size slide

  59. ✓ something simple to implement
    ✓ using across projects
    ✓ easy to onboarding
    we needed

    View full-size slide

  60. checkout admin
    landing
    page
    react projects
    @reusable-modules
    monorepo

    View full-size slide

  61. modularity
    performance
    adaptability
    maintainability
    consistency
    work fluid
    }We want

    View full-size slide