精读《Elements of Web Dev》

作者: 图恩分类: 编程开发阅读: 683发布时间： 2021-08-21 18:35:49

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

如果你想参与讨论，请点击这里，每周都有新的主题，每周五发布。

本文章由javascript技术分享原创和收集