Tweet
Tweet

Slide 1

Slide 1 text

Angular TLV Micro FE Module Federation+ NX eliraneliassy

Slide 2

Slide 2 text

e-square.io — Founder & CEO @ e-square.io — Angular Google Developer Expert — Writer @ AngularInDepth — Community leader About mySelf

Slide 3

Slide 3 text

No content

Slide 4

Slide 4 text

No content

Slide 5

Slide 5 text

jobs@e-square.io

Slide 6

Slide 6 text

e-square.io Micro FE Backof fi ce Online Orders Menu Book A Table Restaurant POS

Slide 7

Slide 7 text

e-square.io Micro FE Backof fi ce Online Orders Menu Book A Table Restaurant POS

Slide 8

Slide 8 text

e-square.io Micro FE Runtime Integration Backof fi ce Restaurant POS Backof fi ce

Slide 9

Slide 9 text

e-square.io Micro FE Separate Deployments Backof fi ce 1.0.0 Restaurant POS Book A Table 1.0.0

Slide 10

Slide 10 text

e-square.io Micro FE Separate Deployments Backof fi ce 1.0.0 Restaurant POS Book A Table 2.0.0

Slide 11

Slide 11 text

e-square.io The Challenges • Share code? NPM? • Version mismatches?

Slide 12

Slide 12 text

Module Federation!

Slide 13

Slide 13 text

e-square.io What is MFE? • Allows JavaScript application to dynamically import code from another application at runtime. • The module will build a unique JavaScript entry fi le which can be downloaded by other applications • Share dependencies between apps!

Slide 14

Slide 14 text

e-square.io Micro FE - Terminology Backof fi ce Online Orders Menu Book A Table Restaurant POS

Slide 15

Slide 15 text

e-square.io Micro FE - Terminology Remote Remote Remote Remote Host

Slide 16

Slide 16 text

e-square.io Host: webpack.con fi g

Slide 17

Slide 17 text

e-square.io Remote: webpack.con fi g

Slide 18

Slide 18 text

e-square.io Host: routing

Slide 19

Slide 19 text

MFE & Monorepo ?

Slide 20

Slide 20 text

e-square.io MFE & Monorepo • One package.json • Consume shared code easily with a simple import

Slide 21

Slide 21 text

e-square.io NX

Slide 22

Slide 22 text

e-square.io What is NX • Build system • Workspace manager for Monorepos • Rich Plugin ecosystem: • Storybook, eslint, Jest, Cypress and many more… • A ff ected builders - test, lint & build

Slide 23

Slide 23 text

e-square.io MFE & NX • NX enforce module boundaries - No applications coupling • DDD friendly architecture (apps & libs) - Fit the “modules separation” concept

Slide 24

Slide 24 text

e-square.io Sharing Libs Backof fi ce Online Orders Menu Book A Table Restaurant POS

Slide 25

Slide 25 text

e-square.io Sharing Libs Backof fi ce Online Orders Menu Book A Table Restaurant POS Application Library Auth

Slide 26

Slide 26 text

e-square.io Sharing Libs Dep Graph

Slide 27

Slide 27 text

e-square.io Sharing Libs Dep Graph

Slide 28

Slide 28 text

e-square.io Sharing Libs Dep Graph - A ff ected

Slide 29

Slide 29 text

e-square.io SharedMappings

Slide 30

Slide 30 text

e-square.io Live Demo…

Slide 31

Slide 31 text

e-square.io Sca ff olding

Slide 32

Slide 32 text

• MFE - Probably the most exciting feature coming to the world of FE • MFE & NX - as a force multiplier • Share code without publish libraries • No version mismatch • A ff ected app - deploy separately e-square.io Summary

Slide 33

Slide 33 text

Keep in Touch with me! https://e-square.io https://eliassy.dev @eliraneliassy eliran@e-square.io

Slide 34

Slide 34 text

e-square.io Ra ff le Time!

Slide 35

Slide 35 text

Thank You