cross-platform development on mobile devices
TRANSCRIPT
![Page 1: CROSS-PLATFORM DEVELOPMENT ON MOBILE DEVICES](https://reader030.vdocument.in/reader030/viewer/2022032616/55a397881a28ab997a8b47cd/html5/thumbnails/1.jpg)
CROSS-PLATFORM
DEVELOPMENT ON
MOBILE DEVICES
Takaaki Mizuno
DeNA
![Page 2: CROSS-PLATFORM DEVELOPMENT ON MOBILE DEVICES](https://reader030.vdocument.in/reader030/viewer/2022032616/55a397881a28ab997a8b47cd/html5/thumbnails/2.jpg)
Takaaki Mizuno
• 15 years experience in Engineering.
• Works to DeNA Co., Ltd and Oceans Inc.
![Page 3: CROSS-PLATFORM DEVELOPMENT ON MOBILE DEVICES](https://reader030.vdocument.in/reader030/viewer/2022032616/55a397881a28ab997a8b47cd/html5/thumbnails/3.jpg)
How to develop the app both for
iOS/Android ?
There are 2 options:
• Develop for both separately with different
languages ( Objective-C / Java )
• Use cross-platform development
environment and develop for both platform
at once
![Page 4: CROSS-PLATFORM DEVELOPMENT ON MOBILE DEVICES](https://reader030.vdocument.in/reader030/viewer/2022032616/55a397881a28ab997a8b47cd/html5/thumbnails/4.jpg)
Cross-Platform development
environments
![Page 5: CROSS-PLATFORM DEVELOPMENT ON MOBILE DEVICES](https://reader030.vdocument.in/reader030/viewer/2022032616/55a397881a28ab997a8b47cd/html5/thumbnails/5.jpg)
Are cross-platform dev denelopment
envivonments workable ?
• Not good at least now
• It’s ok for simple appsBusiness
Apps
• Not so badGames
![Page 6: CROSS-PLATFORM DEVELOPMENT ON MOBILE DEVICES](https://reader030.vdocument.in/reader030/viewer/2022032616/55a397881a28ab997a8b47cd/html5/thumbnails/6.jpg)
Most important thing is…
To know the characteristics of each environment
Native Layer
Cross-platform
Environment layer
Your code
Erase the difference
But limit the capability
sometimes
![Page 7: CROSS-PLATFORM DEVELOPMENT ON MOBILE DEVICES](https://reader030.vdocument.in/reader030/viewer/2022032616/55a397881a28ab997a8b47cd/html5/thumbnails/7.jpg)
Business Apps
• Pros
• Write once, run on both devices
• No need to pass Apple’s review
• Cons
• UI of both environments are totally different
• Really slow
![Page 8: CROSS-PLATFORM DEVELOPMENT ON MOBILE DEVICES](https://reader030.vdocument.in/reader030/viewer/2022032616/55a397881a28ab997a8b47cd/html5/thumbnails/8.jpg)
UI of both environments are different
• Android have “hardware back key” and “Menu”
• Positions of Tab Bar are different
• Android devices have so many aspect ratios and screen
sizes.
• You have to care about such differences in your code
![Page 9: CROSS-PLATFORM DEVELOPMENT ON MOBILE DEVICES](https://reader030.vdocument.in/reader030/viewer/2022032616/55a397881a28ab997a8b47cd/html5/thumbnails/9.jpg)
Difficult to catch up with interface trends.
• Pull to refresh
• Side menu
![Page 10: CROSS-PLATFORM DEVELOPMENT ON MOBILE DEVICES](https://reader030.vdocument.in/reader030/viewer/2022032616/55a397881a28ab997a8b47cd/html5/thumbnails/10.jpg)
UIWebView based application for iOS
Really Slow
![Page 11: CROSS-PLATFORM DEVELOPMENT ON MOBILE DEVICES](https://reader030.vdocument.in/reader030/viewer/2022032616/55a397881a28ab997a8b47cd/html5/thumbnails/11.jpg)
Why ?
• Apple doesn’t allow to use JIT strategy
![Page 12: CROSS-PLATFORM DEVELOPMENT ON MOBILE DEVICES](https://reader030.vdocument.in/reader030/viewer/2022032616/55a397881a28ab997a8b47cd/html5/thumbnails/12.jpg)
Chrome iOS version is SLOW
![Page 13: CROSS-PLATFORM DEVELOPMENT ON MOBILE DEVICES](https://reader030.vdocument.in/reader030/viewer/2022032616/55a397881a28ab997a8b47cd/html5/thumbnails/13.jpg)
Facebook Application for iOS
![Page 14: CROSS-PLATFORM DEVELOPMENT ON MOBILE DEVICES](https://reader030.vdocument.in/reader030/viewer/2022032616/55a397881a28ab997a8b47cd/html5/thumbnails/14.jpg)
Facebook will return to native
![Page 15: CROSS-PLATFORM DEVELOPMENT ON MOBILE DEVICES](https://reader030.vdocument.in/reader030/viewer/2022032616/55a397881a28ab997a8b47cd/html5/thumbnails/15.jpg)
Game
• Pros
• Write once, run on both devices
• No need to pass Apple’s review
• Cons
• UI of both environments are totally different
• Really slow
• Use JavaScript
![Page 16: CROSS-PLATFORM DEVELOPMENT ON MOBILE DEVICES](https://reader030.vdocument.in/reader030/viewer/2022032616/55a397881a28ab997a8b47cd/html5/thumbnails/16.jpg)
User Interface
• You don’t need to use native-like user interface
![Page 17: CROSS-PLATFORM DEVELOPMENT ON MOBILE DEVICES](https://reader030.vdocument.in/reader030/viewer/2022032616/55a397881a28ab997a8b47cd/html5/thumbnails/17.jpg)
Speed
• Compiling code to native ( Unity )
• Preparing alternative Canvas ( appMobi )
• Use OpenGL directly ( ngCore )
![Page 18: CROSS-PLATFORM DEVELOPMENT ON MOBILE DEVICES](https://reader030.vdocument.in/reader030/viewer/2022032616/55a397881a28ab997a8b47cd/html5/thumbnails/18.jpg)
JavaScript
• JavaScript for mobile application is totally different from
web app’s one ( such as using jQuery ).
• JavaScript is not suitable for large scale development.
• Because it is difficult to find a bug.
![Page 19: CROSS-PLATFORM DEVELOPMENT ON MOBILE DEVICES](https://reader030.vdocument.in/reader030/viewer/2022032616/55a397881a28ab997a8b47cd/html5/thumbnails/19.jpg)
But if you want to use JavaScript still…
![Page 20: CROSS-PLATFORM DEVELOPMENT ON MOBILE DEVICES](https://reader030.vdocument.in/reader030/viewer/2022032616/55a397881a28ab997a8b47cd/html5/thumbnails/20.jpg)
Closure Compiler
• Google’s answer for large scale JavaScript development
• It optimizes the code and finds error in code.
![Page 21: CROSS-PLATFORM DEVELOPMENT ON MOBILE DEVICES](https://reader030.vdocument.in/reader030/viewer/2022032616/55a397881a28ab997a8b47cd/html5/thumbnails/21.jpg)
DeNA’s answer
![Page 22: CROSS-PLATFORM DEVELOPMENT ON MOBILE DEVICES](https://reader030.vdocument.in/reader030/viewer/2022032616/55a397881a28ab997a8b47cd/html5/thumbnails/22.jpg)
ngCore
• JavaScript based Game development environment.
• Try ⇛ https://developer.mobage.com/
![Page 23: CROSS-PLATFORM DEVELOPMENT ON MOBILE DEVICES](https://reader030.vdocument.in/reader030/viewer/2022032616/55a397881a28ab997a8b47cd/html5/thumbnails/23.jpg)
JSX
• a faster, safer, easier alternative to JavaScript
• JSX compilers compiles JSX code into JavaScript
interface Flyable {
abstract function fly() : void;
}
abstract class Animal {
function eat() : void {
log "An animal is eating!”;
}
}
class Bat extends Animal implements Flyable {
override function fly() : void {
log "A bat is flying!”;
}
}
![Page 24: CROSS-PLATFORM DEVELOPMENT ON MOBILE DEVICES](https://reader030.vdocument.in/reader030/viewer/2022032616/55a397881a28ab997a8b47cd/html5/thumbnails/24.jpg)
JSX
we are observing 4% to 27% increase in performance
![Page 25: CROSS-PLATFORM DEVELOPMENT ON MOBILE DEVICES](https://reader030.vdocument.in/reader030/viewer/2022032616/55a397881a28ab997a8b47cd/html5/thumbnails/25.jpg)
Try it
http://jsx.github.com/
![Page 26: CROSS-PLATFORM DEVELOPMENT ON MOBILE DEVICES](https://reader030.vdocument.in/reader030/viewer/2022032616/55a397881a28ab997a8b47cd/html5/thumbnails/26.jpg)
Arctic.js
• Game engine for smartphone web browsers written in
JavaScript with HTML5 Canvas.
• It provides ActionScript3 friendly APIs which Flash
developers are familiar to.
var keyFrame = new arc.anim.KeyFrameAnimation(12, 5, [
new arc.anim.Timeline(this._yellowImg, {
1 : {visible:true},
3 : {visible:false}
}),
new arc.anim.Timeline(this._orangeImg, {
1 : {visible:true},
5 : {visible:false}
}),
new arc.anim.Timeline(this, {
1 :
{scaleX:0.5, scaleY:0.5, transition:arc.anim.Transition.SINE_OUT},
5 : {scaleX:3, scaleY:3}
})
]);
![Page 27: CROSS-PLATFORM DEVELOPMENT ON MOBILE DEVICES](https://reader030.vdocument.in/reader030/viewer/2022032616/55a397881a28ab997a8b47cd/html5/thumbnails/27.jpg)
Try it
http://denadev.github.com/Arctic.js/
![Page 28: CROSS-PLATFORM DEVELOPMENT ON MOBILE DEVICES](https://reader030.vdocument.in/reader030/viewer/2022032616/55a397881a28ab997a8b47cd/html5/thumbnails/28.jpg)
ExGame
• Converts Flash Lite 1.1 SWF into JavaScript and make it
executable on iOS/Android devices.
![Page 29: CROSS-PLATFORM DEVELOPMENT ON MOBILE DEVICES](https://reader030.vdocument.in/reader030/viewer/2022032616/55a397881a28ab997a8b47cd/html5/thumbnails/29.jpg)
How to use ExGame
• DeNA provides ExGame to the partner developers.
• Please access to our development sites:
http://developer.dena.jp/mbga/en/