• 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
Hybrid. It's Awesome.
• Use Existing Web Skills
• Single Codebase
• Java is Terrible
• Hot-fixes - No Review
• Mostly Platform-Agnostic
• Objective-C is MoonMan
But Isn’t it True That…
• “…hybrid is slow?”
• “…native is more performant?”
• “…hybrid has janky animations?”
• “…hybrid can’t access native features?”
Devices Have Evolved!
Year Device Processor RAM2008 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
So Awesome
• JIT Machine Code
• Native Scrolling
• Faster Rendering
• Faster Compute
• Latest Device APIsArt by Christopher Hastings
JS for Mobile is Hard =(
• No Touch Events
• No Native UI Components
• No Performance Optimization
• No SDK
• No Style
NATIVE +
• No middle-man translator
• Access to latest SDK on release and latest device features
• Machine-code optimizations
• Best performance
• Native design
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
What is Ionic?
• Hybrid mobile framework
• Built with AngularJS
• Written in Typescript
• Open Source - MIT License
• Built on Web/Browser Standards
ionicframework.com
Ionic Native
• Access Native Device APIs
• Wraps Cordova Plugins
• Written in Typescript
• Adds Promises/Observables
• Framework Agnostic
github.com/driftyco/ionic-native
Performance Obsessed
• Minimal DOM Manipulation
• Native Scrolling
• Jank-free Page Transitions
• Hardware Accelerated Animations
• Optimized for Touch Events
AoT Compiling
• Build-time Compilation
• Tree Shaking
• Smaller Bundles
• Faster App Launch
• Faster Component Loading
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
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
WHAT IS NATIVESCRIPT?
A runtime for building and running native iOS
and Android apps with a single, JavaScript
code base
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
USE LOTS OF PREBUILT CODE
• Use thousands of plugins from NPM
• Use free native controls from Cocoapods or Android Arsenal
NATIVESCRIPT ANDROID EXAMPLE
Output:
Look! JavaScript can create and use Native Android Java objects!
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
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 }
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 }
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 },
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 });
THE UGLY
• index.{platform}.js implies 2 code bases
• Native iOS support much greater than Android
• Less stable than others
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
WRITE ONCE, RUN ANYWHERE..
• C# adapted to fit platform architecture
• Cross-compiled to platform native machine code
• Platform SDK APIs wrapped in C#
..BUT NOT SO MUCH
• One project per platform
• More than one Codebase
• Write once for a platform, run for that platform
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
FEATURES
• Appcelerator Studio
• Titanium SDK
• Hyperloop SDK for native access
• Analytics SDK
• Arrow DAL
DECLARING A VIEW
1 <Alloy> 2 <Window class="container"> 3 <Label id="label" onClick="doClick">Hello, 4 World</Label> 5 </Window> 6 </Alloy>
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
CLOSING NOTESo many more frameworks are available
Choose depending on your use case and your
skills
There is no “One Ring” of hybrid frameworks