Lesson learned from 3 years with hybrid apps
1 like1,141 views
The document discusses hybrid apps, explaining their structure, benefits, and challenges. It covers aspects such as the importance of using frameworks like PhoneGap, managing offline functionality, and performance concerns with large apps. Additionally, it includes tips for development and outlines the need for strategies in handling the Document Object Model (DOM) and memory management.
Lesson learned from 3 years with hybrid apps
- 1. Johan Holm – Software Developer Joakim Jonsson – Software Developer Patrik Malmquist – Enterprise Mobility Manager
- 2. 1. Who are we and what do we do? 2. What is an hybrid app? 3. How does hybrid apps work? 4. What are the benefits? 5. What are the problems? 6. Tips and tricks when working with larger hybrid apps
- 4. https://www.pensionsmydigheten.se/prognosaapp/ Allt innehåll hämtas från webben Native
- 5. Code reuse & known techniques
- 6. Server side ”BUILT IN” REMOTE
- 7. HTML5 & JavaScript LocalStorage, Application Cache, App Manifest WebView (iOS), WebUI (Android) Ready Made: Phonegap Frameworks: Senscha touch, Jquery Mobile, jqTouch
- 8. <!DOCTYPE html> <html> <head> <title>Page Title</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" /> <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script> <script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script> </head> <body> <div data-role="page"> <div data-role="content"> <p>Page content goes here.</p> </div><!-- /content --> </div><!-- /page --> </body> </html>
- 10. 1. We can alter without deploy to app store 2. Little effort to get an app with PhoneGap or native wrapper. 3. We can have same developers 4. We can have one code base
- 11. Offline, DOM, Memory, Cache & Upgrades ...
- 12. Offline problems: • Call for services will fail • Navigation between pages will fail • On slow connection, navigation will be painful • Images/css not downloaded will not show up and layout will be breaked • Functionality will be affected when not all resources are in place To speed things up: • Pre downloading • Cache items • Pre-render markup in document For the build in way we don't have the issue with downloading content. But it will be affected by how we structure our app when it becomes large.
- 14. Not So Fast: Two Major Problems: • DOM hockey stick at 10K nodes • How is is possible to organize 100s of KLOC? DOM Problem: • Visualize DOM as an IO device, not a document • Build machinery in JavaScript that manages the device • Output chunks; garbage collect and discard old chunks • AMD
- 16. • Interpreted language • Global namespace • Garbage collector • Memory • Use a stategy to create and delete variables/objects • User the var keyword • Use Design Patterns • Namespace! var myApp = {}; • myApp.func = function(){}; myApp.func = null; • Garbage collector in native webviews is terrible to predict. • It will certainly remember everything and little more.
- 18. - Good Log-Strategy - 2 or more developers
- 19. • WebChromeClient • Iphone Configuration Utility • WebInspector • TestFlight • JSConsole
- 20. • iPhone Configuration Utility • Testflight
- 21. • Threads • Memory • Debuging
- 22. • Async • Visualize the DOM as I/O system • Use a memory strategy • CSS3 propertys that are hardware accelerated • DCN • Testflight • Log strategy for both web and native
- 23. Johan Holm – johan.holm@sigma.se Joakim Jonsson – joakim.johnsson@sigma.se Patrik Malmquist – patrik.malmquist@sigma.se