《web全栈工程师的自我修养》读书笔记

说起来还真的是惭愧,这本书是我在寒假之前就从图书馆里借到的,处在职业迷茫期的我看见这本书的书名,如获珍宝。但是拖延症使我在开学后才开始看,但是由于时间充沛,我终于在接下来的的三周内看完了这本书。

标签内是后面回顾时候的批注。

以下是笔记,以备回顾。

什么是全栈工程师

定义

  • 一个能处理数据库、服务器、系统工程和客户端的所有工作的工程师。
  • 全能的“大神”。

现在看来,从前端入门的话很难成为全栈工程师。—— 2020-01-07

web开发流程

  • 产品经理 → 交互设计 → 视觉设计 → 前端开发/后端开发 → 测试 → 发布

全栈工程师

  • 需求不断上升
  • 代表性全端框架–MEAN(MongoDB-Express-AngularJs-Node.js)
  • 提供PaaS(Platform as a Service 平台即服务)服务的平台越来越多。

如今国内前端框架领域基本已经是React和Vue的天下,纯前端也只是做一些物料,业务甚至会交给后端去写(听说阿里是这样的)。—— 2020-01-07

全栈工程师发展前景

  • 一专多长
  • 解决问题,而不是醉心技术
  • Done is better than Perfect !

一专多长 解决问题。—— 2020-01-07

如何成为全栈工程师

先精后广,一专多长

  • 先在一个特定的方向上有比较深入的钻研,然后再将学习的目标渐渐推广开来。
  • 掌握了基本的html、CSS、JavaScript之后,不要转头向服务器端语言或者APP方向发展,而是深入到性能优化、SEO(Search Engine Optimization 搜索引擎优化)、多种框架、响应式页面等前端细节中去。
  • 在招聘要求的方向上以200%的能力来得到这个职位。
  • 作为求职者,一定要在某个特定方向上有非常深入的理解。

不追求前后通吃,在前端的领域里面已经有很多可以值得深入的方向了。—— 2020-01-07

围绕商业目标

  • 把关注点放在商业目标而不是技术上,就能选择出更适合完成商业目标的技术,这样才能做出更客观的决定。这个过程中学到的是一种潜在的思维方式。

关注用户体验

  • 每一个糟糕的体验背后都蕴含着商机。
  • 用户:所有你为之服务的人。
  • 大巧若愚:真正聪明的人,不会显露自己,反而从表面上看好像还很笨。

难道我要装傻吗?🤣。—— 2020-01-07

从学生到工程师

校园招聘

  • 前端工程师的基本常识:结构、表现和行为要分离。技术层面上讲,网站的内容使用语义化的HTML标签,而不参杂任何表现和逻辑;网站样式表现用CSS来描述,既能在多个页面之间复用,也可以根据不同的用户来分别定义外观;页面行为逻辑用JavaScript来实现,这样保证浏览器在禁用JavaScript的时候,页面也能进行渲染和使用。
  • 如果你的学校不是顶级,你的成绩不是学霸,那就要走不寻常的道路。

获得面试机会

  • 学习能力
  • 第一份简历:确定求职意向,不要使用简历模板,把简历发送到真正招人的企业主管那里。

实习

  • 实习能提升自己的实践能力,是学生到社会人士的一个身份过渡。
  • 记住团队的每一个人;有任何问题,主动问导师;主动介绍自己,告诉大家自己是新人,请多关照;每周发邮件记录心得总结、经验教训、学习成长;实习结束时,用邮件总结所有项目,给出交接文档,并向大家致谢。
  • 主动性是全栈工程师必须的一个特质,没有一个全栈工程师是别人逼出来的。

自己当初好像并没有做到。—— 2020-01-07

野生程序员

web性能优化(页面加载速度,页面渲染性能)

  • 压缩原码和图片:JavaScript混淆压缩;CSS普通压缩。
  • 选择合适的图片格式:颜色多:JPG;颜色少:PNG;WebP、SVG…
  • 合并静态资源:包括CSS、JavaScript和小图片,减少http请求。
  • 开启服务端的Gzip压缩:对文本最有效
  • 使用CDN
  • 延长静态资源缓存时间
  • 把CSS放在页面头部,把JavaScript放在页面底部。

选择大公司

  • 较小的风险、技术最佳实践、垂直专精的技能、服务海量用户的经验、软技能、人脉、心态。

还是要去一去大公司。—— 2020-01-07

工程师事业指南

3个核心词:技术、成长、声望

  • 技术是武器,成长就是好好打磨武器,声望是一生的积累。
  • 获得良好的声望—答应做的事,全部都要完成。
  • 如果上司真的给出了一个非常棘手的问题,不能直接拒绝,也不能完全答应。应该讲出事实。

积累作品集

  • 做任何事情之前必须有一个问题要回答:我做这件事的目标用户是谁?
  • GitHub

全栈工程师眼中的http

前端视角

  • 职责:让网站又快又好地展现在用户的浏览器中。
  • 尽量减少同一域下的http的请求数。
  • 把静态资源放在非主域名下,可以增加浏览器并发,还可以减少http请求中携带的不必要的cookie数据。cookie的作用域是整个域名。
  • 合并同一域名下的资源,如把多个CSS合并成一个CSS,或者将图片组合为CSS贴图(sprite image)。
  • 尽量减少每一个资源的体积
  • 图片格式
  • 较大的文本资源必须开启gzip压缩

后台视角

  • 关注在于让服务器尽快响应请求,减少请求对服务器的开销.
  • 浏览器限定对某个域的并发数。

高性能网站的关键——缓存

什么是缓存

  • 存储频繁访问的数据
  • 内存缓存减少磁盘I/O
  • 保存耗时的操作,以便下次使用

浏览器缓存

  • 对于动态生成的HTML页面使用HTTPS头:Cache-Control:no-cache。
  • 对于静态HTML页面使用HTTPS头:Last-Modified。
  • 其他所有的文件类型都设置Expires头,并且在文件内容有所修改的时候修改Query String。(并且在文件内容有所修改的的时候修改文件名)

大前端

前端工程师:一个需要终身学习的行业

知识体系

  • 初级工程师:
    • 对浏览器兼容性的了解
    • 对HTML/CSS/JavaScript语法和原理的理解
    • 对编辑器和插件的熟悉程度
    • 对调试工具的了解程度
    • 对版本管理软件的熟悉和应用经验
    • 对前端库/框架的使用。
    • 标准/规范
  • 中级工程师
    • 对代码质量、代码规范的理解
    • 对JavaScript单元测试的熟悉
    • 对性能优化的应用和理解
    • 对SEO的应用和理解
    • 代码部署
    • 移动web
  • 高级工程师
    • 代码架构
    • 安全
    • 对自动化测试的理解

向移动端转型

大势所趋

  • 前端工程师是直接针对用户的客户端来编程的,当用户的客户端变成了手机浏览器和手机APP,前端工程师自然要转移战场。

一定要是自己的产品的用户

  • 客户需求只有在实际使用中才能辨明,再多的前期调研也只能发现客户认为他们想要什么,而不是客户实际上想要什么。因此在不了解客户真实需求的情况下,只会多做多错。

有哪些方向

  • Android 原生APP
  • Web APP
  • 微信公众号平台
  • 混合模式APP:即原生技术和web技术相结合的一种APP,兼具原生APP良好的用户交互体验的优势和web APP跨平台开发的优势。
  • 把webview的部分或者所有资源打包在APP中。
  • 把需要加载的资源设置好预先加载。
  • 使用HTML5 Manifest技术实现资源缓存
  • 不要把整个APP的主要逻辑都使用webview来实现。
  • 设计的像一个APP,而不是一个网页。

持续集成

版本控制

  • 利用版本控制工具来管理项目从开始到定案的过程。
  • SVN
  • Git

版本控制最佳实践

  • 鼓励频繁的提交
  • 确定分支流程
  • 定义主干原则,并坚守它
  • 不要把逻辑的修改和代码格式化操作混在一起
  • 不想干的代码要分开提交
  • 保持工作代码库的干净。

包管理

  • Node.js

好的架构

  • 有合适的分离粒度
  • 最小知识原则:一个组件或者对象不应该知道其他组件或者对象的内部实现细节。
  • DRY(Don't Repeat Yourself):特殊的功能只能在一个组件中实现,在其他组件中不应该有副本。
  • 最小化预先设计,只设计必须的内容
  • 通过良好的层级,让文件容易找到
  • 在代码层面,有一致且可执行的命名规则。

    依赖关系

    Webpack

理解编程语言

语言的进化

  • PHP已经转变为一种胶水语言,连接前端HTML和C++应用逻辑。

首选语言

  • Java
  • JavaScript

全栈工程师最佳实践

  • 框架和库扩展了语言:Ruby on Rails。
  • 全栈工程师的目标往往是解决商业问题,不一定需要长期完美的方案。
  • 先选择框架,然后选择语言。

脚本语言的优势

  • 脚本语言(script language)是指支持用脚本的方式编写程序的语言,它无需编译即可直接在运行环境中解析。
  • 开发效率高,执行效率低
  • 不需要编译
  • 常常不用关心清理内存
  • 常常针对特定领域优化
  • 常常是动态类型语言
  • 抽象层常常更高
  • 常常有包管理器

软件设计方法

设计模式:详见《设计模式》

  • 创建型模式:用来创建对象的模式,对实例化的过程进行了抽象。
  • 结构型模式:主要解决类、对象、模块之间的耦合关系。
  • 行为型模式:用来识别对象之间的常用交流模式并加以实现。

架构模式

  • MVC模式:架构模式之王。3个基本部分:模型(model)、视图(view)和控制器(Controller)。
  • 在目前在用的语言后面加上mvc framework去搜索:比如JavaScript mvc framework:AngularJS 、backbone.js ···

设计原则

  • DRY(Don’t Repeat Yourself):在一个系统里,对于任何数据或者变量,都应该配置在有且只有一个地方,其他地方都应该引用这里的数据。这样,需要改动数据的时候,只需要调整这一处,所有的地方就都变更过来了。三次法则:相同代码重复出现三次以上,做成子程序。
  • 惯例优于设置
  • KISS原则(Keep it simple,stupid)
  • 最少知道原则:每一个单元都应该知道关于其他单元的有效信息:那些与自己密切相关的单元。每一个单元应该和自己的朋友讲话;不和陌生人说话。

高效工程师

阅读英文资料

  • 英文的技术资料更多
  • stackoverflow有完善的鼓励机制
  • google的搜索能力非常强
  • 英语世界的语言风格比较严谨

时间管理四象限

消除重复工作

给自己留出不被打扰的时间

番茄工作法

跨界思考

纸上头脑风暴

使用版本控制工具和构建系统

0%