非潮流前端项目架构

作者: 脱非入欧 | 来源:发表于2017-03-13 21:42 被阅读31次

    项目特征

    • 运行于第三方 APP 内,需要以 H5 等相关后台技术为基础。
    • UE 、 UI 、静态页面由合作公司开发,然后再套用到前端项目中。
    • 页面较少,但需要在第三方 APP 内进行多次 webview 切换,路由需要自己负责,第三方 APP 不提供支持。
    • 动静分离。
    • 前端前端技术采用 React 、Webpack 、 Babel 等,开发时热更新。
    • 没有 redux ,没有 RxJS ,没有 SEO 。
    • Web api 采用 Spring ,部署于 WAS 。
    • 后端较重,使用 Dubbo 等。

    组织架构

    前端的工作流程如图。

    前端工作流.png
    面临的问题主要有
    • UE 设计缺乏设计规范和支撑实施设计规范的组件库,经常会出现分支流程缺失的情况。比如某个流程失败,某几个展示要素缺失等。
    • UE 设计的缺失导致 UI 没有对此进行设计,因此静态页面也缺少相关实现。比如一个物品最多可以展示 5 个标签,只实现了展示 5 个标签和不展示标签。
    • 反馈流程过长,许多上述问题在开发阶段和测试阶段才暴露出来。
    • 组件化受限于静态页面开发质量,影响组件化的实施。

    模板套用

    因为项目组内缺乏对 css 、 less 、 scss 、 postcss 等熟悉的工程师,所以从 UI 到静态页面是从外部公司采购的。我们拿到的静态页面是这样的。

    - app
    |-- css
    | | |-- app.css
    |-- image
    |-- html
    | | |-- pageA.html
    | | |-- pageB.html
    

    拿到之后,将静态资源复制到对应的目录下,然后将 html 的内容改写成 jsx 。很多页面展示内容和业务强相关,可以共用的组件基本就是 header , modal , toastr ,存储和路由等。

    代码组织

    前端代码采用动静分离,分为两个部分:页面代码和 web api 。

    页面代码组织

    Java 项目的工程化是非常成熟的,页面代码参考 Java 项目,该分层的分层,该配置管理的配置管理。

    • 按照页面划分路由,每个页面保存自己的 state ,全局变量使用 localStorage 来传递。
    • 由于存在 webview 切换的问题,没有使用 redux 等,当然也可以考虑切换前利用 localStorage 持久化,切换后用其初始化。
    - app
    |-- asset // 构建输出目录
    |-- css // 样式源文件目录
    |-- image // 图片源文件目录
    |-- node_modules // npm 仓库
    |-- scripts // js源文件目录
    | | |-- pages // 相当于一般 react 项目中的 container
    | | | | |-- [Page] // 页面目录
    | | | | | | |-- index.js // 入口文件
    | | | | | | |-- [Component].js // 页面组件文件,0 到多个
    | | |-- routes // 封装页面为 react-router lazy-load 组件
    | | | | |-- [Page] // 对应页面目录
    | | | | | | |-- index.js // 页面 route 配置文件
    | | |-- utils // 公共库
    | | | | |-- polyfill // 适配第三方 APP 的代码
    | | | | |-- [CommonComponet] // 公共 react 组件目录,如 Toastr
    | | | | |-- Example // 示例代码目录
    | | | | |-- global.js // 基础公共函数库
    | | | | |-- browserHistory.js // history.js + react-router 
    | | | | |-- clientStorage.js // 使用 cookie / storage 本地存储
    | | |-- app.js // 客户端 js 入口
    | | |-- index.ejs // 生成入口 html 的模板文件
    |-- tools // 构建相关源文件目录
    | | |-- clean.js // 清理历史构建文件
    | | |-- zip.js // 构建输出打包
    | | |-- copy.js // 管理外资源拷贝,如 favicon.js
    | | |-- start.js // 开发用 web server,基于 webpack-dev-server
    | | |-- verify.js // 验证构建结果的 web-server
    | | |-- ...
    |-- .babelrc // 目前配置在 package.json 里
    |-- .eslint // 代码规范校验
    |-- .eslintIgnore // 忽略代码规范校验
    |-- package.json // npm 描述文件
    |-- webpack.config.[target].js // 对应各个环境的 webpack 配置。
    

    页面构建

    项目主要通过 webpack 构建静态资源。webpack 的构建以配置文件中的 entry 为起点,对依赖的资源进行静态分析,然后通过 loaders 和 plugins 进行处理,输出到 output。


    webpack 工作流.png

    构建时的性能优化

    • 通过 CommonsChunkPlugin 抽取公共函数库,打包成单独的 js chunk 。
    • 通过 UglifyJsPlugin 压缩 js 。
    • 通过 css-loader 压缩 css 。
    • 通过 url-loader 将小图片转为 base64 ,减少小文件请求。
    • 通过 webpack 提供的 importreact-router 配合使用,实现延迟加载的功能,进一步提升首屏加载速度,保证各个页面的加载速度。

    Additional

    • 在 pre-build 阶段,提供清理之前构建,复制依赖之外的资源等功能的脚本。
    • 在 post-build 阶段,提供输出目录压缩,启动模拟目标部署环境 web server 验证等功能的脚本。

    web api 代码组织

    web api 是典型的 maven web project 。

    - project
    |-- src
    | | |-- main
    | | | | |-- java // java 源文件
    | | | | |-- portable // 构建时的部署环境配置
    | | | | |-- resources // 各种依赖配置,如 spring,dubbo , redis , shiro , logback , shiro 等。
    | | | | |-- webapp
    | | | | | | |-- web.xml // 主要是 web.xml 的配置。
    | | |-- test // 对应同级 java 目录的单元测试文件
    |-- pom.xml // maven 描述文件,项目对象模型
    

    Java 里充当 express/koajs 等角色的实际上是 web 容器,Spring 对应的是 express/koajs 生态圈的一揽子方案,包括了 route 、 template 、load 等等。

    web api 构建

    所有的项目构建其实内容都差不多:预处理 -> 处理 -> 后处理 -> 输出。maven 就等于是 Java web 的 npm + webpack 。
    npm install, webpack -> maven install

    运行态

    此时前台访问一个页面的过程大致上如图。


    前端架构运行时.png

    静态资源服务器使用 nginx ,没有做同构直出。为了正确渲染页面,任意请求返回的都是同一个 index.html (try_files),该 index.html 含有 app.css ,外壳 + 路由配置的 app.js 。app.js 加载完成后,则会进一步 lazy-load 对应 uri 所需的 js 文件。

    因此,初次访问或者缓存过期的情况下,一个页面的访问有:

    1. 请求 index.html 。
    2. 请求 app.css 。
    3. 请求 app.js 。
    4. 请求 vendor.js 。
    5. 请求 [route].js 。
    6. 请求其他静态资源,如静态图片资源。
    7. 其他动态请求。

    而 app.css 、 app.js 、vendor.js 在缓存后如果是 304 ,并不会再次请求。

    TBC

    • less/scss/postcss 。
    • 后端渲染。
    • RN 。
    • koa&pm2 。

    相关文章

      网友评论

        本文标题:非潮流前端项目架构

        本文链接:https://www.haomeiwen.com/subject/rqongttx.html