The 2020 Web Developer Roadmap – A Visual Guide to Becoming a Front End, Back End, or DevOps Developer

Web development is a vast, complex, and constantly evolving field. Over the past decade, the rise of mobile devices, cloud computing, and JavaScript frameworks have dramatically reshaped how web applications are built. New tools and technologies emerge at a relentless pace, making it challenging for even experienced developers to keep up, let alone those just starting on their coding journey.

Despite the complexity, web development remains an extremely rewarding and lucrative career path. The U.S. Bureau of Labor Statistics projects 8% job growth for web developers between 2019 and 2029, much faster than the average for all occupations. This growth is fueled by the explosion of e-commerce, the ubiquity of mobile devices, and the fact that nearly every company needs some kind of web presence to remain competitive.

For aspiring web developers, the big question is where to start. What skills should you learn first? What tools do you need to master? How do the different specializations like front end, back end, and DevOps fit together? Having a structured roadmap to follow can make the learning journey feel less overwhelming.

Developer Kamran Ahmed‘s Web Developer Roadmap is one of the best such resources available. Updated annually, his roadmaps provide a comprehensive visual overview of the many tools and technologies used in modern web development. Let‘s dive deep into each of the three main areas – front end, back end, and DevOps – to highlight the core skills and emerging trends.

Front End Developer Roadmap

The front end, also known as the client-side, refers to everything the end user sees and interacts with in their web browser. At a minimum, all front end developers must be proficient in:

• HTML (Hypertext Markup Language): The structural layer of a web page. HTML5 introduced semantic tags like <header>, <footer>, and <article> for better document structure.

• CSS (Cascading Style Sheets): Used for styling the appearance of HTML elements. Key concepts include the box model, specificity, flexbox, and responsive design via media queries.

• JavaScript: The programming language that powers dynamic behavior in browsers. Key concepts include data types, functions, loops, DOM manipulation, and event handling.

Image source: Stack Overflow Developer Survey 2020

Beyond the big three, most modern front end codebases incorporate build tools, package managers, and JavaScript frameworks:

• CSS Preprocessors like Sass and Less extend CSS with variables, mixins, and other programming features to make stylesheets more maintainable.

• JavaScript Frameworks like React, Angular, and Vue provide structure and reusable components for building complex, interactive user interfaces. As of 2020, React is the most popular with 35.9% of professional developers using it.

• Build Tools like webpack and Rollup bundle JavaScript modules, handle asset preprocessing, and more to optimize web performance.

• Package Managers like npm and Yarn allow installing and managing third-party JavaScript dependencies.

• Task Runners like Gulp and Grunt automate repetitive workflows like minification and linting.

Testing is another key concern for front end developers. Unit tests verify the behavior of individual functions, integration tests ensure different modules work together correctly, and end-to-end tests replicate user interactions. Popular testing frameworks include Jest, Mocha, Jasmine, and Cypress.

Looking ahead, development patterns like progressive web apps, serverless functions, and web assembly are expanding the capabilities of the front end. While not yet fully mainstream, these trends point to an increasingly powerful and flexible front end ecosystem.

Back End Developer Roadmap

If the front end is the car body, the back end represents the engine under the hood. Back end developers work on server-side logic – everything that happens behind the scenes to power application functionality.

The first major decision is choosing a programming language and framework. Popular options include:

• JavaScript: Node.js allows running JavaScript on the server. Express.js and Koa are popular Node web frameworks.

• Python: Known for its simplicity and wide usage in data science. Django and Flask are leading Python web frameworks.

• Java: Benefits from a huge ecosystem of libraries and frameworks. Spring is the most popular Java web framework.

• Ruby: Appreciated for its readability and expressiveness. Ruby on Rails remains a popular model-view-controller (MVC) framework.

• Go: Designed by Google for simplicity, concurrency, and efficiency. Gin and Echo are popular Go web frameworks.

Image source: State of JavaScript 2020 Survey

Whichever language you choose, you‘ll need a solid grasp of these core computer science concepts:

• Data Structures: How data is organized and stored for efficient access. Examples include arrays, stacks, queues, linked lists, trees, and hash tables.

• Algorithms: Step-by-step procedures for solving computational problems. Key topics include sorting, searching, graph traversal, and dynamic programming.

• Time and Space Complexity Analysis: Using Big O notation to describe how an algorithm‘s performance scales with input size.

Databases are the foundation of most web applications, storing everything from user credentials to product catalogs to analytics. The two main categories are:

• Relational Databases like PostgreSQL, MySQL, and SQL Server store data in tables with predefined schemas and use SQL (Structured Query Language) for defining and manipulating data.

• NoSQL Databases like MongoDB, Cassandra, and Redis provide more flexibility by storing unstructured or semi-structured data, often in key-value pairs or document format. They scale horizontally and are a good fit for large, rapidly changing datasets.

Application Programming Interfaces (APIs) define how different software systems should interact. Representational State Transfer (REST) is the dominant paradigm for designing web APIs, using standard HTTP methods like GET, POST, and DELETE to retrieve and modify resources. GraphQL, developed by Facebook, is a more flexible alternative to REST that allows clients to specify exactly what data they need.

Other key back end concepts include:

• Caching: Using fast, short-term memory like Redis or Memcached to store frequently accessed data and reduce load on the primary database.

• Background Jobs: Handling time-consuming tasks like sending emails or generating reports asynchronously, outside the context of a web request/response cycle. Tools like Sidekiq and Celery are used for background processing.

• Full Text Search: Using dedicated search engines like Elasticsearch or Apache Solr to power complex search functionality beyond what‘s possible with standard database queries.

• Architectural Patterns: Monolithic architectures package an entire application into a single deployable unit, while microservices split functionality into smaller, independently deployable services. Serverless architectures go a step further, running individual functions in ephemeral containers.

As the back end ecosystem grows more complex, the line between back end and DevOps roles is blurring. Many back end developers are now expected to understand deployment pipelines, infrastructure provisioning, and other traditionally Ops-focused tasks.

DevOps Roadmap

DevOps represents the intersection of development, operations, and quality assurance. The goal is to automate and streamline the process of building, testing, and releasing software.

A strong foundation in Linux is essential, as it‘s the operating system that powers most web servers. Key commands to know include:

• ls: List directory contents
• cd: Change the current working directory
• mkdir: Create a new directory
• cp / mv: Copy or move files and directories
• grep: Search for a pattern within files
• chmod: Modify file permissions

Scripting languages like Bash, Python, and Ruby are used extensively in DevOps for writing utility scripts and automation logic. Understanding how to compose simple scripts and work with environment variables is key.

In terms of specific tools and technologies, the DevOps world is rapidly converging around a few key players:

• Containers: Tools like Docker and Podman allow packaging applications and their dependencies into portable, isolated units. Containerization provides consistency across development, testing, and production environments.

• Container Orchestration: Kubernetes has become the de facto standard for automating deployment, scaling, and management of containerized applications. All major cloud providers now offer managed Kubernetes services.

• Infrastructure as Code (IaC): Codifying infrastructure specifications in definition files which can be versioned and treated like any other code. Terraform and AWS CloudFormation are two dominant IaC tools.

• Configuration Management: Tools like Ansible, Chef, and Puppet that automate the configuration of servers and ensure a consistent, reproducible environment.

• Continuous Integration and Continuous Delivery (CI/CD): Automating the integration, testing, and deployment of code changes. Jenkins, GitLab, CircleCI, and GitHub Actions are popular CI/CD platforms.

• Monitoring and Logging: Collecting and analyzing system metrics and logs for debugging, optimization, and ensuring overall system health. Prometheus and Grafana are widely used for monitoring, while the Elastic Stack (Elasticsearch, Logstash, Kibana) is a popular logging solution.

Image source: Microsoft Azure

Infrastructure as Code in particular has revolutionized how modern software is deployed. By representing desired infrastructure state in files that can be versioned, tested, and reviewed like any other code, teams can apply software development best practices to infrastructure.

This "GitOps" approach – using Git as the "single source of truth" for both application code and infrastructure – is quickly becoming the standard for many organizations. With GitOps, a simple Git merge can trigger an entire deployment pipeline: building a new application version, provisioning cloud resources, and rolling out the updated code.

Finally, the major public cloud providers – Amazon Web Services (AWS), Google Cloud Platform (GCP), and Microsoft Azure – are an increasingly important part of the DevOps toolkit. Each provider offers a dizzying array of managed services, from basic compute and storage to fully managed databases, Kubernetes clusters, serverless functions, and machine learning models. Understanding the core concepts of cloud computing and being able to navigate the complexities of at least one major cloud platform is essential for modern DevOps practitioners.

Charting Your Path

As the roadmaps make abundantly clear, modern web development covers a lot of ground. It‘s unrealistic to expect to master everything, especially when starting out. Instead, aim for a T-shaped skill set: broad familiarity with a variety of front end, back end, and DevOps concepts, plus deep expertise in one or two areas that particularly interest you.

Remember that web development is a field of constant learning and evolution. The JavaScript framework or cloud platform of choice today may be obsolete a few years from now. Focus on grasping timeless principles:

• Thinking like a programmer
• Breaking down complex problems
• Designing maintainable architectures
• Writing clean, reusable, testable code
• Automating repetitive tasks
• Communicating and collaborating effectively with others

Building projects is one of the best ways to solidify your understanding and demonstrate your skills to potential employers. Contribute to open source projects, attend hackathons, and engage with your local developer community. Have a growth mindset, ask questions, and don‘t be afraid to admit when you don‘t know something.

With the right mix of technical skills, problem-solving ability, and lifelong learning, you‘ll be well-positioned to thrive in the ever-evolving world of web development. The journey won‘t always be easy, but it will certainly be rewarding. So pick a path, start coding, and enjoy the ride!