React Wasn't Built For The Web
ฝัง
- เผยแพร่เมื่อ 25 ก.ย. 2023
- React is an incredible framework that can do incredible things. Not just web things. Hear me out.
PROJECTS I MENTIONED
Remotion (React for video) - www.remotion.dev/
React Email - react.email/
React PDF - react-pdf.org/
Ink (React for CLIs) - github.com/vadimdemedes/ink
React Three Fiber (3D React) - docs.pmnd.rs/react-three-fiber
React-nil (React for servers the wrong way) - github.com/pmndrs/react-nil
Reacord (React for Discord) - reacord.mapleleaf.dev/
ALL MY VIDEOS ARE POSTED EARLY ON PATREON / t3dotgg
Everything else (Twitch, Twitter, Discord & my blog): t3.gg/links
S/O Ph4se0n3 for the awesome edit 🙏 - วิทยาศาสตร์และเทคโนโลยี
babe wake up Theo posted another controversial video
babe will never get a full night's rest
React also renders my sleep paralysis demon
Does he look like me?
@@t3dotgglil bit
@@t3dotggnow I'm just picturing Theo standing in the corner of my room at 3am
He looks like Theo wearing those cartooney swim goggles :P
@@null_spacex He's just standing there... *MENANCINGLY* !
I remember when react first came out, I found a really good video from a game dev, explaining how react's rendering model is inspired by "immediate mode rendering" in graphics. Funny to see how we've come a full circle and people are now using react for graphics
React somewhat feels like immediate mode but has none of the actual benefits.
@@clickrushThat is the benefit
React mail and react pdf are so dope.
We (myself and one more person) wrote a big Course management webapps, we use react PDF to generate invoices and contracts and react mail for sending mails, like „he you have a course, accept it now in your panel“ or „you successfully added course change requests“.
They made all our stuff very high end, especially because we where using easyinvoice before.
Don’t forget: react-mail can also render Plaintext! We where handeling that ourselfs, which ended in a sync email html and plaintext (as expected)
React email has been amazing to work with. Was previously been using handlebars templates and even ejs templates. I never knew about react-pdf. That will definitely simplify my pdf creation process.
At my work we're currently using React PDF and React Three Fiber and are looking to use React Email in the future. While none of them are best in class, the huge benefit for us is that as a small company and small dev team it's so much easier for anyone to work on systems using these with no prior exposure.
Remotion looks perfect for one of my personal projects. Will check it out.
Which other packes/projects would you consider best in class above these ones?
We wrote a React renderer for our game engine at work! Called Hiber3D HDK. Has gotten some people who never would have done game development into it.
this has been my fav theo video recently, so useful - thanks!
Running server code using the react lifcycle was the jumpscare i could have never anticipated
By the way Remotion renders standard DOM elements too, fun thing is that you can inspect your elements in the video real-time too 😅 Yea, you can render a video with ffmpeg an stuff, but you can't really use a lot of cool animation libraries (like framer-motion) because you need to interpolate the state of every element for every frame in your video.
Theo thank you. I put your videos on while I code and it makes me feel like I’m part of the community.
Your ability to show the positive side of things is close to none! keep the positivity and productivity alive! peace
I have spent the past year preaching this exact topic everywhere. Nice to have a video from someone who explains it in simple terms that i can now show people
I make a living selling D&D books, and react-pdf is such a godsend. There's a *couple* features I wish it had, that it doesn't yet, but wow this is miles better than any other option on the market right now.
I've used react-three-fiber as well and it's an absolute life-saver too.
Didn't expect to find you here
Very eye opening and interesting! Excited to try some of these out!
I've never used React and I had no idea all these things were possible. Hugely impressed
Some of these projects blew my mind. I didn't know they existed. Thanks Theo.
I want to add React Ape , there is not much activity though. React Ape is a react renderer to build UI interfaces using canvas/WebGL. React Ape was built to be an optional React-TV renderer. It's mainly a renderer focused on creating things for TV, PS5, PS4, Nintendo Switch, PS Vita, PS3 and low memory devices.
i thought it would be something to render NFTs
why would you use js or vdom on low memory devices. And why would you use stateful UI over imgui when targeting graphics API's directly?
@@pokefreak2112 because everyone LOVES js and react and it may be faster than 99999 divs idk fuck js devs tbh
As far as I find those tools amazing, I am struggling to find a use case where you would chose them over already implemented (and more performant) non js solutions for some of the examples given.
There definitely is otherwise, those tools wouldn't still exist after a while, but yeah, I am curious.
There is a cool VS Code extension that converts .md files to .pdf. That one is the easiest way I found to make a .pdf but you're limited to markdown's functionality.
Yes please about Remotion! I've been super interested to see how it works but I just haven't really had a side project it applies to. Very interesting project
Somehow i watch all your videos, i litereally never skip them because they are very informative, theo you the best
Incredible video Theo! Loved it
I used the react-pdf for my thesis at university :D It is very usefull and easy use :D
I'm absolutely blown away by what the threejs and R3F crew is doing
This is a really eyeopening video - I've just used react in wetland, and believed that it was it's only use case, but seeing these examples is really making me go wow...
Love this content as a React Developer, particularly its cross-compatibility feature (React Native). This would be vital to me when exploring the Web3 space in future, that's when developing smart contracts on decentralised apps.
developers were so preoccupied with whether or not they could that they didn't stop to think if they should.
Wow! I rarely comment on videos, but at least two of the things you showed were precisely what I was looking for in the last six months. I am surprised by how I encountered this video.
Thank you very much!
Now imagine combining React-Three-Fiber and Remotion?
Everybody is sleeping on it IMHO!
Yes we want a Remotion video!
This has actually helped me appreciate what React is as a technology a lot more. In the browser space, I was always put off by it as it felt like it was recreating too many things that were already built in to the HTML/CSS/JS stack. So Svelte and "less is more" frameworks always seemed objectively better.
But I didn't realize that React was in a different ballpark from the outset by being more than a web framework, and *actively* pursuing that course of development. That definitely changes the value proposition.
I really think that because React separates its render graph from rendering concerns, that alone makes it better than most UI systems. Efficiencies aside (yeah, diffing ain't great), having such separation just allows for so much flexibility. The React Three Fiber library especially. Unfortunately, I don't like authoring React (or any UI code), but can appreciate good design when I see it.
What’s a render graph?
@@zemaumm It's a hierarchical graph of nodes that when enumerated (or visited) can be used to render something. The HTML DOM is a render graph for example. If you do computer graphics (i.e. 3D), it's usually called a Scene Graph. By react keeping it's render graph separated, it means it can map onto the DOM as well as anything else that also uses a graph to render things (for example, ThreeJs, WinForms, or any other UI system)
Even though React pushed this rendering-agnostic approach forward in JS, it was not only library that does so. Both Solid and Vue, heck even Angular already provides ways to plug in custom renderers (Solid being directly inspired by React's renderer).
@@BinaryReader ohhh, is that abstraction why like mentioned in the video the react is output structure agnostic ( it could be email html, pdf, webgl nodes ), but it’s input structure needs more improvement as people suggest ? ( diffing , no reactivity, JSX… etc ).
I didn’t even know the word render graph but I think it makes sense now
Raycast is a nice spotlight alternative for macos that uses react for it's plugin api.
Oh this is dope Theo wow.
Thank you 🎉
My final project from college was made using react three fiber. It was a simulation of trading platform using 3D candles 🤣… fun stuff
Funnily enough, first 3 major version of MJML were in React too.
We gave up on it as it was too limited to ensure compatibility for non modern client (invalid HTML properties, non closed tags, external templating compatibility, outlook comments...)
this is the kind of content I crave for! this was eye opening.. thanks!
Is there an equivalent of react-pdf/Remotion for generating png/jpg images?
Surprised you didn’t mention Raycast. I guess it’s kinda like react native, but they have a great react developer API for writing custom commands in their native swift app
Last year, I used React to build a sub-app that would capture the image at the right inclination on top of the react-webcam using JS sensor APIs.
React is pretty versatile.
Def do a video on Remotion! That would be dope.
I love such videos,
I had faced issues while working with React Native for web, from basic stuff like responsiveness (I am not good at it) to some libraries not being compatible on web, I felt it was not worth it in the long run, if the web and mobile app will change independently. I feel React Native for web is a easy way to use common components for web and mobile, but seems to be creating more problems then it solves (for now).
If anybody has a different experience or advice, I'd appreciate it, Thanks
Historical question: was react more coupled earlier to the web renderer? Or was it always modular? Trying to figure out when it became intentional; pre or post open source.
React provides *three* official renderers in the very first place. react-dom, react-test-renderer, and react-art.
Can't help but think that we've strayed too far with these levels of abstraction, but at the same time, these things are damn cool
I agree. It's getting out of hand.
All this just to keep using JavaScript in ways it was never intended. I really think we need to switch to a new fixed type native language. Web Assembly? Rust? Dart? I don't know
@@ChristopherCricketWallace Web Assembly is the answer there.
Since its a compile target not a language so by its very nature of existing it includes every other language in its confines (including javascript ironically enough)
Basically what java was trying to do, without the disgusting language and with a much more lightweight runtime.
@@ChristopherCricketWallacedo u feel the same about React Native?
@@MrTeathyme ah yes I love downloading megabytes of runtimes everytime I visit a website, also no garbage collector and needs javascript to do pretty much anything
I love those levels of abstraction. I just don't love Javascript 😢
I'm (slowly) making a top-down dungeon crawler game, and I decided to write it in ThreeJS because it's available through NPM (Better than my alternative EaselJS anyway), and I'd be able to take advantage of the lighting effects and 3D layering. I built a tech demo with a scene, a HUD, and even a film grain shader, and then I realized I'd need mouse interactions which are apparently done best in react-three-fiber, so I rewrote the whole thing. React-three-fiber is definitely janky when it comes to odd configurations like the HUD and the shader, but once you get to more typical things, it makes more sense.
I’m gonna use Remotion! Cool stuff!
It's a very cool video. Highly appreciate it ❤
5:38 on React Ink... you mentioned it might not be the best solution for long running programs? Why's that? What would you suggest otherwise for interactive TUIs? I'm working on one at at moment, and have been considering using React Ink for some parts of it, so keen to hear any pros/cons on it + suggested alternatives for TUIs in Node/TypeScript.
Ah yes, this is what Dante's Inferno prophesied about.
Ad. React pdf. I will definitely look at it as I worked my butt of to generate a clean invoice in math lab :P
That's crazy and I love it!
React was definitely built for the Web. That did however, change along the way.
12:32 - My first job in the Netherlands was for a company that had an app on PS4 and was built using React 😂
Really well timed video for me personally. I got into web development about two months ago. Had been working with html css vanilla ever since. Started learning React 2 days ago and finally saw its beauty while making the tutorial tic-tac-toe game. Absolutely fascinated with how cool its structure is and how easy JSX is over html, i love it!
Holy shit React PDF?! I have been fighting Pandoc to manage our templated .pdf documents as code and FINALLY there is something with the flexibility I need. WTF thank you for this video!
Exactly! I was trying so hard to template LaTeX with Jinja in Python. Now, I will give a try to this.
Theo, How can we invest in early tech?
Wish react would go towards signals like solid/svelte. Performance is the biggest major area where react is way behind other frameworks.
Preact has a signal package for React!
Liked and subbed just cause of the 'Let's dive in' part 🤣
glad I watched this to learn about react email
React for a CLI tool is wild
How we can invest in send ?
Someone else already said it, Remotion IS rendering to the web and doing screen capture. Ffmpeg is just to stitch the images together into an mp4 and probably to add the audio.
EDIT: it uses puppeter. Headless chrome but you can also open any browser to preview.
holy shit that's stupid but kinda works
react-pdf has issues with generating the incorrect text, BE WARNED, it will visually look right in a PDF, but when you extract the text from it, it can be wildly wrong. I used it for a resume builder. I ended up entirely rewriting it to use regular react + puppeteer to make it into a PDF. I actually ended up ditching react for 11ty.
Yeah, they are made for Vercel now and Vercel needs to sell hosting. React is made for webhosts.
Holy why cant i find reacord on google? Anyone know the link of their site?
2:32 I was put in charge of updating our company email signatures earlier this year…it was rough indeed
oh ThePrimeagen is gonna love this one
Can i use react for backend
An open source game I contribute to, SS13, uses React for its UI. It works pretty nicely, and is easy to contribute to even as an amateur.
react pdf doesnt offer table support (at the time i used it) :(
We really need a decent and actively maintained react renderer for linux
Hey Theo, great topic for a video! Can you please share some reading material on this topic, I'm very much interested.
I bet that if a VR revolution happens in the future and we all ditch our current devices for VR headsets, that the first VR UI component framework would be based on React.
I'm writing my first video game in React with the DOM & TailwindCSS. I'll eventually add redux for refactoring, but right now, it's working just fine.
I'm definitely going to be using Ink
I can't find that tweet. Someone please link me
That's probably the only reason why I want to come back to React sometimes. It just have everything around.
can't wait to play with react three. their other work, jotai, is beautifully simple.
I think Vue also can implement these libs you mentioned.
...Why was I recommended this video? I'm a die hard Rust, and tentatively WASM guy, lol.
Regardless, this was a well presented video, and your excitement for these solutions really came through!
Blame @theprimeagen and overlap in audiences.
Just got hired at a job and we use React to build applications for touch screen kiosks like the ones you’d see at McDonalds.
Awsome 🎉
VueJs offers something similar called Custom Renderer API.
React is spreading to other flatforms likes zombies do in movies, And I am loving it. Legend has it zombies use react to control their spaceship.
"Your Scientists Were So Preoccupied With Whether Or Not They Could, They Didn’t Stop To Think If They Should"
Loved the video, btw
Anyone knows of any tutorials to learn how to build this type of libraries on top of react?
Craziest usecase I have seen is using react nested inside of java minecraft to render a minecraft hack client gui
Would love a Remotion video with Johnny
How do you find and invest in these early stage tech companies? Accredited investor status?
I just wish we could have a language fundamentaly based arround those concepts, declarativity & reactivity. It makes so many problems trivial to solve... Every new language people create is just another syntax for imperative functions with someones vision of the perfect type system..
I wonder why no one explored that path yet, maybe because everyone is too busy hating on react for being JS and "for the web", so they avoid studying its core concepts like the plague...
Reactivity predates react by a lot. Also, elm and svelte are technically their own languages that compile to JS. Even CSS is reactive (you can look at "corset" which builds on this idea). There are a ton of esoteric languages and DSLs that people have created to incorporate reactivity as a first-class citizen, but few have really taken off.
At the end of the day, reactivity can introduce overhead and may not be the most performant way to program, so language developers may not want to be prescriptive about it.
this was a banger, thanks theo
I use React to web (NextJS or Laravel InertiaJS + ReactJS) and to mobile (React Native) and to desktop (electron-vite + ReactJS)
Ah I've been playing with Remotion for almost the past year! Remotion video please!!
Good idea for a video
upvoted for the LaTeX shoutout!
Now I want to know how to build my own rendering engine.
+10000 to Jotai! Daishi is worth his weight in gold.
Typically for PDFs, I use markdown + Pandoc + css. React PDF is interesting though, I'll have to add it to my toolkit.
How about Markdown -> HTML -> Export in Browser as PDF
I made invoices with Latex in the college, it was fun.
You can also mention Raycast.