Web Developer Roadmap (March 2024) - Everything is Changing

Summary

This video provides a comprehensive overview of modern web development, highlighting the latest trends and essential technologies for aspiring developers. It emphasizes the importance of AI co-pilots, TypeScript, Tailwind CSS, and Next.js with its innovative server components and server actions. The video also covers full-stack development, exploring front-end frameworks like React, Angular, and Vue, as well as back-end solutions like Node.js and Python. Additionally, it delves into databases, authentication, payments, hosting providers, and mobile app development. Overall, the video presents a roadmap for becoming a highly-skilled and well-paid modern web developer, capable of earning $10,000 per month.

Takeaways

• 🤖 AI co-pilots like GitHub Copilot have become a game-changer, enabling developers to write code more efficiently and focus on higher-level thinking.
• 📖 TypeScript has become mandatory for modern web development, especially in the React ecosystem, leading to more robust and maintainable codebases.
• 🌐 Next.js has emerged as a powerful full-stack framework with innovations like Server Components and Server Actions, simplifying the development of robust web applications.
• 🎨 Tailwind CSS has risen as the preferred way of styling websites and web apps, providing a utility-first approach to CSS.
• 🧩 Component libraries like Chakra UI and Radix UI have gained significant traction, offering pre-built, accessible, and customizable UI components.
• 🔐 Authentication and payment solutions like Clerk and Stripe have become essential tools for modern web development, simplifying complex processes.
• ☁️ Cloud hosting providers like Vercel and Netlify have made it easier to deploy and manage web applications.
• 📱 Frameworks like React Native and Expo have facilitated the development of mobile apps using web technologies.
• 🌐 Full-stack development has become the norm, with developers expected to work across a wider range of the technology stack.
• 🚀 The web development ecosystem is rapidly evolving, requiring developers to continuously learn and adapt to new technologies and best practices.

Q & A

What is the biggest innovation mentioned in modern web development?

According to the script, the biggest innovation mentioned is AI co-pilots, which can suggest entire code snippets and help developers reason at a higher level of abstraction.

Why has TypeScript become mandatory in web development?

The script states that TypeScript has completely broken through in the world of web development, especially in React, and has become mandatory to learn if one wants to become a full-stack web developer. It enforces more precise types, resulting in more robust code.

What is the significance of the Next.js App Router and Server Actions?

The script highlights that Next.js has released its App Router, which includes Server Components and Server Actions as major innovations. Server Actions are considered the biggest innovation, as they allow developers to write backend code directly within Next.js, replacing the need for separate API endpoints.

How has Next.js impacted the development of full-stack applications?

According to the script, Next.js has made it very easy to create full-stack applications by abstracting away many complexities and providing a unified framework for both the client and server sides of web development.

What is the recommended approach for styling websites and web apps?

The script states that Tailwind CSS has completely taken over and has become the default way of styling websites and web apps, especially in Next.js.

What is the role of React Query in Next.js applications?

The script suggests that in Next.js applications, data fetching should be done differently, using Server Components instead of React Query, which is more commonly used in React applications.

What is the recommended approach for managing state in React applications?

The script mentions that while the Context API and Zustand are gaining popularity, Redux was previously a common choice for state management in React applications. However, the script suggests that the Context API and Zustand are becoming more popular choices.

What is the purpose of Zod in web development?

Zod is a library mentioned in the script for validating data, both on the server-side (e.g., in Server Actions) and on the client-side (e.g., in forms). It helps ensure that the data received from the client matches the expected shape.

What is the recommended approach for authentication in modern web development?

The script suggests using third-party authentication solutions like Clerk (formerly called IdentityKit) instead of open-source solutions like NextAuth.js, as they provide a better developer experience and handle authentication properly.

What is the significance of AppMysite mentioned in the script?

AppMysite is mentioned as a sponsor in the script. It is a service that makes it easy for developers to convert their websites into mobile apps for Android and iOS platforms, allowing them to publish their websites as native mobile applications.

Outlines

00:00

📺 The Significance of AI Copilots and TypeScript in Modern Web Development

This paragraph highlights the major innovations in modern web development, particularly the emergence of AI copilots and the widespread adoption of TypeScript. AI copilots are advanced tools that can suggest entire code snippets, making it easier for developers to focus on higher-level abstractions. TypeScript has become mandatory, improving code robustness through precise type declarations. These advancements have greatly enhanced developer productivity and code quality.

05:02

🌐 The Emergence of Next.js and Server Components

This paragraph discusses the rise of Next.js and its innovative features like the App Router, Server Components, and Server Actions. Next.js has become a powerful full-stack framework, enabling developers to create complete websites and web applications with React. Server Components and Server Actions simplify the development process by handling server-side tasks within the Next.js framework, eliminating the need for separate API endpoints. This has resulted in performance benefits through caching and a more streamlined developer experience.

10:03

⚡️ Static Site Generation (SSG) and Server-Side Rendering (SSR) in Next.js

This paragraph explains the concepts of Static Site Generation (SSG) and Server-Side Rendering (SSR) in Next.js. SSG generates HTML during the build process, enabling fast delivery from a CDN. SSR renders content on the server during request time, allowing for dynamic content. Next.js can also perform Streaming and Suspense, rendering individual components on the server and streaming them to the front-end. These techniques provide performance benefits and enable a more flexible approach to rendering content.

15:04

🔧 Exploring the Web Development Ecosystem

This paragraph discusses the broader ecosystem of tools and technologies surrounding modern web development. It covers component libraries like Shadcn/UI and Radix UI, form handling with React Hook Form, data validation with Zod, animations with Framer Motion, authentication solutions like NextAuth.js and Clerk.dev, payment providers like Stripe, hosting platforms like Vercel and Netlify, version control with Git and GitHub, and mobile app development options like React Native and Expo. Understanding and leveraging these tools can greatly enhance the development experience and functionality of web applications.

20:06

🚀 Mastering Modern Web Development for a Lucrative Career

The final paragraph emphasizes the importance of staying up-to-date with the latest innovations in web development to secure a lucrative career as a developer. It encourages learning the fundamentals of HTML, CSS, JavaScript, and frameworks like React, as well as exploring full-stack development with Next.js. The paragraph also mentions the author's React and Next.js course as a resource for mastering these technologies. Overall, it highlights the exciting pace of innovation in web development and the potential for career growth by embracing new tools and techniques.

Keywords

💡AI co-pilot

An AI co-pilot refers to an artificial intelligence system that assists developers with writing code. As mentioned in the script, these AI co-pilots can suggest entire code snippets, helping developers to focus on higher-level abstractions rather than memorizing low-level details and algorithms. The script provides an example of an AI co-pilot suggesting code for a React hook, demonstrating its utility in modern web development.

💡TypeScript

TypeScript is a superset of JavaScript that adds optional static typing to the language. The script emphasizes that TypeScript has become mandatory in modern web development, especially in the React ecosystem. It is presented as a tool that enforces more precise types, resulting in more robust code. The speaker notes that while TypeScript has been around for a while, it has completely broken through in the past year and is now considered essential for full-stack web developers.

💡Tailwind CSS

Tailwind CSS is a utility-first CSS framework that provides low-level utility classes for building custom designs. The script suggests that Tailwind CSS has taken over as the default way of styling websites and web applications, particularly in the context of Next.js. The speaker notes that while Tailwind CSS has been around for some time, it has now become the preferred approach for styling in modern web development.

💡Next.js

Next.js is a React framework that enables server-side rendering, static site generation, and other features for building full-stack web applications. The script highlights Next.js as a major innovation, particularly its app router, server components, and server actions. These features are presented as game-changers that make web development more powerful and efficient, allowing developers to create complete websites and web apps with just Next.js.

💡Server Components

Server Components are a feature of Next.js that allow developers to render React components on the server, improving performance and providing server-side rendering capabilities. The script emphasizes that Server Components are a significant innovation in Next.js, primarily aimed at performance benefits. It suggests that traditional backend code can now be written within Server Components, enabling a more seamless full-stack development experience.

💡Server Actions

Server Actions are another feature of Next.js that allow developers to handle server-side logic without the need for separate API endpoints. The script presents Server Actions as a significant innovation, focusing on developer benefits. It suggests that traditional API endpoints can be replaced with Server Actions, which are essentially JavaScript functions that run only on the server. This feature streamlines the development process by eliminating the need to create separate API endpoints and hook them up with the front-end.

💡Static Site Generation (SSG)

Static Site Generation (SSG) is a technique used in Next.js to pre-render pages into static HTML files during the build process. The script explains that SSG takes React components and generates HTML from them at build time, which can then be served from a Content Delivery Network (CDN) for improved performance. This approach is suitable for websites where content is static and doesn't require frequent updates.

💡Server-Side Rendering (SSR)

Server-Side Rendering (SSR) is a technique used in Next.js to render components on the server at request time, rather than during the build process like SSG. The script differentiates SSR from SSG, explaining that with SSR, the rendering happens on the fly when a user makes a request, allowing for dynamic content and individual component rendering on the server. This approach is beneficial for applications with frequently changing data or personalized content.

💡Chakra UI

Chakra UI (also referred to as 'Shad CN' in the script) is a popular component library for building user interfaces in React applications. The script highlights Chakra UI as one of the significant innovations in the past year, suggesting that it has a strong chance of becoming the default component library for the web. It is presented as a third-party set of components that provides source code access, allowing developers to customize components beyond just using props.

💡Zod

Zod is a TypeScript-first schema validation library that can be used for both server-side and client-side data validation. The script emphasizes the importance of validating incoming data on the server, similar to traditional API endpoints. Zod is presented as a tool that can be used in combination with React Hook Form to validate form data on both the server and the client-side, ensuring data integrity and providing a powerful validation solution for modern web development.

Highlights

The biggest innovation has been AI co-pilots that can suggest entire code snippets, reducing the need to memorize low-level details and enabling reasoning at a higher level of abstraction.

TypeScript has become mandatory for web development, especially in React, providing robustness and precision through type checking.

Tailwind CSS has taken over as the default way of styling websites and web apps, including in Next.js.

Next.js has introduced server components and server actions, allowing traditional backend code to be written within Next.js, simplifying the development process.

Server actions are a significant innovation, eliminating the need for separate API endpoints and allowing server-side functionality to be written as normal JavaScript functions.

React Query is no longer necessary in Next.js, as data fetching is now done in server components.

The trend is moving towards full-stack web development, where developers work across a wider range of the stack, enabled by frameworks like Next.js.

For learning web development from scratch, the recommended path is to start with React, learn components, hooks, state management, and styling with Tailwind CSS.

Next.js is recommended for full-stack development, leveraging its built-in routing, server components, server actions, and patterns like SSR and SSG.

For separate backend services, Node.js with Express or Nest.js are popular choices, but other languages like Python, Java, Ruby, and Go are also options depending on the project's needs.

The differences between SQL and NoSQL databases have been abstracted away by ORMs like Prisma, Drizzle, and Mongoose, making the choice less critical unless there are specialized needs.

The ecosystem includes tools like Chakra UI for component libraries, Zod for data validation, React Hook Form for form management, Framer Motion for animations, and third-party solutions like Clerk for authentication and Stripe for payments.

Vercel (formerly Zeit) is the most popular hosting provider, especially for Next.js applications, though other options like Netlify are available.

For mobile app development, AppMySite is a sponsor that simplifies the process of converting websites into mobile apps for Android and iOS.

The landscape of web development is constantly evolving, with exciting innovations and changes, making it a dynamic and rewarding field for developers who keep up with the latest technologies.

Transcripts

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