These mobile apps will let you
totally rethink
hybrid app development

Ivano Malavolta
DISIM | University of L’Aquila
Introduction
How many times have you heard claims like these?

PhoneGap apps are slow...

Native apps are more beautiful than web apps...
Hybrid apps are simply web sites distributed in the app stores...
Native apps are better than hybrid apps: they can save data, they can manage files, etc.
etc.
Introduction
In this presentation I will try to rebalance those (mis)-beliefs by showing

10 REAL EXAMPLES
REAL EXAMPLES
OF HYBRID APPLICATIONS

IN THE APP STORES

NOW
Frascati Scienza
Non-linear layouts

In-app RSS feed reader

QR code scanning

https://itunes.apple.com/it/app/frascati-scienza-scienziati/id686974321?mt=8

Maps
Lancia Y

panoramic, first-person views of
interiors with accelerometer

360° rotation with zoom

smooth flippable chapters
https://itunes.apple.com/it/app/lancia-ypsilon/id433904305?mt=8
Feedly News Reader
swipe-based navigation among
articles

swipable menus for
options, saved articles and search

https://itunes.apple.com/it/app/feedly-your-google-reader/id396069556?mt=8
https://play.google.com/store/apps/details?id=com.devhd.feedly&hl=it
Khan Academy
fast search
with auto-complete

video support with bookmarks
and automatic sync between text and video stream
https://itunes.apple.com/it/app/khan-academy/id469863705?mt=8
Rormix
In-line video playing

Search with suggestions
Styled menus

https://itunes.apple.com/us/app/rormix-discover-emerging-music/id700740840?mt=8
https://play.google.com/store/apps/details?id=com.rormix
Evernote
Contents visualization
with animations

Text editor with attachments and
images markup
https://itunes.apple.com/it/app/evernote/id281796108?mt=8
https://play.google.com/store/apps/details?id=com.rormix
Amazon
Full e-commerce features

native-like dynamic tooltips
https://itunes.apple.com/it/app/amazon-mobile/id335187483?mt=8
Linkedin
Scrollable upper menu
with smooth navigation

All the features of the official
LinkedIn platform available
https://itunes.apple.com/it/app/linkedin/id288429040?mt=8
https://play.google.com/store/apps/details?id=com.linkedin.android
Musixmatch
Sync between played song
and its lyrics

Audio recording

https://itunes.apple.com/it/app/musixmatch-lyrics-player/id448278467?mt=8
POP
Draw on canvas + dynamic events

"Classical" side menu

https://itunes.apple.com/us/app/pop-prototyping-on-paper/id555647796?mt=8

Sharing via social networks
and email
Conclusion
Those apps are really good, but in my experience I also saw A LOT of poorly
developed apps

Main traits (of failure):

•
•
•

no separation of concerns, no architectural reasoning
no reasoning about performance (many many many DOM reflows and queries)
Javascript code can have memory issues too
Contact

Ivano Malavolta | DISIM
+ 39 380 70 21 600

iivanoo
ivano.malavolta@univaq.it
www.ivanomalavolta.com

These mobile apps will let you totally rethink hybrid app development

  • 1.
    These mobile appswill let you totally rethink hybrid app development Ivano Malavolta DISIM | University of L’Aquila
  • 2.
    Introduction How many timeshave you heard claims like these? PhoneGap apps are slow... Native apps are more beautiful than web apps... Hybrid apps are simply web sites distributed in the app stores... Native apps are better than hybrid apps: they can save data, they can manage files, etc. etc.
  • 3.
    Introduction In this presentationI will try to rebalance those (mis)-beliefs by showing 10 REAL EXAMPLES REAL EXAMPLES OF HYBRID APPLICATIONS IN THE APP STORES NOW
  • 4.
    Frascati Scienza Non-linear layouts In-appRSS feed reader QR code scanning https://itunes.apple.com/it/app/frascati-scienza-scienziati/id686974321?mt=8 Maps
  • 5.
    Lancia Y panoramic, first-personviews of interiors with accelerometer 360° rotation with zoom smooth flippable chapters https://itunes.apple.com/it/app/lancia-ypsilon/id433904305?mt=8
  • 6.
    Feedly News Reader swipe-basednavigation among articles swipable menus for options, saved articles and search https://itunes.apple.com/it/app/feedly-your-google-reader/id396069556?mt=8 https://play.google.com/store/apps/details?id=com.devhd.feedly&hl=it
  • 7.
    Khan Academy fast search withauto-complete video support with bookmarks and automatic sync between text and video stream https://itunes.apple.com/it/app/khan-academy/id469863705?mt=8
  • 8.
    Rormix In-line video playing Searchwith suggestions Styled menus https://itunes.apple.com/us/app/rormix-discover-emerging-music/id700740840?mt=8 https://play.google.com/store/apps/details?id=com.rormix
  • 9.
    Evernote Contents visualization with animations Texteditor with attachments and images markup https://itunes.apple.com/it/app/evernote/id281796108?mt=8 https://play.google.com/store/apps/details?id=com.rormix
  • 10.
    Amazon Full e-commerce features native-likedynamic tooltips https://itunes.apple.com/it/app/amazon-mobile/id335187483?mt=8
  • 11.
    Linkedin Scrollable upper menu withsmooth navigation All the features of the official LinkedIn platform available https://itunes.apple.com/it/app/linkedin/id288429040?mt=8 https://play.google.com/store/apps/details?id=com.linkedin.android
  • 12.
    Musixmatch Sync between playedsong and its lyrics Audio recording https://itunes.apple.com/it/app/musixmatch-lyrics-player/id448278467?mt=8
  • 13.
    POP Draw on canvas+ dynamic events "Classical" side menu https://itunes.apple.com/us/app/pop-prototyping-on-paper/id555647796?mt=8 Sharing via social networks and email
  • 14.
    Conclusion Those apps arereally good, but in my experience I also saw A LOT of poorly developed apps Main traits (of failure): • • • no separation of concerns, no architectural reasoning no reasoning about performance (many many many DOM reflows and queries) Javascript code can have memory issues too
  • 15.
    Contact Ivano Malavolta |DISIM + 39 380 70 21 600 iivanoo [email protected] www.ivanomalavolta.com