React's Next Big Change?
Вставка
- Опубліковано 20 лип 2024
- react-dom is a criminally under appreciated part of how React works. react-strict-dom makes understanding it even more important. Excited for this library and how it could impact the world of React Native.
Is this the opposite of Flutter?
REFERENCED VID (REACT BUILT FOR WEB):
• React Wasn't Built For...
MAIN SOURCES
/ 1760161680980369545
github.com/facebook/react-str...
/ 1760245165703184516
MORE SOURCES
/ 1760327319892234280
stylexjs.com/docs/learn/think...
necolas.github.io/react-nativ...
/ 1760245165703184516
github.com/rubennorte/discuss...
TIMESTAMPS
0:00 - Intro
0:46 - react-dom overview
14:30 - react-strict-dom
Check out my Twitch, Twitter, Discord more at t3.gg
S/O Ph4se0n3 for the awesome edit 🙏 - Наука та технологія
I don't exactly how to explain it, but it feels like following this guy is the shortest path to burn out as a front end dev.
I swear to god I dont even know what to learn about React anymore. Where is the guarantee that all of these changes wont suddenly become obsolete in 2 years? There isnt.
@@naughtiousmaximus7853 Yeah when sh*t is too much is starting to mean less and less, like the path make less sense, not more.
(Also 2 years? More like 6 months lol)
@@HoNow222 yeah 2 years is pushing it. I think I might opt out to Vuejs to learn how to develop properly( concepts such as routing,state management etc) and then just lie on my resume that I have React experience. (I will read the docs, lol)
I would say Theo despite his best intentions personifies a lot of what is wrong with the front end “community”. It’s all about the shiny unproven new stuff just released and barely viable long term. If you follow trends like this you will burn out and fast.
What I would say though is that Theo is a UA-camr. He is to entertain and draw eyes to something. Only a fool or amateur would be jumping on a lot of stuff as it’s too much and vastly unstable with no future
Yep, 100%! Also too much damn DRAMA.@@DauntingGecko
You can add it to your React components starting today “use strict”;
I hate the fact that this joke is only funny for webdevs, our field is fucked up
@@gerardmarquinarubio9492 there are job specific jokes for every jobs
@@gerardmarquinarubio9492 could you ELI5? I don't even know what to google to be able to understand this joke 😆
@@gerardmarquinarubio9492what is the joke?
This guy is the human representation of the entire JavaScript ecosystem.
in contrary as an experienced react, react native and CSS developer you can see that much he says is nonsese
I am still waiting for one best feature in React framework, called - consistency.
😂😂😂
thank you so much for the video, theo
was not aware of the event loop proposal, having a well defined processing model across platforms would be awesome
Thx for the great video, Nerd !
I'm an old timer learning React for the first time. Great stuff !!
Have a look at WHATWG Web Components already supported by your browser natively. You will find out you will create more lean and more reusable things easier...
now we have:
react dom
react native
react native for web
react dom for native
react strict dom
Get ready for React Strict Native For Web
@@spicynoodle7419and then the ever venerable
NATIVE WEB.
i understand backend devs
Now I want my wasm to only call react-dom functions 😳
Could have used a tag to represent the TopNav html output
I like the concept, but hate the `html.` prefix
Can i destructure html like this?
const { div, span } = html;
So that i can continue using and don't need to write ?
@@adtc yes
It is too verbose for me.
Can i destructure html like this?
const { div, span } = html;
So that i can continue using and don't need to write ?
Yes
JSX requires capital letters for such tags if you are not using the "implied native DOM elements". html.div is allowed some weird rules around access the elements of an umbrella object.
Great video!
Just a little correction at 30:28, measureInWindow is actually a native API and not an “only-browser” API
It’s similar to what hyperview is which is based on htmx.
Instacart built hyperview so they could target web and native with 1 dom definition that is augmented at runtime , not compile time .
Thank you for this great video and I am very exited about this project.
I love these videos! I had never used tailwind before. Saw a 4.0 beta video yesterday and implemented it today.
Really enjoying the content! One bit of critique: as a UA-cam viewer via iPhone, the cursive/non code font is very difficult to read in these diagrams at this font size 4:08
Usually I'm better about this. In this instance I chose to ignore it since the specifics in the bubbles didn't matter (and was shown earlier close up), but that doesn't make it any less distracting 😅
I think you're confusing some stuff here. They can't rewrite the event loop or control it in any way. What they can do and are probably going to do is write a scheduler that determines the optimal way to distribute work across the various event loop queues.
You don't get to touch the behavior of the event loop in JavaScript land. Its implementation is lower level than that, think V8 C++ code.
Great video so explanatory important for anyone in the react ecosystem to watch it thanks Theo !
Great content theo, love from Egypt, "not a bot"
That sounds like something a bot would say🤔
تحيا مصر
Hey Theo, which font-family do you use in VSCode? The readability of it is excellent
What is the software use to create and display the flows?
It's called Excalidraw I think. It's free to use and web-based.
Love to see this technical content
Thanks for the vid, Theo!
Thanks Theo!
what diagram tool is that? during the react-dom overview part
excalidraw
StyleX is such an unnecessary abstraction in my opinion. CSS is not rocket science and if you're getting unintended side effects from your changes, it is very likely because your HTML structure is ass. And before anyone starts; yes, I work on a large product.
Issues with CSS is a great reason to actually look at your DOM structure and identify needless complexity. React is especially bad with messy DOM trees because your components obscure excessive nesting of HTML elements and makes it easy to leave shit behind if you don't wrap your conditional renders correctly.
I'm not saying CSS doesn't take time to learn and lord knows there are many, many quirks that can cause unexpected behavior (though it is a lot easier now than it was 10-15 years ago). Of all the problems I encounter with HTML/CSS, targeting and property inheritance are not the main ones by far. Certainly not enough to warrant another abstraction. I've seen people mention that being able to have your styling in the same file as your component code is a benefit. Why people think this is beyond me. Even if I was to use StyleX I would always separate my styling into another file to avoid visual clutter. Multiple files are much easier to navigate than a single file with several different contexts.
Thank you Theo, this is brilliant!
Yay, let's just add even more abstractions.
There’s a lot of React competitors popping up, but none of them consider other platforms. It’s so awesome to see the React team taking every other platform super seriously.
Thanks for the synopsis, Theo!
That's because the market share of the web is over 90% if you just compare the install rates of the target platforms from the video. There are also emerging solutions for platform agnostic implementations as well. Really React now is more akin to Java trying to stay relevant with its "targets anything that can run a JVM" when better solutions emerged.
I'd love to hear more about the new react event loop.
you got me good with calling out those who skipped to react-strict-Dom xDD
If you don't realize the Flutter approach of just doing the damn rendering instead of trying to build google translate for javascript and kotlin/swift I'm sorry for you. The sad thing about Flutter is it didn't use JavaScript so it can't work well on the web.
I've always wondered if react-dom was extensible, where I could supply my own objects in the create element, but it's probably so tightly coupled to dom that it might be more complicated than that.
what software does he uses to do the diagrams?
Excalidraw
Styled embraces the locality of behaviours that tailwind and htmx are doing . Ironic. Reminds me of how he react server components allows SSG and SSR like htmx does by its very nature.
I am not against at what meta is doing. I am just noting the change in mindset back to a dom for each target being more groksble and the attempt by meta for a fully qualified dom that works across different device targets just like what hyperview does.
The thing that most interests me is actually exposing these API as a plan9 style approach where everything is a file approach works. With rendering systems you can do the same approach and expose dom as a file like api or a http web transport target that is callable rom the runtime. This is a common namespace structure into the dom itself and the style itself, so that it’s easy to alter the DOM at runtime . Kind of a bit like a asyncapi of the DOM itself.
It’s all going o be interesting how Wendy and quest and Apple vision pro fits into this picture and the DOM that will be exposed for a 3D DOM. This is where the abstraction layers and an async api over them will be a key differentiation.
Apple has Pixar and its UDSZ format that has the right mix of namespace aspects to make it parametric. The new Model DOM for browsers is still a long way away and will never get cross browser support. A 3D higher level abstraction layer will be needed with a restricted DOM and Style that works on many runtimes. Then we have Unity and unreal engines to through into the mix.
The software world needs a way to abstract all these targets and these attempt are great. It’s really just what is called “ single sourcing” where one dom works on many targets. I think a WASM runtime that does the translations at runtime and / or compile time one opportunity here. WASM runs everywhere ( browser, native, a Vision Pro app ) a server , a cloud flare function too.
I don’t hold out that much hope for this shift by Meta because their are other frameworks doing this from a fresh start hat learnt from he mistakes in react . Let’s see
I get one codebase, many targets may not be ideal, but one codebase defining the presentation independent behavior across those environments, yes please
You gotta love that famous comment of every react dev: "I don't like other frameworks. Too much magic...."
The NPM trends thing is cool - but there are two points where installs are always lower - one is 24/12 being Christmas (eve), but the other pit is 29/10 - why is that? What happens at the end of October to cause such a dip? I looked it up, and I found it to be International Internet Day, National Cat Day, World Psoriasis Day, World Stroke Day, and my favorite - National Oatmeal Day. It's also the day Matthew Perry died.
Why would you want to ban !? Did I miss something?
Yeah, that feels very weird...
Yea, what timestamp did he go through that??
8:47
This just sounds crazy to me, imagine working in a place that you don’t trust people to use html, it also just indicates that my intuition on react being popular just because people want to imitate big companies is right
i can maybe understand this at a huge shop like Meta and with some niche libraries, but this sounds utterly insane for everyone else. im sure some shiny object syndromer will convince their team that this is the new way because it has "strict" in the name
React changing html is finally having jumped the shark 🦈
What diagramming tool is this? Looks good
Excalidraw
it took a while but damn that mustache really suits you 👍
I'd also like to know how it compares to Tamagui.
What I don't quite understand about this is what is exactly "rendering natively"? Like why it isn't in the first place? And what react-native do so it is become native?
I'm so happy for getting off the React train since last year!
wait a second, that is not virtual DOM, that is react component tree, which in turn is rendered to the virtual DOM, which in turn is synced with the DOM.
Thank also to you Theo. Legend😇
If you build a web application and dont know the basics like HTML, you have to learn first building without a dependencies like react, a build step, etc.
It is insane to create abstractions around something that is so simple.
What is the app he uses for diagrams and drawing?
also curious
@@scottscherzer6725 Just found it. It is Excalidraw.
That has such a huge implication that if this happens the paradigm of development will completely shift from opening Web Developer to Mobile in a Direct term.
This means that React can then be used for different platforms even for VR (Quest/Vision) as it should technically be adaptable as it gonna be an integration to a model that already does it.
I am really not good enough to contribute... but Thanks to those who does.
Cool Stuff
make abstraction layer for web and mobile based on html elements - that is crazy 😂
If you ever used react native, it’s not tho. Works just like a webpage except flexbox is the only option for layout
Web components have been around for a while though
I love where react is going now. Exiting new stuffs that are game changers. In-between, very insightful video Theo.
At this point, i feel like, learning react is a waste of time and not worth it
@@naughtiousmaximus7853 if you have a company and decide to use Angular in 2024 would be the most logical thing to do.
@@naughtiousmaximus7853 i never hated on angular, it just works differently. But yeah, it look more appealing to me than react
Learn angular
"I'm not for write once, run everywhere' because they're different experiences"? 🤷♂🤷♂
Having different codebases for different platforms creates far more UX problems than it solves imo.
9:45 Flipkart has about 3x Twitter's annual revenue
Yeah, I thought that was an odd thing to say. Came across to me as "non-US company so not worth mentioning".
I'll take it charitably that Meta is the odd one out. 😂
Watching these videos always make me so thankful I left React behind at my last job.
wow, i understood nothing 😢
They are tempering with document object models again? The things they tack onto the hyper text parsers will cause older sites to break. Also VRML are long dead, MS is trying to necro old methods.
Thank you Lord for videos like this.
I am still not sure, is it going to help native developers or make their work more difficult? What is this concept trying to do even?
Awsome
Why not CSS layers? That would solve most of the issues.
I don't mind the import for the dom standard, that makes sense, I can get behind that... but the html.div ... yeah I'm out... it's not just that's 'more to type' it breaks copy paste from my ux designers... or examples from mdn... its no longer html/xml it's ... something else.... and sure "It's always been something else" but breaking that pattern really sucks.
Cool. I don’t know for what purpose this “html.div” was made, probably due to the fact that typings for jsx div are declared globally. Adding global elements via react hyperscript is not a new thing. The only problem is that typescript does not allow you to specify different global scopes for different files. The next step will obviously be to go to Microsoft TS and push global file (module) level scopes. Well, then rewrite all the garbage that they are going to write using "html.div" back to javascript. Or maybe someone will figure out how to use partial grammars without dancing with a tambourine.
This is a lot of words to say: you can build for web, android and ios with react web and native.
I was learning a framework that no one use (it's called fuseopen) and one reasons is that all components are animatable and doesn't affect the UI thread , but it has slow community support therefore I was thinking about react three fiber and alternative but now I'm just gonna learn PWA and generic web permissions and forget about anything else lol implementing web API into react native ? I mean kudos but no
Yes ! My dream becoming true !
Video feels too dark
unlike uploadthing website
Sounds like Angular!
Idk if I'd describe changes to the slowest evolving framework in existence as "big".
React is all over the place at this point am going back to normal html and css
Is twitters website react native web?
I feel for react developers. they have to always learn new things :(
and always argue that svelte is not as good XD
I don't get what React solves what standard Web Components couldn't: 9:02 . Seriously ES6 modules + Web Components... why do I need React?
i knew several of these words
This is starting to look like flutter
People don't like changes. This is a promising change that will allow us to iterate faster especially when working in small teams with limited budgets but many people in the comments complain.
don't like the naming tho.. it's restricted-dom, not necessarily strict 😅
a "limited set", huh maybeee a Finite Set?
I like this a lot actually
We Elmify react /s
There is so much now to just say screw it. ElectronJS for desktop applications, React or Next for Web, then Expo for all mobile development (web included too if you wanted).
Electron these days. No way
All of it with just Flutter.
@@whatsanimesh does Flutter web still have horrible accessibility. Last I remember it was just rendering all UI into web canvas and that was horrible. Looking at docs now I see that it has an HTML renderer, but not sure how good it is.
@@fcnealvillangca7943 bro most your applications are built on electron LMAO.
Like can React go 1 god damn nanosecond without changes? Unless this whole constant changes nonsense stops you will have massive amount of people burning out and just moving to something like Vue or Svelte. People laugh at Java for being verbose or whatever, but that language is super consistent compared to utter nonsense that js frameworks are.
HTMX crew
HTMX gang
I think they will try to implement stylex compulsory to react user or new tech stack
The more I see where the React ecosystem is going, the more I'm grateful Svelte exists. What a horrible idea, abstractions over abstractions over abstractions...
A month ago you said UI libraries are dying 😂😂😂
encapsulating the style is a downgrade, because you'll always need to customize the appearance of the components you use, and with encapsulation the only way to do it is via props. This means more work for libraries mantainers, more work for the developers and less customizability, that is also the problem of native development. Cascading is one of the best thing of the web development. There's a reason why lately many unstyled libraries became popular. Not everybody is fine with just Material components.
svelte is the best tbh
WHY! The best part of React is that you can just write HTML like it's HTML. Why would you now need "html." prefix?! Unnecessary and ugly...
You probably need the html prefix for react native only
At this freaking point if i was CEO/CTO of a real company/real product to develop, I would 100% choose Angular lol
Welcome to 2016 again
Isnt angular even more bloated mess than react?
@@naughtiousmaximus7853 Nope, the last two years have been amazing for Angular (and looks like it will continue so)
react seems to change every few minutes
what a horrible idea, and a useless abstraction X(
great video though.
People dislike changes way too much
Show us some manly colors
Reacts big challenge is getting rid of next
React, Next Js
Vue, svelte, angular
Yeah, dumped react a while ago and haven’t missed it one bit. Currently on board with htmx + whatever the hell I want.
Literally I have been promoting Svelte since ages ...React sucks
@@Cohors1316 same here lol. Goodbye headache
@@IAmOxidised7525keep it up
I swear to god I will swallow my fears and just learn RxJS for Angular. Fuck react this is bullshit
So much bitching in the comments over something that is still strictly in the research phase and will probably not impact you at all unless you want to use it in the future.
Its been over two years since the last major React version came out, and in those two years there have been several revolutions in how we build web-apps. If you, as a professional or even novice dev, cant keep up with a release schedule with small breaking changes that can almost be measured in half-decades, you are NGMI. Sorry.
why tf do webdevs need all of this verbose shit?