@@tayfun6378 Ok.. The full sentence was: 7:58 >. 2 sentence layers: - Base's layer: learn to love. The main idea is the following. Whatever tool you choose is not going to be perfect, but if you keep on going on and on with it, you will get good skills out of it and it might even become your favorite tool. - Irony's layer: among all the tool you can choose, make sure it is React. >: the logical coordinating conjonction "and" links the 2 first clauses in a way that it implies that the pronoun reference "it" refers to the antecedent noun "poison" (which is undefined). However, in the result clause the reference is now defined as "React", the reference change was not expected (if you don't understand, just read the full sentence slowly replacing "React" by "it"). This word play expresses with irony that the poison you better choose is React. Among all the beverages, why Kool-aid? 2 kool-aid layers: - Freedom's layer: Kool-aid is known to be fruity, fun and affordable, you can choose your flavor, create new one by mixing them, do whatever you want, you are free almost like you are with React. - Poison's layer: Kool-aid is also sadly famous because it has been used in a poison mixture that caused death to members of a sect called Peoples Temple. Side note: Prior to the 9/11 terrorist attack the Peoples Temple tragedy known as "The Jonestown Massacre" was the largest loss of USA civilians in a non natural desaster. Meanwhile today a lot of startup and even big well-known companies are using React and have faith in it. If React, which is own by Facebook, fools us, this could be one the largest scam in the web dev world. Voilà, that's why I find this statement so deep. However this is only my interpretation, Ben has nothing to do with with my views on this topic.
And Medium post become dramatic too "Stop using JavaScript in JavaScript" when you see post like, stop using replace method, stop using forEach, are u okay guys?
I think the most important thing you mentioned is that users don't mind. This is so true. We make these pages for user experience, not for "performance experts" to analyze. If users are happy, that's really all I care about.
I'm sorry, but based on what? The fact that there are no alternatives? Or the fact that vast majority of people use a few websites typically run by fang?
I'd rather take that initial 1000ms wait up front so that I can quickly access different routes than to wait an extra 500ms between each page change because my internet is slow.
I agree with you for the most part, but it also has an upper limit by the total size of all the bundles. If you a site/webapp with a lot of routes it would translate to a lot of dead code that you download just to view the first page, and you are likely not to visit others.
@@omri9325 yeah for sure! You could always just make the landing page / other non app critical pages statically served and keep the actually application as a react bundle. The user's browser should also cache the bundle, so it's a one time load per deploy right?
That's 100% true only if you have static data. If you have route with dynamic (fetched from API) data and slow internet, changing routes will be slower anyway, but still fetching JSON nad rerendering some React components should be faster than reloading entire page :)
@Web Dev Junkie, that's not true anymore. You can use instant.page to prefetch the next page, you can use service workers to catch static assets. Then use something like HTMX, et. al. to make the pages snappy. All of these tools together can be faster than a SPA pretty easily without the initial hit.
When did React and NodeJS become a religion? Whenever I see someone genuinely making good points against React ( vs Svelte) or NodeJS ( vs Go, Rust, or Deno), there is a backlash. If the shortcomings of predecessors of React were not criticized, we wouldn't be having React today. If we don't criticize the shortcomings of React, we won't progress further to a better world. I am old enough to have heard, folks from enterprises complaining, open-source libraries can have harmful code. They would not say that today. Those same people say React and NodeJS has a great ecosystem, that new ones don't. In time Go, Rust, Deno, Svelte would also have an ecosystem. And in time there would be something better replacing them as well. I think we must recognize and stop being a Religion (for a lack of better term).
Well said sir. I think using the term "religion" makes a good analogy for describing the cult-like attitude that seems to be associated with React/Node. Genuine and constructive criticism of any language/library/framework is necessary and is cyclic as new technologies are developed or established technologies mature. React and Node are great tools, but they are not the one set of tools to rule them all. The keyword here is tools, and developers should use the right tool(s) for the job.
We love React. I've become passionate about it because I believe in it. No different than you believing that your comment was worth posting. You posted it. I say React is phenomenal. Wanna fight?
If you are seriously considering SEO as a marketing strategy, site speed, performance, and load time are incredibly important metrics to pay attention to.
I use Ruby on Rails and avoid JS whenever possible. Rails and SSR works orders of magnitude better than the JS ecosystem. The API's work together coherently and intuitively. It's like the Ruby community actually puts thought into how it evolves the stack instead of just stitching junk together. The JavaScript world has gotten unreasonably more complicated in the past decade. It's undecided and it leaves the problems of it's indifference to the developers. All this transpiling, bundling, linting, minifying and treeshaking is a giant pain and mental distraction with minimal payoff. The websites today are not (functionally) significantly more advanced than those of 2010, but they are orders of magnitude heavier to build and load. A lot more moving parts without adding a lot more value. In 2010, you could drop jQuery, Backbone and/or Knockout into your vendor folder (or load them right off the CDN) and boom - you are going. Productive right away. No extra steps needed. But now my Rails projects are littered with dung like .browserslistrc, babel.config.js, node_modules, package.json, postcss.config.js and yarn.lock (not to mention webpacker.yml and the supporting configuration) and I have to install and run yarn and some dev-server and all I'm honestly getting for this is hot-reloading of CSS. When checking out a project, I have to wait for the installation of hundreds of megabytes of random goo because JavaScript library developers apparently likes to publish every single line of code as it's own package. Impossible to audit. And don't get me started on build time. I wonder how many terabytes of bandwidth and developer time is wasted everyday, because developers pull the same humongous pile of NPM dependencies each time the CI pipeline runs tests. Slow AF. Abhorrent. Fortunately some sense is making it's way into the JS world. Yarn 2 is introducing a global cache, but man... why is this 10 years overdue and why can't JS developers write their stuff directly for the browser, instead of placing this hellmachine called Webpack or Babel inbetween creating a more complex flow. There was a time when you didn't need to worry about source maps, because you actually coded for the browser and not for some crosscompiling tool. Imagine a world where the browser serves as the bundler in charge of pulling in dependencies, so you can just feed it your code and be done. Oh wait. It already exists. Always did. It's called the script tag. Why couldn't we evolve that? If yarn or npm can bundle, why can't the browser? Imagine the browser keeping one copy of in it's cache, because it's pulled from an official CDN, instead of the user having to load a gazillion bundles every day - each embedding a version of react, vue or whatever. Damn that would scale well and dramatically speed up the entire web. This is sick and those defending it must be in on it. But oh well, I can't change it. I can't fight it. I can just adapt to the madness. Time to add react to my package.json. Or should I use the create-react-app library, because using react is so complicated that it warrants it's own CLI to automate the boilerplate? Modern JavaScript is a hack. Hopefully it won't last.
I was interested in web development at the university but I decided to have my career in machine learning. Your content is perfect to keep me up-to-date with the world of web development. Keep up the good work love your videos 👍
How to make your site fast without a heavy SPA: You can use instant.page to prefetch the next page, you can use service workers to catch static assets on the client. Then use something like HTMX, et. al. to make the pages fluid. All of these tools together can be faster than a SPA pretty easily without the initial hit.
The main gripe that I have of modern development - whether it has anything to do with SPAs or not I don't know - is that many websites are hostile to the user. I'm at Fry's grocery store and it says I can get a couple bucks off for each item if I go to their website and click the coupon. Well, I go to the website and try and login and load the coupons so I can click them over 3G and 10 minutes later it works. This process should be almost instantaneous. There's no good reason for it to take so long. Yes, I still used the website, that doesn't mean I liked the experience though. Then I went to the Subway website on my phone to enter in what my daughter had ordered on her sub so I can know how much insulin to give her. Well on the mobile site over 3G it was pretty much impossible (the page did load in a decent time frame though). I had to go home and do it on my laptop. Really? That's horrible. Yes, these websites might be used, but that doesn't mean people don't mind it.
Thank you for not being one of the programmers who think that there is a "right" and "wrong" way of doing things. Would love to hear your thoughts on Angular vs React and their strengths and weaknesses in your eyes.
so being a noob i dont get it - you talking about react static site, and then you talking about time to interaction and javascript which should be loaded. But react STATIC site means it's plain html css generated from react app, so what am i missing? Ixplain plis =(
Just to point out, the point about performance at 2:00 is largely down to Googles drive to improve the performance of the web. Almost all Google employees in the field on twitter will have this mind set mentioned at 2:00. They shroud this around "poor experience for users with poor devices, why wouldnt you want your site fast?!" but the real reason they are so vested in performance is to serve more ads. More clicks to faster website, more people visiting websites, more money - plus sites that serve google ads can serve them faster. Win win for them all round - look good by improving web performance, while making more money.
Which is funny since many times in my experience while trying to optimize a site using Google Page Speed Insights when the report would complain about loading too much JS or parsing too much JS , most of the time scripts that are at the top offenders are Google scripts for ads or maps. I love their push for more performance, but there is also things they are doing that I don't like, such as AMP or re-routing pages through their servers for optimization or something like that.
React is phenomenal. Complex web app? React + TypeScript will get you where you want to go. Want something smaller in scope of CMS? Use React with Gatsby.
Native web components sidesteps a lot of issues and complications React creates and/or worsens. Learn and use the appropriate design patterns (pub/sub, proxy, finite state machine) and you're doing exactly what React does for you in a much less bloated, and future proof way. HTML, CSS, and JavaScript's past issues paved the way for the current culture of web developers overly relying on third party solutions when the tool that the developer is literally currently using (HTML and JavaScript) is well equiped to handle the task at hand in a much more efficient, and at times, even faster way.
he is so true about making own blog site static with react. Its exactly what i did yesterday on githubpages. exactly as he pointed out just to learn these tools and abuse the whole setup as my portfolio.
5:13 I'm lead developer for a popular journaling service built on React. The way way we handle this is by intercepting a 404 error for the requested bundle and then using that to force the user to download the new assets. This may not be the user friendliest way, for example, some apps ask you before initiating the download, but it works and is hardly noticeable by the end-user.
There's a massive correlation between performance and conversion rate and it's well documented 🙄. I get that this doesn't apply to all sites but it does to most and you're underestimating the subconscious effect a slower site has on the user.
Thank you for mentioning react-query and swr. For the code splitting problem: Meteor solves this problem by (paraphrasing heavly) syncing a hash of the compiled js, html, and css and comparing them with the currently downloaded copy, and redownloading, and reloading, or in the case of css, just fliping out the rules. You may recognise that pattern because gulp and webpack do something similar when you're using the dev server. Because Meteor knows that it has some control over the server as well as the client, it can ensure that this reload logic is done in production as well as development. You could do this sort of thing with static sites as well just by dropping a hash into a static file, and refetching it on page navigation (debounced or throttled to about 10 to 60 seconds to prevent problems on quick navigation).
You can't cache your pages efficiently with an SPA (e.g cloudflare) since they all return the same index.html with a bunch of JS in it. Or you would need to pre-render every first hit. That sounds quite overkill technology compared to something like Django + using some JS here and there to make it behave modern. You can even use VueJS if you like, just not make it handle your routes, and use it only on some pages.
@@strangesense3196 in that case python is too slow for go ;) Yea C/C++ and Rust are much faster than Go. So you are missing my point. People think python is superior to most languages. I'm just making a statement based on fact that PHP which is one of the hated language keeps improving it's speed and maturity. Unlike python which focus mostly on syntax and version leaps it's not even mature like php for example oo concepts. BTW PHP is much faster dynamically typed language. Than most of its competitors. Not just thay. PHP team is serious in working out to be faster and resource efficient under the hood on each new versions See techempower benchmark. Few extensions and libraries like swoole and workerman is wayy faster than NodeJS And is written for PHP. They are closer in rank with Go. And python is nowhere near to that. PHP8 is coming with JIT. So just wait and see. Django is created for web where python is a general purpose languages. But PHP itself is mature for web and faster than python by miles. Check out Symfony. It's been there for long time and and we'll established framework than Django.
My 2 cents as a react dev that also build static sites. We have more than 200 static sites online, we made websites for basically all chains from my city. Fewer dependencies are just easier to maintain, if there is something problematic with one dependency, you need to change in all projects that use it. That is why we still use PHP and Jquery and a custom CMS. Off-topic but... We basically use the same CMS for all the websites on the same server, it's a pretty cool thing IMO, if you fix one bug, it fixes for all websites, on the other hand, if you break it...
Code splitting: you can version your urls for static assets with updates. For example if someone has unpkg.com/react@16/umd/react.development.js?v1.0 in their browser, unpkg.com/react@16/umd/react.development.js?v1.1 will bust the cache, and of course nothing after the question mark is evaluated by the browser. You can also of course automate this process or schedule it using timestamps.
5:13 "I'm guessing most people just keep around their old JavaScript assets... forever" I think you should also remember to keep your API forever. When a breaking change is introduced, you must create a new version of an endpoint. Then you'll have smooth UX. And Tom also mentions a second approach in his blog post: prompting the user to download the latest version of the app. I think it's not so bad to do this and business sometimes wants all their users to have an up-to-date version of the website, but yeah, imagine doing this on a blog site. But yeah, for a blog web site I think gotta choose the smoothest-possible-UX never-clear-the-cache never-break-the-api path. I think for you can even hack this on Netlify or Vercel (Zeit) by merging the old deployment with the new build (you can download your deployment, right?) and uploading that to your CDN.
well I'm starting with React (I come from the Angular world) and I hated it at the beigning but then I gave it a second chance and I'm starting to love it, i feel it gives you much more freedom than Angular
One thing right now that makes me uses React or Vue (or any other js framework, it is just that I prefer this 2) is dom manipulation in sync with the state. On my current job, we still use jquery and none framework. Jquery is amazing to dom-manipulation but it alone does nothing with sync it with the state. I had an implementation of a feature on that website that was heavily state-based and it was such a massive job to put 'data-' attributes all-around HTML and make the code 200% precise for don't mess things up. This with Vue or React would be much less complicated as the dom and the state is already synced up. I prefer to have to deal with performance and SEO problems rendering outside of the server (problems that have your solves) that spend a whole month doing a thing I could do in one week using a framework
Exactly, it's not a black and white topic. There are upsides and downsides to every technology. You have to assess whether X technology has more upsides or downsides before you make it part of your project stack.
In my opinion Angular is awesome. Although I would rather like Dart as the main language instead of TypeScript (just a superset of JS) to have the feel of writing complete type-safe code (like I do in Java), I think there are fundamental concepts, which Angular fulfils and which build up the core of a good framework for developing business applications. The first one is dependency injection. I couldn’t think of developing any kind of business software without it. I came from mostly doing backend development and in this area of software development the Spring framework provides a nice way to do dependency injection, but also CDI of the Java EE standard is pretty nice. As I started developing fullstack web applications and as the whole complexity of my frontends grew, I realised that I missed the features of dependency injection. I had to worry about how I created and managed my singleton instances of my service classes, which should perform some kind of logic in the frontend. Angular provides the management of these singleton instances as services from scratch, which I think should every frontend framework do. But there are so much more options, with this DI and you can configure the injectors by yourself. The second one is that in Angular does have good separation of concerns compared to all other frontend frameworks and libraries. There are modules to group related elements and they help to do the routing well. Components which make up the UI are separated into two files: the TS class of the component, which does contains the behaviour of the component and then there is the template file which contains the displayed HTML linked to the methods of the class. I could go on further, but it isn’t my intention to show you why Angular is one of the nicest frontend frameworks out there, but to tell you that it isn’t a waste of time to learn it!
You should give up on using classes in javascript/typescript . We have functions. And yes there is no standard way of doing DI in javascript. but it is not a problem, i am using index files to pass dependencies in modules, it may seems limited comparing to other programming languages, but it works great and keeps my code simple. And no worries, it is time to embrace functional programming
"As long as you don't use angular" .. yeah, and then spend hours, if not days, figuring out which 1/100+ 3rd party plugin you're gonna use for every small step of React development. . . Oh, and then comes 'does this work with typescript'? Yeah, angular is harder to learn, but If my team has mostly java/.net guys needing to pickup web development, and/or i need to build an immensely massive enterprise client side SPA, I'd choose highly opinionated angular over "you can go from A to B, in 1000 different ways, pick one" react. And yeah, I use React daily, love it, but Angular also has a solid reason for existence
Are there any newer "massive enterprise client SPA"s that are angular? I see mostly React used with moden big sites too. The flexibility gives much faster development times. I find that Angular's reason for existence is mostly that it's much older. So it was picked and used a lot before better ways were even known.
Also the biggest bottleneck is network requests, thats why client side processing helps performance in many situations, this is where javascript is key and React has some extra benefits, with few drawbacks.
5:13 You can definitely use a service worker to fetch the correct assets when they've been updated on the server, CRA has the config: github.com/facebook/create-react-app/issues/3613
Fast websites are really important now for SEO. Google have to consider people on slow connections. They want to make website recommendations that are expedient. Plus there are some Google crawler considerations when using JS. Although there are still ways to make sure Google can index all the text on our websites. For example, having HTML fallback.
If you watch his previous videos, it's more about AngularJS than Angular 2. It's also a running joke throughout his channel. If you've actually used Angular 2 for some time then you'll see it's not that bad and I personally think you can't really compare it to React since Angular is an actual framework whereas React is a just a library. I'm an Angular developer myself. I've played a bit with React and Vue and I find Angular and Vue way better than React. Vue is more framework like but not as strict as Angular. However, in the end it doesn't really matter that much. Just try to be open minded, try to explore all options and see what is best for your use case. Although I'm an Angular developer, I think Angular is overkill for very small projects and POCs whereas it can provide great structure for bigger projects.
On the Full Stack podcast the creator of Vuejs talked about trying the solve the problem of sending tons of JSON on first render. I don't remember what the conclusion was though. It was part of the Vite bundler that he was talking about it.
Fuck JavaScript. Python's Django has an incredibly large amount of flexibility: Machine Learning, Server Querying, Lazy Loads, Algorithms, Client-side rendering (on Jinja's side), and even an Admin. And it's fast. Really fast.
What if your site visitors are using NoScript and don't want to have to enable your scripts (which may contain malware for all they know) to read your content?
My personal preference is for MPA front-end apps. They are a lot cleaner than SPAs. Especially with ES Modules and service workers you can get a very clean website. As for React. I definitely think it is bloated. There are a lot of other frameworks which have come around since then like Sinuousjs/Svelte/etc, which give you the same ergonomics as React but do it in a much more performant way. Personally, I don't see any reason to use any of those if you don't need them. JS is so easy now days using a framework doesn't give you a whole lot of gain.
Lmao I was wondering how long before you dumped on Angular. I'm always happy that you mention it and keep it's name fresh and new. Yeah if you don't want to work on high paying corporate software, definitely stay away from Angular. If you want to build Todo lists and emoji lists React is a great fit. 👍😀
For code splitting, just place the hash at the end of the file as a URL parameter, rather than in the filename itself. Some downsides, but fixes more problems than it creates.
I started to learn to React because of the job market, if not I am so happy to work with Angular. I think we have to choose a technology stack thinking about the problem to be solved instead of trying to solve all the problem using one stack. what is your opinion on that? I love python flask too.
For the assets thing, for one of my projects, everything runs from a central script file, and it then lazy loads assets with the hash name. All I did was make the browser add a timestamp query param whenever it is getting the base script file, which should trick it into seeing it as a new asset.
Pretty much interesting to listen to you, but I don't agree regarding Angular. I like the way angular makes you build your apps and also its ng cli which is incredibly convenient. It uses RxJS and TypeScript which make developer experience very pleasant.
Well... If you agree that "being fast enough is good enough" and "it's OK for a site to load a sh*t ton of JS", what's your point against Angular (not AngularJS)...?
It depends on your target market. If you're making a site heavily targeting mobile users in countries with slow cellular data and very expensive data caps, typically using lower end devices... It starts mattering more
Hey Ben, In a video I saw of yours you mentioned that there's only a certain depth of Algorithms you need, after which they become too obscure, would you mind making a video covering which you feel are worth learning? Thanks man
I have installed "uMatrix" in my browser. Every Website* that does not work on the default settings** is a bad website, end of discussion. *Apart from web shops which obviously need cookies **that is no javascript allowed, no XHR allowed, no Frames allowed, no cookies allowed
"as long as you're not using Angular to build a website, it's okay". Trust me, if I knew this before (at least before April 15th), I wouldn't have wasted my money on an online angular course and then spend the next month torturing and harassing myself trying to learn it. I never felt dumber in my life, like I could feel tumors sprouting in my brain and my lifespan decreasing. At least I leveled up as a masochist.
Django in the thumbnail and is only mentioned once in the last 15 seconds. 😂
I LOVE Django. I don't know how it compares speed wise to other Frameworks, but Development time is blazing fast.
Chris Kavanagh I have been studying it recently and like it a lot!
@@ApolloSevan Django is awesome, Evan.
I think the more you work with it, the more you'll like it.
I'm glad you like it!
Lol I watched the whole video waiting for him to talk about Django.
@@hozayfaelrifai8841 same here😂
"pick your poison, if you drink it long enough, react almost tastes like kool aid" - ben awad
React kool aid is the tastiest of all the web development kool aids and i drink it every day
@@zachwhite8054 I think there is a saying about don't drink the kool aid, it might kill you.
This statement is deep, the layers are amazing.
Dev's poetry.
can you please eli5 what it means?
@@tayfun6378 Ok..
The full sentence was: 7:58
>.
2 sentence layers:
- Base's layer:
learn to love.
The main idea is the following. Whatever tool you choose is not going to be perfect, but if you keep on going on and on with it, you will get good skills out of it and it might even become your favorite tool.
- Irony's layer:
among all the tool you can choose, make sure it is React.
>:
the logical coordinating conjonction "and" links the 2 first clauses in a way that it implies that the pronoun reference "it" refers to the antecedent noun "poison" (which is undefined). However, in the result clause the reference is now defined as "React", the reference change was not expected (if you don't understand, just read the full sentence slowly replacing "React" by "it").
This word play expresses with irony that the poison you better choose is React.
Among all the beverages, why Kool-aid?
2 kool-aid layers:
- Freedom's layer:
Kool-aid is known to be fruity, fun and affordable, you can choose your flavor, create new one by mixing them, do whatever you want, you are free almost like you are with React.
- Poison's layer:
Kool-aid is also sadly famous because it has been used in a poison mixture that caused death to members of a sect called Peoples Temple.
Side note:
Prior to the 9/11 terrorist attack the Peoples Temple tragedy known as "The Jonestown Massacre" was the largest loss of USA civilians in a non natural desaster.
Meanwhile today a lot of startup and even big well-known companies are using React and have faith in it. If React, which is own by Facebook, fools us, this could be one the largest scam in the web dev world.
Voilà, that's why I find this statement so deep. However this is only my interpretation, Ben has nothing to do with with my views on this topic.
It feels like JS community is always dramatic
i know it's like web development is slowing becoming it's own kind of reality tv. it's like kim kardashian and steve wozniak had a baby
Yes. I take pride in developing UI.
you haven't seen the machine learning community... they are on the another lebel ;)
Look at who it's made of, pronouns in bio
And Medium post become dramatic too "Stop using JavaScript in JavaScript" when you see post like, stop using replace method, stop using forEach, are u okay guys?
I think the most important thing you mentioned is that users don't mind. This is so true. We make these pages for user experience, not for "performance experts" to analyze. If users are happy, that's really all I care about.
I'm sorry, but based on what? The fact that there are no alternatives? Or the fact that vast majority of people use a few websites typically run by fang?
@MadBunnyRabbit I’m not sure I understand what your reply is referring to?
I'd rather take that initial 1000ms wait up front so that I can quickly access different routes than to wait an extra 500ms between each page change because my internet is slow.
I agree with you for the most part, but it also has an upper limit by the total size of all the bundles.
If you a site/webapp with a lot of routes it would translate to a lot of dead code that you download just to view the first page, and you are likely not to visit others.
@@omri9325 yeah for sure! You could always just make the landing page / other non app critical pages statically served and keep the actually application as a react bundle. The user's browser should also cache the bundle, so it's a one time load per deploy right?
That's 100% true only if you have static data. If you have route with dynamic (fetched from API) data and slow internet, changing routes will be slower anyway, but still fetching JSON nad rerendering some React components should be faster than reloading entire page :)
@Web Dev Junkie, that's not true anymore. You can use instant.page to prefetch the next page, you can use service workers to catch static assets. Then use something like HTMX, et. al. to make the pages snappy. All of these tools together can be faster than a SPA pretty easily without the initial hit.
dovh49 those seem like pretty cool tools, I’ll have to check them out!
You always look like you're about to burst into laugh
Brooo😂😂😂😂now I can't stop laughing looking at him 😂😂😂😂
Hehehe😂
great.. now i need to unsubscribe..
Can't unsee this! Lol
😂😂😂
When did React and NodeJS become a religion? Whenever I see someone genuinely making good points against React ( vs Svelte) or NodeJS ( vs Go, Rust, or Deno), there is a backlash. If the shortcomings of predecessors of React were not criticized, we wouldn't be having React today. If we don't criticize the shortcomings of React, we won't progress further to a better world. I am old enough to have heard, folks from enterprises complaining, open-source libraries can have harmful code. They would not say that today. Those same people say React and NodeJS has a great ecosystem, that new ones don't. In time Go, Rust, Deno, Svelte would also have an ecosystem. And in time there would be something better replacing them as well. I think we must recognize and stop being a Religion (for a lack of better term).
Well said sir. I think using the term "religion" makes a good analogy for describing the cult-like attitude that seems to be associated with React/Node. Genuine and constructive criticism of any language/library/framework is necessary and is cyclic as new technologies are developed or established technologies mature. React and Node are great tools, but they are not the one set of tools to rule them all. The keyword here is tools, and developers should use the right tool(s) for the job.
lol deno
We love React. I've become passionate about it because I believe in it. No different than you believing that your comment was worth posting. You posted it. I say React is phenomenal. Wanna fight?
@@JonnyBeoulve Love is precious. Don't waste it on a web framework.
it‘s so simple. use django & vue or golang & react
If you are seriously considering SEO as a marketing strategy, site speed, performance, and load time are incredibly important metrics to pay attention to.
Yes but you can still find great SEO results with React
If you're that serious about marketing strategy for your app I really hope you aren't taking architecture advice from random UA-cam videos
you should start thinking on open a podcast you could make a lot of more content like this one
you had a great idea
The reason I watched the video was django thumbnail but you mentioned at once
I use Ruby on Rails and avoid JS whenever possible. Rails and SSR works orders of magnitude better than the JS ecosystem. The API's work together coherently and intuitively. It's like the Ruby community actually puts thought into how it evolves the stack instead of just stitching junk together.
The JavaScript world has gotten unreasonably more complicated in the past decade. It's undecided and it leaves the problems of it's indifference to the developers. All this transpiling, bundling, linting, minifying and treeshaking is a giant pain and mental distraction with minimal payoff. The websites today are not (functionally) significantly more advanced than those of 2010, but they are orders of magnitude heavier to build and load. A lot more moving parts without adding a lot more value.
In 2010, you could drop jQuery, Backbone and/or Knockout into your vendor folder (or load them right off the CDN) and boom - you are going. Productive right away. No extra steps needed. But now my Rails projects are littered with dung like .browserslistrc, babel.config.js, node_modules, package.json, postcss.config.js and yarn.lock (not to mention webpacker.yml and the supporting configuration) and I have to install and run yarn and some dev-server and all I'm honestly getting for this is hot-reloading of CSS.
When checking out a project, I have to wait for the installation of hundreds of megabytes of random goo because JavaScript library developers apparently likes to publish every single line of code as it's own package. Impossible to audit. And don't get me started on build time. I wonder how many terabytes of bandwidth and developer time is wasted everyday, because developers pull the same humongous pile of NPM dependencies each time the CI pipeline runs tests. Slow AF. Abhorrent.
Fortunately some sense is making it's way into the JS world. Yarn 2 is introducing a global cache, but man... why is this 10 years overdue and why can't JS developers write their stuff directly for the browser, instead of placing this hellmachine called Webpack or Babel inbetween creating a more complex flow. There was a time when you didn't need to worry about source maps, because you actually coded for the browser and not for some crosscompiling tool.
Imagine a world where the browser serves as the bundler in charge of pulling in dependencies, so you can just feed it your code and be done. Oh wait. It already exists. Always did. It's called the script tag. Why couldn't we evolve that? If yarn or npm can bundle, why can't the browser? Imagine the browser keeping one copy of in it's cache, because it's pulled from an official CDN, instead of the user having to load a gazillion bundles every day - each embedding a version of react, vue or whatever. Damn that would scale well and dramatically speed up the entire web.
This is sick and those defending it must be in on it.
But oh well, I can't change it. I can't fight it. I can just adapt to the madness. Time to add react to my package.json. Or should I use the create-react-app library, because using react is so complicated that it warrants it's own CLI to automate the boilerplate?
Modern JavaScript is a hack. Hopefully it won't last.
I was interested in web development at the university but I decided to have my career in machine learning. Your content is perfect to keep me up-to-date with the world of web development. Keep up the good work love your videos 👍
ok nobody cares about your carreer. bye
How to make your site fast without a heavy SPA:
You can use instant.page to prefetch the next page, you can use service workers to catch static assets on the client. Then use something like HTMX, et. al. to make the pages fluid. All of these tools together can be faster than a SPA pretty easily without the initial hit.
This is the fourth video of yours I've watched. Your angular roasts are starting to grow on me.
0:54 is probably the most emotive I've ever seen Ben be x-D
Your backfire is always constructive criticism and well explained that judges the topic.
Yeah, it's definitely not a problem when browser takes too much RAM
Yeah. Why the fuck does fierfox with 2-3 tabs open takes like a half a gigabyte
The main gripe that I have of modern development - whether it has anything to do with SPAs or not I don't know - is that many websites are hostile to the user. I'm at Fry's grocery store and it says I can get a couple bucks off for each item if I go to their website and click the coupon. Well, I go to the website and try and login and load the coupons so I can click them over 3G and 10 minutes later it works. This process should be almost instantaneous. There's no good reason for it to take so long. Yes, I still used the website, that doesn't mean I liked the experience though.
Then I went to the Subway website on my phone to enter in what my daughter had ordered on her sub so I can know how much insulin to give her. Well on the mobile site over 3G it was pretty much impossible (the page did load in a decent time frame though). I had to go home and do it on my laptop. Really? That's horrible. Yes, these websites might be used, but that doesn't mean people don't mind it.
Thank you for not being one of the programmers who think that there is a "right" and "wrong" way of doing things. Would love to hear your thoughts on Angular vs React and their strengths and weaknesses in your eyes.
Learn all the options and then choose based on situation or preference I say. No choice is wrong is you have investigated all the options
Angular + RxJS with a push based design pattern for me. It's fucking beautiful. Like holy shit. Love Love Love.
Wow very powerful
Remember EmberJS? That was the first “artsy” framework I remember. JQuery was purely utilitarian. The good ol days.
so being a noob i dont get it - you talking about react static site, and then you talking about time to interaction and javascript which should be loaded. But react STATIC site means it's plain html css generated from react app, so what am i missing? Ixplain plis =(
Just to point out, the point about performance at 2:00 is largely down to Googles drive to improve the performance of the web. Almost all Google employees in the field on twitter will have this mind set mentioned at 2:00. They shroud this around "poor experience for users with poor devices, why wouldnt you want your site fast?!" but the real reason they are so vested in performance is to serve more ads. More clicks to faster website, more people visiting websites, more money - plus sites that serve google ads can serve them faster. Win win for them all round - look good by improving web performance, while making more money.
Which is funny since many times in my experience while trying to optimize a site using Google Page Speed Insights when the report would complain about loading too much JS or parsing too much JS , most of the time scripts that are at the top offenders are Google scripts for ads or maps.
I love their push for more performance, but there is also things they are doing that I don't like, such as AMP or re-routing pages through their servers for optimization or something like that.
React is phenomenal. Complex web app? React + TypeScript will get you where you want to go. Want something smaller in scope of CMS? Use React with Gatsby.
Native web components sidesteps a lot of issues and complications React creates and/or worsens. Learn and use the appropriate design patterns (pub/sub, proxy, finite state machine) and you're doing exactly what React does for you in a much less bloated, and future proof way.
HTML, CSS, and JavaScript's past issues paved the way for the current culture of web developers overly relying on third party solutions when the tool that the developer is literally currently using (HTML and JavaScript) is well equiped to handle the task at hand in a much more efficient, and at times, even faster way.
he is so true about making own blog site static with react.
Its exactly what i did yesterday on githubpages.
exactly as he pointed out just to learn these tools and abuse the whole setup as my portfolio.
link?
need to build one fast
5:13 I'm lead developer for a popular journaling service built on React. The way way we handle this is by intercepting a 404 error for the requested bundle and then using that to force the user to download the new assets. This may not be the user friendliest way, for example, some apps ask you before initiating the download, but it works and is hardly noticeable by the end-user.
There's a massive correlation between performance and conversion rate and it's well documented 🙄. I get that this doesn't apply to all sites but it does to most and you're underestimating the subconscious effect a slower site has on the user.
Thank you for mentioning react-query and swr.
For the code splitting problem: Meteor solves this problem by (paraphrasing heavly) syncing a hash of the compiled js, html, and css and comparing them with the currently downloaded copy, and redownloading, and reloading, or in the case of css, just fliping out the rules. You may recognise that pattern because gulp and webpack do something similar when you're using the dev server. Because Meteor knows that it has some control over the server as well as the client, it can ensure that this reload logic is done in production as well as development. You could do this sort of thing with static sites as well just by dropping a hash into a static file, and refetching it on page navigation (debounced or throttled to about 10 to 60 seconds to prevent problems on quick navigation).
that's a cool method
You can't cache your pages efficiently with an SPA (e.g cloudflare) since they all return the same index.html with a bunch of JS in it. Or you would need to pre-render every first hit. That sounds quite overkill technology compared to something like Django + using some JS here and there to make it behave modern. You can even use VueJS if you like, just not make it handle your routes, and use it only on some pages.
I see django & react, I click 😛
I'm simple web developer too.
fact! django is so amazing (flask too)
@@sweatobertrinderknecht3480 Python is slower than PHP
@@arunabraham9382 ...which's slower than go
@@strangesense3196 in that case python is too slow for go ;)
Yea C/C++ and Rust are much faster than Go.
So you are missing my point.
People think python is superior to most languages.
I'm just making a statement based on fact that PHP which is one of the hated language keeps improving it's speed and maturity.
Unlike python which focus mostly on syntax and version leaps it's not even mature like php for example oo concepts.
BTW PHP is much faster dynamically typed language. Than most of its competitors.
Not just thay. PHP team is serious in working out to be faster and resource efficient under the hood on each new versions
See techempower benchmark. Few extensions and libraries like swoole and workerman is wayy faster than NodeJS
And is written for PHP. They are closer in rank with Go.
And python is nowhere near to that.
PHP8 is coming with JIT. So just wait and see.
Django is created for web where python is a general purpose languages.
But PHP itself is mature for web and faster than python by miles.
Check out Symfony. It's been there for long time and and we'll established framework than Django.
My 2 cents as a react dev that also build static sites. We have more than 200 static sites online, we made websites for basically all chains from my city.
Fewer dependencies are just easier to maintain, if there is something problematic with one dependency, you need to change in all projects that use it. That is why we still use PHP and Jquery and a custom CMS.
Off-topic but...
We basically use the same CMS for all the websites on the same server, it's a pretty cool thing IMO, if you fix one bug, it fixes for all websites, on the other hand, if you break it...
Code splitting: you can version your urls for static assets with updates. For example if someone has unpkg.com/react@16/umd/react.development.js?v1.0 in their browser, unpkg.com/react@16/umd/react.development.js?v1.1 will bust the cache, and of course nothing after the question mark is evaluated by the browser. You can also of course automate this process or schedule it using timestamps.
Why is Angular so bad? I have seen people say PHP is bad but not Angular.
thanks for all of these videos, man.
7:11 and still haven't heard the word django
5:13 "I'm guessing most people just keep around their old JavaScript assets... forever" I think you should also remember to keep your API forever. When a breaking change is introduced, you must create a new version of an endpoint. Then you'll have smooth UX. And Tom also mentions a second approach in his blog post: prompting the user to download the latest version of the app. I think it's not so bad to do this and business sometimes wants all their users to have an up-to-date version of the website, but yeah, imagine doing this on a blog site. But yeah, for a blog web site I think gotta choose the smoothest-possible-UX never-clear-the-cache never-break-the-api path. I think for you can even hack this on Netlify or Vercel (Zeit) by merging the old deployment with the new build (you can download your deployment, right?) and uploading that to your CDN.
well I'm starting with React (I come from the Angular world) and I hated it at the beigning but then I gave it a second chance and I'm starting to love it, i feel it gives you much more freedom than Angular
One thing right now that makes me uses React or Vue (or any other js framework, it is just that I prefer this 2) is dom manipulation in sync with the state. On my current job, we still use jquery and none framework. Jquery is amazing to dom-manipulation but it alone does nothing with sync it with the state. I had an implementation of a feature on that website that was heavily state-based and it was such a massive job to put 'data-' attributes all-around HTML and make the code 200% precise for don't mess things up. This with Vue or React would be much less complicated as the dom and the state is already synced up.
I prefer to have to deal with performance and SEO problems rendering outside of the server (problems that have your solves) that spend a whole month doing a thing I could do in one week using a framework
Why you video dont have auto genereted english subtitles? That's helps we who don't have perfect english understanding, beside that, great video.
Exactly, it's not a black and white topic. There are upsides and downsides to every technology. You have to assess whether X technology has more upsides or downsides before you make it part of your project stack.
What excacttly is the problem with Angular? I never really used it but I'm still curious to know.
In my opinion Angular is awesome. Although I would rather like Dart as the main language instead of TypeScript (just a superset of JS) to have the feel of writing complete type-safe code (like I do in Java), I think there are fundamental concepts, which Angular fulfils and which build up the core of a good framework for developing business applications.
The first one is dependency injection. I couldn’t think of developing any kind of business software without it. I came from mostly doing backend development and in this area of software development the Spring framework provides a nice way to do dependency injection, but also CDI of the Java EE standard is pretty nice. As I started developing fullstack web applications and as the whole complexity of my frontends grew, I realised that I missed the features of dependency injection. I had to worry about how I created and managed my singleton instances of my service classes, which should perform some kind of logic in the frontend. Angular provides the management of these singleton instances as services from scratch, which I think should every frontend framework do. But there are so much more options, with this DI and you can configure the injectors by yourself.
The second one is that in Angular does have good separation of concerns compared to all other frontend frameworks and libraries. There are modules to group related elements and they help to do the routing well. Components which make up the UI are separated into two files: the TS class of the component, which does contains the behaviour of the component and then there is the template file which contains the displayed HTML linked to the methods of the class.
I could go on further, but it isn’t my intention to show you why Angular is one of the nicest frontend frameworks out there, but to tell you that it isn’t a waste of time to learn it!
Totally agree
tais-toi
I think he's kinda a cOoL kid who mAStERs jAVAScrIPt and rEAcT and ignore anything but rEACt
It's nice, but reactive programming makes my brain melt.
You should give up on using classes in javascript/typescript . We have functions. And yes there is no standard way of doing DI in javascript. but it is not a problem, i am using index files to pass dependencies in modules, it may seems limited comparing to other programming languages, but it works great and keeps my code simple. And no worries, it is time to embrace functional programming
Good video and appreciate the humor!
Last quote is gold
Nice video. But why so much hate for Angular?
"As long as you don't use angular" .. yeah, and then spend hours, if not days, figuring out which 1/100+ 3rd party plugin you're gonna use for every small step of React development.
.
.
Oh, and then comes 'does this work with typescript'?
Yeah, angular is harder to learn, but If my team has mostly java/.net guys needing to pickup web development, and/or i need to build an immensely massive enterprise client side SPA, I'd choose highly opinionated angular over "you can go from A to B, in 1000 different ways, pick one" react.
And yeah, I use React daily, love it, but Angular also has a solid reason for existence
Why would he advise against using angular? I've heard only good stuff about it
Are there any newer "massive enterprise client SPA"s that are angular? I see mostly React used with moden big sites too. The flexibility gives much faster development times.
I find that Angular's reason for existence is mostly that it's much older. So it was picked and used a lot before better ways were even known.
Chill. He's joking.
Looks like you are new to the channel, eh? Don't worry. You will understand why he said that
Also the biggest bottleneck is network requests, thats why client side processing helps performance in many situations, this is where javascript is key and React has some extra benefits, with few drawbacks.
5:13 You can definitely use a service worker to fetch the correct assets when they've been updated on the server, CRA has the config: github.com/facebook/create-react-app/issues/3613
Fast websites are really important now for SEO. Google have to consider people on slow connections. They want to make website recommendations that are expedient. Plus there are some Google crawler considerations when using JS. Although there are still ways to make sure Google can index all the text on our websites. For example, having HTML fallback.
Everytime i hear you shade angular i immediately smash the like button
Ben, could you please elaborate on why Angular is bad?
If you watch his previous videos, it's more about AngularJS than Angular 2. It's also a running joke throughout his channel. If you've actually used Angular 2 for some time then you'll see it's not that bad and I personally think you can't really compare it to React since Angular is an actual framework whereas React is a just a library.
I'm an Angular developer myself. I've played a bit with React and Vue and I find Angular and Vue way better than React. Vue is more framework like but not as strict as Angular.
However, in the end it doesn't really matter that much. Just try to be open minded, try to explore all options and see what is best for your use case. Although I'm an Angular developer, I think Angular is overkill for very small projects and POCs whereas it can provide great structure for bigger projects.
On the Full Stack podcast the creator of Vuejs talked about trying the solve the problem of sending tons of JSON on first render. I don't remember what the conclusion was though. It was part of the Vite bundler that he was talking about it.
Just using the same types from back-end ts to front-end react ts is so wonderfull
"React almost tastes like cool aid." Okay I am drinking Angular then 😂
One problem I'm having with SPA is the OAuth 2.1. Authorization code grant flow (which is recommended now over implicit flow) with SPA.
hahaha, its not always sun shines and rainbow will be there, I totally agree.. Kudos man, nailed it to the point.
Me as an Angular developer: .......
Totally agree
Fuck JavaScript. Python's Django has an incredibly large amount of flexibility: Machine Learning, Server Querying, Lazy Loads, Algorithms, Client-side rendering (on Jinja's side), and even an Admin. And it's fast. Really fast.
um this was not about the modern web? this was just about react and ur opinion of it
Is PHP-jQuery really better than AngularJS? Cause I'm a PHP developer and people always told me to move on and use AngularJS or NodeJS.
Omg haha what’s your beef with Angular
why do u hate angular so much?? do a video on that... and compare it with react???
I think it is worth to take a look at Svelte
Wait, why is Angular bad? Did we have a security breach or something?
I'm new to the channel, but it seems like an inside joke, since he prefers to use React
Not sure thing about Angular is a joke or sarcasm or both ☹️
Angular sux
Can you do a video on the Facebook redesign?
What if your site visitors are using NoScript and don't want to have to enable your scripts (which may contain malware for all they know) to read your content?
Why shade is being thrown at angular i.e angular 2 and above?
"Use PHP or JQuery for all I care" This made me throw up
why?
My personal preference is for MPA front-end apps. They are a lot cleaner than SPAs. Especially with ES Modules and service workers you can get a very clean website. As for React. I definitely think it is bloated. There are a lot of other frameworks which have come around since then like Sinuousjs/Svelte/etc, which give you the same ergonomics as React but do it in a much more performant way. Personally, I don't see any reason to use any of those if you don't need them. JS is so easy now days using a framework doesn't give you a whole lot of gain.
This is a great perspective and point
Love it man
Lmao I was wondering how long before you dumped on Angular. I'm always happy that you mention it and keep it's name fresh and new. Yeah if you don't want to work on high paying corporate software, definitely stay away from Angular. If you want to build Todo lists and emoji lists React is a great fit. 👍😀
Fix* high paying corporate legacy
LOL. Both frameworks offer high paying jobs. Either you are a troll or just delusional.
For code splitting, just place the hash at the end of the file as a URL parameter, rather than in the filename itself. Some downsides, but fixes more problems than it creates.
Awesome videos mate, thanks for sharing them.
I like some of your ideas. Thanks for sharing them
I started to learn to React because of the job market, if not I am so happy to work with Angular. I think we have to choose a technology stack thinking about the problem to be solved instead of trying to solve all the problem using one stack. what is your opinion on that? I love python flask too.
I honestly don't get the JS framework pidgeonholing. I try to be platform-agnostic, just use what works, and learn on an as-needed basis.
5:10 is there any problem with doing it like this stackoverflow.com/a/32427/9710294 ?
Ok you inspired me to use Angular
What is the fastest technology for restAPI s. I thought it was Nodejs. But that is wrong then?
For the assets thing, for one of my projects, everything runs from a central script file, and it then lazy loads assets with the hash name. All I did was make the browser add a timestamp query param whenever it is getting the base script file, which should trick it into seeing it as a new asset.
Is there a video explaining why angular is bad? I dont get the joke. pls send help
He's just never learnt it properly, and just started with it, and because it's different apparently it's bad
Scrolling through the comments tryna find out the same thing
Hey ben please suggest me, whether to write blogs on medium or own Wordpress blog for earning side money as a beginner, please please help
Didn't got the point regarding Angular at the start. Can you please elaborate?
hes just trying too hard to be awesome by hating some technologies
Pretty much interesting to listen to you, but I don't agree regarding Angular. I like the way angular makes you build your apps and also its ng cli which is incredibly convenient. It uses RxJS and TypeScript which make developer experience very pleasant.
But my static website updates content without rebuilding itself :( does that grant me the visa to use React?
Pure js can do this easily
Great video Ben, keep up the good work
If it is not node.js, what will be the fastest way to make an API?
7:46 For those who came for Django
Can you explain why you hate angular or why you dont recommend it?
Well... If you agree that "being fast enough is good enough" and "it's OK for a site to load a sh*t ton of JS", what's your point against Angular (not AngularJS)...?
I don't even need to watch the video, the thumbnail says it all)
It depends on your target market. If you're making a site heavily targeting mobile users in countries with slow cellular data and very expensive data caps, typically using lower end devices... It starts mattering more
Hey Ben, In a video I saw of yours you mentioned that there's only a certain depth of Algorithms you need, after which they become too obscure, would you mind making a video covering which you feel are worth learning? Thanks man
I have installed "uMatrix" in my browser. Every Website* that does not work on the default settings** is a bad website, end of discussion.
*Apart from web shops which obviously need cookies
**that is no javascript allowed, no XHR allowed, no Frames allowed, no cookies allowed
Good luck with 99% of all websites not working :D
@@okie9025 Javasctipt is cancer
@@ukyoize who asked
Another reason I'm learning Elixir and Phoenix
Oh boy that stack is the best :)
Whats with Elixir?
I am gonna use React till we have prophets like Dan Abramov!
"as long as you're not using Angular to build a website, it's okay". Trust me, if I knew this before (at least before April 15th), I wouldn't have wasted my money on an online angular course and then spend the next month torturing and harassing myself trying to learn it. I never felt dumber in my life, like I could feel tumors sprouting in my brain and my lifespan decreasing. At least I leveled up as a masochist.