[2] 从前端到终端 跨越平台的前端技术
TRANSCRIPT
跨越平台的(前)端技术@ 十年踪迹
个人简介
• 月影(十年踪迹)
• 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
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