框架 & 实践

Backbone VS Vue

携程的C端 VS 饿了么的B端

模块划分

所用到的开源库

1.技术栈backbone/underscore/require（2016年版） 

2.由于存在SEO需求，实现了SSR服务端渲染

3.为了解决APP端第一次加载慢，实现了hybrid打包

4.为了解决浏览器劫持用https但是后来又改了回来

5.为了解决无痕模式对loaclstorage和cookie做了无痕模式单独处理

 

携程的C端 

工程结构

Model: 调接口

store: localstorage

base: 父类

tools & commons

除controller以外

都打到config中

饿了么的B端

构建：自定义了模板包含内部库的 vue-cli  引入埋点采集/第三方地图

内部包：rpc实现， 封装了一些常见css minin 块 常量 css初始化等

兼容性（ie9以上）：（babel + whatwg-fetch + promise-polyfill） 或 ts

 + autoprefixer

锁版本：yarn 或 npm5

状态机：vuex  mutation 全部都用 action 操作

vuex的单向绑定 和 vue双向绑定冲突的问题？

深拷贝切断双向绑定/重写getter setter/

watch对象调用action

打包优化：合并重复包/多chunk（规划中）/按需加载

 

想做的

• 重新分包commonChunk
• Tree Shake: 自动删除无用依赖
• 优化webpack打包速度 dllplugin
• 子应用之间通信

整体架构 

• 首先有一个单页应用外壳，做权限控制和导航
  a）啥权限控制是异步的？ 权限还是绑定到id每次调接口验证
• 2.用iframe嵌套多个子应用，子应用根据领域划分用独立的仓库
  a）单页应用跳单页应用的白屏问题
• 每个子应用随着业务发展不断拆分

qidian-workbench

typescript

vue-property-decorator

 

TODO 分析dependence

前后端分离

 

统一的携程

 

五花八门的饿了么

ctrip

允许cookie, 跨域调用（允许单一域名）

测试环境: 跨域调用gateway

生产环境: 同源不同路径/实际上CORS属性都放开了

服务端渲染：通过node解析页面上的lizard-config 在 #main-viewport中渲染配置中接口调用的结果

ele

三种方案

httpizza：后端代理到前端域名上 （多活策略问题）

sopush：后端和前端代理到第三个域名上

ncp：完全通过CORS跨域访问

生产环境：二级域名之间相互通信

服务端渲染：暂无

 

测试

pupteer 的尝试

Ctrip

环境：1.alpha（下设多槽位）测试环境 2.uat 另一个测试环境？ 3.smoke 堡垒机： 在生产集群中拉出一台机器用于测试，测试完后放回  4.prod

Eleme

uat环境为多活环境

没有堡垒机

 

 

Eleme

       await page.goto('https://juejin.im')

      var login = await page.$('.login')
      await login.click()

      var loginPhoneOrEmail = await page.$('[name=loginPhoneOrEmail]')
      await loginPhoneOrEmail.click()
      await page.type('18516697699@163.com', {delay: 20})

      var password = await page.$('[placeholder=请输入密码]')
      await password.click()
      await page.type('123456', {delay: 20})

      var authLogin = await page.$('.panel .btn')
      await authLogin.click()

pupteer google官方的headless chrome

https://github.com/zhentaoo/puppeteer-deep

1.模拟用户操作，自动化测试/爬虫

2.结合定时脚本

function monitor() {
puppeteer.launch().then(async browser => {
    let page = await browser.newPage();

    await page.goto('http://www.zhentaoo.com/');
    await timeout(2000);

    let aTags = await page.evaluate(() => {
      let as = [...document.querySelectorAll('ol li a')];
      return as.map((a) =>{
          return {
            href: a.href.trim(),
            name: a.text
          }
      });
    });

    await page.screenshot({path: './data/zhentaoo/zhentaoo.png', type: 'png'});
    browser.close();
  });
}

monitor();
setInterval(monitor, 1000 * 60 * 5);

监控/进行自动操作

await page.tracing.start({path: './data/trace/trace.json'});
await page.goto('http://www.zhentaoo.com');
await page.tracing.stop();

3.结合Chrome Performance 的Trace Api

4.其他应用

生成骨架图

https://zhuanlan.zhihu.com/p/34702561

工具

饿了么的基础工具-开发

faas：持续集成 一键回滚 CDN 一键存储 增量发布 https://faas.ele.me/

httpizza：gateway 对接soa接口 的nginx配置可视化，提供了插件范式，和大量插件（例如获取解析用户token），实现了配置简化，方便版本控制

sopush：站点nginx 反向代理管理工具

crayfish：灰度工具，通过控制一个静态文件灰度展示不同内容

实现灰度控制

 

饿了么的基础工具-业务

前端采集：https://perf.ele.me/

自助申请埋点，自主设置错误告警阈值，页面加载速度，资源加载速度，ajax速度，错误数量，埋点数据可视化，查看错误堆栈

Ubt

 

调查问卷： https://quizer.faas.ele.me/#/

以上都是一些名词

以下全都是主观

携程的正

人员稳定，业务能力强

有一定技术积累

核心业务技术投入大

携程的反

五级不写代码？？！！

饿了么的正

人员超级年轻，天性纯良，耿直勤奋

开源社区活跃

公司对技术折腾给出足够容忍度的正反馈

饿了么的反

领导层过于年轻，导致管理混乱

颠簸中的上升期