前端开发工程师（移动方向）

Virtual Dom + 原生接口封装调用 ＋ CSS

<ion-header-bar align-title="left" class="bar-positive">
  <div class="buttons">
    <button class="button" ng-click="doSomething()">左侧按钮</button>
  </div>
  <h1 class="title">Title!</h1>
  <div class="buttons">
    <button class="button">右侧按钮</button>
  </div>
</ion-header-bar>
<ion-content>
  一些内容!
</ion-content>

D2-Blend UI

http://clouda.baidu.com/blend/introduction/introduction

http://clouda.baidu.com/blendui/introduction/introduction

都是通过封装调用原生接口进行移动特性开发，JS桥接类一般更适合提供非界面的原生能力，对于绘制界面则显得有些力不从心

在Hybird这个阶段，jscore的雏形已经形成，但是类DOM的core还没有完善，我们还在使用html+css套在原生native的webview中去实现页面前端UI

“为什么不直接使用webview套页面，保持100%的web开发模式？”

• 分享，支付，定位，摄像头
• NA转换率大于Web App
• webview实例化多个会造成内存泄露
• CSS3不好做原生应用的手势跟随(某些手势需要硬件支持)
• 浏览器版本不同，导致各种系统的实现能力不一致
•   改webkit（添加属性，添加接口）升级内核到 blink，再去升级成本比较高，在没有主导权上的代码做补丁 不靠谱

第一次尝试  

WebView上面盖一个native层（透明），native组件替换WebView组件，替换（问题，滚动问题，js告诉na计算，不灵活）

  第二次尝试

分为多个WebView，js控制WebView的切换，摈弃掉不灵活的地方

原理是，从视图组件树创建对应的css node树，渲染的时候，

css node树计算出布局信息，然后设置回来到视图组件树

原生view控件

架构图

blendUI的框架下

  性能  定制性强 学习成本低（因为他们将Zepto.js修改版移植到blendUI）

native渲染细节

基础封装web UI，动画基础封装

队列

...

类似Facebook的CssLayout，实现了自己ViewTree下面的CSSCore支持最基础的css属性

问题

view   ——  node

view  view   — — node node（css对应设置，通过cssNode中转）

view过多会造成堆栈溢出，层级多了之后，优化，移除透明层的view，merge相应节点坐标为绝对坐标） 

D2-samurai-native

在Hybird这个阶段，jscore的雏形已经形成，但是类DOM的core还没有完善，我们还在使用html+css套在原生native的webview中去实现页面前端UI

https://github.com/hackers-painters/samurai-native

<RefreshCollectionView id="list" name="list" class="list" columns="1" is-vertical
			onswipe-left="@selector(nextTab:)"
			onswipe-right="@selector(prevTab:)">
    <UICollectionViewCell name="section-shots" class="list-item">
	<div class="shot-wrapper"></div>	
    </UICollectionViewCell>	
</RefreshCollectionView>

Samurai-Native的终极目标是想做成一个标准的Web浏览器内核，来为开发者们提供一款W3C标准WebCore的跨平台UI解决方案，既能渲染Web页面，又能生成原生View树。通过私有浏览器内核技术（Objective-C编写）将HTML+CSS解析渲染成为Native View树，从而既有Web开发体验，又有不错的用户体验。

构建基于私有浏览器内核的原生应用

通过实现自有浏览器解析，实现声明调用原生UI渲染

But    没有JavascriptCore

React Native

• 具有普适性的UI封装
• 更好的封装了原生应用可以调用的硬件API
• web调试的方式
• 模块化，模块配置表，传递ID，封装调用，事件响应

一切语言我们都从Hello World开始

brew install node

brew install watchman

npm install -g react-native-cli

react-native init PropertyFinder

'use strict'

var React = require('react-native');

var styles = React.StyleSheet.create({
    text:{
        color: 'black',
        backgroundColor: 'white',
        fontSize: 30,
        margin: 110
    }
});

var renderText = <React.Text style={styles.text}>
                    Hello Poker
                  </React.Text>;

class PropertyFinderApp extends React.Component{
    render(){
        return renderText;
    }
}

React.AppRegistry.registerComponent('PropertyFinder', function() { 
  return PropertyFinderApp 
});

Run it

React提出重新思考UI开发过程，其实不是面向浏览器，而是所有的前端，因为对前端开发而言我们需要涉及的领域已经开始包括了Web与Native。”

元彦