The State of Hybrid TJ VanToll | @tjvantoll tjvantoll.com | - - PowerPoint PPT Presentation

▶
the state of hybrid
SMART_READER_LITE
LIVE PREVIEW

The State of Hybrid TJ VanToll | @tjvantoll tjvantoll.com | - - PowerPoint PPT Presentation

Sep 09, 2022 308 likes •985 views

The State of Hybrid TJ VanToll | @tjvantoll tjvantoll.com | Agenda The past Now Tools Performance The future "The full Safari engine is inside of iPhone. And so, you can write amazing Web 2.0 and Ajax apps that look exactly and

slide-1
SLIDE 1

The State of Hybrid

TJ VanToll | | @tjvantoll tjvantoll.com

slide-2
SLIDE 2

Agenda

The past Now Tools Performance The future

slide-3
SLIDE 3

"The full Safari engine is inside of iPhone. And so, you can write amazing Web 2.0 and Ajax apps that look exactly and behave exactly like apps on the iPhone." Steve Jobs, 2007 (source)

slide-4
SLIDE 4

iOS 1 had no app store.

slide-5
SLIDE 5

iOS 2 did. It worked out alright.

http://www.businessinsider.com/chart-of-the-day-apple-app- store-revenues-2013-6

slide-6
SLIDE 6

http://www.apple.com/pr/library/2014/01/07App-Store-Sales- Top-10-Billion-in-2013.html?sr=hotnews.rss

slide-7
SLIDE 7

In 2013, the iOS App Store revenue was higher than the GDP of 60 countries.

slide-8
SLIDE 8

Others had similiar ideas

slide-9
SLIDE 9

Table is from Brian Leroux's . excellent Debugging Mobile talk

slide-10
SLIDE 10

Gartner Hype Cycle

Image Source: http://bimandintegrateddesign.com/tag/gartners- hype-cycle/

slide-11
SLIDE 11

Hybrid

slide-12
SLIDE 12

PhoneGap

slide-13
SLIDE 13
slide-14
SLIDE 14
slide-15
SLIDE 15

"the biggest mistake that we made, as a company, is betting too much on HTML5 as

  • pposed to native"

Mark Zuckerberg, 2012

slide-16
SLIDE 16

Source http://venturebeat.com/2013/04/17/linkedin-mobile- web-breakup/

slide-17
SLIDE 17

Why?

slide-18
SLIDE 18

“The lack of tooling in mobile browsers makes it very difficult to dig down and find out what the real issues are. Hence tooling, or rather, lack- thereof is a key issue.” Tobie Langel, Facebook Engineer, September 2012

slide-19
SLIDE 19

"[t]ooling support — having a debugger that actually works, performance tools that tell you where the memory is running out." Kiran Prasad, LinkedIn senior director of mobile engineering, April 2013

slide-20
SLIDE 20
slide-21
SLIDE 21

An explosion of tooling

slide-22
SLIDE 22

The Market

https://twitter.com/BenedictEvans/status/450495875211472896

slide-23
SLIDE 23
slide-24
SLIDE 24
slide-25
SLIDE 25

My Job

"How does Kendo UI Mobile compare to ChocolateChip?"

slide-26
SLIDE 26

My First Thought

slide-27
SLIDE 27

The Correct Thought

slide-28
SLIDE 28

Ionic

slide-29
SLIDE 29

Ionic

slide-30
SLIDE 30

Kendo UI Mobile

Now free and open source as part of . Kendo UI Core

slide-31
SLIDE 31

Tooling improvement #1: UI frameworks

slide-32
SLIDE 32

Demo

cuteness.io

slide-33
SLIDE 33

Tooling improvement #2: remote debugging

slide-34
SLIDE 34

Weinre

http://people.apache.org/~pmuellr/weinre/docs/latest/Home.html

slide-35
SLIDE 35

iOS Remote Debugging (iOS 6+)

Settings --> Safari --> Advanced

slide-36
SLIDE 36

iOS Remote Debugging (iOS 6+)

slide-37
SLIDE 37

Chrome for Android Remote Debugging (Android 4.4+)

"[T]ap Build number seven times. Yup, just tap it 7 times, even if it seems crazy."

0:11

Via https://developers.google.com/chrome-developer- tools/docs/remote-debugging

slide-38
SLIDE 38

about:inspect

slide-39
SLIDE 39

Chrome for Android Remote Debugging (Android 4.4+)

slide-40
SLIDE 40

jsHybugger

Works on Android 2.3.3+

slide-41
SLIDE 41

Tooling improvement #3: Companion Apps

slide-42
SLIDE 42

Demo

slide-43
SLIDE 43

Tooling improvement #4: Cloud-Based Builds

slide-44
SLIDE 44

LiveSync

slide-45
SLIDE 45

Demo

slide-46
SLIDE 46

Demo

slide-47
SLIDE 47

Tooling improvement #5: Backend Services

slide-48
SLIDE 48

Storing a File

var el = new Everlive( /* API key */ ); el.Files.create( /* base 64 encoded file */, /* success callback */, /* error callback */ );

slide-49
SLIDE 49

Finding the Right BaaS

http://www.developereconomics.com/finding-right-baas/ "we’re tracking at least fifty BaaS offerings, and it seems more options appear nearly every month"

slide-50
SLIDE 50

Performance

slide-51
SLIDE 51

iOS Performance: The Bad News

The iOS 7 UIWebView incurs a 3.5x JavaScript performance penalty over the same app run in iOS Safari.

slide-52
SLIDE 52

SunSpider

785.0ms vs. 3677.1ms — Safari is ~350% faster!

slide-53
SLIDE 53

Speedometer

Safari is ~20% faster.

slide-54
SLIDE 54

OMG WKWebView! OMG! OMG!

http://9to5mac.com/2014/06/03/ios-8-webkit-changes-finally- allow-all-apps-to-have-the-same-performance-as-safari/

slide-55
SLIDE 55

Performance on Android

Android 4.4 switched to a new Chromium-based WebView.

slide-56
SLIDE 56

Moore's Law

http://en.wikipedia.org/wiki/Moore's_law

slide-57
SLIDE 57

The performance of hybrid application will never be on par with native applications, but as speeds improve, hybrid becomes “good enough” for an increasing number of applications.

slide-58
SLIDE 58

The future

slide-59
SLIDE 59

Is the hybrid development growing or shrinking?

slide-60
SLIDE 60

trends.google.com: PhoneGap

slide-61
SLIDE 61

What is hybrid?

slide-62
SLIDE 62

Cross-Compile Solutions

slide-63
SLIDE 63

Mix and match?

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

slide-64
SLIDE 64

iTunes

slide-65
SLIDE 65
slide-66
SLIDE 66

Thanks

TJ VanToll | | @tjvantoll tjvantoll.com

jQuery UI in Action 45% off with code qcon14bf! manning.com/vantoll