Web Dev The Right Way
Вставка
- Опубліковано 29 вер 2024
- The Frontend Dev Career Path - v2.scrimba.com...
💬 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!
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).
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 :)
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.
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”
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: ua-cam.com/video/kZG3izJu7qE/v-deo.html
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 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!
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 😂
Awesome video. Good work.
Thank you!
maybe the lie is the javascript frameworks we mad along the way
Don’t forget Analog, metaframework for Angular 🅰️🚀
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.
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
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!
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.
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 :))
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.
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
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.
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.
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
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
The biggest lie: "Reloading the page is ugly and your worst nightmare"
😂
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.
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.
🎉 Thank for sharing your experience. And explaining this.
My pleasure! Thank you!
You explain everything so well. Start doing courses!!!
Lit mentioned, let's go!
✌️
you did a great job 👍
Thank you!
This was great! Thanks.
Thank you!
This guy is a GOAT 🐐...epic channel. I subscribed the first day I watched his channel.
Thank you so much!
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!
Great video
Thank you!
all this js complexity is what makes htmx so appealing
HTMX mentioned!
Looking through the comments to see if the video mentions htmx...
So what's the lie ?
Can you go through the same style but in detail for web assembly?
WebAssembly is not ready for frontend yet.
That is actually it...
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!
Good video!
Thank you!
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 🥲
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.
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!
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 :)
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! ✌
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.
the best video ive seen so far in introducing people to web dev
Thank you!
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!
The biggest lie is that JS is the way
😂
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!
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😂
"qwik-city not even mention lmao
Qwik was in the video though :)
where is the lie?
Web dev is complex, there is a lot you have to learn, JavaScript fatigue, too many frameworks. Sounds familiar? :))
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 😐👉👈
:chef-kiss:
Thank you!
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"
Blazor is 🔥🔥🔥
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