Slides of my talk at BDL Accelerate 2016 about the different frameworks and options developers have these days to build their mobile apps

1. YOUR OPTIONS FOR BUILDING
MOBILE APPS IN 2016

2. • Computer Science graduate from the American University of Beirut.
• Currently freelancing in software engineering and design
• Focused mainly on Mobile Development using best practices and Agile
methods
• Thriving to be an international speaker in different topics
A BRIEF ABOUT ME
Jad Salhani

3. What is a Hybrid App?
• HTML5 / CSS / JS
• Web View or Transpiled
• Hybrid Framework

4. Hybrid. It's Awesome.
• Use Existing Web Skills
• Single Codebase
• Java is Terrible
• Hot-fixes - No Review
• Mostly Platform-Agnostic
• Objective-C is MoonMan

5. But Isn’t it True That…
• “…hybrid is slow?”
• “…native is more performant?”
• “…hybrid has janky animations?”
• “…hybrid can’t access native features?”

6. The Short Answer

7. Devices Have Evolved!
Year Device Processor RAM
2008 iPhone 3 620 MHz 128 MB
2010 iPhone 4 1 GHz 512 MB
2012 iPhone 5 1.3 GHz dual-core 1GB
2014 iPhone 6 1.4 GHz dual-core 1 GB
2016 iPhone 7 2.3 GHz quad-core 2 GB

8. iOS Adoption…

9. It’s Awesome!

10. And Android…

11. And Android…
Also Awesome!

12. And Best of All
WKWebView Chromium
Nitro V8

13. So Awesome
• JIT Machine Code
• Native Scrolling
• Faster Rendering
• Faster Compute
• Latest Device APIs
Art by Christopher Hastings

14. “So Why Isn’t Everyone Doing Hybrid?”
¯_(ツ)_/¯

15. JS for Mobile is Hard =(
• No Touch Events
• No Native UI Components
• No Performance Optimization
• No SDK
• No Style

16. A LITTLE BIT OF
NATIVE IN MY LIFE

17. NATIVE +
• No middle-man translator
• Access to latest SDK on
release and latest device
features
• Machine-code optimizations
• Best performance
• Native design

18. NATIVE -
• Supporting more platforms
= More codebases
• Language migration
obstacles (For ex, Swift 2 ->
3)
• Responsive design is hard
• Self-write almost every UI
component
• Slow development

19. ENTER HYBRID
FRAMEWORKS
A little bit of Hybrid, by my side

20. OUR STARS FOR TODAY
• Ionic Framework
• NativeScript
• React-Native
• Xamarin
• Appcelerator

22. What is Ionic?
• Hybrid mobile framework
• Built with AngularJS
• Written in Typescript
• Open Source - MIT License
• Built on Web/Browser Standards
ionicframework.com

23. Install Ionic
$ npm install -g ionic cordova
$ ionic start myApp blank —v2

24. Why Angular2?
• Component-based
• Designed for Mobile
• Module-based DI
• Ahead-of-Time Compiling

25. What About Typescript?
• Superset of Javascript
• ES6 Support
• Type Checking
• Improves Tooling

26. Everything is a Component

27. SPA Frameworks are Popular

28. Angular is SUPER Popular
BAM, SUCKA!

29. UI Components

30. UI Components

31. Theming
• Plain ol’ CSS + Sass
• Easy to override
• Variables based
• 80+ mixins

32. ionicons
ionicons.com
• Cross-platform • MIT license• 700+ Icons

33. Ionic Native
• Access Native Device APIs
• Wraps Cordova Plugins
• Written in Typescript
• Adds Promises/Observables
• Framework Agnostic
github.com/driftyco/ionic-native

34. Ionic Native

35. Performance Obsessed
• Minimal DOM Manipulation
• Native Scrolling
• Jank-free Page Transitions
• Hardware Accelerated Animations
• Optimized for Touch Events

36. AoT Compiling
• Build-time Compilation
• Tree Shaking
• Smaller Bundles
• Faster App Launch
• Faster Component Loading

37. What Else is Ionic?
ionic.io/cloud

38. Code Once. Run Everywhere.
One Team. One Codebase. Every Platform.

39. Code Once. Run Everywhere.

40. Deploying to a Device
• Enable Developer Options
• Enable USB Debugging
• Create Provisioning Profile
• Code Sign .IPA in Xcode
• npm install -g ios-deploy
• bit.ly/deploy-without-dev-account

41. THE UGLY
Ionic is strongly linked to Angular 2
If Angular 2 introduces breaking changes, most
probably Ionic will too
Still moody about their project architecture and
tools

42. NativeScript

43. WHAT IS NATIVESCRIPT?
A runtime for building and running native iOS
and Android apps with a single, JavaScript
code base

44. INSTALLATION
$ npm install -g nativescript
$ tns create my-app-name

45. Free and open source

46. CHOICE IN ARCHITECTURE
Write your
application
using plain
Javascript
Use TypeScript to
get Object
Oriented features
and compile time
error checking
Use Angular to
architect
application. Reuse
almost all code
between web and
mobile

47. USE LOTS OF PREBUILT CODE
• Use thousands of plugins
from NPM
• Use free native controls
from Cocoapods or Android
Arsenal

48. Absolute Dock Grid Stack Wrap
NATIVE LAYOUTS

49. NATIVESCRIPT ANDROID
EXAMPLE
Output:
Look! JavaScript can
create and use Native
Android Java objects!

50. NATIVESCRIPT IOS EXAMPLE
JavaScript can
create and use
Obj-C objects
too?

51. HOW DOES THIS WORK?

52. CALLING ANDROID API

54. NATIVESCRIPT MODULES
Code Modules Platform API

55. NATIVESCRIPT FILE MODULE

57. WHAT IS REACT NATIVE?
• Built by Facebook
• Uses the same architectural
design as React
• Declarative components
• Promoted as
“indistinguishable” from an
app built using Objective-C
or Java
• Embeds native components
for use if needed

58. INSTALLATION
$ npm install -g react-native-cli
$ react-native init AwesomeProject

59. • Builds using Native projects
• index.{platform}.js
• Watchman for live-reload

60. Component-Driven, Easy to structure
1 export default class AwesomeProject extends
2 Component {
3 render() {
4 return (
5 <View style={styles.container}>
6 <Text style={styles.welcome}>
7 Welcome to React Native!
8 </Text>
9 <Text style={styles.instructions}>
10 To get started, edit index.ios.js
11 </Text>
12 <Text style={styles.instructions}>
13 Press Cmd+R to reload,{'n'}
14 Cmd+D or shake for dev menu
15 </Text>
16 </View>
17 );
18 }
19 }

61. JS + NATIVE COMPONENTS
1 render() {
2 return (
3 <ActivityIndicator
4 animating={this.state.animating}
5 style={[styles.centering, {height: 80}]}
6 size="large"
7 />
8 );
9 }

62. ANDROID NATIVE
COMPONENTS
1 render: function() {
2 var progressBar =
3 <View style={styles.container}>
4 <ProgressBar styleAttr="Inverse" />
5 </View>;
6
7 return (
8 <MyLoadingComponent
9 componentView={componentView}
10 loadingView={progressBar}
11 style={styles.loadingComponent}
12 />
13 );
14 },

63. IOS EQUIVALENT
1 render() {
2 return (
3 <View style={styles.container}>
4 <ProgressViewIOS style={styles.
5 progressView}
6 progress={this.
7 getProgress(0)}/>
8 </View>
9 );
10 },
11 });

64. Live-Reload on running device!

65. THE UGLY
• index.{platform}.js implies 2 code bases
• Native iOS support much greater than
Android
• Less stable than others

67. WHAT IS XAMARIN?
• Microsoft’s take on Hybrid Mobile Apps
• Uses C# as main language
• Visual Studio support for native app projects and files
• Native SDKs ported to C# for easier use in code
• Supports wearables
• Not Open-Source, licensed by Microsoft

68. INSTALLATION
Download Xamarin Installer (https://www.xamarin.com/download)

69. C# IS YOUR FRIEND

70. ANDROID UI WIDGETS

71. IOS DESIGNER

72. WATCHOS SUPPORT

73. WRITE ONCE, RUN
ANYWHERE..
• C# adapted to fit platform
architecture
• Cross-compiled to platform
native machine code
• Platform SDK APIs wrapped
in C#

74. ..BUT NOT SO MUCH
• One project per platform
• More than one Codebase
• Write once for a platform,
run for that platform

75. NOT COMPLETELY FREE TOO

77. WHAT IS APPCELERATOR?
Mobile Hybrid framework that uses JavaScript
Has custom IDE with SDK Support
Immediate support for each new OS release
App designer that updates running app

78. INSTALLATION
$ npm install appcelerator -g
$ appc setup
$ appc new

79. FEATURES
• Appcelerator Studio
• Titanium SDK
• Hyperloop SDK for native
access
• Analytics SDK
• Arrow DAL

81. DECLARING A VIEW
1 <Alloy>
2 <Window class="container">
3 <Label id="label" onClick="doClick">Hello,
4 World</Label>
5 </Window>
6 </Alloy>

82. AND ITS JS
1 function doClick(e) {
2 alert($.label.text);
3 }
4
5 $.index.open();

83. THE UGLY
• Uses Vanilla Javascript with a jQuery-like SDK
• Counter-intuitive XML tags have to be used
• NOT Free
• When in-practice, has poor performance compared to other
frameoworks

84. CLOSING NOTE
So many more frameworks are available
Choose depending on your use case and your
skills
There is no “One Ring” of hybrid frameworks

85. THANK YOU!
@jadsalhani http://jadsalhani.com

86. Q & A