To try everything Brilliant has to offer-free-for a full 30 days, visit brilliant.org/JackHerrington/ . The first 200 of you will get 20% off Brilliant’s annual premium subscription.
Jack, as a junior React/TS dev, I really appreciate your content. You are pretty much my go-to source of the aforementioned tech. Just want you to know how much you are helping us out in the community. Appreciate your effort.
Nice decoupling tips! Definitively agee with this, not used enough. Some other fancy decoupling ideas I had: - inject hooks as context, decouple from React-Query etc: useApp().useMyQuery() - use webpack/bundler aliases for components: "app/link" => "next/link" - use extensions for DI like RN: Link.next.tsx + Link.remix.tsx - extend React DOM renderer to support a custom link element 🤔
Nice one! 3 things i would add: - Extract the Provider logic to a component in the lib package - Extract the hook to the lib package as well - For the data fetcher i would just return the data and on the next app past in {props} object on getServerSideProps
So good! Thanks for sharing this pattern. I've known the reasons for why this is useful, but it is good to see a practical example showing the exact abstractions used in this architecture.
This was awesome. Thanks for enlightening me. I made a Vite/Vue app as a passion project late last year. Now I know how to structure things on my next project or when I update it!
My team is currently evaluating what to replace CRA with. This content is incredibly timely, and I'll definitely reference it when migrating our app. Cheers!
I loved the video. I've used that technique of sharing React components through context but I always felt it was like an anti-pattern. Glad to see it wasn't such a bad idea.
14:50 I wonder whether this is another case of developer convenience imposing a runtime cost when the maintenance concern could be addressed with a build time solution. The capabilities that a capacitor/web application encounters are not going to vary for the duration of the application session so it really doesn't seem like a runtime concern (i.e. a case for late binding). Granted this is just a standard case of runtime dependency injection but maybe there is a better way; an environment module. Configuring the build tooling to resolve to the correct implementing module (e.g. rollup/plugin-alias ) may be a bit more hassle but it would remove the runtime indirection of retrieving the component repeatedly from the context. [PHP Frameworks Day 2013 [eng] / Rasmus Lerdorf; 31m49s]
I essentially did this same thing, but at a component level. I think I may rethink some things and extract my application even more so that Next is not a hard requirement.
Hi Jack! Thank you for the content, you rock! Do you think that is a good practice to share code between different apps in a monorepo? Will that not make the changeability of the apps more difficult? In what cases it is recommended to share? Thanks!
Actually the reason you want code in a monitors is to maximized reuse. So absolutely it’s a good idea to share code in a monorepo. That being said the sharing should be between apps and packages and not directly between apps. So if you have something to share the extract it into a library package and the import that into any consuming applications.
Great video Jack. Thank you for sharing it. Your approach is really practical and I love it. In fact, it doesn’t like the way in that people start from scratch with diagram, UML.. to design a new application. Could you please create another video which describes this problem with “theory approach”?
Hi Jack, thank you for another great video. Learned a lot of new things. On a side note which theme are you using for your VSCode? It looks so clean with the font.
Awesome content Jack, thank you! Question: how would you implement authentication+authorization in a setup like this? I struggle a lot in 'hybrid' situations where an external idp like auth0 is used, and role based authorizations based on JWT on *both* frontend and backend (SSR) are needed. Would be awesome to see how you would approach authorization schemes in a setup like this monorepo.
I know this is an example app, but just for the guys that saw it. The pokemon filter should be done in the API, not in the frontend ok? Send the parameters via the request, then get back specific what you need.
Really awesome and informative learned a lot🔥. Prior to watching the video, I had some confusion about the differences between module federation and Monorepos (using Nx). However, this video provided much-needed clarity. my team is currently in the process of merging two Next.js projects - one of which utilizes Redux while the other utilizes Context API. I will definitely discuss this pattern with my team. btw any thoughts how we can go about this?
Thank you so much for another great video! I've learned some new tips today about the Environment Context approach! It's good to see you are using Nx in this demo. I'm hoping one day you will be back with some more videos on the MFE and MF, I'd love to see how you would structure multiple apps, one with static code sharing, others with dynamic code sharing, between different bundler Webpack and Vite and possibly the host app written in Nextjs if that is possible?
Great video and a nice pattern for people to learn, especially as all the big React frameworks get snapped up by large vendors that want to keep you on their platform. Just curious, do you think this could be extended to work with Qwik and the qwik-react plugin?
One thing I would be interested in would be whether you could do this with a completely different framework, like vue or svelte instead of another type of react app.
I like the idea of using a context as a sort of depdendency injection, but unfortunately contexts won't work at all in React server components. Is there a way to make the concept work there? For example, in the NextJS app directory?
Good observations Leslie, brings quite some to the topic, I believe deeper you get into more complex app, decoupling like presented becomes much more challenging. To the point that maintaining it without any clear direction for the product to change framework could be questionable
This is why we need a standardized AsyncContext (TC39 stage 2 proposal): possibility to implement cross-platform context that works for server/client in the same way!
@@thisweekinreact Hmmm, yeah, good one. One question is whether we expect it to be changing over time. If not then it should be. And in the case of Link, for example, that won't change for the lifetime of the app.
@@jherr For static elements that makes sense yes But a Link in a SPA is often an interactive component to intercept click events and navigate, so you could just make your link wrapper a client component and use a context like you show in this video ;)
Hey Jack , a small remark .The visibility in mobile is not very good. Font is small and the color is also a bit dark so its hard to follow along in mobile when you explain the folders files and code themselves . Thanks
I dont like css-in-js at lib level, what are the alternatives for styling but dont get locked in, for lib?, I.e Using emotion has a runtime cost, and I want to choose a other way, but this means a big refactor all the way from libs to apps
@@nexusdino4374 Yeah, I don't really know what specifically you are talking about, so I took a guess. Feel free to jump on the Discord server and ask there but please READ and FOLLOW the #rules before posting.
![SAFEPLANET - ดาวเคราะห์ [ THE PLANET ]](http://i.ytimg.com/vi/4X1XL3I_k3c/mqdefault.jpg)
To try everything Brilliant has to offer-free-for a full 30 days, visit brilliant.org/JackHerrington/ . The first 200 of you will get 20% off Brilliant’s annual premium subscription.
Jack, as a junior React/TS dev, I really appreciate your content. You are pretty much my go-to source of the aforementioned tech. Just want you to know how much you are helping us out in the community. Appreciate your effort.
Nice decoupling tips!
Definitively agee with this, not used enough.
Some other fancy decoupling ideas I had:
- inject hooks as context, decouple from React-Query etc: useApp().useMyQuery()
- use webpack/bundler aliases for components: "app/link" => "next/link"
- use extensions for DI like RN: Link.next.tsx + Link.remix.tsx
- extend React DOM renderer to support a custom link element 🤔
I think the aliases trick is what is used for React native web ^^
Great video as always Jack. Learned a lot! I really appreciate more senior level content that you provide.
Nice one! 3 things i would add:
- Extract the Provider logic to a component in the lib package
- Extract the hook to the lib package as well
- For the data fetcher i would just return the data and on the next app past in {props} object on getServerSideProps
I like how it's straight to the point, no extra data.
Golden video that shows how to do dependency injection with react context like we have in angular apps. Saved the day
So good!
Thanks for sharing this pattern. I've known the reasons for why this is useful, but it is good to see a practical example showing the exact abstractions used in this architecture.
Great as always. I would love to see this with the combination of Expo + NextJS using Tamagui 🙂
Would you like to create some cool stuff about React Native?
This was awesome. Thanks for enlightening me. I made a Vite/Vue app as a passion project late last year. Now I know how to structure things on my next project or when I update it!
My team is currently evaluating what to replace CRA with. This content is incredibly timely, and I'll definitely reference it when migrating our app. Cheers!
Felt very relatable, as i've recently ported a mid size nextjs app to react. Took me about 30days & some help from seniors.
why you had to port it if i may ask ?
Jack Herrington => G.O.A.T
For real. His contributions to public content are incredible.
I loved the video. I've used that technique of sharing React components through context but I always felt it was like an anti-pattern. Glad to see it wasn't such a bad idea.
Great video! First time seeing these concepts so well explained and with examples. Thanks for sharing, highly appreciated and highly educational.
I'm happy, when Jack is happy!
14:50 I wonder whether this is another case of developer convenience imposing a runtime cost when the maintenance concern could be addressed with a build time solution.
The capabilities that a capacitor/web application encounters are not going to vary for the duration of the application session so it really doesn't seem like a runtime concern (i.e. a case for late binding).
Granted this is just a standard case of runtime dependency injection but maybe there is a better way; an environment module.
Configuring the build tooling to resolve to the correct implementing module (e.g. rollup/plugin-alias ) may be a bit more hassle but it would remove the runtime indirection of retrieving the component repeatedly from the context.
[PHP Frameworks Day 2013 [eng] / Rasmus Lerdorf; 31m49s]
I essentially did this same thing, but at a component level. I think I may rethink some things and extract my application even more so that Next is not a hard requirement.
Hi Jack! Thank you for the content, you rock! Do you think that is a good practice to share code between different apps in a monorepo? Will that not make the changeability of the apps more difficult? In what cases it is recommended to share? Thanks!
Actually the reason you want code in a monitors is to maximized reuse. So absolutely it’s a good idea to share code in a monorepo. That being said the sharing should be between apps and packages and not directly between apps. So if you have something to share the extract it into a library package and the import that into any consuming applications.
Great video Jack. Thank you for sharing it. Your approach is really practical and I love it. In fact, it doesn’t like the way in that people start from scratch with diagram, UML.. to design a new application. Could you please create another video which describes this problem with “theory approach”?
Hi Jack, thank you for another great video. Learned a lot of new things.
On a side note which theme are you using for your VSCode? It looks so clean with the font.
JETBRains Mono and Night Wolf [black]
Awesome content Jack, thank you!
Question: how would you implement authentication+authorization in a setup like this? I struggle a lot in 'hybrid' situations where an external idp like auth0 is used, and role based authorizations based on JWT on *both* frontend and backend (SSR) are needed. Would be awesome to see how you would approach authorization schemes in a setup like this monorepo.
Amazing video as always Jack! ❣️
Great video, thanks! If you add a React Native App, you would add the basic elements (View, Text, etc) to the Environment Context?
These videos give me brain tingles :D
I know this is an example app, but just for the guys that saw it. The pokemon filter should be done in the API, not in the frontend ok? Send the parameters via the request, then get back specific what you need.
Really awesome and informative learned a lot🔥. Prior to watching the video, I had some confusion about the differences between module federation and Monorepos (using Nx). However, this video provided much-needed clarity. my team is currently in the process of merging two Next.js projects - one of which utilizes Redux while the other utilizes Context API. I will definitely discuss this pattern with my team. btw any thoughts how we can go about this?
Excellent video, really useful info.
Thank you so much for another great video! I've learned some new tips today about the Environment Context approach! It's good to see you are using Nx in this demo. I'm hoping one day you will be back with some more videos on the MFE and MF, I'd love to see how you would structure multiple apps, one with static code sharing, others with dynamic code sharing, between different bundler Webpack and Vite and possibly the host app written in Nextjs if that is possible?
Also another way to quickly identify the code sharing paths is by looking at the tsconfig.base.json in the nx project root...
Love these unusual more advanced topics
Environment Context reminds me a lot to the Strategy Design Pattern :0
Great video and a nice pattern for people to learn, especially as all the big React frameworks get snapped up by large vendors that want to keep you on their platform.
Just curious, do you think this could be extended to work with Qwik and the qwik-react plugin?
Definitely. There are lots of ways to reuse logic, and yes, in the case of Qwik, even React components.
Awesome video!
Thank you Jack
Great video! Frameworks make it so easy for us to use their patterns. But they are very opinionated.
The Environment context concept looks like the Adapter pattern but in a monorepo?
It’s totally the adapter pattern, you nailed it.
@@jherr Thanks Jack, we learn a lot from you, great content 💙
One thing I would be interested in would be whether you could do this with a completely different framework, like vue or svelte instead of another type of react app.
I like the idea of using a context as a sort of depdendency injection, but unfortunately contexts won't work at all in React server components. Is there a way to make the concept work there? For example, in the NextJS app directory?
A singleton with a setter in the top level layout would do the trick.
Good observations Leslie, brings quite some to the topic, I believe deeper you get into more complex app, decoupling like presented becomes much more challenging. To the point that maintaining it without any clear direction for the product to change framework could be questionable
This is why we need a standardized AsyncContext (TC39 stage 2 proposal): possibility to implement cross-platform context that works for server/client in the same way!
@@thisweekinreact Hmmm, yeah, good one. One question is whether we expect it to be changing over time. If not then it should be. And in the case of Link, for example, that won't change for the lifetime of the app.
@@jherr For static elements that makes sense yes
But a Link in a SPA is often an interactive component to intercept click events and navigate, so you could just make your link wrapper a client component and use a context like you show in this video ;)
Would you suggest using Lerna or NX for monorepos?
NX, Lerna is no longer being maintained AFAIK.
Great stuff. Wondering how to register that ui lib to npm 🎉
I think they make it fairly easy to npm publish.
great video, thanks for makong them
Hey Jack, are you still using zustand? And if so, what are you thoughts of making a zustand tutorial any time soon?
100% using it. A tutorial on it... Sure?
@@jherr yeaaaaa, nice
Hey Jack , a small remark .The visibility in mobile is not very good. Font is small and the color is also a bit dark so its hard to follow along in mobile when you explain the folders files and code themselves . Thanks
Your background is really awesome is it real 😐
Yeah, that's my office. It is a green screen though since I want to be able to record at any time of day.
I dont like css-in-js at lib level, what are the alternatives for styling but dont get locked in, for lib?, I.e
Using emotion has a runtime cost, and I want to choose a other way, but this means a big refactor all the way from libs to apps
You spoke about react native. How can we reuse the components and maybe pages on both systems? I am thinking mainly of styling differences.
react-native-paper? basically just sit on a bunch of stylable components that are alreay react/react-native.
@@jherr Thank you, I will look into it.
I am thinking of using your Environment Context pattern and somehow transform tailwind classes in react app to components in react-native app.
Great patterns! Thanks.
Thank you so much!
Great! Now can we see how to use in React Native? Sure, why not, right? Well, that's not gonna be as simple, but maybe we can give it some work? 😃
great content😉
quick question: how is there a search bar on the header of your vscode? I am on windows on don't get it
editor.stickyScroll.enabled ?
@@jherr Sorry Jack, its not working
@@nexusdino4374 Yeah, I don't really know what specifically you are talking about, so I took a guess. Feel free to jump on the Discord server and ask there but please READ and FOLLOW the #rules before posting.
@@jherr Found it out, it's windows.commandCenter, ty for help
brilliant
One of the reasons why I keep myself from learning JS frameworks, vendor lockin bs.
pokemon 👍
nx!!!!!! yes!!!!!
Sir plz make tutorial on react or Next 13 pl
Make react or next js course 25-50 dollars