sulco / angular-developer-roadmap

Angular Developer Roadmap

Angular Developer Roadmap

This project aims to collect the most common / important concepts one should learn to become an Angular developer.
Inspired by "Web Developer Roadmap" and "React Developer Roadmap".

Roadmap

Download

Get a PDF version.

Topics covered + suggested resources

1. The basics:
   • HTML
     • marksheet.io
     • MDN on HTML
   • CSS
     • marksheet.io
     • MDN on CSS
   • JavaScript
     • "You Don't Know JS"
     • NodeSchool.io
     • ES6 Overview in 350 Bullet Points
2. General Development Skills
   • GIT
     • "Learn Git Branching"
   • HTTP/HTTPS
   • Learn to search for solutions
   • Terminal usage
   • Data Structures and Algorithms
   • Design Patterns
3. Build tools
   • Package Managers
     • npm
     • Yarn
   • Angular CLI
     • Angular CLI Wiki
   • Bazel
   • Rollup
   • Task runners
     • npm scripts
     • gulp
4. Styling
   • CSS Preprocessors
     • Sass/SCSS
     • PostCSS
     • Less
   • CSS Frameworks
     • Bootstrap
     • Zurb Foundation
     • Bulma
     • Semantic UI
     • Tailwind CSS
   • Design Systems
     • Angular Material
     • Clarity Design System
     • Ant Design
5. Architecture
   • Schematics
   • Building Libraries
   • @angular/elements
6. Coding style
   • Angular Styleguide
   • TSLint
   • Prettier
7. Fundamental 3rd parties
   • TypeScript
     • "TypeScript Deep Dive"
     • Typescript Docs
   • RxJS
     • The introduction to Reactive Programming
     • RxJS manual
     • RxJS In-Depth (video)
8. State Management
   • @ngrx
     • /effects
     • /entity
     • ngrx-data
   • NGXS
9. Progressive Web Apps
   • @angular/pwa
   • Workbox
10. Utility Libraries
    • Lodash
    • Moment.js
11. Testing
    • Unit Testing
      • Jasmine
      • Karma
      • Jest
    • E2E Testing
      • Protractor
      • cypress.io
12. Non-browser Environments
    • Mobile
      • @angular/pwa (ng add @angular/pwa)
      • NativeScript
      • Ionic
    • Angular Universal
    • Electron

Spread the word

If you've found this list useful share it on Twitter or other places!

Contributing

If you want to contribute to this project to make it more helpful for other Angular developers, your help is very welcome!

Just file an issue, better yet: submit a PR! 🙂

License

angular-developer-roadmap's Issues

May I ask how to search for solutions? and any active online forum that developers share anglular informations?

Add nrwl nx workspace for project scaffolding , and monorepo setup

Add Schematics in Build Tools

Roadmap Picture

how to draw the picture of angular Roadmap ?

Add information about Usage Metrics - Master level

Hi Tomek,

How about you add a node on your roadmap for Angular developers to learn about tracking usage metrics. Google Analytics could be a good option. I am sure there's others but that's the one off the top of mind for me right now. Set this under Master level knowledge. :)

Thanks,
Guillermo

Add information about cross-browser testing - Master level

Hi Tomek,

Can you add a Master level section on the roadmap that will help guide and round-out the developer into the stratosphere? For example, how about automated cross-browser testing for app quality testing. There are services out there like Sauce Labs and BrowserStack that would help the Angular developer be an absolute hotshot.

Thanks,
Guillermo

Add date-fns under Utility Libraries

First off, Thank you for this excellent resource!

date-fns is more performant and tree shakeable compared to moment.js. So it results in smaller bundle sizes. I would recommend it over moment.js particularly for any front-end application for these two reasons.

Addition of Building Libraries

Concept of building re useable libraries using ng cli's 'ng generate library' as explained here.

date-fns for utilities

Hi!

Why didn't you mention https://github.com/date-fns/date-fns in your roadmap?

Add information about Performance - Master level

Hi Tomek,

How about you add a Master level section where developers should become adept at measuring performance for their web app. One of the options could be learning and understanding how to use Lighthouse for app performance measurement.

Thanks,
Guillermo

Add TestCafe for E2E testing

Add Angular Elements

Add PWA branch

Hello!

I see it like this: from the root there is a branch to PWA node. From PWA node there are two branches: @angular/pwa and Workbox (Workbox is a 3rd party library, a more flexible alternative to the "native" way)

Add ngx-translate

Add contribute.md

Instructions on how to contribute are great.

Angular

Can you guide me i am new at this

Add Singleton and Factories somewhere near design patterns