手百前端架构和产品介绍

先介绍下我们团队和工作

三大垂类

运营支撑

发展历程

目录

  • 基础建设
  • 工程化建设
  • 平台化产品建设
  • 2016规划

基础库

  • Bdbox:前端模块化库,文档
    • openjs
    • aladinjs(uiamd)
    • seed
  • bsass:sass库
    • css3
    • animation
    • icon fonts

Bdbox模块

说明 包含模块
端能力 跟客户端相关 ios,android,apad,invoke,moplus,lbs等
通用&方案 通信、事件、跨域、SPA io,event,app,xDomain,Deffered等
工具 粒度小,用途广泛 cookie,detect,dateFormat等
性能&监控 用户行为统计、速度监控和错误收集 monitor,S,cache(ls/接口/静态资源)
交互 页面交互相关,zepto扩展 Dialog,mask,swipe,fastclick
运营 抽奖游戏,pv和行为统计,跨域通信,游戏类 刮刮乐,摇一摇,跑马灯,游戏舞台/精灵/对象池/easing

18个大类,60+个模块,覆盖手机百度所有应用场景,灵活的core设计,方便切换

移动适配切图方案

  • 页面head引入flexible.js ,计算rem初始值
  • 布局使用bsass提供的rem
  • 字体使用bsass提供的fontsize

切图过程

  • $rem-baseline = 视觉稿宽度/10px
  • $font-baseline = 12px
  • 根据标注原比例切图

代码举例

@import 'bsass/base';
$rem-baseline: 64px; //设置baseline
$font-baseline: 12px; //设置字体初始值
//原值切图
.demo{
    @include rem(padding, 20px 30px);
    @include rem(height, 200px);
    //文字需要提前除以dpr
    @include fontsize(24px);
}

前端组件化

前端组件化

  • 前端模板采用artTemplate
  • 模板被构建工具预编译成js文件
  • js/tmpl/css三者相互依赖

widget VS components

widget components
实现 smarty模板的组件 js模板的组件
组成 tpl、js、css tmpl、js、css
artTemplate模板
路径 widget/* components/*
规范 module/module.* module/module.*
使用 ns:widget/module/module.tpl
{%widget name=""%}
namespace:c_xxx/xxx
{%require name=""%}
require('')

单页APP:基于事件总线设计

  • HTML代码规划,controller划分
  • 确定router规则
  • 编写各自view的前端组件代码
  • 配置controller
  • 使用Bdbox.app粘合

写代码更像写配置

var detail = Bdbox.app.controller({
    name: 'detail',
    router: /^detail\/(\d+)$/,
    apis: [{
        name: 'loadmore',
        url: './loadmore.json'
        type: 'get',//缺省是get
        //接口存储器所需参数
        store:{
            expire: 30e3, //缓存30s
            type: 'session'//或者local
        }
    }],
    root: '#pl-con-detail',
    //无参数
    init: function(){},
    before: function(view, query, pathname){},
    //match是根据router正则匹配的match对象
    main: function(view, query, pathname, match){},
    after: function(view, query, pathname){}
});

工程化建设

FIS-Plus+

基于fisp做了很多fis改动和插件

  • components-pack
  • parser-tmpl
  • template-wrapper
  • preprocessor-gethash
  • code-checker
  • linsl
  • debug
  • json2php

静态资源管理

基于fis的map.json做了扩展

  • content:文件内容
  • hash:文件md5版本号
  • rUri:文件release路径
  • uri:带domain的地址
  • uUri:没有压缩的代码地址
  • Smarty扩展FISResource
  • Smarty扩展FISLocalstorage

渲染模式

inline
tag
combo
seed
unpack

渲染模式

{%html framework="common:bdbox" rendermode="inline|tag|combo"%}

combo模式

线上环境,适合3G+网络

combo模式

build工具

打通开发、联调、部署、上线全部流程

make [command] [args]

make [command] [args]

  • --debug
  • --lint
  • --optimize
  • --domain
  • --md5

Debug

手百chrome扩展:popup页面

手百chrome扩展:本地调试

js debug注释

var a = 1;
/*<debug>
alert(a);
</debug>*/
var b = a + 2;

页面 debug 注释

<!DOCTYPE html>
<html>
<head>
    <title>debug</title>
</head>
<body>
    <!--<debug> <h1>这里debug内容</h1> </debug>-->
</body>
</html>

页面 debug 编译后

<!DOCTYPE html>
<html>
<head>
    <title>debug</title>
</head>
<body>
    <h1>这里debug内容</h1>
</body>
</html>

文档积累和沉淀

Bdbox文档

平台建设

组件API
Tiny平台
Stalker监控

运营开放组件平台:运营接口API化

河图无障碍P4级平台服务

CMS

文档平台

Tiny平台:运营活动快速搭建UI平台

生活服务类

电视合作/日常/时效/专题

Stalker监控

首页

设备数据监控

设备数据监控

劫持数据监控

劫持数据监控

架构流程

2016规划

  • nodejs:基于yog2,已经有自己的node集群和运维平台
  • 性能优化:Bdbox.app,前端渲染,接口缓存,seed落地
  • UI组件化
  • stalker v2:增强js报错,进程守候、配置增强
  • reactNative:跟着iOS学开发
  • 自动化测试