-
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
What is going to happen today
As this is a workshop, please ask questions directly
How many engineers do we have?
What is going to happen today
As this is a workshop, please ask questions directly
How many engineers do we have?
Web app and Native app. Don‘t try to explain him what a hybrid app is
The same is for the business side, be aware of this
For engineers, there are 3 different types. Different technology patterns used, even if technologies are similar
Hybrid has native and web technologies
Hybrid != Hybrid
That is the number one question today. Instead of solutions, I will show you the problems based on which you can decide yourself
There is no simple solution yet. I like to strive in the direction of simplicity. We are not there yet :-(
This presentation is not about a war, it is about problems and solutions
Money available, time available, team skills
Don‘t fall into we have web engineers, so they can build mobile web apps
Design, supported devices / platforms, target group
design and interaction the same for different platforms? Need to build 1 or 2 apps?
Hybrid, native, mobile, web apps is not only a technology decision, it is a collaborative decision and everyone has to be aware of the tradeoffs made
Web app and Native app. Don‘t try to explain him what a hybrid app is
The same is for the business side, be aware of this
Hybrid we are going to build today are without native elements, of course you can also have a mix
Layers, clicks, 3D,
Hybrid Apps are less optimized -> less space for error
Layers, clicks, 3D,
Hybrid Apps are less optimized -> less space for error
Layers, clicks, 3D,
Hybrid Apps are less optimized -> less space for error
If you need no fancy animations, hardware acceleration
Layers, clicks, 3D,
Hybrid Apps are less optimized -> less space for error
If you need no fancy animations, hardware acceleration
New technologies pop up every day, we just got started
Lungo Angular Bridge
More details in the workshops
Update cycles with native apps unpredictable, load in web components
Device hell. How much legacy devices do you support?
Update cycles with native apps unpredictable
Update cycles with native apps unpredictable
Web app and Native app. Don‘t try to explain him what a hybrid app is
The same is for the business side, be aware of this
Hybrid we are going to build today are without native elements, of course you can also have a mix