内容来源:2018 年 1 月5 日,网易NEI产品负责人包勇明在“2018移动技术创新大会”进行《网易高效多端应用协作开发实践》演讲分享。IT 大咖说(微信id:itdakashuo)作为独家视频合作方,经主办方和讲者审阅授权发布。

阅读字数:1958 | 5分钟阅读

嘉宾演讲视频及PPT回顾:suo.im/5bH62T

摘要

在实际项目开发过程中,前后端分离开发是比较受关注的问题,本次分享会讲述开发所面临的问题背景以及 NEI 如何提供的完整解决方案。

产品开发步骤

现在的产品开发一般是按照交互稿、视觉稿、开发、测试、发布这样的流程进行。本次我们重点探讨开发领域,涉及到客户端以及服务端。

在没有交互稿的时候,开发也可以做一些前期准备,比如前后端的技术选型、环境搭建,另外后端还有建模的过程。

前后端并行开发

开发过程中的理想状态应该是前后端并行开发,这在业界也是比较热门的概念,但是对一些没有技术积累的传统企业来说实现起来还是有一定难度。

整个过程中前端使用Mock Server后端进行接口测试,中间约定API契约,然后进行前后端并行开发,最后进行联调。理论上联调成本会很小,因为Mock Server是依照API契约进行开发的,而后端也同样是按照约定定义接口。

接口管理平台

交互稿设计完成后就轮到接口的设计,传统的接口文档有IM、txt、word、wiki、Swagger这几类。它们普遍存在表述不清晰或者格式混乱的问题,使用接口管理平台能有效解决这类问题。

彻底实现前后端分离的过程中有着一个阻碍,即如何处理模板。模板是在后端环境中运行的,有ftl、php、ejs等各种类型。前端开发中如果还要涉及到后端环境,那么这就不是彻底的前后端分离。为此我们实现了能够解析模板的Mock Server,它可以获取模板中的真实数据,比如登录的用户数据,而只使用Mock模拟数据有些业务逻辑是无法实现的。

前后端分离中需要有模板化,所以除了接口规范外还要有页面规范。另外手动实现Mock Server是有一定成本的,我们为此提供了配套的构建工具,用来解析模板、Mock接口。

实践方案

NEI协作体系

从交互阶段开始就可以根据交互稿设计接口,接着通过构建工具生成初始化代码,前后端开发完成后进行自测。自测的过程中,由于前端的Mock数据都是生成在本地或者是平台提供的接口,所以可以通过修改数据进行更充分的自测。后端则主要是对接口是否符合定义的测试,我们也提供了这方面的工具。最终这样就能有效降低联调的成本。

接口

接口的设计人员首先要对系统功能非常了解,其次对前后端开发都有所涉猎,了解前端的功能实现以及后端的接口实现。因此我个人是倾向于前端架构师这一角色,但是很多公司其实是没有这一职位定义的。

接口的设计必须遵循业界规范,比如Restful接口规范。然后要描述清晰,不能遗漏重要信息。

数据模型

实际开发过程,后端在创建接口的时候会事先建立数据模型,并进行一些增删改查。前端也有一套对应的数据模型抽象,这样做的优点在于能够实现复用、规范以及自动化。

NEI支持的数据模型

NEI构建工具原理

通过接口定义NEI平台上的数据规范,再使用NEI Toolkit导出规范,最后使用Express启动服务。

NEI中的接口规范定义请求与数据的关系;页面规范定义页面与模板、接口的关系;模板规范定义模板与数据的关系。

NEI的模拟容器

图中是NEI的模拟容器,接口、页面都被直观的展现出来。它的主要功能有页面Mock、接口Mock、监听静态文件以及其他前端频繁用到的功能。

前端自测

上图是构建工具生成的Mock数据文件,其中data.json就是Mock值,data.js主要是做一些拦截。前端的自测可以修改data.json数据以及data.js过滤器。

后端自测

NEI集成了接口测试功能,比如验证字段类型是否匹配、字段值是否符合定义、字段是否缺失或多余以及自动生成测试报告和批量运行用例等功能。

前后端联调

前后端联调理论上只是服务器环境的地址不一样,本地开发使用Localhost服务器,要使用其他环境只需将Localhost替换成相应地址。一般定义时不用设置Localhost这块的地址,只关注后面的地址。

地址变更只需要修改配置文件Server.Config.js。

其他方面的探索和实践

我们还做了其他方面的探索和实践,包括迁移老项目、团队协作、支持业界标准、对测试工程师的支持、支持典型产品。

网易NEI在面临前后端分离问题,所提供的完整解决方案相关推荐

  1. 网易音乐网站系统|前后端分离springboot+vue实现在线音乐网站

    作者主页:编程千纸鹤 作者简介:Java.前端.Python开发多年,做过高程,项目经理,架构师 主要内容:Java项目开发.毕业设计开发.面试技术整理.最新技术分享 收藏点赞不迷路  关注作者有好处 ...

  2. 前后端分离项目跨域问题及解决方案

    目录 1.什么是跨域 2.前后端分离项目中的跨域问题 3.方法一:SpringBoot后端进行处理 4.方法二:在Vue前端进行处理 5.总结 1.什么是跨域 请求同域资源: 在域名 (或 ip 地址 ...

  3. 前后端分离项目,跨域问题解决方案

    1.什么是跨域? 要了解跨域,先要说说同源策略. 同源策略是由 Netscape 公司提出的一个著名的安全策略,所有支持 JavaScript 的浏览器都会使用这个策略. 由于浏览器同源策略的限制,非 ...

  4. 基于windows系统前后端分离多端发布的调试解决方案(WSL+Nginx反向代理+编辑器debug+内网穿透)

    今天是 怪物猎人崛起 的发售日,早点撸完回家砍龙

  5. web前端项目(一) 做一个网易考拉官网 常规静态页面 + 页面放到http服务 + 前后端分离

    1 新建文件夹 分css img 文件夹 index.html 静态页面 2 将本地做的静态页面放到 http 服务 localhost:8080 设置nodejs静态目录 npm install e ...

  6. 前后端分离的思考与实践(三)

    Midway-ModelProxy - 轻量级的接口配置建模框架 前言 使用Node做前后端分离的开发模式带来了一些性能及开发流程上的优势(见<前后端分离的思考与实践 一>), 但同时也面 ...

  7. 前后端分离实践(试探篇)

    为什么80%的码农都做不了架构师?>>>    按照以往的开发模式,前端人员制作好静态页面交给与后端人员进行动态嵌套开发.迭代模式带来一系列问题,静态页面套成动态后,一些操作.业务. ...

  8. 基于VUE只是作为模版引擎的前后端分离

    首先请原谅本文标题取的有点大,但并非为了哗众取宠.本文取这个标题主要有3个原因,这也是写作本文的初衷: (1)目前国内几乎搜索不到全面讲解如何搭建前后端分离框架的文章,讲前后端分离框架思想的就更少了, ...

  9. 你需要来自trustedinstaller的权限才能删除_前后端分离后的权限控制设计方案

    近几年随着react.angular.vue等前端框架兴起,前后端分离的架构迅速流行.但同时权限控制也带来了问题.网上很多前.后端分离权限仅仅都仅仅在描述前端权限控制.且是较简单.固定的角色场景,满足 ...

最新文章

  1. 【怎样写代码】工厂三兄弟之抽象工厂模式(一):问题案例
  2. Interface Builder 和UIController的联系
  3. python三十七:xml模块
  4. SpringCloud 应用在 Kubernetes 上的最佳实践 — 部署篇(开发部署)
  5. python列表删除重复项_五分钟学会三种Excel重复项删除方法,工作效率大杀器!...
  6. G6 图可视化引擎——入门教程——图的交互 Behavior
  7. Android下集成Paypal支付
  8. c#操作Xml(四)
  9. 未来计算机的功能猜想,全方位猜想,未来计算机发展详细预测
  10. c语言 静态变量 初始化,c – 静态变量初始化两次
  11. 编译:ffmpeg,精简ffmpeg.exe
  12. 科学院开放资源github_什么是开放科学?
  13. Verify_Execute 验证SQL语句执行结果
  14. [转载] 分布式系统trace实践
  15. DirectX11 学习笔记3 - 创建一个立方体 和 轴
  16. aes解密流程图_AES加密算法详解
  17. cocos2d里面如何实现mvc系列
  18. 计算机函数sumif求平均值,EXCEL的经典函数sumif的用法和实例(详细汇总)_excel函数_office之家...
  19. 头像上传(限制大小,格式,尺寸)
  20. 风险投资(VC)与私募股权投资(PE)的区别

热门文章

  1. jQuery 拖拽窗体
  2. Android入门(11)| 全局广播与本地广播
  3. (二)容器从入门到深入-初识Kubernetes
  4. 开始入坑深度学习(DeepLearning)
  5. Python(28)-文件,os模块
  6. 机器学习算法分类总结
  7. 《Java8实战》笔记(05):使用流
  8. c++ memory 头文件详细介绍
  9. 值类型和引用类型的区别
  10. OpenCL memory object 之 传输优化