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

Micro Frontends with React and Redux

Micro Frontends with React and Redux

Avatar for Alexandra

Alexandra

March 20, 2018
Tweet

Other Decks in Programming

Transcript

  1. MICRO FRONTENDS with React and Redux Prasanna N Venkatesan [email protected]

    https://prasans.info/me/ Frontend Night 20.03.2018 Alexandra Strekalova [email protected] @pvenk @astrekalova
  2. •During build time •During run time, at client side •During

    run time, at server / middleware side INTEGRATION IN BROWSER 1 3
  3. Pros: •NPM offered a very good dependency tree management •1

    network call to download the entire JS •Independent development across teams INTEGRATION USING NPM 1 5 Cons: •A monolith built by different teams •Non atomic deployments
  4. Pros: •Independent teams •Independent deployments •No versioning issues INTEGRATION USING

    NPM 1 7 Cons: •Multiple network calls to load the app •Overall increase in the payload
  5. THE REDUX WAY 2 4 One store for the application.

    Store setup Services have their own sub-store.
  6. DESIGN CONSISTENCY - UX Design Guild #0078bf 0,120,191 #00bccd 0,188,205

    #7dced5 125,206,213 #00aa5b 0,170,91 #85b880 133,184,128 #bdbd32 189,189,50 #fff350 255,243,80 #fbe0ce 251,224,206 #f2ba97 242,186,151 #a17861 161,120,97 #808184 128,129,132 #eeeeee 238,238,238 #ee5ba0 238,91,160 #702269 112,34,105 #b51b58 181,27,88 #ed312f 237,49,47 #f58a33 245,138,51 #5f3c25 95,60,37 Styleguide
  7. TESTING STRATEGY 3 7 Unit tests Unit Testing is a

    practice where the smallest testable parts of an application (units) are individually and independently tested