web-frontend-technique-tree.md

Web Frontend Techniques

Table of Content

• Frontend Fundamentals
• Basic Frameworks
• Frontend Engineering
• Modern Frontend
  • Modern CSS
  • Progressive JS Frameworks
  • Web Components
• Application Development
  • Cross-Platform Mobile Applications
  • Cross-Platform Desktop Applications
  • Mini Programs
  • Full Stack Web Development
• More Techniques
  • Web Graphics
  • Web Assembly
• Advanced Topics
  • Web Performance
  • Cross-Browser Compatibility
• Libraries
• Tools

Main

Color Meanings

• 🟪: Recommend
• 🟩: Alternative Option
• Default: Learning anytime
• ⬛: Don't recommend

Frontend Fundamentals

• 🟪 HTML
• 🟪 CSS
  • basics, layouts, responsive design and media queries
• 🟪 JavaScript
  • basics, DOM manipulation, ajax, ES6+ and modular JavaScript, advanced (hoisting, event bubbling, scope, prototype, shadow DOM, strict)
• ECMAScript

Basic Frameworks

• CSS Frameworks
  • 🟪 Bootstrap
  • 🟩 Materialize CSS
  • 🟩 Bulma
• JavaScript Frameworks
  • jQuery

Frontend Engineering

Package Managers

• 🟪 npm
• 🟪 yarn
• pnPM

Build Tools

• Task Runners
  • 🟪 npm scripts
  • Grunt
  • ⬛ Gulp
• Module Builders
  • 🟪 Snowpack
  • 🟪 Webpack
  • 🟩 Rollup
  • 🟩 Parcel
  • Snowpack
  • Vite
  • Turbopack
• Transpiler
  • Babel
• Linters and Formatters
  • Prettier
  • ESLint
  • ⬛ StandardJS

Progressive JS Frameworks

🟪 React.js

Click to expand!

• Fundamental Topics
  • Create React App, JSX, Components, Props vs State, Conditional Rendering, Component Lifecycle, List and Keys, Composition vs Inheritance
• Advanced Topics
  • Hooks, Context, Refs, Render Props, Code Splitting, High Order Components, Portals, Error Boundaries, Fiber Architecture
• Ecosystem
  • Tools
    • Create React App
    • React Developer Tools
    • More React Tools List
  • Routers
    • 🟪 React Router
    • 🟩 Reach Router
  • State Management
    • 🟪 Context / State
    • 🟪 React Hooks
    • 🟪 Redux
    • 🟩 MobX
    • Redux-Saga
  • Styling
    • 🟪 Styled Components
    • 🟩 Chakra UI
    • 🟩 Material UI
    • 🟩 antd (Ant Design)
      • Ant Design Scaffolds
        • Ant Design Pro
        • antd-admin
        • d2-admin
        • More Scaffolds List
    • 🟩 Emotion
    • React Bootstrap
    • Semantic UI React
    • Rebass
    • Fluent UI
    • Blueprint UI
  • Forms
    • 🟪 React Hook Form
    • 🟩 Formik
    • 🟩 Final Form
  • Testing
    • 🟪 Jest
    • 🟪 React Testing Library
    • 🟪 Cypress
  • Server Side Rendering (SSR)
    • 🟪 Next.js
  • Static Site Generator (SSG)
    • 🟪 Next.js
    • 🟩 Gatsby
  • API Calls
    • GraphQL
      • 🟪 Apollo
      • 🟩 Relay Modern
    • REST API Calls
      • 🟪 Axios
      • 🟩 Unfetch
      • 🟩 Superagent
    • Hooks Based
      • 🟪 use-http
  • Mobile
    • 🟪 React Native
• Frameworks
  • UmiJS
    • umi-request
  • DvaJS

🟩 Vue.js

Click to expand!

• Ecosystem
  • Tools
    • vue-cli
  • Router
    • Vue Router
    • Router5, vue-component-router
  • State Management
    • VueX
  • Styling
    • Quasar, Vuetify, iView, Element UI
    • Vuesax, bootstrap-vue
    • vue-element-admin-ui
  • API Clients
    • REST
      • fetch (native)
      • SuperAgent, axios
    • GraphQL
      • Apollo
      • Relay
  • Utility Libraries
    • Lodash, Moment
    • Numeral, RxJS
    • Ramda
  • Testing
    • Unit Testing
      • Jest, Vue-test-utils, Sinon
      • Mocha, Chai
      • AVA, Tape
    • Integration Testing
      • Karma
    • E2E Testing
      • Nightwatch
      • Selenium, Puppeteer, Cucumber.js
  • i18n
    • vue-i18n
  • Server Side Rendering (SSR)
    • Nuxt
  • Static Site Generator (SSG)
    • VuePress
  • Mobile
    • Quasar
    • Vue Native, Nativescript Vue, Weex
  • Desktop
    • Quasar
    • Electron, NW.js, Vuldo

🟩 AngularJS

• RxJS
• NgRx

Lightweight JS Frameworks

• Svelte
• SolidJS
• Preact
• Phoenix Framework

Modern Frontend

• Modern CSS
  • CSS Architecture
    • BEM
    • ⬛ OOCSS
    • ⬛ SMACSS
  • CSS Preprocessors
    • Sass
    • PostCSS
    • ⬛ Less
    • Stylus
  • Modern CSS
    • 🟪 Styled Components
    • 🟪 CSS Modules
    • 🟩 Styled JSX
    • 🟩 Emotion
    • ⬛ Radium
    • ⬛ Glamorous
  • CSS Frameworks (JS-Based)
    • 🟪 Reactstrap
    • 🟪 Material UI
    • 🟩 Tailwind CSS
    • 🟩 Chakra UI
  • Others Frameworks
    • Headless UI
• Web Components
  • HTML Templates
  • Custom Elements
  • Shadow DOM
• Test
  • 🟪 Jest
  • 🟪 react-testing-library
  • 🟪 Cypress
  • 🟪 Enzyme
  • Mocha JS
  • Chai JS
  • Ava
  • Jasmine
• Type Checkers
  • 🟪 TypeScript
  • Flow
• Server Side Rendering (SSR)
  • React.js
    • 🟪 Next.js
    • ⬛ After.js
  • AngularJS
    • 🟩 Universal
  • Vue.js
    • 🟩 Nuxt.js
• Static Site Generators (SSG)
  • 🟪 Next.js
  • 🟪 GatsbyJS
  • 🟩 Nuxt.js
  • 🟩 Vuepress
  • 🟩 Jekyll
  • 🟩 Hugo

Application Development

Cross-Platform Mobile Applications

• 🟪 React Native
• Progressive Web Apps (PWA)
• NativeScript
• Flutter
• Ionic 4
• Apache Cordova
• Weex
• Taro
• Quasar Framework
• uni-app

Cross-Platform Desktop Applications

• 🟪 Electron
• NW.js
• ⬛ Carlo
• ⬛ Proton Native

Mini Programs

• 🟪 WeChat Mini Program
• QQ Mini Program
• Alipay Mini Program

Full Stack Web Development

• Node.js
• Web Frameworks
  • Express
  • Koa.js
• Database
  • MongoDB
• GraphQL
  • 🟪 Apollo
  • 🟩 Relay Modern

More Techniques

• Web Graphics
  • WebGL
• Web Assembly

Advanced Topics

Web Performance

Click to expand!

• Performance Metrics
  • FP (First Paint)
  • FCP (First Contentful Paint)
  • FMP (First Meaningful Paint)
  • TTI (Time to Interactive)
  • HET
  • First CPU Idle
• Performance Optimization Tools
  • Website Performance Test
    • WebPageTest
  • Website Quality Audit
    • Microsoft Application Insights
    • Google PageSpeed Insights
    • Lighthouse
  • Load Test
    • Bombardier
  • Browser Developer tools
  • Browser APIs
• Optimization Solutions
  • Network Optimization
    • Request
    • Resources
    • Compression
    • Cache
  • Rendering Optimization
    • CSS/JS
    • DOM
    • Lazy Loading

Cross-Browser Compatibility

Libraries

UI Frameworks

• jQuery-Based UI Frameworks
  • Semantic UI. a development framework that helps create beautiful, responsive layouts.
  • Bootstrap
    • bootstrap-select plugin
  • Layui
  • ZURB Foundation (responsive front-end framework)
  • UIkit
  • Pure.css. A set of small, responsive CSS modules that you can use in every web project.
  • MDBootstrap (Material Design for Bootstrap)
  • jQuery UI
• Mobile UI Frameworks
  • framework7
  • mui
  • Amaze UI
• VueJS-based UI Frameworks
  • Vuetify (A Material Design Framework for Vue.js)
  • Element UI (by 饿了么)
  • Element plus
  • View UI (iview) (by Talkingdata)
  • and-design-vue (by 蚂蚁金服)
  • Quasar
  • Vant (Mobile UI Components built on Vue)
• React-based UI Frameworks
  • Material UI (React UI Framework)
  • Ant Design (antd) (by 蚂蚁金服)

UI Website

• Dribbble. Discover the world’s top designers & creatives.

UI Components

• Data Visualization
  • Apache Echarts
  • Highcharts
  • AntV
  • D3.js
• Form Components
  • Date Picker
    • jQuery Date picker
    • Bootstrap datepicker
    • layDate
  • Select Picker
    • bootstrap-select plugin
  • Input Tags
    • jQuery Plugin inputTags.js
    • Bootstrap Tags Input
    • Layui inputTags
  • Rich Text Editors
    • TinyMCE. GitHub
    • CKEditor. GitHub
    • Draft.js. by Facebook. GitHub
    • Slate.js. GitHub
    • Quill. GitHub. react-quill
    • Chinese
      • UEditor. by 百度. GitHub
      • wangEditor. GitHub
  • Sort
    • SortableJS
    • Vue.Draggable
• Calendar Schedule
  • FullCalendar
• Tree
  • zTree
• Grid
  • jQgrid
  • jQuery Gridly
• Alert
  • Layui
  • Sweetalert

Utility Libraries

• Animation
  • Animate.css
  • Anime.js
• Simulation Data Generator
  • Mock.js
• Utilities
  • UnderScore.js
  • Lodash
  • Moment.js
  • clipborad.js
• HTTP Client
  • axios.js

Others

• Font and Icon
  • Font Awesome
  • Iconfont

Form Components Comparison

	Bootstrap	Layui	jQuery UI
Basic form componenets text input, radio, checkbox, select, file, textarea	Y	Y	Y
Switches (on-off)	Y	Y
Slider	Y	Y	Y
Progress bar	Y	Y	Y
Date picker	Plugin	Y	Y
Select picker (with checkbox, search, group, tree)	Plugin	Y	Y
Input tags	Plugin	Plugin
Autocomplete Input	Plugin		Y
Rich text editor: TinyMCE, UEditor, CKEditor, Draft.js, Slate.js	--	--	--

Layout Components

	Bootstrap	Layui	jQuery UI
Navigation Bar (menu)	Y	Y	Y
Breadcrumb Trail (location in a website)	Y	Y
Table and Pagination	Y	Y	Y
Tree	N	Y
Tab	Y	Y
Card (panel/accordion)	Y	Y	Y
Buttons	Y	Y	Y
Carousel	Y	Y	N
Media Object	Y	N	N
Badge	Y	Y	N
Icon	Y	Y	N

Interactive Components

	Bootstrap	Layui	jQuery UI
Dialog (alert) / Modal	Y	Y	Y
Spinners (loading)	Y	Y	Y
Collapse (Insert content below)	Y	N	N
Dropdowns (float data list)	Y	N	N
Popovers (tips)	Y	N	N
Tooltip a special-case of popover a hint or tip on what a tool a small few word hint only visible on hover	Y	N	Y
Scrollspy (scroll position)	Y	N	N
Toasts (push notifications)	Y	Y	N
Flow (load more, lazy load)	N	Y	N

Tools

• IDEs
  • 🟪 WebStorm
  • 🟪 VSCode
  • HBuilder
• Editors
  • Sublime
• Browsers
  • Chrome
  • Firefox
  • Safari
• Version Control
  • 🟪 Git
  • SVN
• Servers
  • Nginx
  • Docker

References

General

• Frontend Developer Roadmap

React

• React Developer Roadmap
• awesome-react
• awesome-react-components

Vue

• Vue Developer Roadmap
• awesome-vue