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

509 views
363 views

Published on

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
509
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
3
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

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

  1. 1. 跨越平台的(前)端技术 @十年踪迹
  2. 2. 个人简介 • 月影(十年踪迹) • 04年开始混前端,页面小白 • 喜欢研究算法,喜欢研究编程语言 • 对各种语言(C/C++、Lisp、JavaScript、Erlang、PHP、Python)多少玩过一些 • 08年开始参与设计 QWrap (http://qwrap.com/) • 现在主要研究移动端开发,思考如何将PC前端开发的思路延续到移动端
  3. 3. 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
  4. 4. UI FM/ControlsCanvas / WebGL Markup Template Sys Applications HTML / Css Web App Native App Layout XML Native/OpenGL ES Environments
  5. 5. 我能实现UI 我能获取地 理信息 我能播放流 媒体 我能绘制 2D/3D 我能本地存 储 我有本地数 据库 ……我也能实现 UI 我支持 HTML5 我有HTML5 我支持 HTML5 我有HTML5 我支持 HTML5 我能打电话…… Abilities
  6. 6. Workflows 切图 界面 交互 数据
  7. 7. Language gaps System.out.p rintln(“Hi”) alert(“Hi”)…… ……
  8. 8. Scriptable Java Core Rhino Scripting Engine JavaScriptCore/Ja vaScriptCore.h Objective C C++ SpiderMonkey JavaScript bindings JavaScript JavaScript JavaScript
  9. 9. Android with Rhino Scriptable Activity init scope & exports start Activity Load JS & run Connected with native by message create View bind events
  10. 10. Android with Rhino: sample code
  11. 11. 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
  12. 12. Cocos2d-x JSB: sample code
  13. 13. IOS 7 with JavaScript Core • http://shappy1978.iteye.com/blog/1899579
  14. 14. 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
  15. 15. Interact with web on Android
  16. 16. Messages between android native & web
  17. 17. Communicate with JSON-RPC • http://www.json-rpc.org/
  18. 18. Non-web solutions
  19. 19. Export native APIs to JS directly • https://github.com/zynga/jsbindings • https://github.com/kripken/emscripten
  20. 20. Phonegap / Cordova • http://docs.phonegap.com/en/2.9.0/index.html
  21. 21. Performance: Web Embed • Test sprites: 50 web : 60fps iphone 4s/5: 40~60fps (phonegap) android: 10+ fps (phonegap) windows phone 8: 10+ fps (phonegap)
  22. 22. Performance: cocos2dx with JSB
  23. 23. 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
  24. 24. The future App Game iOS android windows phone web browser OpenGL ES Direct 3D Canvas/webG L Scripting Core Native Template System Web view JavaScript Framework Platforms Game Framework Graphic Sys Scripting Core Render Sys Base FM Applications
  25. 25. Thanks ~ • Q&A

×