从Web页面到Native UI

巨头们已经着手从上自下展开技术融合，Web App开发者们与Native App开发者们长年相互鄙视斗争的过程将要告一段落

Poker

PC WEB页面

 

Mobile WEB页面

 

Hybird WEB页面

 

Native UI页面

 

....

Broswer/Webview

Native UI Components

?

   切图工程师/移动前端开发工程师/...

 前端开发工程师

 全端UI开发工程师

切图前端工程师

HTML + CSS + Javascript

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
	 body{background: #fff;}
    </style>
</head>
<body>
    <div id="container">
	<div class="aside">Text</div>
    </div>
</body>
</html>

HTML + CSS + 模块化Javascript + Node.js构建工具

前端开发工程师

前端开发工程师

{
  "name": "grunt-zbj",
  "description": "The grunt command line interface.",
  "version": "0.1.0",
  "author": {
    "name": "laotan"
  },
  "devDependencies": {
    "grunt": "*",
    "grunt-cachebuster": "~0.1.5",
    "grunt-contrib-clean": "^0.6.0",
    "grunt-contrib-concat": "~0.1.1",
    "grunt-contrib-copy": "^0.8.1",
    "grunt-contrib-less": "~0.7.0",
    "grunt-contrib-uglify": "~0.2.0",
    "grunt-contrib-watch": "~0.5.2",
    "grunt-contrib-yuidoc": "~0.4.0"
  }
}

前端跨平台尝试

more cost into developing more apps differently. Lastly, app maintenance is higher as compared to the hybrid apps.

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

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的代码风格

<div id="more" class="blend-address">
    <div class="blend-address-name"><span>收货人</span></div>
    <div class="blend-address-value">
        <div class="blend-address-input">
            <input type="text" class="blend-address-detail" placeholder="姓名" value="熊猫先森">
        </div>
    </div>
</div>

boost('#more').address({
}).on("address:click", function (){
    alert("点击事件");    // 点击事件，用以触发显示选择列表
});
{
    btnClass: "blend-address-btn",    // 给元素添加点击事件，元素默认样式:"blend-address-btn"
}

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

“兴奋的同时，一个无法回避的事实，对Web前端来说这是一个全新的领域，就是一个大坑，需要我们去填平，

填平这些坑的就是我们配套的基础设施。

当这些基础设施相对完善时，就是React Native爆发的时候，而我们现在做的事将是未来的肩膀。”

元彦

全端UI开发工程师

       未来Web前端开发与Native移动应用开发工程师的工作职责很可能会相互重叠，平台之间的边界不会太明显，还会产生更专注于跨平台App UI及交互构建的“全终端开发工程师”。

欢迎来到全端“IE”时代！

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。”

元彦

Hybird应用，通过WebView承载视图和JS，并通过封装原生接口，实现App壳应用

BlendUI，通过CSSLayout实现不依赖DOM的CSS布局，自建原生对应组件，实现类Native应用

samurai-native, 通过构建私有渲染引擎，实现CSSTree和ViewTree对应输出，同时生成webUI和nativeUI

reatch-native，通过CSSLayout实现不依赖DOM的CSS布局，通过JSCore，实现WebUI转换成NativeUI。

HTML

CSSCore

JavascriptCore

NativeUI

UIML

Web是未来，Native是当下，而我们在未来与当下之间。

WebUI

By pokerone

Made with Slides.com

WebUI

  • 1,380

More from pokerone