Frontend Developer Roadmap 2022
As a frontend CoP (Communities of Practice) core team, my colleague and I create the frontend developer roadmap, hoping this would be the learning path for frontend developers in the organization.
Updated 2022
- Add CSS for JavaScript Developers as a learning material for CSS.
- Add Reach UI as a React style-agnostic UI components, Remix as a web framework for creating SSR application and Vite as a new dev server and bundler.
Disclaimers
- This roadmap is inspired by roadmap by Kamran Ahmed.
- This roadmap is developed under frontend CoP of FLCIT organization so it might not necessarily reflect other organizations or the whole company. The roadmap is somewhat related to the organizational context. For example, we put GraphQL at the later of the roadmap as we haven’t seen any adoption. Another example, we put the starter kit in the roadmap because our developers are encouraged to generate the application through this application generator tool providing the additional capabilities e.g. authentication, continuous delivery pipeline. Last example, according to company-paid licenses for Pluralsight, most training courses listed here come from Pluralsight.
- This roadmap covers everything from developing simple website to delivering complex enterprise application. Don’t feel guilty if you only know some topics — it is uncommon to know it all. Don’t feel overwhelmed — you don’t need to learn all of them at the beginning.
Introduction
In this blog, we divides roadmap into 4 following sections to be easy to digest:
- basic knowledge of software developers contains fundamental and common topics software developers need to know
- basic knowledge of frontend development contains fundamental topics frontend developers need to know to deliver high quality frontend application
- intermediate knowledge where we focus on the JavaScript frameworks
- advanced knowledge contains the advanced topics which are good to know but developers can learn later when have time or requirements
Addition to the roadmap, we also include the learning materials where we carefully select and believe they would fulfil your knowledge in each domain.
Without further ado, let me walk you through our frontend developer roadmap.
Basic Knowledge of Software Development
We believe this section consists of the fundamental topics the developers need to know.
Internet: The Internet is a large network of computers which communicate all together. It is the backbone of the web.
Version Control Systems: Version control is a system that records changes to file(s) over time so that you can recall specific versions later. In our organization, we use TFS and Github as repository hosting services.
Agile: Agile is the iterative approach to software development. Most of the teams adopt Agile by using Scrum framework. As Scrum focusing on the management practices, the development team needs more solid technical practices to deliver high quality software. We believe that they can embrace technical practices from Extreme Programming e.g. TDD, pair programming, simple design, refactoring and it can go hand in hand with Scrum process.
Clean Code: Clean Code is a book/course by Robert C. “Uncle Bob” Martin. It describes the principles, patterns, and practices of writing clean code.
Basic Knowledge of Frontend Development
This section contains the essential knowledge frontend developers need to know in order to create the web site — HTML, CSS, and JavaScript are the core building blocks.
HTML: HTML is the basic language to create the Web. It defines the meaning and structure of web content.
CSS: Cascading Style Sheets (CSS) is a stylesheet language used to describe the presentation of a document written in HTML. CSS describes how elements should be rendered on screen.
CSS Preprocessors: A CSS preprocessor is a program providing some additional features from pure CSS e.g. mixin, nesting selector, inheritance selector. At the end, it compiles back to CSS. This results in making the code structure more readable and easier to maintain. There are couple of popular CSS preprocessors e.g. LESS, Sass and SCSS. As SCSS syntax is more similar to CSS, We prefer SCSS.
JavaScript: JavaScript is a programming language that adds interactivity to your website. Arguably, this is the most important element among all three core building blocks of web development.
You need to learn JavaScript syntax, ES2015+, DOM manipulation, closure, scope, async-await, hoisting, shadow DOM, event bubbling & prototype and fetch API.
Web Security: There are many aspects of website securities. The below list contains only ones of those aspects.
- HTTPS: HTTPS (HyperText Transfer Protocol Secure) is an encrypted version of the HTTP protocol. It uses SSL or TLS to encrypt all communication between a client and a server. This secure connection allows clients to safely exchange sensitive data with a server.
- CORS: Cross-Origin Resource Sharing (CORS) is an HTTP-header based mechanism that allows a server to indicate any other origins (domain, scheme, or port) than its own from which a browser should permit loading of resources.
- Content Security Policy: Content Security Policy (CSP) is an added layer of security that helps to detect and mitigate certain types of attacks, including Cross Site Scripting (XSS) and data injection attacks.
- Session/Cookie: An HTTP cookie (web cookie, browser cookie) is a small piece of data that a server sends to the user’s web browser. The browser may store it and send it back with later requests to the same server. It is used primarily for session management.
- AuthN/AuthZ: Authentication is the process of verifying who a user is, while authorization is the process of verifying what they have access to.
- Secret Key Management: Secrets management refers to the tools and methods for managing digital authentication credentials (secrets), e.g. passwords, keys, APIs, and tokens.
- OWASP Security Risks: The Open Web Application Security Project® (OWASP) is a non-profit organization that is proficient in the field of web application security. It provides the list of critical security concerns for web application security.
Package Managers: The package manager offers capabilities to install new dependencies, manage where packages are stored on file system, and publish own packages. We normally use yarn and npm interchangeably. pnpm comes later, it can save more disk space and boost faster installation speed, especially on large and multiple projects, according to how pnpm install the files.
Basic UX/UI: We strongly believe that good frontend developers need to have user empathy. In the company, we have the training called UCD 101 which introduces participants to basic UX/UI and its importance. Additionally, If we look at the Software Development Job Family (SDJF), we would see that User Research is the required skill for Front-End Web Developer role.
Intermediate — JavaScript Frameworks
Angular and React are two modern JavaScript frameworks being used in our organization. Angular is more encouraged than React because of its opinionated nature and the architecture structure similarity where it is easy to move people around the team and to be governed over the tools and practices.
In the roadmap, we divide into two flows — Angular path and React path — and can be differentiated by its color:
- blue line for React
- red line for Angular
- both lines mean this tool being used in both frameworks
Angular
Angular is an opinionated JavaScript framework to create Single Page Application. It provides collection of libraries that cover a variety of features out-of-the-box, e.g. routing, forms management, client-server communication, testing.
Fundamental Topics: These are topics listed in the Angular official document where we regroup them into fundamental topics, should learn now, and advanced topics (later in the path), could learn later.
Fundamental Third-Party Libraries: RxJS and TypeScript are the core libraries being used in Angular.
UI Components/CSS Frameworks: We have 2 schools of thought: Bootstrap and Material Design. For Material Design, it is much easier to choose as we have one option, Angular Material. For Bootstrap, we choose NG Bootstrap for its popularity and support newer version of Bootstrap. New kid on the block, Tailwind is gaining popularity and Angular v11.2 natively supports Tailwind.
State Management: We believe in Simple Design and we would always recommend developers to start with @Input() and @Output() if you need to share data between child and parent components. For more complex scenarios e.g. component interaction between grand parent component to child component or component interaction between components that do not have relationship, you might start with Subject until you feel that you really need the state management library. For state management library, most of them are influenced by the Redux/Flux pattern. We suggest developers to firstly understand NGRX — its advantages and disadvantages — before decide whether you need this fully fledge solution or you look for other concise NGRX abstraction libraries.
Formatter: Angular doesn’t come up with default formatter. Developers can consider to add Prettier to the project. This would be beneficial when there are number of developers working in the same codebase.
Linter: TSLint is deprecated since 2019. The current Angular (v.12) does not include default linter. If you plan to create new Angular application, we recommend to add ESLint to the project. In case of the existing application, we recommends to migrate to ESLint.
Testing:
- Unit Testing: Karma and Jasmine are included in Angular project by default. In the meantime, we have seen the community starts using other tools apart from the default option e.g. Nx has provided the option to use Jest for running unit tests since 2018. In our team, we start experimenting Jest and Angular Testing Library to create unit tests. We satisfy with the result. Developers who would like to migrate to Jest needs to evaluate the pros and cons.
- End-to-End Testing: We observed that the community was moving away from Protractor and, as a result, Angular has not included Protractor in its project since Angular v.12. We have seen the trend to adopt Cypress as a replacement, e.g. Nx has provided the option to use Cypress for Angular project since 2018.
Bundler: Angular come with Webpack by default and it is working out-of-the-box. However, there would be chances that you need to configure it e.g. implementing Micro Frontends architectural style with Module Federation. Understand how Webpack is working is always a plus.
Developer Tools: Angular provides Angular DevTools for debugging and profiling your Angular applications. If your Angular version is v9 and above, we highly encourage to install this Chrome extension.
Advanced Topics: These are topics listed in the Angular official document in which we believe that developers can learn later when necessary.
Mobile: Ionic Framework provides the capability for developers to build and deploy application that works across multiple platforms, e.g. iOS, Android, desktop, and the web with one codebase. Alternatively, we can use NativeScript to develop truly native mobile apps with Angular. The difference is that Ionic is the framework to build Hybrid Application using HTML5, CSS and Angular requiring wrapper to communicate to native APIs while NativeScript is the framework to to build true native mobile apps communicating directly with Native APIs.
SSR: Angular Universal is a technology that renders Angular applications on the server.
SSG: Scully is a static site generator for Angular projects.
React
React is a JavaScript library for building UIs. As React focuses only UI layer and leaves other technology stacks for choices, this makes React more flexible and less opinionated compared to Angular.
If you’re learning React, I recommend you to start with using create-react-app in your local machine or you can use an online code playground on CodePen, CodeSandbox, or Stackblitz.
Fundamental Topics: These are React main concepts listed in the React official document
- JSX: A syntax extension to JavaScript describes what UI should look like.
- Component: UI layers in React are composed of component(s), which can be functional or class components.
- Props vs State
- Life Cycle
- Basic Hooks (useState, useEffect)
Fundamental Third-Party Libraries: React recommends using Flow or TypeScript — a typed superset of JavaScript that can be compiled back to plain JavaScript — as static type checkers for large code bases. Create React App supports TypeScript out of the box.
UI Components/CSS Frameworks: As previously said in Angular, we use 2 design systems: Bootstrap and Material Design. React-Bootstrap and Material-UI are candidates from these 2 design systems which have been built as true React components. Alternatively, Tailwind is a utility-first CSS framework which can be easily used to build your custom design system. (Another) alternative, you might find it preferably to use style-agnostic UI components, e.g. Reach UI, which focuses on accessibility and functionality while provides no opinion about style — and you can easily apply styles according to company’s style guide.
State Management: Again, we believe in Simple Design and, before jumping into state management libraries, we recommend to start with what React already offers, useState API and Lifting State Up, until you feel you get into trouble with “the prop-drilling problem”. Even you are facing “the prop-drilling problem”, you could consider component compositions or React’s Context API first. According to React document, component composition is often a simpler solution than context. As the last resource when all those names mentioned previously cannot solve your complex state management problem, you might consider the state management libraries and Redux is one of those libraries.
Formatter and Linter: Prettier can be added as the code formatter and ESLint can be added as the linter.
Caution: It is common to use Prettier and ESLint in the same project. This could cause conflicts on formatting rules. Please see how to integrate Prettier with Linters.
Testing:
- Unit Testing: React document recommends using Jest, as a test runner, and React Testing Library as test helper utilities.
- End-to-End Testing: React document suggests a framework like Cypress or a library like puppeteer to perform end-to-end tests.
Compiler: Due to the fact that JSX is not understood by the browser, Babel can convert JSX syntax into standard ECMAScript. For old browsers, Babel can convert ECMAScript2015 and beyond to ECMAScript.
Bundler: Webpack is a bundler provided out-of-the-box from the following toolchains, Create React App, Next.js, Gatsby. Per the recently release of Vite, this new build tool provides a faster and leaner development experience compared to Webpack.
Developer Tools: React provides React DevTools for inspecting and debugging React applications. It is available as a built-in extension for Chrome and Firefox browsers. We highly recommends to install it.
Advanced Topics: These are topics listed in the advanced guides in React official document. The commonly used topics are Context, Refs, Custom Hook and some common Hooks.
Mobile: React Native allows developers to create native apps for Android and iOS using React.
SSR: Next.js is a framework for building a server-rendered website with Node.js. Remix is a new web framework that provides dynamic server rendering. Different from Next.js, Remix is built on top of Web Standards and doesn’t require Node.js.
SSG: Gatsby is a framework for building a static content-oriented website while Next.js also supports SSG and provides flexibility to generate a hybrid application — by using Static Generation for some pages and using Server-side Rendering for others.
Advanced — Good to know
This section is about the advanced topics where it might not relevant in your day-to-day job. However, we recommend you to be familiar with them, at least the basic concepts.
Techniques:
- Lazy Loading: It is a technique that defers loading of non-critical resources at page load time. This technique can be applied to multiple resources from images and fonts to JavaScript codes like Angular module.
- Micro Frontends: It is an architectural style where independently deliverable frontend applications are composed into a greater whole. As this is an architectural style, it can be implemented in many ways: from traditional one like iframe to more modern platform like web components. In company, we make an experiment by implementing the micro frontends with web components. We satisfy with the primary result but, unfortunately, we haven’t had time (and budget) to continue work on it.
- Performance Checklists: This is not about one single technique but the aggregation of techniques and tools to improve web performance and optimize user experiences. This is a *must* checklist that we highly recommend to bookmark in your browser.
- Progressive Web Apps: It is an attempt to bring the native-app capabilities to the web application — e.g. push notifications, offline working — by using the modern web APIs, service workers, and app manifest.
Web Components: It provides a way to create reusable and language-agnostic widgets with encapsulation of HTML, CSS and JavaScript. The end result will be the custom HTML tag where you can use it anywhere.
Web Performance & Quality Auditing Tools: Lighthouse is a tool we use periodically to audit the application — performance, accessibility, progressive web apps, SEO — and recommend you to try. PageSpeed Insight is another tool but focuses on page speed only.
Application Generator: Our platform team provides the starter kit where developers can jumpstart by using it to generate the application. The end result will be Angular application with additional common capabilities e.g. AuthN/AuthZ, environment variables management, continuous delivery pipeline.
Analytics: We have seen two analytics services being used: Azure Application Insights and Google Analytics. Google Analytics focuses primarily on understanding the users while Azure Application Insights is more on general purpose — monitor the application, diagnose issues and understand what users actually do with the app. Choose one that matches you requirements.
GraphQL: We haven’t seen any implementation inside the company but it is good to have more tools in your toolbox and you are ready to pick it up when the context matches.
Learning Materials
Internet
Version Control Systems
Agile
Clean Code
HTML
CSS
- MDN
- CSS for JavaScript Developers is an online course by Josh W Comeau. I have completed this course and this is the first time I can really reason about CSS. Highly recommend.
- CSS-Tricks and Smashing Magazine contains more advanced topics
JavaScript
Worth Mentioning:
- Just JavaScript is a course provided by Dan Abramov. It will (re)create your mental model of JavaScript primitive and non-primitive values.
Web Security
- MDN
- Martin Fowler: The Basics of Web Application Security provides best practices to prevent your website from security exploitation.
Package Managers
Basic UX/UI
Angular
- Angular official document is a *must* resource.
- Pluralsight provides Angular skill path containing multiple courses in the following levels: Beginner, Intermediate, and Advanced level. Addition to the variety of courses, we love the authors e.g. Deborah Kurata, John Papa, Dan Wahlin, Joe Eames — if you have attended Angular conferences, you would see these names and appreciate the quality they brought.
React
- React official document is a *must* resource.
- Pluralsight provides multiple React courses
- Kent C. Dodds provides both blogs and courses. Addition to React, Kent provides valuable insight to testing topics.
Micro Frontends
Performance Checklists
Progressive Web Apps
Web Components
Application Generator
Conclusion
This is the guideline or learning path not the rules. The objective is to accommodate the learning of the new people in the team based on experiences from the people in the community. These set of tools are not meant to be used if they don’t fit in the context and the developers should have the flexibility and freedom to choose their own tools (even they are not listed here) as long as they can reason about them.
You can download the full roadmap from the following link
Contributors
Chotipong Punthawornwong (Fame)
Totsawin Jangprasert (Wind)
