51. 精读《Elements of Web Dev》

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

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