Skip to content

Instantly share code, notes, and snippets.

@dallen4

dallen4/WEBDEV_ROADMAP.md

Last active August 23, 2024 04:04
Show Gist options
  • Save dallen4/09da2868dd7ec2e31d60f7c002a12d00 to your computer and use it in GitHub Desktop.
Save dallen4/09da2868dd7ec2e31d60f7c002a12d00 to your computer and use it in GitHub Desktop.
Download ZIP
Web Developer Roadmap (JS/TS)
Raw
WEBDEV_ROADMAP.md

Web Dev Roadmap

Tool indicators

  • ⭐️: current fave/fascination
  • 👍🏾: have used/battle-tested

Application Development

1. HTML, CSS, & JavaScript Fundamentals

  • HTML5, CSS3 & Vanilla JavaScript
  • TypeScript

2. Node.js Basics & ExpressJS

  • event loop
  • async programming / Promises / callbacks
  • ExpressJS 👍🏾
  • client - server architecture & connects
    • HTTP
      • response types
      • streams
    • WebSockets
  • request to response flow
    • middleware
  • other frameworks: alternatives and more "batteries-included" options
    • NestJS 👍🏾: very opinionated but good patterns that lend easier scaling of codebase
    • koa: successor to ExpressJS
    • Fastify: lightweight & speed-oriented
    • Hapi: been around for a while but 🤷🏾‍♂️
    • Hono ⭐️: fast, lightweight, designed for any JS runtime

3. Frameworks Part 1 - React Basics

  • Create React App (CRA)
  • components (functional vs class)
  • props
  • state
  • contexts
  • hooks
  • SSR (server-side rendering) vs CSR (client-side rendering)
    • RSC (react server components)
  • static generation w/ dynamic SSR & CSR

4. Frameworks Part 2 - React-based Full-stack Frameworks

There are a lot of ways to build full-stack apps with React. These are two common full-stack, or meta frameworks you can use to build full-stack web applications.

If React really isn't your thing, you are far from alone. Checkout the "Alternative JS Frameworks" section.

5. Databases

There are two primary kinds of databases that you will work with, "relational" and "non-relational" (or "NoSQL"). Below is a breakdown of some common kinds and variations of databases you might use within those categories.

If you'd like to dive deeper, here is an article from Prisma that does a detailed breakdown of types of databases and another speficially comparing relational to document databases like MongoDB.

Relational Databases

This is often used to describe your common SQL flavors of databases. The common selections are broken down below:

  • MySQL
    • common "go-to" SQL flavor for projects
    • usually considered "simpler" that PostgreSQL
  • PostgreSQL 👍🏾
    • more data types like jsonb
    • considered to be more complex but full featured compared to MySQL
  • SQLite ⭐️
    • considered more (surprise) lightweight
    • all data stored in a single file like my_database.sqlite
    • very common for embedded devices/IoT and LoFi (local-first) solutions

(Yeahhhh they are indeed db companies, not the fanciest designs on these sites lol.)

Here is a nice breakdown from AWS of why you might choose PostgreSQL or MySQL for a project.

Non-relational Databases

Commonly called NoSQL databases, non-relational databases include all kinds of different forms of database structions from document collections to graph nodes to key-value pairs.

  • MongoDB 👍🏾
    • organizes data into collections of documents that do not enforce a schema
    • ORM usually needs to enforce the schema
    • good for hobby projects like a blog
  • AWS DynamoDB 👍🏾
    • organizes data into partitions that can be split and sharded
    • high performance (when using correct design patterns)
    • Bonus: DynamoDB Streams
  • Redis
    • common "go-to" key-value store used for simple storage and caching
  • neo4j
    • graph database that's been getting more popular
    • commonly used for genAI RAG patterns

ORMs

  • Drizzle ⭐️
    • new kid on the block
    • extensive tooling for a great dev experience
    • supports
      • SQLite
      • MySQL
      • Postgres
  • Prisma
    • very stable & strong support
    • pretty prominent in modern projects these days
    • supports
      • SQLite
      • MySQL
      • Postgres
  • TypeORM
    • TypeScript-first ORM
    • fairly popular
    • supports
      • SQLite
      • MySQL
      • Postgres
  • Sequelize 👍🏾
    • tried & true ORM for relational DBs
    • little dated this days but still maintained and a viable option
    • supports
      • SQLite
      • MySQL
      • Postgres

6. Hosting & Deployments

Below are some potential options for deploying and hosting your websites, web applications, and databases.

  • serverless (all have free tiers)
    • Vercel 👍🏾
      • maintainers of Next.js
      • platform features
        • serverless PostgreSQL
        • Blob storage
        • Edge Config (read-optimized key-value)
        • KV (managed Redis)
        • AI integrations
    • Cloudflare Pages ⭐️
      • uses Cloudflare Worker's workerd runtime
      • platform features
        • D1: distributed SQL database
        • queues
        • scheduled jobs: recurring or one-time cron jobs
        • Workers AI
    • AWS Lambda
      • invocable functions running in Node.js or other runtimes
    • Netlify 👍🏾
    • GitHub Pages 👍🏾
      • static sites & assets
    • Turso ⭐️
      • distributed SQLite
      • local-first (LoFi) capabilities
  • server-ful
    • Render 👍🏾
      • has a free tier
      • supports
        • web services
        • databases
        • cron jobs
    • AWS 👍🏾
      • all the things
      • noteworthy services
        • API Gateway
        • ECS
        • RDS / DynamoDB
        • SNS/SQS
    • GCP
      • all the things but usually more expensive
    • Azure
      • all the things
      • noteworthy services
        • private, isolated OpenAI ChatGPT instances

Next Steps

Alternative JavaScript Runtimes

Node.js isn't everything. Try out some of these runtimes to understand core JS APIs without relying on Node's internals when you develop. Resulting in more universally runnable code. 🙂

Alternative JS Frameworks

React isn't the only modern approach to UI development. These frameworks are viable alternatives and even competitors you should check out.

There is a helpful tool called "Component Party" where you can compare how different components are implemented in these frameworks and more!

API Paradigms

  • REST: definitely
  • GraphQL 👍🏾: recommend basic understanding
  • tRPC: if ya want

Programming Techniques

  • OOP (Object-Oriented Programming)
  • Functional Programming
  • TDD (Test-driven Development)

Resources

Courses

Podcasts

References

  • MDN Docs: great ref for web standards, APIs, concepts, techniques, and more
  • Prisma's Dataguide: haven't gone through all of it but stumbled upon this and loved a lot of the content it provides and how it covers different database patterns
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment