[2] 从前端到终端 跨越平台的前端技术

跨越平台的（前）端技术@ 十年踪迹

个人简介

• 月影（十年踪迹）

• 04 年开始混前端，页面小白

• 喜欢研究算法，喜欢研究编程语言

• 对各种语言 (C/C++ 、 Lisp 、 JavaScript 、 Erlang 、 PHP 、 Python ）多少玩过一些

• 08 年开始参与设计 QWrap (http://qwrap.com/)

• 现在主要研究移动端开发，思考如何将 PC 前端开发的思路延续到移动端

Web & Mobile Systems

Browser

Server

PHP 、 Python 、 Node……

DeviceDB

DOM API

Web Page / Web App

JavaScript Core

PC

Java Core

Android FM 、 Layout Sys

Native App

Mobile

UI FM/ControlsCanvas / WebGL

Markup Template Sys

Applications

HTML / Css

Web App Native App

Layout XML

Native/OpenGL ES

Environments

我能实现 UI我能获取地

理信息我能播放流

媒体我能绘制2D/3D

我能本地存储

我有本地数据库……我也能实现

UI我支持HTML5

我有 HTML5我支持HTML5

我有 HTML5我支持HTML5

我能打电话……

Abilities

Workflows

切图

界面

交互

数据

Language gaps

System.out.println(“Hi

”)alert(“Hi”)…… ……

Scriptable

Java Core

Rhino Scripting Engine

JavaScriptCore/JavaScriptCore.h

Objective C C++

SpiderMonkey JavaScript bindings

JavaScript JavaScript JavaScript

Android with Rhino

Scriptable Activity

init scope & exports

start Activity

Load JS & run

Connected with native

by message

create View

bind events

Android with Rhino: sample code

Cocos2d-x with JavaScript bindings

Game Code Game Code

Browsers

JS Engine

Layout Engine

Canvas/WebGL

Cocos2d JSB

JS Engine

OpenGL ES 2.0

JS API Compatible with Cocos2d-

html5

Cocos2d-x JSB: sample code

IOS 7 with JavaScript Core

• http://shappy1978.iteye.com/blog/1899579

Another solution: Interact with embed Web

App Code App Code

Browsers

JS Engine

Layout Engine

Canvas/WebGL

JS Framework JS Framework

UI WebView

JS Engine

Layout Engine

Canvas/WebGL

Native

Interact with web on Android

Messages between android native & web

Communicate with JSON-RPC

• http://www.json-rpc.org/

Non-web solutions

Export native APIs to JS directly

• https://github.com/zynga/jsbindings

• https://github.com/kripken/emscripten

Phonegap / Cordova

• http://docs.phonegap.com/en/2.9.0/index.html

Performance: Web Embed

• Test sprites: 50

web : 60fps

iphone 4s/5: 40~60fps (phonegap)

android: 10+ fps (phonegap)

windows phone 8: 10+ fps (phonegap)

Performance: cocos2dx with JSB

Web vs. Non-web (JavaScript only)

Web Embed Non-Web

HTML O XX

CSS O XX

JavaScript O O

HTML5 Compatible O O

Performance X O

Cross Platform O O

The future

App Game

iOS androidwindows phone

web browser

OpenGL ES Direct 3DCanvas/webGL

Scripting Core

Native Template System

Web view

JavaScript Framework

Platforms

Game Framework

Graphic Sys

Scripting Core

Render Sys

Base FM

Applications

Thanks ~

• Q&A