How to Build Fast Hybrid iOS Apps

Transcript

1. HOW TO BUILD FAST HYBRID iOS APPS @LokiMeyburg
2. YOUR FAVOURITE APPS AREN’T NATIVE? DID YOU KNOW
4. INSTAGRAM IS A HYBRID APP
6. ALL THESE APPS SUCCESSFULLY USE WEBVIEWS
7. @LokiMeyburg
8. TRIP DOWN MEMORY LANE TO 2012
9. Our biggest mistake was betting too much on HTML5 ! Mark Zuckerberg
10. Their problem wasn't them betting too much on HTML5. ! Their problem was developing piece of shit apps that happened to use HTML5. - The top comment on HackerNews https://news.ycombinator.com/item?id=4507879
11. BUT ZUCKERBURG WAS RIGHT
12. BUT ZUCKERBURG WAS RIGHT IT DID SUCK TO BUILD HYBRID iOS APPS IN 2012
13. JAVASCRIPT WAS SLOWER THAN SAFARI ! SCROLLING WAS SLOWER THAN UISCROLLVIEW ! CACHING DATA WITH HTTPS DIDN’T WORK ! ALSO, THE iPHONE 4S DIDN’T USE LTE HYBRID APPS IN 2012
14. GOOD NEWS EVERYONE!
15. I think every software shop today should take another look at the hybrid approach. ! David Heinemeier Hansson 37Signals https://signalvnoise.com/posts/3743-hybrid-sweet-spot-native-navigation-web-content
16. YOUR VERY OWN CUSTOM BROWSER YOUR SECRET WEAPON
17. CHOOSE WHICH ASSETS COME BUNDLED WITH YOUR BROWSER YOU CAN
18. MANIPULATE YOUR CACHE YOU CAN
19. INTERCEPT REQUESTS YOU CAN
20. TWEAK RENDERING YOU CAN
21. PREFETCH AND STORE REQUESTS WITH NSURLCache
22. PUT THINGS INTO YOUR CACHE FOR INSTANT RETRIEVAL LATER
23. URLS = [ ARRAY , OF , URLS , TO , CACHE ] ; ! LOOP THROUGH URLS { ! ASYNCHRONOUS REQUEST FOR ( URL ) ; ! } PSEUDOCODE
24. URLS = [ ARRAY , OF , URLS , TO , CACHE ] ; ! LOOP THROUGH URLS { ! ASYNCHRONOUS REQUEST FOR ( URL ) ; ! } PSEUDOCODE PUT THIS IN A QUEUE TO RUN IN THE BACKGROUND
25. URLS = [ ARRAY , OF , URLS , TO , CACHE ] ; ! LOOP THROUGH URLS { ! ASYNCHRONOUS REQUEST FOR ( URL ) ; ! } PSEUDOCODE ANY OF THESE URLS WILL NOW BE STORED TO DISK CACHE ! INSTANT RETRIEVAL WHEN REQUESTED
26. NSArray *photoList = @[ @"https://s3.amazonaws.com/uifaces/faces/twitter/brad_frost/128.jpg", @"https://s3.amazonaws.com/uifaces/faces/twitter/csswizardry/128.jpg", // … etc … ]; for (NSString *photoURL in photoList) { NSURL *url = [NSURL URLWithString:photoURL]; NSURLRequest *request = [NSURLRequest requestWithURL:url cachePolicy:NSURLRequestReturnCacheDataElseLoad timeoutInterval:5.0]; ! [NSURLConnection sendAsynchronousRequest:request queue:[NSOperationQueue mainQueue] completionHandler:^(NSURLResponse *response, NSData *data, NSError *connectionError) { if (!connectionError) { // Here's the image! // UIImage *image = [UIImage imageWithData:data]; } }]; } REAL CODE LIST OF URLS ASYNC REQUEST
27. FOR MORE PRECISE CACHE CONTROL ! USE HTTP CACHE CONTROL HEADERS
28. FOR MORE PRECISE CACHE CONTROL ! USE HTTP CACHE CONTROL HEADERS REQUEST CACHE HEADERS If-Modified-Since If-None-Match ! RESPONSE CACHE HEADERS Cache-Control Last-Modified Check http://nshipster.com/nsurlcache/ for details on each cache header
29. PLEASE DON’T MESS WITH THE DEFAULT CACHE
30. Untold numbers of developers have hacked together an awkward, fragile system for network caching functionality, all because they weren't aware that NSURLCache could be setup in two lines and do it 100× better. http://nshipster.com/nsurlcache/
31. Applications that do not have special caching requirements or constraints should find the default shared cache instance acceptable. https://developer.apple.com/library/ios/documentation/cocoa/Reference/Foundation/Classes/ NSURLCache_Class/index.html#/apple_ref/occ/clm/NSURLCache
32. BUNDLE YOUR CUSTOM FONT
33. ADD YOUR FONT TO YOUR APP 1
34. ADD YOUR FONT TO YOUR APP 1 “Asap” IS THE FONT I’M USING IN THIS PRESENTATION
35. ADD YOUR FONT TO APP-INFO.plist 2
36. NSLog(@"Available fonts: %@", [UIFont familyNames]); CHECK THE NAME OF THE FONT 3
37. body { font-family:"Asap"; line-height: 16pt; } ADD THE FONT TO YOUR CSS 4
38. SUPPRESS INCREMENTAL RENDERING
39. INCREMENTAL RENDERING
40. suppressesIncrementalRendering: YES A boolean value indicating whether the web view suppresses content rendering until it is fully loaded into memory. ! When used properly, suppressing incremental rendering can make web views look more like native views.
41. ADD A LOADING INDICATOR INSTEAD
42. WHEN MAKING YOUR REQUEST SHOW A LOADING INDICATOR AND HIDE THE WEBVIEW - (void) loadWebView { ! // suppress incremental rendering self.myWebView.suppressesIncrementalRendering = YES; ! // hide webview self.myWebView.alpha = 0.0f; ! // Lets show a loading indicator activityIndicator = [[UIActivityIndicatorView alloc] initWithActivityIndicatorStyle: UIActivityIndicatorViewStyleGray]; activityIndicator.center = self.view.center; [activityIndicator startAnimating]; [self.view addSubview:activityIndicator]; } SUPPRESS INCREMENTAL RENDERING HIDE WEBVIEW SHOW SPINNER
43. WHEN YOUR PAGE HAS LOADED HIDE THE LOADING INDICATOR AND FADE IN THE WEBVIEW - (void) webViewDidFinishLoad:(UIWebView *)webView { [activityIndicator removeFromSuperview]; [UIView beginAnimations:nil context:NULL]; [UIView setAnimationDuration:0.1]; webView.alpha = 1.0f; [UIView commitAnimations]; } HIDE LOADING SPINNER SHOW WEBVIEW
44. DOESN’T FEEL LIKE A WEB PAGE
45. PUTS AS MUCH NATIVE INFO IN THE REQUEST INSTEAD OF THE RESPONSE
46. DONT DO THIS <head> . . . <meta content=“Post" name=“app-page-title” /> <meta content=“NewComment" name=“app-right-button” /> </head>
47. DONT DO THIS <head> . . . <meta content=“Post" name=“app-page-title” /> <meta content=“NewComment" name=“app-right-button” /> </head> YOU ALREADY KNOW WHAT THE TITLE AND BUTTON SHOULD BE BEFORE THE PAGE HAS LOADED!
48. PUT IT IN THE URL OR AS A DATA ATTRIBUTE <a href=‘/post/123’ data-title=‘News Feed’ data- right-button=‘NewComment’> /post/123?title=Post&right_button=NewComment
49. INTERCEPT THE REQUEST /post/123? title=Post &right_button=NewComment THEN LOAD THE URL /post/123 1 2
50. THEN FADE IN THE WEBVIEW AND HIDE THE LOADING INDICATOR 3
51. REFERENCE LOCAL IMAGES FROM HTML
52. THE URL LOADING SYSTEM SUPPORTS THE FOLLOWING SCHEMES ftp:// for File Transfer Protocol http:// for Hypertext Transfer Protocol https:// for Hypertext Transfer Protocol with encryption data:// for data URLs
53. THE URL LOADING SYSTEM SUPPORTS THE FOLLOWING SCHEMES ftp:// for File Transfer Protocol http:// for Hypertext Transfer Protocol https:// for Hypertext Transfer Protocol with encryption data:// for data URLs localimg:// YOU CAN CREATE YOUR OWN SCHEME FOR LOADING LOCAL IMAGES
54. CREATE A CUSTOM NSURLProtocol CLASS 1 REGISTER YOUR PROTOCOL 2 [NSURLProtocol registerClass:[LMURLImageProtocol class]]; UPDATE YOUR HTML 3 <img src=“localimg://ourimage.png” /> Example can be found at: http://cloud.loki.io/XlcY
55. iOS 8 & WKWEBVIEW THE FUTURE
57. DEVELOPERS ARE EXCITED!
58. http://nshipster.com/wkwebkit/ WKWEBVIEW IS ONE OF THE MOST SIGNIFICANT ANNOUNCEMENTS TO COME OUT OF WWDC 2014
59. WKWebView ! SAME JAVASCRIPT ENGINE AS SAFARI ! JAVASCRIPT-TO-IOS COMMUNICATION ! 60 FPS SCROLLING ! MULTI-PROCESSING
60. http://cloud.loki.io/XnH0
61. http://cloud.loki.io/XnH0
62. UIWebView & UIWebViewDelegate has been factored out into 14 classes and 3 protocols in WKWebKit.
63. LOOK AT ALL THAT SUPPORT! http://caniuse.com/
64. WEBVIEWS CAN BE FIRST-CLASS CITIZENS IN YOUR APP APPLE MADE ONE THING CLEAR
65. http://www.lokimeyburg.com/Stacker/ Stacker is an open source project I created to kickstart the development of hybrid native/web iPhone apps
66. UPDATES ! WKWebView support only a few days away • Checkout the `feature/wkwebview` branch • Will be backwards compatible with iOS 7 ! New tutorial on building a `Log In` screen • Checkout the Stacker blog
67. FOLLOW ME ON TWITTER @LokiMeyburg