Native FTW: Integrating native views in Titanium apps

  • View
    796

  • Download
    5

Embed Size (px)

DESCRIPTION

 

Text of Native FTW: Integrating native views in Titanium apps

  • TICONFEU,AMSTERDAM,29/06/2014 {native: FTW} ! Integrating native views in Titanium apps Olivier Morandi
  • TICONFEU,AMSTERDAM,29/06/2014 Olivier Morandi Software engineer ! http://titaniumninja.com! olivier.morandi@gmail.com @olivier_morandi https://github.com/omorandi 2
  • TICONFEU,AMSTERDAM,29/06/2014 3
  • TICONFEU,AMSTERDAM,29/06/2014 Ti app development Native module development (iOS/Android) Optimisations R&D 4
  • TICONFEU,AMSTERDAM,29/06/2014 This Talk How to create view-based native modules How to integrate third party libraries 5
  • TICONFEU,AMSTERDAM,29/06/2014 Not in This Talk Basics of native module development module creation proxies, methods, properties, events, callbacks Check out http://www.slideshare.net/ omorandi/ticonf 6
  • TICONFEU,AMSTERDAM,29/06/2014 Why Native Views UX/Performance Stock Ti UI components not suitable for the specic UX requirements Integration of native UI components and libraries Leverage existing solutions from the Android and iOS OSS communities Integrate third party SDKs 7
  • TICONFEU,AMSTERDAM,29/06/2014 Ti.Next/Hyperloop Q: Are Ti.Current native modules still relevant? A: YES! Ti.Next/Hyperloop is WIP Active need in current Titanium projects Maintaining legacy modules 8
  • TICONFEU,AMSTERDAM,29/06/2014 Learning Resources
  • TICONFEU,AMSTERDAM,29/06/2014 Ocial Appcelerator Guides http://docs.appcelerator.com/titanium/latest/#!/guide/ Extending_Titanium_Mobile http://docs.appcelerator.com/titanium/latest/#!/guide/ iOS_Module_Development_Guide http://docs.appcelerator.com/titanium/latest/#!/guide/ Android_Module_Development_Guide 10
  • TICONFEU,AMSTERDAM,29/06/2014 11
  • TICONFEU,AMSTERDAM,29/06/2014 Source code Titanium Mobile SDK https://github.com/appcelerator/ titanium_mobile Open source modules from Appcelerator https://github.com/appcelerator/ titanium_modules 12
  • TICONFEU,AMSTERDAM,29/06/2014 Follow these people (and more) Aaron K. Saunders: https://github.com/aaronksaunders Adam Paxton: https://github.com/adampax/ Ben Bahrenburg: https://github.com/benbahrenburg David Bankier: https://github.com/dbankier Jordi Domenec: https://github.com/iamyellow Mads Mller: https://github.com/viezel Marcel Pociot: https://github.com/mpociot Matt Apperson: https://github.com/mattapperson Paul Mietz Egli: https://github.com/pegli Ruben Fonseca: https://github.com/rubenfonseca Many more nd them on http://gitt.io/ 13
  • TICONFEU,AMSTERDAM,29/06/2014 Architecture Recap
  • TICONFEU,AMSTERDAM,29/06/2014 15 Titanium cli (node.js)
  • TICONFEU,AMSTERDAM,29/06/2014 Runtime (iOS) 16 Titanium Modules (API) JS APP Parser Interpreter IOS SDK Bytecode gen JavaScriptCore objective-c C++ KROLLBRIDGE
  • TICONFEU,AMSTERDAM,29/06/2014 Runtime (iOS) 16 Titanium Modules (API) JS APP Parser Interpreter IOS SDK Bytecode gen JavaScriptCore NO JIT objective-c C++ KROLLBRIDGE
  • TICONFEU,AMSTERDAM,29/06/2014 Titanium Modules (API) JS APP Parser Native Code Android SDK Native Code gen KROLLBRIDGE Runtime (Android) 17 Java C++ V8 OPT
  • TICONFEU,AMSTERDAM,29/06/2014 Titanium Modules (API) JS APP Parser Native Code Android SDK Native Code gen KROLLBRIDGE Runtime (Android) 17 Java C++ V8 OPT
  • TICONFEU,AMSTERDAM,29/06/2014 Titanium Modules (API) JS APP Parser Native Code Android SDK Native Code gen KROLLBRIDGE Runtime (Android) 17 Java C++ V8 OPT
  • TICONFEU,AMSTERDAM,29/06/2014 Terminology 18 var win1 = Titanium.UI.createWindow({ title:'Hello World', backgroundColor:'white' }); ! var label1 = Titanium.UI.createLabel({ color:'black', textAlign:'center', width: 100 }); ! label1.text = 'howdy?'; win1.add(label1); ! win1.open();
  • TICONFEU,AMSTERDAM,29/06/2014 Terminology 18 var win1 = Titanium.UI.createWindow({ title:'Hello World', backgroundColor:'white' }); ! var label1 = Titanium.UI.createLabel({ color:'black', textAlign:'center', width: 100 }); ! label1.text = 'howdy?'; win1.add(label1); ! win1.open(); module object
  • TICONFEU,AMSTERDAM,29/06/2014 Terminology 18 var win1 = Titanium.UI.createWindow({ title:'Hello World', backgroundColor:'white' }); ! var label1 = Titanium.UI.createLabel({ color:'black', textAlign:'center', width: 100 }); ! label1.text = 'howdy?'; win1.add(label1); ! win1.open(); factory method
  • TICONFEU,AMSTERDAM,29/06/2014 Terminology 18 var win1 = Titanium.UI.createWindow({ title:'Hello World', backgroundColor:'white' }); ! var label1 = Titanium.UI.createLabel({ color:'black', textAlign:'center', width: 100 }); ! label1.text = 'howdy?'; win1.add(label1); ! win1.open(); creation properties
  • TICONFEU,AMSTERDAM,29/06/2014 Terminology 18 var win1 = Titanium.UI.createWindow({ title:'Hello World', backgroundColor:'white' }); ! var label1 = Titanium.UI.createLabel({ color:'black', textAlign:'center', width: 100 }); ! label1.text = 'howdy?'; win1.add(label1); ! win1.open(); proxy object
  • TICONFEU,AMSTERDAM,29/06/2014 Terminology 18 var win1 = Titanium.UI.createWindow({ title:'Hello World', backgroundColor:'white' }); ! var label1 = Titanium.UI.createLabel({ color:'black', textAlign:'center', width: 100 }); ! label1.text = 'howdy?'; win1.add(label1); ! win1.open(); view proxy object
  • TICONFEU,AMSTERDAM,29/06/2014 Terminology 18 var win1 = Titanium.UI.createWindow({ title:'Hello World', backgroundColor:'white' }); ! var label1 = Titanium.UI.createLabel({ color:'black', textAlign:'center', width: 100 }); ! label1.text = 'howdy?'; win1.add(label1); ! win1.open(); proxy property
  • TICONFEU,AMSTERDAM,29/06/2014 Terminology 18 var win1 = Titanium.UI.createWindow({ title:'Hello World', backgroundColor:'white' }); ! var label1 = Titanium.UI.createLabel({ color:'black', textAlign:'center', width: 100 }); ! label1.text = 'howdy?'; win1.add(label1); ! win1.open(); proxy method
  • TICONFEU,AMSTERDAM,29/06/2014 Proxies & Modules Proxy ViewProxy ViewModule extends has a creates 19 manages NativeView Type iOS UIView AndroidView extends
  • TICONFEU,AMSTERDAM,29/06/2014 Proxies & Modules Proxy ViewProxy ViewModule extends has a creates 19 manages NativeView Type iOS UIView AndroidView State: properties Actions: methods Events: addEventListener(), fireEvent() Interface extends
  • TICONFEU,AMSTERDAM,29/06/2014 Proxies & Modules Proxy ViewProxy ViewModule extends has a creates 19 manages NativeView Type iOS UIView AndroidView State: properties Actions: methods Events: addEventListener(), fireEvent() Interface Methods for the integration within the application lifecycle startup() (iOS) shutdown() (iOS) onAppCreate() (Android) extends
  • TICONFEU,AMSTERDAM,29/06/2014 Proxies & Modules Proxy ViewProxy ViewModule extends has a creates 19 manages NativeView Type iOS UIView AndroidView State: properties Actions: methods Events: addEventListener(), fireEvent() Interface Additional members for the integration within the UI layout system: add() remove() height width backgroundColor ... Methods for the integration within the application lifecycle startup() (iOS) shutdown() (iOS) onAppCreate() (Android) extends
  • TICONFEU,AMSTERDAM,29/06/2014 ViewProxy 20 ViewProxy View NativeViews Hierarchy Methods Properties (get/set) Events Holds the state of a view Manages the native view hierarchy
  • TICONFEU,AMSTERDAM,29/06/2014 ViewProxy 20 ViewProxy View NativeViews Hierarchy Methods Properties (get/set) Events Holds the state of a view Manages the native view hierarchy JS THREAD
  • TICONFEU,AMSTERDAM,29/06/2014 ViewProxy 20 ViewProxy View NativeViews Hierarchy Methods Properties (get/set) Events Holds the state of a view Manages the native view hierarchy JS THREAD UI THREAD
  • TICONFEU,AMSTERDAM,29/06/2014 ViewProxy 20 ViewProxy View NativeViews Hierarchy