Elements of web development

1 引言

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

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

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

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

4 列表

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

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

  • HTTPS, certs

  • 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, fiddler/charles, wireshark, node-chrome. Stepping, breakpoints (conditional etc.)

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

5 参考阅读

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

6 更多讨论

讨论地址是：精读《Elements of Web Development》 · dt-fe/weekly

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

Written on April 18, 2018