15 Years of Web Dev in 12 Minutes
HTML-код
- Опубликовано: 10 фев 2025
- Get 20% off pro plans for The Frontend Dev Career Path - scrimba.com/th...
💬 Topics:
1. How to start Frontend Development;
2. Frontend Frameworks review;
3. Typescript, JavaScript, EcmaScript;
4. CSR, SSR, SSG
5. Reactivity;
6. SPA and MPA;
7. Useful frontend tools.
🥇 Become a Member - / @awesome-coding
✉️ Join the Newsletter - newsletter.awe...
For any beginner and every developer who is huble enough to lern, this is the right Video!. For context: I'm a senior developer of the webarts myself. So i can tell he knows what he's talking about. I love how holistic and simple you explained it! ❤
Thank you so much!
I have started learning web dev and currently learning networking section.
please how much deep should i go while leaning?
for example : i am building http server to get internal working hands on.
but then it will take eternity for me if i follow this model to learn everything
how much should i learn., or should i just start building applications in huge numbers, this will brush my industry standards used things
@christcut I could not agree more!
I love that this video is a high-level, non-detailed overview and covers the evolution of frontend development. I think even my management can understand it. I'm going to suggest they watch it so they have some idea how the sausage is made.
Nice :))
man this was a beautiful journey through it all! The simplicity and the clarity is top notch! Thanks for that 🙏
Thank you for the kind words!
I'm in the web dev scene for nearly 20years, but somehow I still feel I'm a junior. Hardly use any SPA frameworks for projects as most of my clients require just a static website, sometimes with a CMS (Craft CMS for me). Hence I mostly build with vanilla html/css/js/php.
do you have a lambo(i know its a meme but does working with simple things actually give good money, in comparison to exploring many technologies)?
@birdbeakbeardneck3617 asking the right questions!
@@birdbeakbeardneck3617 I don't think Daddy HTML is going to buy you a lambo. Maybe working with express, mysql, and Vue will and working with next.js won't. That seems to be mostly hype on Twitter.
Not really, it does keep the lights on and my family fed. Guess I need to update my skill set. The only thing I'm proud of is probably the skill to turn any web design from Photoshop/XD to a near pixel perfect working responsive site from scratch without any css/js libraries.
@@nekomew This is exactly what somebody who has a Lambo from web dev but doesn't want you to know he has a Lambo form web dev would say.
For the first time i get to know what hydration means, thanks great video look forward to more these kind of videos in future.
By the way, you can find a deep dive on hydration here: ruclips.net/video/kZG3izJu7qE/видео.html
@@awesome-coding thanks again.
@@awesome-coding best ever explanation i've heard
@@ebmpinyuri Glad you found it useful!
I love your videos, and you boiled down the technical essence of web development really well. The ever-changing jungle of frameworks and technologies keeps the focus on the logic part, the JS/TS and client/server relationship. But there's so much more to being a great frontend dev: To create a great user experience, you also have to understand at least basics of UX and design. You have to know about accessibility, especially now with the upcoming EU law. Using component libraries won't automatically result in a great design and accessibility. You have to visually balance and semantically structure things well and use the right elements for the different jobs. You also have to understand how to keep performance up. At least nowadays different browsers are much easier to work with than 15 years ago.
Frontend development _is_ complex, because right now, it's basically full-stack development most of the time, maybe minus server-side data manipulation/persistence and infrastructure. But many frontend devs will have to deal with those kinds of things as well. And it's understandable why many will be overwhelmed. But it's fun and exciting as well!
0:22 “… who love complexity for the sake of job security.” Woah, hol’ up… welcome to _software development_ not just _web_ development! 😅
I agree, developers love that self-importance. However, I believe we are making this an art form in web dev.
@@patricknelson check out the keynote talk by DHH, creator of Ruby on Rails, just out today. He blasts the current complexity of things. It’s a great talk actually.
@@br3nto - Thanks for the suggestion, I’ll have to check that out.
@@br3nto What’s the title of the video?
Edit: I found “Merchants of Complexity” released by Refactoring, but that’s 3 weeks old now. Just making sure I’m not missing it. 😅
@@patricknelson The vid is “Rails world 2024 opening keynote - David Heinenmeier Hansson”
Sir this is actually good, for a beginner who is learning he/she doesn't know the clear picture. Why all this technology come and what problem it's actually solving. 12 min is not enough love to see a detail video of web dev's actual story. What technology are used over time and why. Currently what to learn according to industry standard.
This guy is a GOAT 🐐...epic channel. I subscribed the first day I watched his channel.
Thank you so much!
learning this high level architecture, boosted my confidence in learning , i am thinking ill build projects after projects to learn the things rather than going through books only.
I was wxpecting a meme video, ended up flabbergasted by the summary of current web developement.
Liked, commented and subscribed!!
Thx for sharing the knowledge!
Thank you.
No worries!
Great summary. Fyi, Vite is not a bundler on its own.
Thank you!
I'm going to share this to people when they say that "front end frameworks are unnecessary". Yes, although you don't NEED it to make a website, user's have certain expectations when using apps and requirements change and someone pushes directly to prod and the sky falls and... I forgot where I was going with this. Great video though!!
Thank you!
Yep... frameworks are not necessary until you need to actually ship a real product in production fast.
It depends on the type of website. Personally I don't see the need for "frontend frameworks" when the client website is a static site with limited interactivity (just links to traverse across pages of information).
Using a frontend framework adds unnecessary complexity to this type of websites, where we can just use the vanilla trio (HTML, CSS, JS) to get it done easily. At most just add SASS and bundlers to make dev work easier.
@@nekomew 100% agree, if you know for sure that the interactivity is limited, then I would definitely not introduce a whole framework just for that. And if they want a full web app with lots of interactivity down the line, a rewrite may suck a little but shouldn't be too difficult because it was a simple static site to begin with.
I will say though, if you're already comfortable with a specific front-end framework and it lets you deploy the app and features quickly, then I don't really see a downside, with the pros being a far superior dev experience even given the added complexity.
@@nekomew yes that's true, but how often do people build these types of fully static websites these days? Many developers and agencies just use WordPress for this kind of stuff and use ready made themes to create these websites. It's more cost effective to do it that way and allows the client to update content if necessary. Super custom (creative) websites are an exception to these rules because you do require custom work there, but they are super rare.
I don't remember when was the last time I've actually built a website. I'm just working on web applications all the time.
frontend frameworks are unnecessary
Best explanation 👌 👍 Tyvm.
Awesome video. Good work.
Thank you!
white screen of death ☠
😅
FlashBang Of Death
❤ SSR. Not to mention the jank you get on larger more content-heavy pages as components load (if you have it set to run asynchronously). I hate, nay abhor, WSoD and layout shift (a.k.a. CLS, cumulative layout shift, re: core web vitals).
This is actually a really really well done video.
Thank you!
you did a great job 👍
Thank you!
I would add that react has one directional dataflow (I guess they call it one way binding) which suits well for functional approach, since components are functions calling functions.
Good point!
As a user I prefer SPA. In 2024 we have really good internet, so initial load doesn’t take long, and it feels a lot better to use. As a developer I also prefer SPA as it’s a better dev experience.
In what way do you prefer SPAs as an user?
If you are talking about navigation (Client-side routing), you can have it with Server-side rendering. Most meta-frameworks work like that by default.
SvelteKit for example, as long as it can load the javascript, will work as a normal SPA, with client-side routing and fetching in the browser when new data is needed. If it can't load the javascript part, it will default to MPA mode, where every action triggers a full refresh.
Ermahgerd! Reactiviry! 🥴😂
No seriously, this was a great video. Keep it up! 👍
🤦♂️ Damn.. One of these days I'll actually learn to spell.
Thank you!
Scrimba is how I mostly learned Web Dev in 2022 - I don't really like the new design of their website (yet) but their courses are really good.
Glad to hear - yep their v2 redesign is major :)
I like their format as well and I was glad when they reached out :D
Lit mentioned, let's go!
✌️
all this js complexity is what makes htmx so appealing
HTMX mentioned!
Looking through the comments to see if the video mentions htmx...
11:31 wait… hydration?? That’s not right. SSR usually sends down the data as HTML. Aka the HTML is rendered on the backend not on the front end. JS might be added to add some local interactivity… but hydration is basically mixing CSR techniques with SSR techniques.
Great video
Thank you!
very informative, thank you.
Glad it was helpful!
Don’t forget Analog, metaframework for Angular 🅰️🚀
I am glad that I didn't click the video based on the title. I clicked it as I saw the thumbnail and thought that its a collective information of experience and got that exactly😊.
Well, I'm glad the video was useful :)
No SPA stuff for me, I've been working for the same company for nearly 20yrs now developing the web based point of sale that all our stores use. All MVC on the backend but still an MPA. Exceedingly fast system especially processing the HTML pages ready for display to the user. Time to first paint and time to first byte are both very very quick.
Nobody needs modern JS frameworks, people just choose to use them because they like to make things difficult for themselves :P
About the only thing I've been doing for the last 14yrs is this fad word called 'hydration', but I was doing it long before it was even a known word for this kind of thing :P
I send the processed HTML page, then I have javascript which makes a backend request to get the rest of the data, I then have Template7 make it visible on the page. Used to use Mustache and Handlebars but found them rather limiting.
How much traffic are you getting on your system? Is it still fast on concurrent users?
Is the team you're working on large enough to even consider Dev Experience?
How is the maintainability of your app? How quick are you shipping new features or fixing bugs?
@@butadpj A lot, 3 million requests a day, and that's just our stores hitting the system.
It very much is still fast, we have invoices being generated every few seconds in the system.
1 developer for the last 15yrs, and I finally have a junior who I am training up :)
The system is rather easy to maintain, and I'm exceedingly fast at coming out with new features and fixing bugs.
Good luck finding another job if you ever get laid off.
@@Tom-rt2 Will have no issues here in Western Australia. Plus I have some really nice job security :)
This is a great overview of the “what” of web dev. The devil (or the fun part, IMHO) lives in the details of the “how” and especially the “why”. I think one thing that helps define a more “senior” level of expertise in the field is diving deeper into (and debating) the theory of _why_ things are built the way they are; speculating on how we can improve it. Much of that is informed on a deep understanding of the history of how we got here (thanks for that) as well as years of experience dealing with issues that need to be overcome by new standards, libraries or ways of thinking.
I totally agree!
i went from meta frameworks path to ssr only path to htmx, but now im at full pwa experience. i love PWAs.
i love coding them
Can you go through the same style but in detail for web assembly?
WebAssembly is not ready for frontend yet.
What software are you using to make videos?
Adobe Premiere Pro
I have started learning web dev and currently learning networking section.
please how much deep should i go while leaning?
for example : i am building http server to get internal working hands on.
but then it will take eternity for me if i follow this model to learn everything
how much should i learn., or should i just start building applications in huge numbers, this will brush my industry standards used things
start building applications.
Thanks for sharing your experience and real world journey in tech,DRY and KISS is still the best practice. I'm in love with SPAs Angular is still given me a better developer experience on large scale project❤
Thank you!
@@awesome-coding i enjoy getting your updates in tech keep it up
8:39 Reactivry
😅
@@awesome-coding no worries mate I think its okay having a minor issue in a 12 minute video
the thing which matters is the content which is just nice!
thanks for making this video!
@@Serizon_ Thank you!
I am very interested in watching how the created Microservices website will work on HTML+Tailwind+ HTMX+NGINX+GO+DOCKER+K8S+Postgresql, please make a video review on this topic. Please compare the pros and cons. I hope this topic will be interesting for everyone.
The biggest lie: "Reloading the page is ugly and your worst nightmare"
😂
Would be nice to have one focusing on the backend... even thought MVC has been here for ages we also had new additions with GraphQL, Event Systems, No-SQL, horizontal scaling and more
Good point! Thanks for the suggestion!
I think Phoenix is the one that focuses on the backend and I'm currently exploring it.
Hey, don't bash job security. We do what we gotta do to keep the money rolling in.
High pay low effort - that's music to my ears.
🎉 Thank for sharing your experience. And explaining this.
My pleasure! Thank you!
You explain everything so well. Start doing courses!!!
ty big bro
Listen, just produce more meaningful videos like this! That's the only comment / advice every humble and honest developer can give you.
Find your inspiration in git, how backend (JS) work and how to connect ti with FE and so on...
I appreciate that! Thank you!
maybe the lie is the javascript frameworks we mad along the way
The biggest lie in web development is the last 9 minutes of this video. You don't need SPAs and frameworks for good UX. Traditional MPA, with some htmx and JS sprinkled where necessary, will give close enough the same (or better) experience, but with much less effort and complexity.
But this is how the video is ending - SPA has flaws and the best solution is MPA or a hybrid approach. And this is not my take, this is what the community shifted to in recent years.
This was great! Thanks.
Thank you!
I'm starting to have a feeling that web apps are losing their point. Instead of running a huge application in the browser one can download a desktop app and run it natively on their PC/laptop.
Even with web assembly client applications, one is still running such an app inside a browser with a layer of significant overhead.
I worked many times on huge web projects, and I often came to the point when I'd tell them "Jesus Christ, just rewrite this garbage into a native app!"... 🤔🤷
Could be a valid point. With native apps you run into a whole different set of issues regarding maintenance, releases, native software constraints and so on.
But having something like photopea on the web was helpful, because i coould do thing on a phone when i didn't have a laptop.
How does SEO affect SPA?
Because the page is not loaded until the user accesses it, it makes it harder for crawlers to know the content of a page and index it correctly. This can negatively affect SEO.
What is the lie though?
no one knows...
Clickbait video.
The agreed idea in the industry is that web dev is complex because of all the frameworks and tools you need to know. Would you agree?
My argument is that all this complexity is smoke and mirrors, and that things are actually easy. You have a handful of concepts and ideas you need to understand and you should be good to go. Things are actually so simple that you could do a full overview of the space in 10 minutes. So the lie is the aparent "crazy" state of the web dev in general.
Would you agree with this?
@@awesome-coding a hot take, but not wrong. :)
@@awesome-coding Isn't the web complexity (mostly frontend) ever changing frameworks and tools and dependencies which can and will break each other over time? The concept may not be hard until you start using the modern frameworks and 1) something doesn't work because you are not doing todo app and need complex feature, but the framework haven't though about it and in addition hide the implementation 2) your framework updates and then you are on legacy stuff along with bugs or you try to move on, but first you have to update to the new "correct" mental model? You should'nt have to start with framework on top of your framework to do a todo app which maybe is calculating in parallel alternative DOM, because why not.
And then you have backend. Spring boot with java, dotnet core with c# their development and slow and steady, they focus on not breaking changes and even if they do, the are doing version bump (no, not every 6 months like next) and very good documentated way to migrate to the new version, often with over 90% backward compatibility.
the best video ive seen so far in introducing people to web dev
Thank you!
That is actually it...
Why do developer love so much the word "pragmatic"? lmao
It makes us look experienced and cool. You really need to know your stuff in order to cut through the bullshit and do your job right. So I might charge you $200 / hour to implement a basic form with some actions, but you'll know that those 40 billable hours are well deserved ✌️
@@awesome-coding Damn, your hourly rate is too low!
The biggest lie is that JS is the way
😂
What I hate about Front End youtubers is that they almost always push for some library or framework that is technically unsound.
I am so tired of Anti-Patterns being rebranded as revolutionary!
We need to be like back end where we take things seriously.
Hmm am I pushing a library? 😅
@@awesome-coding No ofc not. I was just saying that most just naively promote anti-patterns. I think even you mentioned something like this in the video.
8:26 reactiviRy 😄
Good video!
Thank you!
8:25 after effects doesnt have spellcheck🤦
😅🥲
Best analysis of lala land of Web development
Thanks! Somehow people are asking where is the "lie"?
And I'm like... It's all a lie!
@@awesome-coding😂
Nice video but I suspect that if you didn't spend the last few years fighting with all this 💩 you won't understand much and/or come out with a headache...
I'll show it to my nephews studying webdev, we'll see how they react 😂
Title makes no sense
You don't think people are being lied when they are told web dev is complex and there is a lot you need to learn?
You hear all this talk about tons of frameworks and tools, when, at the end of the day, you have a handful of ideas you need to understand.
@@awesome-coding Sure. And that's where I thought the video was going when I clicked it. But then you spent the majority of the video on the hyper complex frameworks anyways.
So it was more of a "all of web dev squeezed into 10 minutes" or "web dev explained from first principles" video.
I'm not saying that's bad, just I was disappointed after reading the title as someone who is already experienced in web dev.
@@kerimzunic Fair! The message I tried to convey was "they are lying to you with big titles and useless complexity. Things are actually simple. Here is the gist of everything". I agree I might not have managed to achieve my goal with this video. I can also see how the video is aimed more at those who don't have a lot of experience in the space.
I apologize if this was frustrating to you, and thank you for the feedback!
I am 25 and a senior developer, 😅 and yes I have no sun time no gf since birth, and no friends (intentionally)
You sound just like me a few years back
r u sure about that
@@birdbeakbeardneck3617 Hey... let the man believe his own stories. I also didn't have a girlfriend because I didn't want one🥲. Seriously! ✌
So what's the lie ?
15 years of web dev? That's junior level 😀 You are not senior level if you don't know FRAMESET element...
Shoot! I actually had to look that one up 😅
I used proudly used marquee in the past though. Does it count?
if you have 15 years of experience. then how old are you bro!!😊😊
Old enough to have a wife, two kids and no free time 🥲
where is the lie?
Web dev is complex, there is a lot you have to learn, JavaScript fatigue, too many frameworks. Sounds familiar? :))
:chef-kiss:
Thank you!
I thought will Video will be a review about the 15 years of Web Dev. I stopped watching in the middle because it was a overview / introduction about Frontend Development. A really well one and visually appealing but still still a misleading title.
Sorry to hear that :(
15 years of web dev KNOWLEDGE in 12 minutes is probably a more appropriate title, but then it would have been too long and YT would cut it off. Sadly I have to play the RUclips game to some extent 🥲🤦♂️
It's not js it's ecma script 😅😢
yeh but ryan dahl has asked oracle officialy to give up their js trademark
@@Serizon_ oracle is famous of ignoring such a claims 😐👉👈
Make your life easier with PHP
Noted!
For those who may wonder what’s so good about php:
Immutability by default (copy-on-write);
Stateless by default (whole script is whipped out when it’s done , state can be kept between requests just through sessions and persistent storage);
Predictable scaling (stateless makes easy to reason about performance);
Full OOP support (classic Java-like OOP with interfaces, private fields, final and readonly stuff);
Easy to deploy (no need to rely on aws and other pass, just get vps and play with nginx and fpm);
Rich stdlib esp for web (node.js requires 3rd party code for basic stuff);
Great performance since PHP 7 for interpreted single threaded language (opcache, preload, jit if needed);
awesome ❌ bullshit ✅
What I learned in 8 years of web dev: Use Rust
Choose a different profession :))
@@awesome-codingWhy bro?
WASMs cool but it's not ready yet for full frontend, not because of performance but, in my opinion, tooling, overall support, and adoption. Use Rust for the backend sure but very few use cases justify the devtime cost for that level of performance (optimization) and security (and maintenance) when a backend written in Go gets you like 95% of the performance with much less devtime meaning more monies for master.
@@cryptonative I was joking. learned after 8 years that I should not waste my time with these web technologies and choose a systems language instead. This is the first step in leaving web dev all together and doing other types of development - hence you changing the profession :)
@@nguyen_timI know right now it feels strange but talking on wasm on frontend. Agree 100% on Go getting you 95% there for backend. For frontend though, JS can’t get you 95% there for building robust code. If you are building something a system that deals with finance js is just the wrong tool.
Waste of time. I thought i already banned this channel from recommendations. Jesus youtube, why cant you be simple just like the guy in the video told you
No worries, buddy! My next video will be better now that I checked out your videos and I saw what quality content actually looks like!
@@awesome-coding don't be mad at me. I'm mad at youtube because it keeps bringing your videos. Not at you. Someone loves your content, doesn't mean you should stop because of some salty dude (me) on the internet
@@CuriousSpy Fair ✌
Web dew is stagnant and will be dead in couple of years, replaced by AI. Also, the whole concept of communication with PC and User Interface changing with AI.
Nostradamus here
Saying AI will change things without specifying how AI will change things is so 2024.
@@nguyen_tim actually its perfectly reasonable. Same as clusters pf volatility in random process or stock. Its possible to detect and predict periods of high volatility, but not the exact number or even the direction, sign.
Yes but who will be able to make better web apps with AI first? The web devs will have an advantage
@@nguyen_tim bro basically saw some new model and thought "holy shit, we are now in a post computers era"
"qwik-city not even mention lmao
Qwik was in the video though :)
qwikly forgotten
seeing the thumbnail I thought it's fireship. Create video nonetheless :)
Thank you!
Blazor is 🔥🔥🔥
9:55 - pretty sure the idea of web components is dead already.. failed idea/project
It depends on who you are talking with. The standards and features used by WC are available and heavily used on their own in the browsers.
Think about your clickbait title. You might gain views on this particular video, but you will lose the people who are genuinely interested in watching your videos.
Why is this click bait? The agreed idea in the industry is that web dev is complex because of all the frameworks and tools you need to know. Would you agree?
My argument is that all this complexity is smoke and mirrors, and that things are actually easy. You have a handful of concepts and ideas you need to understand and you should be good to go. Things are actually so simple that you could do a full overview of the space in 10 minutes. So the lie is the aparent "crazy" state of the web dev in general.
Would you agree with this? If not, I will actually consider changing the title :)
I don't think it is clickbait; the overthinking and unnecessary complexity are the biggest lies in web development.
@@stefnirk Thank you!
@@stefnirkso true