# 1 引言

本周精读, 来一起总结 web 开发的环节, 知识块和技能点. 是不是像 xx 速成班宣传的一样, 培训三个月, 经验顶三年, 入职 BAT, 年薪三十万?

本文虽然是罗列知识点, 但我想很有意义. 对于学习的人来说, 提供一个路线图. 对从业者来说, 对全局有更好的把控, 利于看到自己的强项和不足. 对组建团队, 更能起到一个点将谱的作用.

在网上我没有搜到任何深入全面的总结, 提供的那几篇已经算稍微好一些的了. 其他的要么太过笼统(前端-后端-数据-运维, 完毕)要么太细太窄(并不是不好, 只是和本文性质不一样). Generalist 和 Specialist 之间永远是一对辩证矛盾, 持续思考.

本文提供了有层级的列表形式, 如果有兴趣的读者可以把它做成概念图形式, 相互关联与距离相关, 可能会有意料之外的效果.

# 2 列表

列表形式, 方便搜索浏览, 加上一些解释和列举

## Backend

- authentication, oauth

- API design, RESTful, GraphQL

- payment integration

- social integration

- session/cookie management

- user management

- Server, e.g. nginx, connection model, conf, rewrite

- CRM

## Deployment, Env management, Container

- rollback/rollforward

- no downtime, non-disruptive deployment

- deploy to downstreams, e.g. npm, chrome extension store

- artefact management, e.g. gzips, OS specific builds

- container technology e.g. Docker, AWS ami

## DB

- schema design

- ORM

- language/env specific driver

- test/seed data

- backup

- batching, DB perfgomance

- query syntax, e.g. SQL, mongo query syntax

- connection pool/concurrent connection management

- connection restriction e.g. localhost only

## MessagingQueue/Middleware

## Testing

- parallel execution

- UI automated testing

- browser/OS compatibility, e.g. headless browser, cloud solutions

- screenshot diff regression

- unit test, isolation

- mocking

- integration test techniques

- coverage (line coverage, path coverage etc.), permutations

## Security

- CSRF, XSS, SQL injection, DDoS, brute force etc.

- automated tools


## OS

- OS differences, e.g. filesystem, path separator

- run daemon, startup job, process manager

- ssh

- everything bash, zsh, powershell, e.g. wildcard, expansion, syntax

- everything *nix, du, filesystem, ps, process model, netstat, pipes

## networking

- HTTP, and everything it entails e.g. CORS, MIME types, chunked

- websocket

- webworker, service worker

- proxy

## Web visualization technologies and principles

- webgl

- 2D/3D coord system and calculations

## Web standards, e.g. webassembly

## performance tuning

- frontend: lighthouse

- backend: load balancing, perf monitoring and profiling

## Source control

- work flow

- tagging, release, branching

- PR, collaboration

- commit message conventions

## Project management, Product management

- main success scenario

- PRD doc, sketch

- milestone, timeline, estimate

- daily report, weekly report

## Software Monitoring

- performance monitor

- exception monitor

- alert and alarm rules

- logging

## Engineering

- lint, prettier, custom rules, autofix

- editor, IDE, plugins, e.g. intellisense

- debugging, remote debug, debug mobile

## Analytics

- heatmap

- conversion

- bounce rate

## Frontend

- data flow

- state management

- componentization

- transpile, packing tool, e.g. webpack gulp coffeescript Typescript

- templating, e.g. handlebar

- ajax, jsonp etc.

## Design / styling

- cascading rules

- preprocessor, e.g. scss less

- box model

- z-index

- flexbox

- design principles, layout, color, theme

# 3 参考阅读

https://medium.com/coderbyte/a-guide-to-becoming-a-full-stack-developer-in-2017-5c3c08a1600c

https://medium.com/codingthesmartway-com-blog/the-2018-roadmap-to-fullstack-web-development-8884ff02557a

https://www.lynda.com/learning-paths/Web/become-a-full-stack-web-developer

# 4 更多讨论

> 讨论地址是：[精读《Elements of Web Development》 · dt-fe/weekly](https://github.com/dt-fe/weekly/issues/71)

**如果你想参与讨论，请[点击这里](https://github.com/dt-fe/weekly)，每周都有新的主题，每周五发布。**