Rich Harris Forks JS?? | Prime Reacts
HTML-код
- Опубликовано: 14 июл 2023
- Recorded live on twitch, GET IN
/ theprimeagen
Article: gist.github.com/Rich-Harris/0...
MY MAIN YT CHANNEL: Has well edited engineering videos
/ theprimeagen
Discord
/ discord
Have something for me to read or react to?: / theprimeagenreact 
Наука
please don’t stop with these in depth articles from people in the industry, they’re the best
yeah, much better than some rando article he shits on and laughs about, IMO
@@EmoPorEmilio I like both 😋
Absolutely, as a junior developer I wouldn’t have the slightest cue on where to start, and having someone to read it out and go play by play is an absolute gem. Really appreciate these vids.
People are realizing that the best dev experience improvement is creating compilers that do the hard work for you
it makes perfect sense .
as a react fan myself.
I literally just started development on a svelte-like compiled web language less than a week ago. Mine was very in depth, simplifying JS and having syntax-level support for signals and computed signals (among a whole host of other features) but apparently the idea itself of a compiled language for web development is more popular than I thought. (Although I’m very glad the Svelte people are doing it, I don’t think the ecosystem needs yet another way to do things from me)
Then people freak out as if compilers are a new invention which statement like "Svelte is too much magic" 😂😂😂 I don't need to understand how the Go compiler compiles my source files to use it. All I know is if I give it correct source code it will give me a correct program. It's a blackbox.
@@nyashachiroro2531yes only people lacking education (self/formal) can say such stupid things
The simplicity of svelte is such a breath of fresh air
For me after 4 years of React is like a fresh wind and fresh water after 5 hours of hiking under the sun.
The simplicity of mixing css HTML and JS with some weird, hard to parse, syntax
Yeah right
@@eloytoro Subjective
@@eloytoro Isnt that the way we do vanilla js?
@@eloytoro What isn't simplistic about that? They aren't being meshed, they simply live in the same file. Seems readable to me.
"It would extend JavaScript by making reactivity a language primitive"
There you go. ❤
and that doesn't mean it will be a good primitive
I'm fully bought in to Svelte and Rich Harris. I did a bake off recently, building the same frontend in a bunch of frameworks to evaluate what direction my work team wanted to go. We have been an angular shop for a long time but got really tired of Angular's complexity and constant moving target with breaking changes from version to version. We'd set down a project for a few months and be several breaking versions behind before we knew it. We manage a lot of sites so this kind of required constant maintenance is not reasonable.
Elm, React, Vue, Ember, Solid a few others and what's this? Svelte? add it to the list to evaluate. I knew nothing about it going in, it looked weird... and then I saw the tutorial that teaches you with code all the concepts you need. Then I wrote a project with it and I really liked it but I was making a SPA like I would normally do with Angular and I realized I'm missing out on some benefits sveltekit brings. So I really leaned it, started the project over, did more SSR and added a DB connection and it all clicked and I fell in love. IF you are going to stay in the JS world of frontends and backends... svelte is king, hands down. I tried other meta frameworks like Next and Nuxt and they absolutely suck.
Svelte's approach to embrace the compilation in order to divorce DX from code performance and optimization is a breath of fresh air. We started a new project, we are still very green with svelte and even so we are FLYING compared to having to write the same project in Angular or some other framework. If you write node based backends and web frontends often, you owe it to yourself to try svelte, see how it can combine both of those into one, drastically reduce the amount of code you need to write, decrease your maintenance, increase your readability, simplify your stack and deployment and speed up your time to market.
That said... I'd still rather be writing it in Rust, lol. I just don't think the space is quite ready for production Rust/Wasm frontends yet, but I love leptos. I like Dioxus too. I think once WASM gets direct access to the DOM Rust will take over and I'm here for it.
Is there any proposal or info. regarding wasm DOM access ?
Why nuxt sucks?
What router solution did you use for your svelte project?
@@pyrocentury go for svelte-kit
@@thefeymesaleng It takes what is a very flexible and lightweight and easy frontend, Vue, and complicates the hell out of it for no reason. If it's all you've really used you won't see what I mean until you experience a more elegant solution like Svelte. The shear amount of directory structure rules with Nuxt and how you have break apart and piecemeal every little thing to paly nice with nuxt is agonizing. I get that in a very very large app, those structure rules can be helpful to keep things organized but anything small to medium is just made unnecessarily complex. When a framework has looser structure rules, you always have the ability to add more of your own rules to structure large apps, but if the framework has stricter rules, you can't just ignore them.
I gave nuxt a solid week of effort to try to learn and build a simple SSR app with authentication and db connection... god frustrated and gave up before it was finished. I learned svelte in 2 days, wrote the exact same SSR app in svelte in 1 day. 🤷🏻♂
Svelte's ecosystem might be larger because they can adopt all vanilla JS libraries with out wrapper.
That's some of the reason I'm leaning towards Svelte right now.
I've found really useful jquery libraries throughout the years, but react is kinda weird for that.
Seeing that svelte has to virtual dom or whatever, made me have hopes to easily use jquery plugins or whatever I wanted .
I'll try it.
@@jkf16m96 "jquery libraries" 🤮🤮🤮🤮🤮
come on man, I guarantee no matter what library you name there's a better alternative nowadays..
htmx feels to me *reeeeally* old school. Really confused how that is the new mind blowing shit to people.
That’s web dev for you. The blind leading the blind, especially in terms of hype.
It's probably more for people writing in the backend languages that don't want to deal with adding a JS framework for a tiny bit of interactivity
Everything is just a giant circle. People are just running after what works best in the moment.
"Oh Smartphones are slow, with a Crappy connection" => "Lets hype up SPAs"
"But SPAs are hard to create in vanilla JS/HTML/CSS " => "Lets use Frameworks"
"But now our SEO ratings go down" => "Back to SSR".
As new people come in, that only know Frameworks and stuff, of course, they will be impressed by this "Old" technology and how simple it can be.
What HTMX does, is just take out a lot of the old AJAX trickery we would have to do back in the day and put them into one neat, unified package.
It's a perfect example of experiences, gathered from newer technology, improving old technology.
(Just to clarify: I'm not saying it's better or worse, just funny that the old way of doing it is now the amazing new thing again.)
@@blenderpanzi you're not wrong! 😁 Some people are saying React Server Components feel like PHP all over again.
I think people are getting tired of all the extra JS
After using Polymer, React, Vue, I've tried Svelte once and never looked back, it's just so intuitive and I feel more productive in Svelte than any other framework.
If they had their version of React Native that was anywhere near as good then I would most definitely use it more.
I find it hard to believe people still want to use react native professionally. After tools like cordoba died it is the worst for mobile.
Tbf Vue3 with script setup is just as intuitive as Svelte, it's almost the same thing, and Vue still has a way better ecosystem (because yeah the DX isn't the same with a vanilla JS library and a specific one, for example your components UI library or hooks ones). + Vue Vapor which will remove Vdom is apparently coming out next year.
@@erickmoya1401what's the best for mobile?
No thanks
I knew Svelte and Rich Harris ever since Sapper was a thing. I immediately fell in love with Rich's work and never came back to React. Even ported my Sapper projects to SvelteKit, and it's been a nice experience. I think Rich really is onto something, and I'm glad I am onboard with it. As you've said: Always bet on Rich Harris.
2:53 - "Rich is very, very smart . . . if he handed me Kool-Aid, I would just drink it."
Elm is such a elegant language and great tool, especially when it comes to refactoring. It literally hurts when you have to go back to js/ts
Sadly it is dead. (It has not been updated for 2 years.)
it's not dead, it's done, finished, complete,
solved
@lopsidedpolygon v0.19.1 is supposed to be the final version of the compiler? Like, there is a over 3 year old PR open that fix some spelling in an error message. Minor, of course, but good indicator that it's dead.
@@kaffeetscherlI don't think a language needs new features every year to be alive. One does not need to be fat to be considered alive.
@@lopsidedpolygon then explain the latest version nr: 0.19.1
Please make more Svelte content. Only you can create mass adoption and save the world from the hell hole React has put us in.
Solid comment regarding abstraction and adapters at the end.
3:40 True. I had it on my todo list to make StateAdapt compatible with Svelte (because Svelte stores suck) and when I got to it I didn't have to do anything.
Have you looked at Polymer/Lit? They have pretty much done most of the things that now the single-file frameworks are exploring again. We had even HTML imports to modularize them and they actually work directly without compilation step if you use just JS. I guess the main thing that is different between the newer frameworks and Lit is that they still use the class-based component model as the underlying web-component web standard is based on that.
Or use vue which is pretty much svelte in plain js, especially with composable api, you can even embed it directly in your plain html in dom mode (no compile step needed)
svelte nicer though
I agree after playing with Svelte/SvelteKit and HTMX I think these 2 are going to be the future for a while.
At work we have a few Elm apps. They are a joy to work on, until you need to use ports (JS interop). I've had to implement Chatjs unto Elm apps a few times for example. What a pain.
I will look into Svelte, maybe it is a better way forward. Though I have a feeling the team at work want to pivot to React because it is easier to find people that know it.
using it right now and is great. Hope they increment the benchmarks like Solid and it will be supreme
born in an era when scripting was built for markups, and a markup system build from script to generate markups on the fly
some people hate it, so they add properties in markup which is code that acts for the purpose of that markup component, sanitizes, and evaluate it on the fly after that markup component is sanitized.
As a foreigner I finally got the kool-aid reference thanks to this video. Thank you
what do you mean SolidJs needs wrappers ? I'm confused at that point ...
"A good abstraction does not require continuous adapters" (6:23) -- couldn't have said it better
Thank you for overview of web dev technologies that are still 50/50 in my future.
Im just staying basic and watching the show...
That's incredible! however I don't think I'll be able to convince my team, but Astro may do that possible!
that is basically dart !
I knew this the moment I undertood Svelte. Thats why I am betting on it and replacing react in all the project at the company I work for (as many as I have ownership, at least).
Yeah. Vue3 with comp api, feels like just writing JS, HTML and CSS. Library can be just used as mentioned in this video too.
I lub Youuuuuuu PrimeAgen ... Aaahahhhhhh!!!!♥️🙈
Svelte is taking from UTF8s playbook - they extended ASCII, which means that the usually stubborn americans did not have to do anything different, and just had the thing "work" with whatever they were working on, and slowly the rest of the world had to just follow along. Svelte is doing the same thing, instead of trying to force everyone to use something new, they are extending the existing system and adding the extra features to it. The compiler though is the tricky part, because you are still asking the developers to jump through that extra hoop, and if someone comes up with "Svelte, but without compiler", they will win instead.
Yeah this somewhat exists in ArrowJS for vanilla JS without even using a build tool. 2-5kb import with only three features html, reactive, watch (templates, reactive data, on change function) takes like 5-10 minutes to read the entire documentation. Currently building a program that sends out html templates and its really nice because the package and component files exist as a cached version for fast loading with less data transfer. I still need to test if it works with htmx though because that would be a nice combination of extremely light tools.
Does the tooling have anything to to with the way it's compiled? I mean, are the two connected in any way?
Kinda feels like the ease of integration into existing projects is something that could be prioritized more. Then again, there is always the temptation to start something from scratch, lock the users in and create your ecosystem and tooling.
What I see as the largest blocker is UI libraries that companies have invested $$$ in React. My hope is that as Tailwind takes over, it’ll decouple devs from React and Svelte will gain more jobs
Hello, Prime!
6:03 I'm not sure I understand where this argument comes from, but it is completely backwards.
The beauty of React, and one of the main reasons it actually became so popular is that you never needed wrapper libraries! React exposed an escape hatch to the DOM using refs and this thing was a game changer (compared to the UI frameworks we had before). You basically could just copy the "get started" code from any pure JS library, put it in componentDidMount and you were done! Add appropriate cleanups, and there you go - you have some charts among your react components.
I agree though that abundance of react wrappers is indeed a weird problem. I don't know why everyone started writing those. The beauty of react was that you didn't need an ecosystem of packages. With react, you _are_ writing just javascript.
I believe the problem with wrappers is a consequence of react's popularity. It may be inevitable for any framework in this way. Everyone wants to publish a "react-" lib and wrapping existing pure js libraries is just a low-hanging fruit. But it's not react's fault at all. React gives you everything so you never actually think much about react. You think about js.
yes, i am currently working on new svelte wrappers... :)
This is correct. A ton of what Rich Harris said there was off and categorically wrong. He gets away with this alot.
People like to make and publish unnecessary React wrappers for things because it's "cool" to have a React wrapper for it. 99% of the time it's unnecessary to actually do so. Literally just use Refs
Ironically, React is closer to true VanillaJS than Svelte is- React you can write perfectly fine without a compilation step and it's perfectly valid JS.
"With react, you are just writing javascript"
🧌
"...so you never actually think much about react. You think about js." wtf am I reading.
"React is closer to true vanillaJS (sic) than Svelte"... false
4:55
This is C++ or as it was known "C with classes". Using a set of janky preprocessor macros to achieve object oriented programming within C.
I'm not saying it's gonna be crap I'm just saying to learn from their mistakes. There's times when you should break compatibility.
But that's the reason why C++ is popular as it is.
edit: comments seem to suggest this is a functional reactive approach, cool, love it.
My own wishlist before watching:
Just the standard web apis are already so expansive and impressive, it'd be amazing if you could have a better version of Javascript.
Basically just TypeScript but with better numeric types and equality semantics. Need some kind of parallelism though; or could Web Workers be enough?
Watching on 2x makes me feel superhuman
Also, I'd like to say that AI can probably code, but, can it develop new languages and/or forge the path forward? I think not. [added commas]
Your point about adapters is so true, why is this never mentioned in the react-svelte debate!!
Aside from much easier state management in svelte, the endless wrappers in react should put everyone off.
Even better just use pure js, or TS built with vite. No frameworks. Then you really don't need any wrappers
MobX with React and/or SolidJS. SolidJS shows you can do direct DOM manipulation without a new language and compiler(yeah, duh).
What does Svelte bring to the table that justifies the compiler and new language?
Did you try Svelte already? I mean, did you make an app in Svelte where you have to use stores, reactivity and so on?
@@SilvestreVivo Nothing is free.
@@rapzid3536 sooo, no?
Finally people are being honest about this. Svelte fan boys have been refusing to accept this objection. I prefer to stay in Vue land with 100% valid JS, than learn yet another JS environment. Browser, node, deno, bun, etc. I’m over it.
Also, Vue doesn’t have the import problem as react, as long as you just wrap the respective library in the correct mounting stage.
One thing Rich is missing in the small list of how the big 3 languages would be extended is layout in HTML. Currently, we use CSS as a bandaid solution, but really page structure shouldn't be a function of styling, it should be a function of, well, structure.
im addited to jsx, i look the svelt doc, and i losted interest because of vanilla html, css and js, what will i do to escape from this react matrix?
Svelte is easy to learn, easy to grasp, makes me more productive, just imagine what Svelte can do in the future.
I see a pattern here I use all tools/libs/frameworks that are between bad and fantastic for prime. Backnd in go and frontend in vue xD
The Name’s TheSvelteagen
Maybe I’m a noob, but as a practice I don’t use wrapped libraries. Chart-js, as an example, I use directly and ignore framework wrappers. I also don’t fuck with React. Maybe that’s my problem, or the secret to my success.
God, I'm getting old. I've seen this design get popular 4 times now over the last 15 years.
Idg what u mean with the adapters
Svelte's problem is that is a language.. but not a good one. How do I compile Elm to Svelte?
3:25 What??? Does this mean I can use something React Three Fiber in Svelte?
Sorry if Im asking a dumb question >.
"successor to c" never say that
Love Svelte, but since sveltekit came out there is no longer a router solution for svelte, seems like you are kind of forced into sveltekit now (unless you roll your own router or just use svelte for parts of your site)
Tried svelte, would not pick it again for project.
Can you share your findings?
’Hitml’ 😂😂😂😂😂
He forked it for the web3 that’s coming.
Damn, Theo didnt even responded to the last one and now this… He’s done.
So this is why the DIC exists on his GH 🤯
Wait untill the WASM front end frameworks come out. Faster than JS.
Idyll, scandinavian word meaning Idyllic, pronounced "EEdyll" (with the Y pronounced like the Y in ypsilon)
It's not scandinavian. It's of greek origin and has been in the English language since the late 16th Century, where it's pronounced the same way as "idle" or "idol".
@@tourdesource somehow I have never heard it in an English context, damn! Wheras it's very common in Scandinavian languages. Should clearly have googled the etymology haha!
Do Remix overview pls
"pedantic masturbation"
never change pls
trying
"Extend CSS by adding a scoping mechanism that kept styles from clobbering each other"... is weird phrasing of "I'm not using Cascading Style Sheets in a Cascading sense".
Why is there so much confusion around this? A CSS classname is a scope, you can have as many as you like. Tag names are scope, you can use all those from HTML. Attribute names (and values too) are scopes, use them. There are documented precedence rules and they're actually simple. As much as I love to shit on the W3C, they even managed to give us :nth-*() and :not() selectors which were frequently and loudly demanded for years. I'm constantly astounded by the minds claiming "CSS is too complicated", yet consistently demonstrate their inability to grok the basics of CSS, and go on to invent ever more complex and complicated "alternatives". "I don't wanna be a CSS engineer" then stop being one and become a better CSS user.
does anyone realize this article is from 2018?
Yeah I was surprised when he was announcing Svelte 3 was around the corner when Svelte 4 just had a teaser announcement. A few of things prime reacts to are pretty old, I wish he or his editor mentioned that more often.
@@Dontrel3030he mentions it’s an old article
I'm a fan of rich harris 🎉
Id love to see Primeagen do leetcode live.
Reminds me of NestJS on the backend... Garbage of a framework, all existing libraries have to be wrapped in their insane dependency injection modules. Got I hate that framework.
1. with Elm you don't need to control all the world. You can make a simple component in Elm and add it to 100 more, and it will act like a function, the only difference is that you will have a 99.99999999999999% guarantee that component in Elm will work properly. The company that has hired the guy who invented Elm says they have had just 1 error produced in years of using it. Elm liberates you of using the messy CSS for layouts.
2. the reason we have hundreds of languages compiling to Js & now Wasm and html and css, is because we all hate HTML & Javascript because they are the most horrible thing invented in the history of computers, because they are product of the browser wars and they haven't got their shit together.
3. Brendan Eich in his interview with Lex Friedman talks about all the mess of the browser wars and why JS is the crap that it is, because it was supposed to be a glue scripting language for components written in java applets, but Sun never delivered because Sun only wanted Netscape to act like a gigantic ad for Java.
Language? Code conventions, or simple Domain Specific Language masquerading as a "framework".
COMPILED JAVASCRIPT! DO IT GIGACHAD
Elm was FAR ahead of it's time, it's sad that it never got enough traction.
Svelte uses standards. WASM is going to replace all this crap. best channel to have discovered. someone at work built a modal in pure Js and jQuery I never had more respect because of you putting me in my place.
That's right!
I think Reactjs got way ahead, because there were no great competitors and some like vue lost their way in the middle of the game, and especially lack of big companies as supporter...
(Angular lost because of its breaking changes angularjs to angualr2 )
But I think svelte is going to have a bright future compared to others...
In my opinion, the problem is(and that's why I hate all react alike frameworks): JSX and the way you build things around it.
Svelte native when 😢
Rich is my idol
Once again the title was a clickbait.
Please bring PHP to the front-end and end this misery.
sry that you brain can't handle async and reactivity of modern development
My problem with Svelte is that it is far too attracted to being cute.
"$:" only works in components, if you want to refactor your component logic into reusable javascript functions and objects and factories etc, you need to convert into the underlying reactivity API with `writeable` and `derived` observables.
I'd rather the framework embrace its core reactivity primitives from the beginning, so when I need to refactor code, I don't have to first translate everything out of cute mode.
This over-attraction to cuteness really extends into SvelteKit. Things that are cute are certainly cute and you can write great toys with them as long as you stick to what it's good at doing. But as soon as you are actually being paid to solve other people's real problems you quickly find out the cute stuff gets in the way.
So what? Just like when you can only use JSX in .jsx/.tsx files, Svelte syntactic sugar only works inside .svelte files. A framework shouldn't modify code that doesn't belong to it
Shitty take.
You make no sense sir
Solid gang?
Rich Harris is a genius.
Almost like Prime.
Prime is a funny cartoon that can code, don’t compare them both
It's a terrible idea to hack JavaScript just to bake some observable primitive. If you want a language feature, use TC39 to vett the feature like the rest of us. As clever as Rich Harris thinks he is, or how certain he is the language needs state triggers, he's almost certainly not seeing the bigger picture.
By terrible idea you mean "pretty reasonable idea to use within a reactive UI framework that wants to coexist with available tooling"?
Or should he submit a feature request to TC39 and wait 15 years for javascript to natively implement syntax sugar that will only be used for his single UI framework?
I can't tell if you're purposefully or sincerely being obtuse.
so is it just a shittier Elm?
svelte only exists because people don't really want to learn what they are using. they just "want things to work" and react has a learning curve, for sure. 9/10 react videos are about hooks when they should about watching dependencies of your components and hooks. also, in 2023, what library hasn't been wrapped for react yet? c'mon. just write declarative code that spits out ui. it doesn't need to get harder than that.
This is the best time in frontend development to return back to assembly and c... i'm sick and tired of 'reinveting' the same crap wheel, like they are doing something...
forkin heck
Imba is so cool
I transitioned from being a react to svelte andy
Migrating our web interface to svelte. No regrets. Only awesomeness.
I am honestly tired of hearing about every new pretentious framework/libray/langauge. I am just gonna keep using the thing that puts food on the table, that is PHP.
found a COBOL dev
clickbait title
I thought prime was a solid bloke, now he claims to be svelte
Started out great, but the video turned into react bad, svelte good
Why is it better? We need to see examples
i can agree with statement
meh. this is vague. if there were code examples, then we at least can discuss whether it is justified
ahhh goshh that's not new, there are so much richer, much more performent with bigger community and ... frameworks/libraries that have the same things that you clapped for right now! the biggest one is vue..
Second xD
Minute
It feels like you mispronounce tech acronyms just to trigger me. Great video tho
somebody make some f**ck**g crash course for svelte, so that i can be svelte pro! and rewrite whole web in svelte!
They docs are exceptional. Check em out. It's the only framework I learned from docs.
Front end masters just released two courses by Rich Harris himself on svelte and sveltekit
react is also a language and it sucks (it does not resemble to js at all)
zig is fine, you're over reacting, oCaml tooling isnt revolutionary. zig really just needs a dedicated package manager.