Google Knows Best
HTML-код
- Опубликовано: 25 авг 2024
- Google is introducing a new feature to lighthouse that'll detect large javascript packages and suggest alternative ones you can use instead to decrease the size of your bundle.js
#benawad #google
----
Checkout my side projects:
If you're into cooking: www.mysaffrona...
----
Join the Discord: / discord
----
Patreon: / benawad
----
Follow Me Online Here:
Twitter: / benawad
Twitch: / benawad
Medium: / benawad
GitHub: github.com/ben...
Facebook: / benawad97
LinkedIn: / benawad
Instagram: / benawad97
TikTok: / benawad
----
Follow me online: voidpet.com/be...
#benawad
Other: Put girls for clickbait
Ben: Angular
“Size is just one factor.” That’s going on the Tinder bio.
LMAO
Nice
Nice
Functionality is important too!
its from the tinder bio
Respect to the momentjs team for handling it like that.
Agreed
I personally think they let themselves down by addressing it on their website, they shouldn't have cared what Google says, just because Google doesn't seem to like them, it doesn't mean they should stop doing all the good work they've been doing!
What a total waste from Google Chrome team, I'll be uninstalling my Chrome and use alternatives!
@@xadasol8692 I think momentjs have been doing that before Google started recommending smaller libraries
@@adammoussa7295 Yeah, I think people saw this coming. I'm a long-time Moment user but had started moving on to smaller and simpler libraries long before Google or the Moment team started recommending other options. Mad respect to the Moment team for handling it the way they did.
"Put simply, I like my websites, like I like my hamburgers. *thick*"
- Ben Awad 2020
*pretends it's not from Linus Tech Tips*
*T H I C C*
T H I C C
It would be even fun if lighthouse gives us an alternative to lighthouse itself😎
lightlight.js
lighthut
Happy to announce yal, stands for "Yet Another Lighthouse"
Litehouse
@@ahmadmuslih very well lite indeed 😂
Not going to lie, would like to see what sort of "lightweight alternatives" Google would show to Angular
jquery
@@FunctionGermany isn't that dead?
@@honor9lite1337 By Lighthouse's logic, doesn't matter. Just needs to be smaller.
@@antoniostipic4920 understood.
@CPP.MASTER
Vue is enough tbh. It combines react, react-dom, react-router and more while having a way smaller package size and using tree-shaking
Did you just say "Hole everyone"
@@randerins I mean he's pretty handsome. I'm down. 🤠
Comparing moment to angular is like comparing apples and planets.
Agreed. I also felt it was a bit unfair to compare Angular to Moment. (Edit: I was informed to "hear beyond what I heard" in that quote, as it was just playful mocking of Angular)
Its a joke bro. Ben just doesn't like angular so he was joking and saying google should suggest to remove angular
Looks the same to me
@@bryanoverbey Hmm ok fair enough. Being newish to his channel I didn't catch that.
@@internet4543 👍 😎 - I'm a huge React fan. In defense of Angular I made the decision to go with React when Angular was still V1.2. I actually have no idea how Angular now compares.
As an Angular dev, I can absolutely agree that angular is BIG.
However, that's why you use the angular CLI and webpack (by default) to shrink the code and make it smaller.
(It will still be big to develop with, but the actual size of the webpage is rather small in comparison to how big it is with developing)
its still bad, too big and compilation times take a hit on larger applications
While not supporting the move by Google ,
Angular is a whole ass frame work . Not a utility library.
That's why I keep asking the Moment team to add templating, state management, DOM interaction, and routing.
@@n8guy ha lol
Don't you think its pretty dumb to compare a bundle size of moment js (date library) to angular framework .
@@internet4543 nice copypasta
@@internet4543 you are questioning my IQ where you can't understand the difference between a good or bad joke, and you defending a dumb joke. You are kind of a normie who like Amy Schumer's stand up just because she is famous.
@@internet4543 I m using react in production for past 2 years and I never used angular framework in my life. So you think I m just arguing for angular that's pretty dumb tbh
@@internet4543 found Ben's 2nd account. Defending his stupid takes in every comment thread.
I agree, it's a bit stupid to compare the two. Angular isn't a browser based bundle, it runs on the local machine, whereas moment has to be downloaded by the client.
To be completely fair, you should have pulled up react & react-dom in bundlephobia. Although roughly half the size of moment.js, react-dom was larger than I expected.
Throw in more essentials like react-router and a state management library too if you want a fair comparison with angular tbh.
Imo, Vue does it best by combining a relatively small package size, the holistic framework-level functionality of Angular and has tree shaking out-of-the-box.
preact have all functionality as react but its just 8kb with react-compat. removed syntetic event, removed old code from 2013-2015 that react is keeping for backwards compatability
@@RexGalilae Svelte with 0kb...
I guess you were just trying to compare the biggest three.
@@mthf5839
Yep, I was. I haven't used svelte
Google Interviwer: Can u optimize this algo a bit more
Me who watch ben: U can't ask me that u guys don't even optimize angular.
"I'm going to go the new reddit for the second time in my life" 😂 hilarious
Comparing libraries just by size is silly, but warning for large libraries is a good thing. So I agree with you mostly.
I love these little gems. I didn't even know about Bundlephobia until this video. Thanks for that 👏.
Lol this guy just never stops. It is so much fun watching someone make an idiot out of themselves again. And again. And again. And again
back in the days programmers were trying to reduce programs size and improve O time
this happenes all the time
the biggest problem is when is loaded...Most of the time all code is loaded on initial load it can be splitted for example using webpack dynamic import
And yet in interviews they expect you to write a sorting algorithm that works in linear time. No matter how slow their actual products are lmao
@@vishalasthana8998 "sorting algorithm that works in linear time"
HMMMMMM
@@troy856 That was the point of the joke in case you missed it
Moment - A couple of simple utilities
Angular - An all-in one web framework
Who compares these two things next to each other? Obviously the lighthouse team would never flame you for using an 80kb framework, it's about using a util library that takes up as much space as an entire framework.
I've used Angular and React, and I've watched so many of Ben's videos bashing Angular. Not even him can convince me that React is better than Angular.
It's a meme at this point or he doesn't know what he's talking about. He even conflates Angular with Angular.js.
That's the truth. Frameworks are just tools, Ben acts like Facebook is paying him for this pathetic marketing.
It's called "unconscious bias".
@@kenocvr I'm convinced it's the latter here. If you're going to repeatedly bash something, at least educate yourself on it. People watching these videos treat him like some front end expert and just form their opinions as copies of this
its hard for him to convinced users which know on what areas Angular is better than React, because he's offending those users somehow. i like using Angular, but it's funny to listen to him, it keeps me entertaining.
@@laoblue9302 Name one area where Angular is better, I'll wait.
* microsoft has entered the chat
microsoft: have you ever heard of blazor?
6:40 it's based on how good tree shaking works l o l.
like the problem of moment as it does not handle it at all, while other libs do, which means they don't necessarily have less functionality at all
Comparing javascript library dedicated to date and time manipulation vs one of the leading web frameworks and bashing it because it is only 10kb larger? Yeah, big brain time.
Ignoring the fact Ben is very sarcastic and is happy to unfairly bash Angular for the sake of comedy? Yeah, big brain time.
Antonio Stipić Go on and try to compare angular with react. That’s 84kb vs 2.4Kb so uhm...
@@06kellyjac Well just like the lighthouse is suggesting using smaller libraries without any real reason and it results in people using inferior libraries, same thing is happening here where Ben is "sarcastically" bashing Angular without any real evidence which causes people to "use inferior libraries instead". Iykwim
@@ashutoshkaushik9118 You forgot to count tens of other packages react needs to barely have all functionalities Angular has with that single package.
I agree with Ben here when he says size shouldn't be the only factor to compare but I also agree with @Antonio Stipic because even though bashing angular is for the sake of sarcasm, it pretty much seemed like butthurt act when he concluded the video with "no, thank you for the alternatives"
Google wants to speed up the web to serve more ads, its as simple as that. Their team are masking this as Google caring about the web (which is also true) however its primary goal is to serve more ads. Eventually, there was going to be a conflict of interests between appearing to care about the web, and wanting to speed up the web to serve more ads.
This is that intersection I think. This move harms the web, however it speeds up the web to serve more ads.
I've been kind of forced to adopt Angular in my workplace if I wanted to stay in the projects that I've been working on for more than 8 years now (Basically I started them when they hired me, the projects grew, so they hired more devs which thought including Angular into the most recent ones was a great idea without asking my opinnion first)... Long story short, the developers that adopted Angular for said projects have left for other jobs, and I had to continue their development/support... The result is that I hate with a passion the big, fat, ugly beast that Angular is. If you are new and wondering if Angular is a good choise, please stop considering it, even more so if you are thinking of using it along angular material or some other big dependency like that. Do yourself a favor, choose to be happy, use anything else.
Are they going to replace the dev that left? Maybe you can keep it going for a few weeks then get back to doing something you enjoy.
Damn bro
I don't think the point of this video was to take shots at Angular.
I've done a lighthouse report on my Angular and React websites and the react websites largely did better. There doesn't seem to be any bias against React so ya'll need to chill.
yeah its a meme video anyway i s'pose
@Vizman216 if your website is built on that framework ( I know react is not a framework ) what's the point in suggesting an alternative ?
Are you gonna rework it just because of a light house score. You picked the framework for a reason right ?
for those wondering, firebase is 791.3kb minified and 219.9kb minified + gzipped
Seriously I didn't expect you to be that silly to compare moment with Angular
@@internet4543 I am not saying Angular is better but it is a Senseless comparison & Sarcasm is different from stupidity. Btw I am a Contributor to the React library.
@@internet4543 In the lighthouse Suggestions we can clearly see it is suggesting alternatives based on overlap of Functionality. If you don't wanna consider them then dont, no one is forcing you to use the alternatives.
@@internet4543 bro when this many people can't tell whether someone is being sarcastic or not, there's a high probability they're not the problem. maybe the other party is just not that good at sarcasm...
@@internet4543 also major props for the funny ass joke. you should try replying every single comment about angular with it. it's just that good of a joke. i can't get enough of it
@@internet4543 oh i can't. Facebook is not welcome in this house
The jokes cracked between the lines are life expectancy increasing
Sooo 70kB for the library from which you're using up to ~10 methods VS 87kB for the core that allows your entire web app to run. A bit different things imo.
Waiting for the day when Ben actually reads up and uses angular and faces reality. 😂
I dont think he has worked with large teams, or at least a company that works on multiple different products that share the same tech stack. Angular as an all in one framework for environments like that are truely invaluable in quickly getting everyone to work off of the same page.
@@a12356ut just moved my team to nx monorepo and we are doing react. Getting the powerful angular CLI and a very nice consistent architect.
his IQ cant handle it.
you can't compare a date library with a framework
Yeah! He is talking as if he uses react alone in the production and doesn't add any mandatory routing and state management libraries.
React alone is just way too useless
@@internet4543 Holy hell I keep finding more of your comments I scroll down
Imagine being a simp for a frikin' JS framework, like damn
@@internet4543 Hey! I've been working with React since 2017.
I think that, while problematic, suggesting (presumably vetted) alternatives saves me research time. People can use their judgement and choose something else. It was a SUGGESTION.
I understand the politics of the features; but I think we have MUCH bigger issues in our industry then influence suggestions from a developer tool.
Wow didn't know Angular was that small almost the size of MomentJS.
He must have a lot of fan bois to be able to produce this content.
Comparing Angular framework which is a full-fledged application development framework to Moment.js classic move bro.
Angular vs Moment ? Not a fair example
Discouraging Moment due to size but not discouraging Angular -that is OBVIOUSLY bigger- was his point. It was not a comparison between libraries.
Joel de Leon yes but Lighthouse doesn’t recommend any old smaller lib, it recommends smaller libs offering the same functionality and moment and angular do not offer the same functionality
@@joeldeleon6470 Angular core isn't even a browser based library though, it's a local development library. It's like comparing the source code of the VS Code application to a web page, they are totally different things.
i like that ben is a fully aware meme lord
Ben, Google did give us an alternative to Angular. It's Polymer and it's even bigger.
Bruh. Lighthouse is just giving devs info. It’s not like they force you to do it. It is up to the devs to decide for themselves which package to use.
Lighthouse is slowly turning into Microsoft Clippy...
"Hey there, look's like you're trying to write a web app!
want me to help choose a performant package?"
Dan Abramov's ears are burning
Lol
Flutter is the future angular is was just a stepping stone
It's not @angular/core it's core and 7 other angular packages + zone.js & rxjs
How can you compare Angular-Core library (which is a full blown front end framework) size with moment (which is only a datetime utility).
IMHO, Angular-Core being 80 kbs shows much better in size than moment being 70 Kbs.
It would be better if they'd only complain when you use a fraction of a bloated library. Encourages people to make their library tree-shakable. Suggesting alternatives is fine by me but it would need to be intelligent and only suggest libraries that actually have the features you need
Google: This product isn't good for you. Please replace it with our product. Trust me bro.
The lighthouse joke was gold pure gold
I think the problem with removing recommendations altogether is that people will say, "yeah lodash is huge, but it is the only option". google are not saying "though shalt use X library", but just saying that there are more options.
google: hey, momentjs may be a bit too big for this project
momentjs: guess I'll die
A long ago I decided than Angular is more suitable for inner corporate projects only where the bundle size is not the criteria
the bundle size of my angular app with firebase in production is 1.4mb!!!
*I'm switching to svelte.*
yes. I tree-shaqed and used all of the compiler techniques like --prod and shit like that.
the development build is around 7mb.
it takes around 5-10minutes to compile on i3-2100.
10 min to compile? What the heck have you been doing?! Even for Angular it's toooooo much...
i3-2100 and you're wondering. My 4 year old PHONE has almost twice the performance of that.
@@yeicore its just a slow PC.
and angular just complements it. also npm is slow so... it just adds up.
How can you compare a framework to a npm package that doesn’t make sense.
What about pulling up react on the bundle phobia too? Throw in the react dom and routing and I doubt the size will smaller than angular
I disagree with your opinion here. Showing alternatives doesn't do any damage. The developer will take a look at the alternatives and see if it suits their needs, if not, then just continue using what they are already using. It is just a recommendation...not enforcement
"Recently, Chrome Dev Tools started showing recommendations for replacing Moment for the size alone. We generally support this move."
Moment: *Thumbs up crying cat meme*
Wouldn't @angular/core bundle be tree shaken after enabling Ivy?
Wow, love the coordination! Red shirt for an angular video.
Comparing @angular/core to moment.js is like comparing optimus prime to a toy lawnmower.
What's an actual alternative to Angular?
No other framework really compares.
Angular core don't go to production ,after build is created chunks files. Very very smalls.
Can you explain your Ajani picture in the background? And if you are into magic, can you talk a bit about your magic exposure/experience?
Maybe it could be an opt-in system? For packages that know they are just in maintenance mode and that more modern alternatives exist?
i think we should keep the alternatives and let it to the développer's duedeligence to decide what to do
Just use Svelte. Checkmate
I use vanilla for everything for client-side operations and C++ and PHP for server-side...so I don't care what lighthouse recommends and I also don't have any love for a particular library.
Lighthouse detects application created using Microsoft Blazor. Lighthouse illustrates a shipwreck and gives up!
HOLE BEN!!!! 0:00
The trick is to use lodash, but in electron so file size isnt an issue ;)
Thanks ben for info. Google is trying to mass hypnotize us the developers who are in coffee addiction 😂
i would suggest all browsers should come with most popular libraries built in with their browser so that we don't need to download them in the first place.
Worst part here is that those values are not correct. they are based on bundlephobia and do not acurately reflect on size of package that has been tree-shaken by webpack
I literally opened this video with a lighthouse score of 6, 8, 100, 5 sitting on my other monitor
What's wrong with Angular?
Anyone that hates angular is just too stupid to learn it
Google want to reduce javascript payload so their robots use less bandwidth
me: *punches keyboard to try to modify and display 1 single date* fuck it, I'm installing moment.js!
To reject frameworks in general does not mean that you should not use utility libraries..
I woupd rather have that kind of analyze on security, if a library has a vulrnability in a version you are uaing it will motivate maintainers and developers to fix/update the libraries. Which is gonna make the web a safer place overall, which is much more important than half a second wait time for downloading 100kb library.
Just did a fair comparison :
Angular - (core + common + router + platform-browser-dynamic) ~= 142KB.
React - (react + react-redux + redux + redux-saga + react-router) ~= 60KB.
Let's have a moment of silence for all the "Angular" guys reading this comment 😜
Lighthouse is nice and Google likes to promote "best practices" and so on, but the funniest thing is that most of the time you check that "Remove unused JavaScript" section it's Google's libraries that are top offenders. Google Analytics and Maps are often at the top of that list because they are huge JS bundles and because they are widely used libraries this problem occurs on many many websites.
Btw, maybe you should change your channel name to "Ben Awad Comedy", because judging by your comments people really don't realize that you are sarcastic most of the time with what you do.
Well I'd guess that generally speaking the more a library follows the Unix philosophy, the better.
You are comparing a library vs the framework, and the size are almost the same, BTW Reactjs is too big to be a library
React is not big at all. React-dom and react-router are big. Also it is not a framework. But create-react-app is a framework in my opinion
It's like Angular was made by your ex that may be has been bullying you, and you hate it so much.
I personally didn't know dayjs existed. I was complacent with momentjs. The recommendations are fine by me. Although, it may create a tunnelling effect where people only focus on THOSE packages without doing research.
Not a good example to compare the size of the angular libs... You know those are just tools angular provides to help developers create the frontend app. In the end you BUILD and COMPILE your code into static files. You don't deploy the soucecode into the server you fool just the compiled result of the angular build. your production build.. which turns out to be relatively small
but the function of angular and moment.js are different..moment are just for manipulate times on js and angular it's a entire framework
I know I facepalmed when he compared the two bundle sizes, as if the whole angular core loads in the browser!
Maybe I’m missing something but why hasn’t anyone built a tool to recompile these libraries with only the functionality you’re using in a particular project. Just map the package as a DAG and cut any branches that don’t link to a function your project uses. That way if you’re only using two functions in react, that’s all that gets loaded.
The thing you are saying is called Tree shaking, it's used to reduce the bundle size on production. But you are underestimating the size of some core frameworks and libraries. They are large on fundamental not just because of functionalities but also compatibility, stability, etc. Moment.js, jQuery will be long-live for same reason.
Many "new" libraries claimed that they beat XXX in term of size but often lack of compatibility overall and you have to figure out how to fix their own problems and could end up creating something as large as the old one you are using.
That's why good developers always try to figure out some new solutions based on the old one.
euhm... just search for angular instead, like you did with moment. I don't like angular either but I saw what you did there. :)
That's not a real comparison... When your compile angular framework, you get a tree shaked bundle with only the deps you need (a few kb). While moment, isn't tree shakeable at all. Your whole point is lead by misconception about angular. They probably have made a mistake giving specific alternatives, but they sure did right when they suggested one.
PS, I'm developing both on React and Angular and I'm not a lib/framework fanatic. In case you were about to call me "Angular fan".
I actually think that this is a good idea from Google. I don't understand your point here.
I love to have suggestions on how to optimize my websites.
He just doesn't like google or angular for the matter.
So he is just taking a stab at google and nothing else. This video is just a funny meme and nothing else
TBH I liked that feature as well, but I agree with one thing he said. Like just discouraging people to stop using a library just because of size alone is not a good thing.
@Ian Bentley in what way does Google benefit from you using dayjs instead of momentjs?
"I have a confession to make: I am a web developer. (...)"
gulag.
In my opinion I don't think Google ever intended to shit upon libraries. The smaller the bundle size the easier your website will do in general on 2g or 3g connections. It's always been up to the developers to choose what libraries they need (unless you're under bad mgmt). Usually people pick libraries by popularity which makes sense as there is going to be more trust and safety and if Google starts promoting libraries for smaller bundle size, I think it will promote people reducing their bundle size of their libraries which is a good step. Atleast that's what I think. If you're using lodash, you might not need the trillion things that come along with it, use the seperate libraries for each of those functions.
Using bundle splitting, tree shaking, analysing source maps, it's all part of the development cycle to get the right optimized website.
I don't think people should make the open source community feel competitive, if I write a big library that runs on any platform there is, and one boi copies it and makes another library super performant for safari, let it be. It's a positive step and the open source community got better.
Just change it to: we noticed you are using this package to achieve this goal. This package is larger than similar packages. It might be worth it to consider an alternative.
I should watch till the end before I comment
Is it possible to analyze code and bundle only part of a library that we really used? 🤔
You're comparing an entire framework (Angular) vs a date library (moment.js) size? Are you serious? I'm not saying Angular is lightweight, but it's a framework at least, it handles EVERYTHING (or almost). At the same time I'm the one who is alson considering experimenting with Svelte.js + Supper.js combo to see if there are benefits
Google should replace itself with a smaller version of a company, because its too large.. We suggest duck duck go.
currently respecting the very dense amount of wit in this video
I miss the days when Ben openly dunked on Angular. *shakes fist at sky* Damn you Dan Abramov
How can you compare the bundle size of Angular core and moment? Moment is about dates while angular is a whole framework 😂
Btw firebase is 219kb...
webpack is 600mb and 100,000 files with all its deps.