Learn to architect React apps that work across NextJS, Vite, etc. while still accessing the advantages of those platforms. 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.
Code: github.com/jherr/portable-rea...
👉 I'm a host on the React Round-Up podcast: devchat.tv/podcasts/react-rou...
👉 Don't forget to subscribe to this channel for more updates: bit.ly/2E7drfJ
👉 Discord server signup: / discord
👉 VS Code theme and font? Night Wolf [black] and Operator Mono
👉 Terminal Theme and font? oh-my-posh with powerlevel10k_rainbow and SpaceMono NF
0:00 Introduction
1:30 Example Next JS Application
2:15 Architectural Win Of Monorepos
11:34 Uncoupling The Detail Page
14:50 Creating The Environment Context
17:52 The Power Of An Environment Context
18:43 Extracting The Search Page
24:30 Reusing Everything In A Vite App
32:09 How We've Unlocked Vendor Lock In
This video was sponsored by Brilliant
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.
Great video as always Jack. Learned a lot! I really appreciate more senior level content that you provide.
Would you like to create some cool stuff about React Native?
I like how it's straight to the point, no extra data.
Great as always. I would love to see this with the combination of Expo + NextJS using Tamagui 🙂
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.
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 ^^
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.
Great video! First time seeing these concepts so well explained and with examples. Thanks for sharing, highly appreciated and highly educational.
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.
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!
Golden video that shows how to do dependency injection with react context like we have in angular apps. Saved the day
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 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.
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'm happy, when Jack is happy!
Love these unusual more advanced topics
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”?
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.
Awesome video! Thank you Jack
Amazing video as always Jack! ❣️
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...
great video, thanks for makong them
Great video, thanks! If you add a React Native App, you would add the basic elements (View, Text, etc) to the Environment Context?
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]
Excellent video, really useful info.
Jack Herrington => G.O.A.T
For real. His contributions to public content are incredible.
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]
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?
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 patterns! Thanks.
Thank you so much!
These videos give me brain tingles :D
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.
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.
Great stuff. Wondering how to register that ui lib to npm 🎉
I think they make it fairly easy to npm publish.
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.
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 content😉
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 💙
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
Please create the series on React Router Dom v6 It's overwhelming
brilliant
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
Great video! Frameworks make it so easy for us to use their patterns. But they are very opinionated.
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
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.
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.
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? 😃
Sir plz make tutorial on react or Next 13 pl
nx!!!!!! yes!!!!!
pokemon 👍
Make react or next js course 25-50 dollars
One of the reasons why I keep myself from learning JS frameworks, vendor lockin bs.
*uses react* *talks about fighting lockin*