Hybrid Apps
Making your way
through the Jungle
Nicolas Ruflin
Hybrid Apps
• Making your way through the Jungle (@ruflin)
• Rapidly prototype your app with the LAB (@olivertupman)
• Tak...
During my talk
• Download & Install Vagrant http://www.vagrantup.com/
• Download Vagrant Box http://tinyurl.com/cw-jazoond...
For the user, only 2
types of apps exist
|

Centralway
Web != Hybrid != Native
Hybrid != Hybrid
Native != Native
|

Centralway
Which one should I pick?

|

Centralway
Simplicity

|

Centralway
Technology is the solution not the problem

|

Centralway
Criterias

|

Centralway
Criterias

|

Centralway
Design

Business

Technology
|

Centralway
Hybrid Apps

|

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

|

Centralway
Beginners Mistakes (Tech)
• Click vs Touch
• Testing in Browser
• Same architecture as web site (layers)
• Animations / Tr...
Hybrid Apps for
• Fast prototyping
• Testing the market on different devices
• Web and Native version needed

|

Centralwa...
Hybrid != Hybrid
• All JavaScript
• HTML5, CSS3, JS
• Web Technologies + Native Plugins
• Frontend Native, Backend JavaScr...
Frameworks / Tools
MoSync

M Project

PhoneGap

Trigger.io

Sencha

Calatrava

Titanium

AppFramework

RhoMobile
|

Centra...
LAB – Lungo Angular Bridge

|

Centralway
Brain teasers / War stories
• Update Cycle Problem
• Number of Devices / Platforms supported?
• How many mobile OS exist?
...
Brain teasers / War stories
• New design with System Update (iOS 7)
• Breaking Web API through upgrade?
• Local Storage
• ...
Brain teasers / War stories
• iFrame
• ARM Processors and JavaScript
• Native Client, asm.js

• What is next? Embedded Dev...
Discussion

|

Centralway
Links
•

http://www.smashingmagazine.com/2013/10/17/best-of-both-worlds-mixing-html5-andnative-code/

•

http://www.mobify...
Thanks for the attention!
Follow @ruflin
Nicolas.ruflin@centralway.com
Engine.centralway.com
Upcoming SlideShare
Loading in …5
×

JAZOON'13 - Nicolas Ruflin - Come with an Idea go home with an Idea

509 views
431 views

Published on

http://guide13.jazoon.com/#/submissions/134

Published in: Technology, Design
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
509
On SlideShare
0
From Embeds
0
Number of Embeds
114
Actions
Shares
0
Downloads
21
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide
  • 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
  • JAZOON'13 - Nicolas Ruflin - Come with an Idea go home with an Idea

    1. 1. Hybrid Apps Making your way through the Jungle Nicolas Ruflin
    2. 2. Hybrid Apps • 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) | Centralway
    3. 3. During my talk • Download & Install Vagrant http://www.vagrantup.com/ • Download Vagrant Box http://tinyurl.com/cw-jazoondownloads • Github tinyurl.com/cw-jazoon | Centralway
    4. 4. For the user, only 2 types of apps exist | Centralway
    5. 5. Web != Hybrid != Native Hybrid != Hybrid Native != Native | Centralway
    6. 6. Which one should I pick? | Centralway
    7. 7. Simplicity | Centralway
    8. 8. Technology is the solution not the problem | Centralway
    9. 9. Criterias | Centralway
    10. 10. Criterias | Centralway
    11. 11. Design Business Technology | Centralway
    12. 12. Hybrid Apps | Centralway
    13. 13. Beginners Mistakes • It’s the same as Web Apps • Hybrid Apps are easier | Centralway
    14. 14. Beginners Mistakes (Tech) • Click vs Touch • Testing in Browser • Same architecture as web site (layers) • Animations / Transitions / Gestures • Actual vs Perceived performance (60fps) | Centralway
    15. 15. Hybrid Apps for • Fast prototyping • Testing the market on different devices • Web and Native version needed | Centralway
    16. 16. Hybrid != Hybrid • All JavaScript • HTML5, CSS3, JS • Web Technologies + Native Plugins • Frontend Native, Backend JavaScript • X+Y+Z | Centralway
    17. 17. Frameworks / Tools MoSync M Project PhoneGap Trigger.io Sencha Calatrava Titanium AppFramework RhoMobile | Centralway
    18. 18. LAB – Lungo Angular Bridge | Centralway
    19. 19. Brain teasers / War stories • Update Cycle Problem • Number of Devices / Platforms supported? • How many mobile OS exist? • Device Sensors • Chrome is not use on Android (yet) | Centralway
    20. 20. Brain teasers / War stories • New design with System Update (iOS 7) • Breaking Web API through upgrade? • Local Storage • Date Picker • Hardware Acceleration (3D) | Centralway
    21. 21. Brain teasers / War stories • iFrame • ARM Processors and JavaScript • Native Client, asm.js • What is next? Embedded Devices? New UI? | Centralway
    22. 22. Discussion | Centralway
    23. 23. Links • http://www.smashingmagazine.com/2013/10/17/best-of-both-worlds-mixing-html5-andnative-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 | Centralway
    24. 24. Thanks for the attention! Follow @ruflin Nicolas.ruflin@centralway.com Engine.centralway.com

    ×