Web Developer Roadmap (March 2024) - Everything is Changing

everyone everything in web development is changing and for your career as a developer it's really important that you understand what's going on and what new things to learn and what not to learn so I'm going to give you a high level overview of modern web development with all the things that you need to know right now so you can make $110,000 a month as a modern developer so let's start from here because a lot of things have actually changed in the past year or so so I would say the biggest innovation has been these AI co-pilot and these are so good I have to say just to give an example here I have a new hook here use optimistic we're using this in my pets soft project in my reacting nexj ESC course you can see it knows exactly what I want to do here it can suggest the entire code snippet here for me now it does miss the default gear case here at the bottom but you can see fix that very easily right so thanks to these AI co-pilots I can sort of forget about a lot of those lower level details and I can reason more in a higher level abstraction about my code huge change and it makes it less important to memorize a lot of things and algorith rhythms another major change is actually typescript now typescript has been around for a long time but in the world of web development especially react I would say the past year it has completely broken through and now it has become sort of mandatory whereas before it was kind of optional you would see it around but now I see it everywhere and it has become yeah in my view it has become mandatory to learn if you want to become a fullstack web developer till when CSS in my view has also completely taken over of course it's been around for a long time but now it's also the def default in nextjs and in my view it's going to become the default way of styling websites and web apps now another huge innovation of course is nextjs nextjs has released their app router so before they had the pages router but there's lots of innovation here it's not just server components in my view actually server actions are the biggest Innovation yes there is a bit of a learning curve but in my view it's the right way forward and it actually makes it a really exciting time in my view to be a web developer because now with nextjs and actually all of these tools together it makes you very powerful as a developer it makes it very easy to create full stack applications so I think it's a really exciting time yes it's annoying that as a you know experienced developer you have to learn some new things again especially typescript was kind of annoying to learn a lot of people went through it last year it's basically a month or two months of struggling and then you kind of get it but that's part of the job the benefit of being a junior or newcomer is that you can go straight to the latest Technologies and you can sort of skip ahead you can leap frog over the maybe the more senior developers that are still kind of stuck with the old technology right so that's the one advantage you have as a newcomer so how would I learn web development if I were starting from scratch I want to make 10K a month let's say that's what I'm going to show you right now in this video let's go through it so you're going to learn all about how to build modern websites now what about apps Progressive web apps haven't really broken through yet people don't want to add something to their home screen they want to install a native app from the App Store so how do you do that how do you convert a website to a mobile app well you could do it yourself but it's very painful so instead you may want to take a look at today's sponsor which is app My Side they make it very easy for you to turn your website into an app so you can connect you can just provide your url you can change the design and you can then publish it to the Android and iOS App Store so in the dashboard I can create my app here I can call it B grad and I already have my website right it's bat.com I can convert it into a mobile app very easily here with at my site so here in the dashboard I can add an app icon right here I can change the the splash screen which is what you're going to see when you open up an app for a couple seconds on your phone here in navigation I can change that top bar and Bottom bar color I can change the buttom colors right here and then of course you want to test and see what you get on a real mobile app you can download this on your phone or right here in the web view I can press on click Start and it will show you how it will look like so here you can see it's loading up my website right here in this mobile phone this is what it's going to be right here my latest scores let's take a look right so you can see it renders this very nicely and it also gives me analytics out of the box so I would say check out at my site the link is in the description all right so then let's actually take a look at what you need to learn and so traditionally you would specialize in either front end or back end my view is that over time it's going to merge together in full stack web development because a lot of the difficult Parts on both sides are being abstracted away for you right nextjs makes a lot of things easy for you so over time as a developer you're going to work across a wider range of this deack in my view now regardless of what you're doing in web development you're going to have to learn the fundamentals I'm not going to list every little thing you need to know a lot of those things you will learn as you go so for HTML basically you have to take a look at semantic tags don't just use divs everywhere try to use a section sometimes an article all right so then CSS is really important even if you want to learn tillin CSS make sure you master CSS itself first very important the Box model so every element on a page let's say this button here has a so-called Box model and you can actually see it here in the dev tools so you can see it it has some of its own size basically this is coming from the text actually in there and how big the text is and then around there you have padding and around there you have a border a border may have a certain size it doesn't have a border here but that would add some additional space and then you have margin which is essentially space between elements right that's the Box model every element on a page has this sort of rectangular box now to have a nice layout you want to take a look mostly at Flex box you want to use a flex box I would say 99% of the time sometimes you want to use grid so I think you should still learn it as well but flexbox should be your priority when it comes to layout animations and transitions so you can see here in this app I'm using eraser here when I hover this button here there's a slight background color that changes that's actually just a transition and animation for example when I go to this page you can see when I load here I have a bit of a fancier animation here to load this image I would probably do that with an actual animation in CSS also make sure your project need to look good across a wide variety of devices and we can do that with media queries in CSS all right so for JavaScript of course you need to know about variables you want to store some value somewhere in order to work with it these days we use let and G previously we used far people have kind of settles on using const as the default unless you cannot use const because you actually need to reassign a value for example in that case use a Le basically we never use far anymore whenever you have a collection or list of things you want to put it in an array and these arrays they have certain methods right so map for example in react is very common for each you want to go over each one right push you want to add something these methods I think are important to learn so then we have objects so whenever you need to represent something in your code you can have an object that's an object may be for example on a real estate website you may have an apartment and apartments they need to be represented by an object so they may have let's say some size like square meters or square feet they may be price for them right maybe number of bedrooms right so this object represents an apartment we use objects to represent entities in our code in JavaScript we have Arrow functions new compared to the traditional function right so now you don't have to write the actual function keyword anymore instead you sort of have a fat arrow in the middle here here whenever you need to reach across the network to get some data for example you may want to use the built-in fetch API so you need to understand how that works it actually gives you a so-called promise you need to learn asynchronous code in general as well you don't have to create promises yourself typically typically you only consume promises so if you have a promise that's called p in order to get its value essentially to consume it traditionally you can use then on there and then in there you get the value or more recent is you can write a weight in front of a promise right so those are essentially the two ways of consuming a promise typically acing weight is preferred these days and also generally you need to learn about the Dom itself right the in the Dom there are certain events when I click in here you can see there's a blue line here so eraser this is a web app it's hooking into that click event that occurs when I click there and it's manipulating the Dom to add like a blue line in here and generally you need to learn a little bit about the web platform with things like local storage how URLs work how to communicate with a server Etc around all right so those are the fundamentals now I want to emphasize don't get stuck too long in here it's okay if you don't fully understand some things I would recommend that at some point you just have to jump into it and you're going to have to learn a library or framework to really become like a useful developer so let's say we're going to start off with the front end here we're going to learn about react there are also other options which I'll talk about but react is probably the most popular one if you want to create a react app typically these days you're going to use a feat this is essentially replacement of create react app so for react you need to learn about components right so a component is just well let's say I have some patform button component it's actually just a JavaScript function and we write it with capital case so now whenever I need some button in my project I can use this component I don't have to repeat myself with the markup I can put all the markup inside this one component and then just reuse the patform button whenever I need that button but how can you make it different in a certain instance well let's say I need to change the text in here right so sometimes it needs to say add pads and sometimes I'm changing a pad and it needs to say save changes how can I make sure that a component can also be changed I can use props here and destructuring that right here and I can use that here to change the component in a particular instance react has so-called hooks so if you have a piece of data and you want to track of it over time you want to use use State sometimes you need to go outside your react app maybe you need to reach out to some server or maybe you need to reach out to local storage right local storage that's something outside your react app typically you want to use user effect for that custom hooks sound very fancy it's basically just like a utility function instead of writing your use stes and use effects let's say here in your component you can sort of put it away somewhere else and that's what people will call a custom hook so if you have a piece of data you typically start off by just using you state for that but it's very common that you will need that piece of data in many different components and you can use props to pass that around unfortunately it will make your app too brittle so you want to put that piece of State in a dedicated solution a date management solution sounds very fancy but you can use the built-in context API in react for that um or something called twoand or something called Redux these are typically the most popular options now I have to say my view on this is that the context API and two stands are getting more popular I actually teach quite a lot of people about react and nextjs in my react and nextjs course and I have not received one question about Redux so far so you can take that as a simple data point I actually think Redux is fine to use one of the benef benefits of it is that it has a more sophisticated Dev tool but purely looking at usage it does seem that two and the context APR are getting a little bit more popular for styling I would only go for til and CSS at this point and then of course you also need to know about common patterns and best practices so you want to make sure that your components for example are reusable there's certain things you can do and also things like state in the URLs so a piece of data should not always go in US state sometimes it's better to make it part of the URL as let's say a search per RAM for example real estate website I only want to see houses below a million dollars let's say I can make that part of the URL and now the user can bookmark it can and they can come back later and get the exact same view they can share it with other people and they get the exact same view and so some pieces of data should go into the URL most commonly filter or sorting parameter so that's all react now what about things like routing for example well routing I would argue is going to come from a full stch framework like nextjs which we'll talk about in a second and same thing for react query maybe you've heard of react query that is basically how I would do data fetching in a reactive feat app but in nextjs I would do data fetching a little bit differently I would do it in a so-called server component so I wouldn't use react query in next we'll talk about it in a second all right so this is all react now of course besides react which is backed by meta there is also angular which is backed by Google and there's also few and swell these are the most common options you have for the front end now notice that I haven't really talked about typescript yet so typescript I would say is kind of like mandatory it's it forces you to be much more precise with your types which results in much more robust code but you don't really have to learn it separately I would argue as an app developer you can just enable it in your react apps and TP skits can already do a lot of inference right so it can already detect when something is going to be a string or a number or a Boolean you don't really have to specify that very often yourself I have a video on my YouTube channel about type versus interface make sure you check it out a more advanced concept is generics in react you're most commonly going to see that when you create a custom hook that's what I would do if if I was learning the front end now like I said I think the trend is going to become that you as a developer you're going to work along a wider range of the stack so I think the focus these days should be on becoming a full stack developer so that means now we also need to take a look at the back end so if we're going to use react you definitely want to take a look at nextjs so nextjs has built-in routing through the file system so depending on how you structure your folders and files that's how you do routing essentially and nextjs these days offers server components and server actions so a lot of the traditional backend code that you would have in let's say a nodejs Express server a lot of that is now going to be written in nextjs in your server components or server actions and actually a lot of it is going to be in these server actions so traditionally if you had a web server you would have let's say an API end point to update some data well you're going to use a server action for that now and for getting data typically you're going to do it in a server component right so next yes is a full stack framework you don't need a separate back end you can now create complete websites and web apps with just nextjs with just the react model which I think is very powerful nextjs does a lot of caching for you behind the scenes so that results in some performance benefits so I would say by the way server components are mostly also for performance benefits and server actions I would say is more of a developer benefits right so you don't have to create those separate you know/ API end points anymore and then hook it up with the front end you can just create a normal JavaScript function and it's only going to run on the server that's basically what a server action is I would also take a look at more General the concepts of SSR and SSG they come up quite often and they're actually quite similar so static site generation SSG basically it just takes your components together and it just creates HTML out of it during build time you can put it on a CDN so then when somebody comes to your website it's very fast because it's already there waiting for them and it's just it's just creating HTML out of your react components so next ja has is really page focused so you create a page and then on the page you have components so nextjs will actually automatically create HTML out of that whole page with all of the components that are on there whether it's a client or server components it's all going to render that during the build into HTML and then it will serve it from a CDN so SSR is actually very similar it's also going to render things on the server but when people say SSR they don't mean during the build it's during a request time so when I go to website it's not already waiting for me like with SSG as I make that request it needs to render things on the server and then it will send me a response so it's more on the Fly and it can do that not just for the whole page but next JS can do that for an individual server component right independently from the rest of the app it can render a component by itself on the server and then stream it to the front end that's so streaming and suspense that's a very powerful Paradigm in nextjs but that's handled for you behind the scenes mostly all right so nexts we also have patterns and certain best practices like data fetching things like data fetching have changed you typically don't use react quer for that anymore you typically would do that in a server component when you submit data you're going to submit it to typically to a server action and we want to make sure that we validate that data that we get just like with the normal API end point because you don't know what you're going to get from a client right so you want to validate that with something like Z now since nextjs is a full stack framework and they abstract away the network boundary for you it's kind of easy to leak sensitive data so there are certain ways of avoiding that right so that's nextjs nextjs is a react framework there are other react Frameworks as well so nextjs is actually backed by forell and there's also remix which has been acquired by Shopify so if you're in the e-commerce space this this is definitely something to take a look at there's also asro which uh seems to specialize more in content websites and there's also GSP which is backed by netlify but I do sense that this is a bit on the decline in terms of user but that's all react right so that's all react now besides react we also saw that we have angular view spelt they all have their own full stack Frameworks as well right so we have n for view angular Universal and spelt kit as well all right so those are full stack Frameworks meaning client and service site are are both in one framework so doesn't mean that you never need to create a separate backend server anymore and the answer is no you actually often still need it so for example I was building a startup last year and it had to do some video rendering rendering videos on the server that's a very resource intensive task it makes sense to spin that out of your main nextjs app into a separate surface or separate back end so it doesn't interfere with any of the standard things going on essentially right so whenever you have some kind of compute heavy or special task I think it makes sense to spin that out into a separate back end now of course you may also work with some kind of microservices architecture where you have essentially a bunch of separate Services all little backend apps and you can use any kind of language for that right so the benefit of noj s is that you already learn JavaScript and typescript from the front end you can then use that for the back end as well nodejs is the most popular one there's also something called bun but I do feel like nodejs is uh here to stay you can create API end points um easily doable with something called Express but also nestjs are common options uh PHP is very popular in the world of Wordpress actually it's it's popular all around but I would say if you're doing WordPress work this is definitely something to take a look at larel is a popular web framework for PHP I just sneaked in Python here as well python has become actually very popular because of data science so now with all the AI machine learning that's where python comes in so if you are close to the data science type of world this is definitely something you want to take a look at it has D Jango as a popular web framework Java is very popular in Enterprise also used for mobile apps Android and spring is the web framework there Ruby is also an option they have Ruby on Rails and I also see go a lot these days so these are some common options you have for your separate backend services or apps all right so then for databases people would traditionally split them up uh sequel databases and then on the other side you had no SQL databases now my sense is that the the big differences between them have been abstracted away for the most part mostly through these so-called OMS so typically as a developer you don't deal directly with your D basis you're going to do it through an omm as it's called so something like Prisma or drizzle very popular on YouTube or mongoose and they have abstracted away a lot of the differences between these databases so for example I can just interact with Prisma and then no matter what database I use whether it's in postgress or mongodb the code is essentially going to be the same for me so I don't think it makes a huge difference which option you go with unless you have some specialized need like certain performance or or storage issues some of those differences may actually come into play now I do get a sense that SQL light is uh growing very fast because it's probably the easiest one to set up it's just a file that's essentially just part of your app it's not like a separate server you have to spin up it's just a file it does require access to the file system and that that's a problem for if you deploy to a so-called serverless uh platform like for sale where your whole app essentially becomes a bunch of serverless functions you don't get access to the file system so you cannot use SQL light but it's possible that there will be solutions for that there are also popular what I call hosted database services so they host the database for you so superbase for example is just a postgress database but they host it for you and they offer lots of other services out of the box as well same with Firebase and for sale now these days actually also offers a database service so that's databases I typically during development go with SQL light because it's the easiest to set up depending on where I host my app I may have to change it to a let's say a postgress database so if I deploy to forel for example I'm going to use their database service and they actually give me a postgress database in production all right so that's basically the core of it so if you learn most of that you're already very far along but it's also important in my view that you learn the Eco system so there are many Tools around the core that solve specific problems so shaty nuui has actually exploded in the past year or so and I think it has a great shot of becoming like a default component library for the web it's basically a thirdparty set of components but it's a little bit different than the traditional ones because traditionally you would use mpm install and then you would not really get the source code of the component you would get a third- party component and then if you want to change the component you had to use their their props now with Chad CN it's a little bit different so with Chad CN for example if I get the dialogue here when I install this I get sort of like the source code so I can literally change anything I want here customize it exactly how I see fit and not with only the props that the that the third party Library gives me I can literally change everything now the reason you want to use a third party library in the first place is because it removes a lot of hassle right so for for example with a dialogue when you open it up you want to focus the first input in here let's say when I press tab I'm going to change the focus around here but notice that the focus is trapped within the dialogue here and so shatan actually prevents the focus from going outside the dialog into let's say this input field uh in the background so there are many little details a lot of accessibility things that you have to take care of and actually a lot of that work has been done by radex UI so Shan is built on radex so radex actually deserves a lot of credit as well Shad CN is basically a tailin CSS layer over Radix UI so that's a very powerful combination so I think this is one of the big innovations that we've had over the past year as well actually so there's also something called Zod so we talked about data on the server side let's say so there some incoming data into your server action it's just like an API endpoint you don't really know what you're going to get from the front end people can send all sorts of crazy data in which shape which format and to your server so you want to validate that what you get is of the shape that you expected to be I have a complete tutorial on my YouTube channel you can do that with zot and the cool thing about zot is you cannot only do it on the on the server side you can also do it on the front end with your forms so you may want to use react hook form to control your forms makes it very easy to deal with let's say a loading State and error States in your form and you can connect Z to your forms as well so that Z can be responsible for the validation and then with react to form you can easily uh do everything else like displaying an error message for every particular field of the form so the combination here is very powerful and actually you can even use chn because chn also has components for forms the first three here are actually super powerful combination frame or motion very popular for animations instead of using plain CSS animations you may actually just decide to use frame or motion for pretty much any animation you're going to do all right so for authentication there is an open source solution called next off a lot of people are a little bit frustrated with it because it's the docks and it's just not a great developer experience right now and you may actually also want to take a look at third party options for authentication so I'm I'm actually a brand ambassador for kind it is a paid sponsorship but even if they weren't sponsoring me I would still use kind authentication is just difficult to do properly and a third party solution has thought about how to do it and it's also easier to get started in my experience so I personally would use kind for authentication all right so for payments tribee is pretty much uh the most popular option kind is actually also coming out with a payment solution soon which is actually really powerful because often when a user pays they get access to some feature right so the payment is actually closely related to user management and the roles and permissions they have so with kind you can manage your user including any kind of subscription or payment related logic very soon with their new offering all right so you want to take a look at hosting providers my channel is mostly focus on react and nextjs so forell is pretty much the most popular option because they are actually backing nextjs I do get the sense in general that forel is getting more popular than the other options so netlify for example is another option my personal sense is that forel is getting more and more popular so maybe that's a platform you want to take a look at of course git and GitHub so git is for managing your codebase and GitHub is basically place to host your git repository there's also gitlab and some other options all right so then mobile apps the sponsor of this video at my site actually makes it super easy to build mobile apps so that's something you want to take a look at first if you want to go down the rout of doing it completely yourself there is some Innovation here as well with react native and Expo actually so there is some Innovation there as well that you may want to take a look at if you sign up for my email newsletter I'll send you the link to this diagram so you can take a look at this yourself I know this is overwhelming there's a lot to learn uh but you just have to take it one day at a time and you'll see that in a couple months you can get pretty far now I have a complete react and nextjs course in which you will learn pretty much everything here so check that out if you want to master all of these go check that out I'm Wesley by the way I'm a brand ambassador for kind and then I hope that this gave you a good high level overview of where we are currently at in web development I think it's a really exciting time there's lots of innovation lots of things are changing but if you keep up things are only getting better so thanks for watching and I hope to see you next one bye

Channel: ByteGrad

Views: 154,776

Keywords:

Id: EzTxYQmU8OE

Length: 25min 2sec (1502 seconds)

Published: Tue Mar 05 2024