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

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

以下是笔记,以备回顾。

一、什么是全栈工程师

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

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

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

  4. 全栈工程师发展前景
    • 一专多长
    • 解决问题,而不是醉心技术
    • Done is better than Perfect !

二、如何成为全栈工程师

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

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

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

三、从学生到工程师

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

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

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

四、野生程序员

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

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

五、工程师事业指南

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

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

六、全栈工程师眼中的http

  1. http简介
    • OSI模型(开放式系统互联通信参考模型)

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

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

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

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

  2. 服务器缓存
    • 可以开启MySQL查询缓存来提高速度
    • 扩展数据库缓存memcached:高性能分布式内存对象缓存系统,用于减轻数据库负担。
    • 再加一层文件缓存:除了可以将数据库查询结果缓存在内存中,还可以将频繁造访的数据缓存在文件中。

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

八、大前端

  1. 前端工程师:一个需要终身学习的行业
  2. 知识体系
    ① 初级工程师:
    • 对浏览器兼容性的了解
    • 对HTML/CSS/JavaScript语法和原理的理解
    • 对编辑器和插件的熟悉程度
    • 对调试工具的了解程度
    • 对版本管理软件的熟悉和应用经验
    • 对前端库/框架的使用。
    • 标准/规范
    ② 中级工程师
    • 对代码质量、代码规范的理解
    • 对JavaScript单元测试的熟悉
    • 对性能优化的应用和理解
    • 对SEO的应用和理解
    • 代码部署
    • 移动web
    ③ 高级工程师
    • 代码架构
    • 安全
    • 对自动化测试的理解

九、向移动端转型

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

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

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

十、持续集成

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

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

  3. 包管理
    • Node.js
    • Bower

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

  5. Make
  6. 依赖关系
  7. Grunt和Gulp

十一、理解编程语言

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

  2. 首选语言
    • Java
    • JavaScript

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

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

十二、全栈游乐场

  1. VPS(虚拟专用服务器)是把一台服务器分割成多个虚拟专享服务器的优质服务。每个VPS都可分配独立公网IP地址、独立操作系统、磁盘空间、内存、CPU资源、进程和系统设置,模拟出“独占”使用计算机资源的体验。
  2. 有钱了再说(580元一年)

十三、软件设计方法

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

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

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

十四、高效工程师

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

  2. 时间管理四象限

  3. 消除重复工作
  4. 给自己留出不被打扰的时间
  5. 番茄工作法
  6. 跨界思考
  7. 纸上头脑风暴
  8. 使用版本控制工具和构建系统

十五、设计基础

  1. 设计的四大基本理论《写给大家看的设计书》
    • 亲密性
    • 对齐
    • 重复
    • 对比

  2. 设计工具:
    • Axure
    • Sketch
    • Quart Composer
    • 代码

0%