image.png
    线上监控，分两个部分：数据采集；数据展现。

    工具链是一系列互相配合的工具，能够协作完成开发任务（注：工具链这个词最早是由 C/C++ 程序员引入的概念，一般包含编译、链接、调试等工具）。
    npm 帮助我们进行包管理，Yeoman 帮助我们初始化项目模板。
    初始化项目；运行和调试；测试（单元测试）；发布。
    Yeoman； webpack； ava/nyc； aws-cli
    一般来说，以下指标跟开发者体验较为相关：调试 / 构建次数；构建平均时长；使用的工具版本；发布次数。

    持续集成是近现代软件工程中的一个非常重要的概念。它是指在软件开发过程中，以定期或者实时的方式，集成所有人的工作成果，做统一的构建和测试。
    与持续集成相对的做法是：独立开发各个模块，在软件开发的最终阶段才做集成。持续集成的优势是及早处理集成阶段的问题，使软件质量和开发进度可控。
    持续集成还有升级版本：持续交付和持续部署，

    传统软件的持续集成主要有以下措施。

    • daily build：每日构建，开发者每天提交代码到代码仓库，构建一个可运行的版本。
    • build verification test（BVT）：构建验证测试，每日构建版本出来后，运行一组自动化的测试用例，保证基本功能可用。

    目标：一是要及早集成代码形成可测试的版本，二是通过一定的测试来验证提交的代码的有效性。
    前端的持续集成的措施：

    • 预览环境，代替每日构建，前端每次（或指定次）提交代码到仓库都同步到预览环境，保证预览环境总是可用；
    • 规则校验，代替构建验证测试，通过数据采集（如前面提到的性能数据）和代码扫描，保证提交的代码满足一定的质量要求。规则校验可以分成三种措施：
      • 页面结构扫描；使用无头浏览器（如 phantomjs）配合一些 JavaScript 代码编写的规则来完成。
      • 运行时数据采集；通过在页面插入公共 js 文件的方式来完成，最基本的是用 Performance API 来采集性能数据，用 window.onerror 来采集 js 错误。
      • 代码扫描。比如 JSHint，你可以根据实际需要，选择社区方案或者自研。

    组件化
    前端是个天然按照页面解耦的技术，在多页面架构中，页面的复杂度大约刚好适合一个人的工作量。
    现行的组件化方案，目前有五种主流选择：

    • Web Component；是 W3C 推行的规范，Shadow DOM 的设计比较复杂。CSS 也比较难以应用，需要依靠 CSS Houdini。优势：不需要任何额外的运行时支持，就能在现代浏览器环境运行，也可以跟 HTML 无缝结合。
    • Vue；特点：一个是比较符合原本的 JavaScript/CSS/HTML 书写习惯；另一个是它绑定了 MVVM 模式，直接确定了 UI 架构，通过 DSL 的支持，数据交互非常简洁。
    • React；利用 JSX 模式，把 HTML、CSS 和 JavaScript 都放进了 js 文件中。可以迁移到 React Native，直接编写简单的客户端应用。
    • Angular；核心竞争力是与 TypeScript 结合得较好。
    • 自研。

    兼容性和适配性

    • 单位英寸像素数（Pixel Per Inch，PPI）：现实世界的一英寸内像素数，决定了屏幕的显示质量。PPI 主要影响的是文字，可以采用 media 规则来适配。
    • 设备像素比率（Device Pixel Ratio，DPR）：物理像素与逻辑像素（px）的对应关系。DPR 适配则需要用到 CSS 的 viewport 规则来控制缩放比例解决。
    • 分辨率（Resolution）：屏幕区域的宽高所占像素数。分辨率适配可以使用 vw 单位解决。

    单页应用
    单页应用（SPA）解决浏览器加载 HTML 时是会有白屏过程的问题。
    缺点：前进后退历史使用 URL 的 Hash 部分来控制，但是 onhashchange 事件并没有提供前进或者后退信息

    前端架构还包含了很多 Native 开发任务：如客户端和前端结合的方案 Weex 和 React Native；如前端和图形学结合的方案 GCanvas；如前端的 3D 框架 Three.js