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