Web Development Roadmap 2022

This blog covers all the technologies required to become a world class web developer in 2022. I have listed all the current technologies, languages, frameworks and whatever required priority wise. All the elements of the web development route have certain alternates or competitors but it’s totally the coders choice to go for the best technology after testing all in that spectrum. So if you are a serious candidate for learning web development technologies and want to make a career in this field hang on and go through the complete guide.

 

What is Web Development

Website development refers to the process of building a website. This could refer to the basic HTML/CSS static websites or More interactive ones with Javascript or the full stack development which leads to higher end websites. In short any application we create and run on internet is a website.

Reason to become a Web Developer

• work for a company
• Freelance or run your own business
• Build your own product/StartUp
• Create online content
• Teach Development to other coders

Types of Web Developers

Web Developers can be classified into two ways:

• Frontend Developer

  • Frontend Developer is a person who works on the client side | builds interfaces | They use HTML, CSS, JS, Frontend Frameworks

• Backend Developer

  • Backend Developer is a person who works on the server and deals with databases | They use languages like JS, Python, PHP, | Databases like Postgres, MongoDB, HTTP, server configuration and know web deployment

• Full stack Developer

  • A person who works on both frontend and backend is a frontend developer.

Basic Requirements to become a Web Developer

• Computer with any operating system like MacOs, Linux, Windows with a good hardware configuration ie 8GB RAM recommended
• Web Browser like Chrome, Firefox, Brave, Edge, Safari (Chrome Recommended)
• Text Editor or IDE  like VS Code, Sublime Text, Vim, Atom (VS Code Recommended)
• Terminal like the default terminal in OS or Git Bash, Powershell
• UI design software like Adobe XD, Figma or Sketch
• Knowledge of graphic design – refer to Graphic Design Roadmap for 2021

The Basic Building Blocks for Web Development Roadmap

• HTML5 Basics & Semantic Tags (Page Layout)
• CSS Fundamentals
• CSS Alignment (Flexbox & CSS Grid)
• Media Queries / Responsive Design
• Simple Animations/ Transitions

• Sass & PostCSS

  – Sass is a css pre-processor that adds to the functionality of css. It offers variables, nesting, mixins, functions etc
  – PostCSS is a tool for transforming CSS with JS. There are plugins to add the stuff Sass offers and more

CSS frameworks

• Bootstrap 5 – It is a High level framework
• Tailwind CSS – Low Level framework and utility based
• Materialize – Based on material design by google
• Bulma – Mobile-first and Modular framework
• Foundation – Advanced CSS framework

UI design Principles

• Knowledge of Color & Contrast is beneficial
• Whitespaces -Check spaces between elements
• Scale – Relative element sizing for a great look
• Visual Hierarchy – Arrange elements in order of importance
• Typography – Typeface, sizing

Javascript

• Javascript Basics – Data Types, Data Structures, Functions, Loops
• DOM – Document Object Model
• Async Javascript – Promises, Async/ Await
• Fetch API & HTTP – Make request to API and HTTP | JSON
• Higher Order Array Methods -Map, Filter, Reduce

Additional Programming Tools

• Git is a version control system. It is used with remote repositories such as GitHub, GitLab and BitBucket
• NPM is a package manager used to install packages into your projects | NPM requires Node.js to be installed
• Browser dev tools are important » Element Selector, Console, Storage, Network activity
• Emmet, Live Server, Prettier, ESLint, Github Copilot are some extensions for VS Code

Deploying frontend projects

• Netlify or Vercel for hosting
• Namecheap, goDaddy or Bluehost for domain
• There are multiple ways to deploy to hosting platforms | GIT, SSH, FTP/SFTP

Frontend frameworks

• React
  – Created and maintained by facebook
  – Most popular framework/ library
  – Easy to learn
  – React Router, JSX, Hooks, Context API, Redux
• Angular
  – Created and maintained by Google
  – Popular in enterprise
  – Steep learning curve
  – Angular CLI, Services, TypeScript, Observables
• Vue
  – Second most popular framework
  – great community
  – low learning curve
  – Vue CLI, Vue Router, Composition API, Vuex
• Svelte
  – Gaining popularity
  – Lightweight and Performant compiler
  – Lowest Learning curve
  – SveleteKit, Stores

TypeScript

• Static Type Checking for variables
• Class & Module Support
• Other ES6+ Features
• Code less prone to errorsCode is more robust and definitive

UI kits for frontend frameworks

• React
  – React Bootstrap
  – Material UI
  – Onsen UI
  – Chakra UI
• Vue
  – Vuetify
  – Buefy
  – Vue Material
  – Bootstrap Vue
• Angular
  – Angular Material
  – Ng- Zorro
  – Ng- Bootstrap
  – MD Bootstrap
• Svelte
  – Svelte material UI
  – Materialify
  – Smelte
  – Sveltestrap

 

Server Side Rendering

• Next.Js
  – React Based
  – Data Fetching Methods
  – Image Optimization, SEO
• Nuxt.js
  – Vue Based
  – Data Fetching
  – Automatic transpilation and Bundling
• Remix
  – React Based
  – Loaders & actions
  – Control http req and Res
• SvelteKit
  – Svelte based
  – Advanced Routing
  – Code Splitting

 

Static Site Generators

Which allows you to generate your website and content from various sources (Markdown files| APIs | Headless CMS) High performance they get data ahead of time and preload it for user

• Gatsby
  – react Based
  – GraphQL data layer
  – Image optimization, code Splitting
• Next.js
  – React Based
  – Exports fast static websites
  – Data fetching Methods
• Gridsome
  – Vue Based
  – PWA ready
  – SEO Benefits
• Jekyll
  – Built on ruby
  – Been around a while
  – Liquid template engine

 

Headless CMS (For creating APIs with no frontend)

Its different from frontend CMS like WordPress as there is no frontend. We can manage only backend.

• Strapi
  – Open source
  – Customizable
  – Self Hosted
• Sanity.io
  – Powerful and flexible
  – gerat for colaboration
  – sanity studio toolkit
• ContentFul
  – Great for teams and big businesses
  – Optimized for speed
• Graph CMS
  – Build GraphQL API
  – Lightweight and intuitive
  – UI Extensions

 

The Jamstack

Architectural approach to build websites

• Variety of tools/ Technologies
• Decoupled
• Static-first
• Serverless Functions
• High performance, Secure and affordable

Backend Web Development Roadmap

Server Side languages

NODE.js | GoLang | Rust | Python | Ruby | Scala | PHP | Java | R | C# | Kotlin | Swift
Node.js is a javascript runtime environment | its fast and async | event based programming
Dino is other option for JS on backend

Server Side web frameworks

• Node.JS -> Express | Koa | Fastify | Nest.js
• Python -> Django | Flask | FastAPI
• PHP -> Laravel | Symphony | Slim
• Java -> Spring | Struts
• Kotlin -> Spring | Vert.X
• Ruby -> Ruby on rails | Sinatra
• Go -> Gin Beego
• C# -> ASP.net MVC

 

Databases

• NO SQL
  MongoDB | Firebase | Superbase | Redis
• SQL
  PostgresSQL | MySql | MS SQL Server | SQLight
• ORMs (object relational mapper)
  Mongoose | Sequelize | Type ORM | Prisma | SQLAlchemy | Doctrine

 

REST API

• APIs that conform to the REST architectural style and interacts with RESTful services.
  – Representational state transfer
  – HTTP requests work with data/resources
  – Specific URL structure for endpoints
  GET PUT POST DELETE methods

 

GraphQL

Data query and manipulating language for APIs

• Request specific data points
•  Strongly typed
• Less maintenance than REST
• Apollo is a popular GraphQL client

 

Authentication and Authorization

Authentication is the process of identifying an individual generally before login or action taken by him on a web page and Authorization pertains to the permissions that individual has to access some content on a page. The following topics must be considered knowing for both authentication an authorization.

• JSON web tokens
• Cookies and sessions
• OAuth ( Login via google, twitter, Github)
• Authorization Libraries ( Passport, Grant, etc)
• Password hashing ( Bcrypt )
• Protecting endpoints and routes

 

Deploying FullStack Projects and DevOps

Hosting platforms

• – AWS (generally used for Big Apps)
  – Heroku ( easy to use | Runs on dino )
  – Digital Ocean ( cloud servers here are called droplets | based on linux )
  – linode
• Server Software
  – Apache
  – NGINX (easy to work with )
• Containers and virtualization | Devops
  – Docker ( popular | os level virtualization )
  – Kubernetes
• Image & Video
  – Cloudinary (stores and optimizes images for frontend dev)
  – Amazon S3 ( part of AWS )

 

Backend Developer skills

• Comfortable with a server-side programming language
• Know how to manage and setup a database and ORM/ ODM
• Know how to create REST APIs and implement Authentication
• Comfortable with the terminal and Unix commands
• Know how to deploy projects and work with servers

 

Mobile development

• React Native
  – React Based
  – Code Reusability
  – Large community
• Flutter
  – Dart Programming language
  – Extremely Fast
  – Strong Documentation
• Ionic
  – use any framework
  – Pre-designed UI components
• Xamarin
  – Mobile Apps with .NET and C#
  – Cross-Platform Apps
  – High performance

These technologies cover up the roadmap for web development 2022. Keep following cadlearner.com for more updates on web development. Also consider subscribing our youtube channel CadLearner  for projects based on web development. We are a team of professionals who train upcoming developers in coding and help the build great careers. Feel free to contact us to get one to one sessions online on Web Development Technologies.