Typescript with Module Federation || TypeScript Tutorial

  Рет қаралды 19,700

Jack Herrington

Jack Herrington

Күн бұрын

Пікірлер: 64
@nancynader5097
@nancynader5097 4 жыл бұрын
Having worked with Zack in the past, I’m super excited to see this. Great video and great solution
@charlenepugo9772
@charlenepugo9772 4 жыл бұрын
Wow man, this video was exactly what I needed. Thank you so much! Keep up with videos like this!
@preshnatate816
@preshnatate816 4 жыл бұрын
You explained everything seriously obscured to me with Next.js! Thank you.
@kaycollinson1977
@kaycollinson1977 4 жыл бұрын
Brilliant, as usual, Jack. Thank you so much.
@fabioladiaz5934
@fabioladiaz5934 4 жыл бұрын
Awesome as usual. Thanks
@darnboo
@darnboo 3 жыл бұрын
Super good tutorial
@radezzientertainment501
@radezzientertainment501 Жыл бұрын
super helpful ty ty
@abbeyroberts5899
@abbeyroberts5899 4 жыл бұрын
Thanks Jack. You are a star........
@sahajarora2162
@sahajarora2162 8 ай бұрын
Could we not simply rely on tsconfig path (alias) mapping instead of npm / yarn linking to the shared types library ? For e.g: "paths": { "@types/app1/*": ["./packages/types-app1/src/types.ts"] } Then import the required types in the host/remote apps like: import type { Pokemon } from "@types/app1" ? For some context, the reason why I am unable to use npm / yarn linking is because I have a React-Native-For-Web monorepo setup (with Nx). Converting the monorepo into a "workspace" (adding the workspace property in package.json) starts breaking my Android/iOS ReactNative builds in the micro-apps; because in Android for example, gradle builds start looking for modules within the micro-app's node_modules directory but the modules are actually installed at the root of the monorepo (due to npm workspace). Without converting my monorepo to a "workspace", things work fine for me. And although I haven't tried it yet, I think using tsconfig path mapping as I suggested above should work. Do you see any problems with this approach ? Btw, I'm a big fan of your work. Thanks for all the videos!
@mmmmmmm8706
@mmmmmmm8706 4 жыл бұрын
Really loving this TS starter! Would love to see the next levels too :). Just did this end to end ... wow, that was packed ... i think that was excellent. QQ: instead of shared-types being linked workspace via npm linking ... could it be its own federateModule that's remoted into the other federatedModules? In a bigger system, would this be an okay option? As opposed to having the host define a types tsremote-mf-decl.d.ts ? I supposed you would still need the decl.d.ts.
@MrCherry3475
@MrCherry3475 4 ай бұрын
It would be great but from what I see it will all compile to remoteEntry.js anyway and lose the types... But bundled packages have the d.ts definitions inside... It should work the same with Module Federation packages IMHO, but it doesn't?
@patmuller8992
@patmuller8992 2 жыл бұрын
Doesn't having this as a mono-repo sort of defeat the point of module federation? I feel like I'm missing something here.
@gransmistad323
@gransmistad323 2 жыл бұрын
You can deploy a new remote without needing to rebuild the host.
@ntensewraps
@ntensewraps Жыл бұрын
I'm curious about this too. Not sure if he decided to just demo this as a mono-repo for the sake of a more stream lined video though.
@Super-wk6jx
@Super-wk6jx 3 жыл бұрын
But does it scale? What about the internals of the exports, for example i export a state object as remote module and it has complex structure it would still show that the attribute is unknown. I cant imagine that we would need to create each declaration in the host application instead finding a way loading it from the remote?
@jherr
@jherr 3 жыл бұрын
Module Federation shares JavaScript code, and that JavaScript, compiled from TypeScript lacks and details on the types.
@singaravelann3671
@singaravelann3671 3 жыл бұрын
Thanks for sharing this video. When I have tried with next js, I couldn't call the getList("Bulb") in the receiver application. Since it showing getList is not a function. Thanks Jack and awaiting your response
@jherr
@jherr 3 жыл бұрын
You'd have to point me to the project. Next.js has compatibility issues with Module Federation currently.
@jherr
@jherr 3 жыл бұрын
@@singaravelann3671 There is an issue with how NextJS manages `react` and how it shares components. @scriptedAlchmemy on Twitter (Zack Jackson) found a workaround for this and is working with the team on adding true Module Federation support to NextJS. So I'd contact them to see if they can help or if they have options for you.
@ALOKSHARMAMD
@ALOKSHARMAMD 3 жыл бұрын
hi, is it possible to add/remove plugins modules at runtime (instead of opening 2 servers like your example) so say i can upload a bundle on location /Plugins/PluginA, /Plugins/PluginB and it gets pickedand be available in my application next request... thanks
@jherr
@jherr 3 жыл бұрын
You can certainly add them dynamically. Removing them is a bit more tricky.
@justdanallen
@justdanallen 4 жыл бұрын
Jack, I've watched all your Module Federation videos. Thanks for introducing it! I found them by searching Google about micro frontend. I've been thinking about proposing an architecture based on MF for my work. One question I've had is it possible to version the remoteEntry.js files? Or dynamically reach for different apps? I'm reminded of the A/B video you did, but that requires a loader... Maybe that would be the right approach.
@jherr
@jherr 4 жыл бұрын
You could version the publicPath, something like `assets.mycompany.com///remoteEntry.js` and then the hosts would specify their remotes with the versions. You could always build for `assets.mycompany.com//HEAD/remoteEntry.js` and then deploy to `assets.mycompany.com///remoteEntry.js` and alias it as the last deploy step.
@justdanallen
@justdanallen 4 жыл бұрын
That's a good idea, I like it and straightforward. I'm going to chew on this. Thanks for the suggestion and all the content!
@_blank_3677
@_blank_3677 3 жыл бұрын
You do point out the fundamental problem (build / runtime). Unfortunately this doesn't solve for any of the use cases a large company will benefit from module federation. Since this is a year old, I'm curious if you've come up with anything that scales for companies with several teams owning pieces of a user experience on a single page (eg micro-frontends). Best I've been able to do is publish types to their own registry and use some script to pull down the latest types during builds. Optionally developers consuming another remote can sync types with a cli command.
@jherr
@jherr 3 жыл бұрын
Many thoughts about this. First, I don't think my position has changed that architecturally what you want is to share type "contracts" for the MFEs. As for how to get that done, it would be great to see more support from NX for Module Federation since they have TypeScript type sharing between libraries and applications down to a science. Alternatively, or maybe in addition to that, it would be cool if we could get `.d.ts` files created as part of the files in the bundle. And then, at the very least we could pull them down before building. And if we could get that it would be awesome to see some integration into tsc for type files deployed as URLs.
@_blank_3677
@_blank_3677 3 жыл бұрын
@@jherr thanks for your reply and yeah, “contract” is the word I should have used. I also have many thoughts (as is typical with mfe conversations). I’ve been researching this problem space for the last couple years internally at amzn and spoken with many teams tackling it for various products (the .com teams are particularly interesting btw-not many scenarios in the world with that level of scope and complexity). Would you be interested in having a spoken conversation sometime?
@jherr
@jherr 3 жыл бұрын
@@_blank_3677 sure. Hit me up on either my discord or Twitter DMs, both are open and I’d be happy to talk.
@_blank_3677
@_blank_3677 3 жыл бұрын
@@jherr will do, also speaking of contracts-I’d love to talk testing strategies too. We’re vending/consuming user experiences here, which are unquestionably much more complex than the data typically being consumed in backend SOA.
@jherr
@jherr 3 жыл бұрын
@@_blank_3677 funny you should mention that. I’m just wrapping up content for a 90+ minute micro-fe video for freeCodeCamp and I was just writing up testing strategies today. :)
@XFretX
@XFretX Жыл бұрын
How would this work after ts compilation/build? My expose is aiming towards a tsx file instead of the compiled version
@jherr
@jherr Жыл бұрын
It won't work. TypeScript support is still an issue with Module Federation.
@XFretX
@XFretX Жыл бұрын
Ah bollocks! Thanks for the info though bud!@@jherr
@XFretX
@XFretX Жыл бұрын
I have been trying it some more today and after recreating the test-case and running the npm run build and npm run build:start it actually automatically refers to the ./dest/XXX.js instead of the ./src/components/Widget.tsx. Not sure whether I've just messed up yesterday or whether something changed, but it is now referring to the correct file after compilation/build
@jherr
@jherr Жыл бұрын
@@XFretX Look at the output file, it's JavaScript. That's because the browser can't run TypeScript natively. The only things that can natively run TS are Deno and Bun, AFAIK. So the modules have to be JavaScript.
@XFretX
@XFretX Жыл бұрын
Indeed, last time they didn't get tossed to the output, now they did. Most be a PICNIC (Problem In Chair Not In Computer) :') Thanks for the tip@@jherr
@berliantorumapea4299
@berliantorumapea4299 2 жыл бұрын
Is there a way to achieve this without monorepo? my boss doesn't like monorepo :(
@jherr
@jherr 2 жыл бұрын
There has been some work done to package the .d.ts files as a zip file and publish them along with the compiled JS bundle. Then during compile time to download and unpack the zips locally. I don't think any of that has been packaged up cleanly yet though. It's still a DIY job.
@d0paminer
@d0paminer 2 жыл бұрын
Is this still an up-to-date solution or is there something better?
@jherr
@jherr 2 жыл бұрын
There has been some work recently where folks are zipping .d.ts files and packaging them along with the libraries. Then grabbing them and unzipping them at compile time.
@jherr
@jherr 2 жыл бұрын
@Rodrigo Lima Batista Nothing has been released yet that I know of.
@evelynlogan2795
@evelynlogan2795 4 жыл бұрын
Hello guys, thank you for the great video. What do you think about using module federation alongside web components.
@jherr
@jherr 4 жыл бұрын
No problem. Module Federation just gets the code from one app into another. What that type of code that is, is completely up to you.
@brendad.millar6596
@brendad.millar6596 4 жыл бұрын
Thank you so much
@tobiasgraf5246
@tobiasgraf5246 4 жыл бұрын
Hey Jack, first of I love your Videos about Module Federation an Micro Frontends. But one thing you mentioned. When you at least using an IDE wich has Typescript running in the Background and respects tsconfig.json files you can do it much more easier without the "shared-types" module. Take a look here: github.com/42tg/mf-typescript You can even Shift + Click on the tsremote-mf imports and jump directly to the implementation. Sure you have to add all Federated Modules but since you have to do the work anyway in the webpack config it should be not the biggest problem.
@jherr
@jherr 4 жыл бұрын
Is there an IDE that you recommend that would show this off? I'd love to have that lined up for Friday's livestream at Noon PST on this channel.
@tobiasgraf5246
@tobiasgraf5246 4 жыл бұрын
Vscode does this out of the Box
@jherr
@jherr 4 жыл бұрын
Tobias Graf ah, gotcha.
@tobiasgraf5246
@tobiasgraf5246 4 жыл бұрын
Have fun, I will take a look if I can join your stream at friday 👍
@muhammadjaffarrazadar967
@muhammadjaffarrazadar967 4 жыл бұрын
why do we have to declare the modules?
@jherr
@jherr 4 жыл бұрын
Because Typescript is running at compile time and this is a runtime dependency. So if you need Typescript to know about the modules then you have to declare them at build time.
@sabasayer
@sabasayer 3 жыл бұрын
I still dont understand why you wanna use module federation on a dependency like this. İf anything changes you need to adapt that change. Why should i use module federation and import on runtime instead of import on dev time.
@jherr
@jherr 3 жыл бұрын
The scenario that was critical to me was a large company setting where we wanted to share code and have it all update at the same time without requiring each app to re-build and re-deploy. A good example is a header. If you do the header as an NPM module then to get all the consuming apps to update means a build and a redeploy of each application. With a runtime dependency then all the apps update at the same time. And yes, there is the downside of possible issues with that new code. But if a run-time dependency is an architectural requirement then that kinda comes with the territory.
@sabasayer
@sabasayer 3 жыл бұрын
@@jherr Thanks that sums up the real need
@EE-yv7xg
@EE-yv7xg 4 жыл бұрын
One of the biggest problem is that I am unable to use SSR with mod fed when I am not using next.js Could you please a video of that 🙏
@jherr
@jherr 4 жыл бұрын
It's definitely on the list of Module Federation topics for videos.
@EE-yv7xg
@EE-yv7xg 4 жыл бұрын
@@jherrThanks Jack🙏. esp. without next.js. Since most of industry is not using next.js. My company is'nt 😅
@jherr
@jherr 4 жыл бұрын
@@EE-yv7xg My plan was to riff on the SSR example in the Module Federation examples repo.
@EE-yv7xg
@EE-yv7xg 4 жыл бұрын
@@jherr Yes !!
@shakil-ep2tc
@shakil-ep2tc 4 жыл бұрын
Has anyone ever told you that you look like the good guy version of Donald Trump?
@jherr
@jherr 4 жыл бұрын
Not really.
@serkan.bircan
@serkan.bircan 4 жыл бұрын
That is exactly what I tought.
@edetmmekut809
@edetmmekut809 4 жыл бұрын
lol i think i have a better way by avioding it all togather
Module Federation Into Production
9:15
Jack Herrington
Рет қаралды 13 М.
Five Module Federation/Micro-Frontend Mistakes
28:09
Jack Herrington
Рет қаралды 49 М.
It’s all not real
00:15
V.A. show / Магика
Рет қаралды 20 МЛН
黑天使被操控了#short #angel #clown
00:40
Super Beauty team
Рет қаралды 61 МЛН
State Management for Module Federation Four Ways
31:23
Jack Herrington
Рет қаралды 42 М.
Micro Frontends Crash Course with React & Webpack 5 Module Federation
1:11:37
“use cache” NextJS’s latest take on data caching
17:27
Jack Herrington
Рет қаралды 10 М.
Vite and Module Federation Makes Micro-Frontends EASY!
27:36
Jack Herrington
Рет қаралды 100 М.
Zack Jackson - Module Federation
29:04
Jack Herrington
Рет қаралды 9 М.
Professional Micro-Frontend Shared State Setup
51:31
Jack Herrington
Рет қаралды 74 М.
Full Site Federation in Webpack 5
29:45
Jack Herrington
Рет қаралды 15 М.
5 Things I Don't like about Payload CMS 3.0. beta
7:59
That Payload Guy
Рет қаралды 3,5 М.