全栈工程思考

简介

1、web应用的生命周期

1.jpg

2、遗留系统与新架构

当我们决定使用新架构重新设计系统时，原因一般就两个：

• 系统已经变得难以维护：大量的代码没人知道其业务逻辑；代码间的耦合度过高；项目所使用的技术栈已经过时；团队的技术栈在成员变动的过程中不相符。
• 系统的技术栈难以符合业务的需求：随着业务的扩张，现有技术栈难以满足当前业务的需求或出现性能上的瓶颈

3、技术选型与验证

2.jpg

做技术选型的时候，要尽最大可能以团队为核心！

github上搜索一些名字中带有boilerplate的项目，即模块文件；

当一个框架很流行的时候，去相应的awesome-xx寻找

克隆这样一个项目，开始依照现有的系统创建简单的demo

依据业务试着在这上面进行扩展，最后，在决定是否使用这门技术和框架

4、搭建构建系统

3.jpg

5、迭代

4.jpg

一个好的迭代周期既应该有充足的时间修复上一个迭代的bug，又能在下一个迭代开始之前交付重要的功能

6、web应用开发步骤

编码：

• 将需求拆分为几步，这个过程称为tasking
• 前后端联合开发的基础：api，可通过mock服务
• 通过版本管理工具在最小可用应用上添加代码
• 测试覆盖
• 重构保证代码质量

上线和数据分析

• 上线：本地构建——上传软件包——安装软件的依赖——重启服务器
• 数据分析：可以借用数据分析工具检测用户的行为，网站的访问量等信息

一、准备阶段

选择一个合适的IDE到创建一个web应用的构建流

1、搭建开发环境

• 包管理工具：window——chocolatey，linux——自带，Mac OS——Homebrew
• 快速启动工具：window——wox，linux——Launchy
• 命令行工具：window——cmder，linux——Zsh，Mac OS——iTerm 2

版本管理——git——图形化git（sourceTree）

2、任务拆分

• 有个明确的实现目标
• 评估目标并将其拆解成任务（TODO）
• 规划任务的步骤（TODO）
• 学习相关技能
• 执行Task，遇到难题就跳到第二步

eg：开发一个博客系统

• 先规划一下所需要的功能——如后台、评论、社交分享等，并且还应该设计博客的草图。
• 随后就可以简单设计一下系统的架构，如传统的前后端结合
• 进行技术选型——使用哪个后端框和前端框架
• 创建我们的‘hello world’，然后开始进行一个功能的编码工作
• 编码时，需要不断地查看，添加测试操作
• 完成一个个功能后，就会得到一个子模块
• 依据一个个子模块，可以得到我们的博客系统

开发前需要先划分任务的优先级

三、最小可行化应用

如何使用精益的思想来开发用户喜爱的产品

1、设计原型图——Pencil

• 对比：突出你想让用户看的内容
• 重复：重复出现视觉要素，保持一致性。这点可以体现在字体、颜色、大小等部分。
• 对齐：让元素与元素间有视觉联系
• 亲密性：让相关的项目归组在一起

2、选择一个web框架——bootstrap

3、简单上线

四、技术选型与业务

概览后台开发所需技术

五、构建系统及其工作流

介绍web应用中常见的构建流程及组件