Speaker: Laurent Sansonetti This webinar takes us through RubyMotion, an app development environment that helps you build native apps using the Ruby language. We take a look at how RubyMotion works internally, how it’s different for other mobile toolchains and how we can build cross-platform apps with it. The session also presents a live demo of Flow, that let's you access both iOS and Android APIs on one single codebase, making it extremely easy to build cross-platform apps.

1. Building Full-Fledged Native
Apps Using RubyMotion
Laurent Sansonetti - @lrz
HipByte

2. Myself
• Laurent Sansonetti
• Software hacker
• Company founder

3. Ruby programmer
since 2002

4. Apple 2004-2012

5. 2012-now

6. RubyMotion

7. Toolchain to write
native mobile apps in
Ruby

8. Cross-platform:
iOS and Android
(and OS X)

9. Designed for Ruby
programmers

10. Consistent experience
for cross-platform
native development

11. iOS Android
Language
Objective-C
Swift
Java
Environment Xcode Android Studio
APIs iOS SDK Android SDK

12. iOS Android
Language Ruby
Environment Your Editor + Terminal
APIs iOS SDK Android SDK

13. Unified Ruby
runtimes

14. Custom implementations
of the Ruby language for
each platform

15. RubyMotion
iOS SDK
Objective-C
Objective-C Runtime
iOS

16. RubyMotion
Android SDK
Java
Dalvik / ART
JNI
Android

17. iOS Hello World
class AppDelegate
def application(application, didFinishLaunchingWithOptions:options)
label = UILabel.new
label.text = "Hello World!"
label.sizeToFit
viewController = UIViewController.new
viewController.view.backgroundColor = UIColor.whiteColor
label.center = viewController.view.center
viewController.view.addSubview(label)
frame = UIScreen.mainScreen.applicationFrame
@window = UIWindow.alloc.initWithFrame(frame)
@window.rootViewController = viewController
@window.makeKeyAndVisible
true
end
end

18. iOS Hello World
class AppDelegate
def application(application, didFinishLaunchingWithOptions:options)
label = UILabel.new
label.text = "Hello World!"
label.sizeToFit
viewController = UIViewController.new
viewController.view.backgroundColor = UIColor.whiteColor
label.center = viewController.view.center
viewController.view.addSubview(label)
frame = UIScreen.mainScreen.applicationFrame
@window = UIWindow.alloc.initWithFrame(frame)
@window.rootViewController = viewController
@window.makeKeyAndVisible
true
end
end

19. Android Hello World
class MainActivity < Android::App::Activity
def onCreate(savedInstanceState)
super
text = Android::Widget::TextView.new(self)
text.text = 'Hello RubyMotion!'
self.contentView = text
end
end

20. Android Hello World
class MainActivity < Android::App::Activity
def onCreate(savedInstanceState)
super
text = Android::Widget::TextView.new(self)
text.text = 'Hello RubyMotion!'
self.contentView = text
end
end

21. Static compilation

22. Compilation
Ruby File
AST
LLVM IR
Assembly (ARM or Intel)
Runtime

23. Static compilation
• RubyMotion apps are native binaries
• For iOS: a native executable
• For Android: a JNI native library
• The original Ruby source code is not present in
the application bundle
• RubyMotion apps weight a couple MB

24. Command-line
interface

26. Creating a new project
$ motion create --template=ios Hello
$ motion create —-template=android Hello
$ motion create --template=osx Hello

27. Project configuration
$ vi Rakefile
Motion::Project::App.setup do |app|
# Use `rake config' to see complete project settings.
app.name = 'Hello'
end

28. Running
$ rake
$ rake simulator
$ rake
$ rake emulator
iOS Simulator
Android Emulator
$ rake device
iOS/Android Device

29. Distribution
$ rake archive:distribution #=> foo.ipa
$ rake release #=> foo.apk
iOS App Store
Android Play Store

36. https://www.jetbrains.com/
ruby/rubymotion

37. What’s RubyMotion?
• Static (AOT) Ruby compiler
• 2 runtimes - implementations of Ruby
• Objective-C (iOS, OS X, tvOS, watchOS)
• Java (Android)
• Build system - based on Rake
• REPL

38. RubyMotion
Starter

39. Fully-featured
(iOS and Android)

40. Splash screen

41. rubymotion.com/download

42. motion-game

43. Create games for iOS
and Android

44. Cross-platform Ruby
API to write games

45. Fully-featured
Scene Graph
Sensor Events
Sprites
Animations
Physics
Particles
Parallax
Networking
UI Widgets

47. One code base
↓
iOS, tvOS and Android

48. 100% cross-platform

49. $ gem install motion-game

50. Future of RubyMotion

51. iOS Android
Language Ruby
Environment Your Editor + Terminal
APIs iOS SDK Android SDK

52. iOS Android
Language Ruby
Environment Your Editor + Terminal
APIs iOS SDK Android SDK

53. If you make a cross-platform app
in RubyMotion:
1) Use platform-specific APIs for
user-interface
2) Share common code

54. Need to learn
2 set of APIs

55. Need to maintain
2 different codebases

56. iOS Android
Language Ruby
Environment Your Editor + Terminal
APIs iOS SDK Android SDK

57. iOS Android
Language Ruby
Environment Your Editor + Terminal
APIs
iOS SDK Android SDK
Ruby Framework

58. Flow

59. Cross-platform
framework for
RubyMotion

60. Rails of RubyMotion

61. One code base
↓
iOS and Android

62. Set of cross-platform
libraries for RubyMotion

63. Current libraries
• Net - HTTP networking and host reachability
• JSON - JSON serialization
• Digest - Digest cryptography
• Base64 - Base64 encoding/decoding
• Store - Key-value store
• Location - Location management and (reverse) geocoding
• Task - Lightweight tasks scheduler
• UI - User-interface (big stuff!)

64. Net - GET request
Net.get("https://httpbin.org/get?user_id=1") do |response|
if response.status == 200
response.body['args']['user_id'] # 1
end
end

65. Net - POST request
options = {
headers: {
content_type: :json,
body: { user_id: 1 }
}
}
Net.post("https://httpbin.org/post", options) do |response|
if response.status == 200
response.body['json']['user_id'] # 1
end
end

66. Net - Host reachability
service = Net.reachable?("www.google.fr") do |reachable|
if reachable
# …
end
end
# …
service.stop

67. JSON
JSON.load('{"foo":"bar"}') # => {"foo" => "bar"}
{"foo" => "bar"}.to_json # => '{"foo":"bar"}'

68. Digest
# quick
Digest::MD5.digest(‘hello’)
#=> '5d41402abc4b2a76b9719d911017c592'
# long
digest = Digest::MD5.new
digest.update('hello')
digest.digest #=> '5d41402abc4b2a76b9719d911017c592'

69. Base64
Base64.encode('xx') #=> eHg=
Base64.decode('eHg=') #=> xx

70. Store
Store['key'] = 42
Store[‘key'] #=> 42
Store.all #=> { 'hey' => 42 }
Store.delete('key')

71. Location - Monitor
service = Location.monitor do |location, err|
if location
puts location.latitude, location.longitude
puts location.altitude
puts location.time
puts location.speed
puts location.accuracy
else
$stderr.puts err
end
end
# ...
service.stop

72. Location - Reverse geocode
Location.geocode('apple inc') do |location, err|
if location
puts location.name
puts location.address
puts location.locality
puts location.postal_code
puts location.sub_area
puts location.area
puts location.country
else
$stderr.puts err
end
end

73. Task - Timers
timer1 = Task.after 0.5 do
# executed after half second
end
timer2 = Task.every 2.5 do
# executed every two and half seconds
end
# ...
timer2.stop

74. Task - Main thread
Task.main do
# update UI stuff…
end

75. Task - Background thread
Task.background do
# something that takes time…
end

76. Task - Sequential queues
q = Task.queue
q.schedule do
# job 1
end
q.schedule do
# job 2, will be executed after job 1
end
q.schedule do
# job 3, will be executed after job 2
end
q.wait # wait for all jobs to finish

77. UI

78. UI library
• Set of cross-platform classes for UI components
• Cross-platform layout system

79. UI - Classes
• UI::View
• UI::Button
• UI::TextInput
• UI::Label
• UI::Image
• UI::Table
• UI::Web
• UI::Color
• UI::Font
• UI::Alert
• UI::Screen
• UI::Navigation
• UI::Application
• …

80. UI - Layout
• Lets you layout your user interface with a CSS
(Flexbox) Ruby API
• Very easy to use if you are a Web developer!
• Cross-platform unique implementation
• Does not use iOS’s autolayout or Android layout
classes

81. UI - Layout
view.width
view.height
view.left
view.right
view.top
view.bottom

82. UI - Layout
view.padding_left
view.padding_right
view.padding_top
view.padding_bottom
view.margin_left
view.margin_right
view.margin_top
view.margin_bottom
view.border_left
view.border_right
view.border_top
view.border_bottom

83. UI - Layout
view.flex # 0 or 1
view.direction # :inherit, :ltr, :rtl
view.flex_direction # :column, :column_reverse,
# :row, :row_reverse
view.justify_content # :flex_start, :center, flex_end,
# :space_between, :space_around
view.align_content # :auto, :flex_start, :center,
# :flex_end, :stretch
view.align_items # :auto, :flex_start, :center,
# :flex_end, :stretch
view.align_self # :auto, :flex_start, :center,
# :flex_end, :stretch
view.position_type # :relative, :absolute
view.flex_wrap # :no_wrap, :wrap

84. Demo

85. Flow is completely
open-source

86. https://github.com/
HipByte/Flow

87. Already used in
production

88. Actively working on it

89. First release later this
month!

90. Flow will be included in
RubyMotion 5.0 when
it’s fully complete

91. Please give it a try!

92. What’s RubyMotion?
• Static (AOT) Ruby compiler
• 2 runtimes - implementations of Ruby
• Objective-C (iOS, OS X, tvOS, watchOS)
• Java (Android)
• Build system - based on Rake
• REPL

93. What’s RubyMotion?
• Static (AOT) Ruby compiler
• 2 runtimes - implementations of Ruby
• Objective-C (iOS, OS X, tvOS, watchOS)
• Java (Android)
• Build system - based on Rake
• REPL
• Cross-platform framework

94. Recap

95. RubyMotion is fun!

96. Please download
RubyMotion!

97. rubymotion.com/download

98. Thank you!
www.rubymotion.com
@rubymotion
info@hipbyte.com
Questions?