1.
Hybrid Apps
Making your way
through the Jungle
Nicolas Ruflin

2.
• Making your way through the Jungle (@ruflin)
• Rapidly prototype your app with the LAB (@olivertupman)
• Take-off your hybrid app into the app stores (@igama)
• Testing and performance tuning techniques (@AVGP)
|
Hybrid Apps
Centralway

3.
• Download & Install Vagrant http://www.vagrantup.com/
• Download Vagrant Box http://tinyurl.com/cw-jazoon-
downloads
• Github tinyurl.com/cw-jazoon
|
During my talk
Centralway

4.
|
For the user, only 2
types of apps exist
Centralway

5.
|
Web != Hybrid != Native
Hybrid != Hybrid
Native != Native
Centralway

6.
|
Which one should I pick?
Centralway

7.
|
Simplicity
Centralway

8.
|
Technology is the solution not the problem
Centralway

9.
|
Criterias
Centralway

10.
|
Criterias
Centralway

11.
|
Design
Centralway
TechnologyBusiness

12.
|
Hybrid Apps
Centralway

13.
• It’s the same as Web Apps
• Hybrid Apps are easier
|
Beginners Mistakes
Centralway

14.
• Click vs Touch
• Testing in Browser
• Same architecture as web site (layers)
• Animations / Transitions / Gestures
• Actual vs Perceived performance (60fps)
|
Beginners Mistakes (Tech)
Centralway

15.
• Fast prototyping
• Testing the market on different devices
• Web and Native version needed
|
Hybrid Apps for
Centralway

16.
• All JavaScript
• HTML5, CSS3, JS
• Web Technologies + Native Plugins
• Frontend Native, Backend JavaScript
• X + Y + Z
|
Hybrid != Hybrid
Centralway

17.
|
Frameworks / Tools
Centralway
MoSync
Titanium
PhoneGap
Calatrava
M Project
RhoMobile
Sencha
Trigger.io
AppFramework

18.
| Centralway
LAB – Lungo Angular Bridge

19.
• Update Cycle Problem
• Number of Devices / Platforms supported?
• How many mobile OS exist?
• Device Sensors
• Chrome is not use on Android (yet)
|
Brain teasers / War stories
Centralway

20.
• New design with System Update (iOS 7)
• Breaking Web API through upgrade?
• Local Storage
• Date Picker
• Hardware Acceleration (3D)
|
Brain teasers / War stories
Centralway

21.
• iFrame
• ARM Processors and JavaScript
• Native Client, asm.js
• What is next? Embedded Devices? New UI?
|
Brain teasers / War stories
Centralway

22.
|
Discussion
Centralway

23.
• http://www.smashingmagazine.com/2013/10/17/best-of-both-worlds-mixing-html5-and-
native-code/
• http://www.mobify.com/blog/beginners-guide-to-perceived-performance/
• http://sealedabstract.com/rants/why-mobile-web-apps-are-slow/
• http://engine.centralway.com
• http://aerotwist.com/blog/making-a-60fps-mobile-app
|
Links
Centralway

24.
Thanks for the attention!
Follow @ruflin
Nicolas.ruflin@centralway.com
Engine.centralway.com