Real World App Development

A presentation for computer science students about various aspects of app development. It's intention is to map theory to practice, by showing some of the Egeniq development processes and an number of case studies.

Delivered at the University of Amsterdam on April 25, 2012 as part of the #appril innitiative.

Transcript

1. http://www.egeniq.com info@egeniq.com @egeniq Universiteit van Amsterdam #appril, 25 april 2012 Ivo Jansch Real World App Development Or ‘My views on the app development process’
2. About Me @ijansch Developer Author Entreprenerd iOS/Android/PHP 2
3. About Egeniq Mobile Tech Knowledge Geeks Development 3
4. Part 1 Let’s think about mobile for a few minutes 4
5. The Web Is increasingly portable 5
6. It’s revolutionary Much like when the phone lost its wall socket 6
7. The Internet Of Things ivo-imac:~ ivo$ ping fridge PING fridge (192.168.1.138): 56 data bytes 7
8. The Web versus The Internet 8
9. Usage Characteristics ‣On the go ‣Short attention span ‣Avoid typing ‣To the point / ad hoc ‣Omnipresent ‣Context Awareness 9
10. ‘Pocket Essentials’ 10
11. Usage - ‘Couch Computing’ ‣Relaxed ‣Freedom ‣Consumption ‣Convergence ‣Companion 11
12. Mobile Technologies ‣Objective-C (iPhone, iPad, iPod Touch) ‣Java (Android, Blackberry, Symbian) ‣HTML5 / Javascript (Any) 12
13. The App vs. The Browser 13
14. Browser based applications ‣Write once, run anywhere ‣Online ‣Requires browser ‣Page based ‣‘Stateless’ 14
15. Native Apps ‣On- and offline ‣Event based ‣Native device experience ‣Convenient access to device features ‣Stateful ‣Monetization through App Stores 15
16. Some statistics ‣Android Market: 425.000 apps (apr 12) ‣Apple App Store: 725.000 apps (feb 12) ‣Web: 3.000.000 websites optimized for mobile (may 11) Sources: ‣ http://blog.appsocial.ly/ ‣ http://www.bizreport.com/2010/10/dotmobi-2000-growth-in-number-of-mobile-ready-websites.html# ‣ http://www.apple.com/iphone/built-in-apps/app-store.html 16
17. Predictions 17
18. Frames of Interaction Bron: http://mattgemmell.com/2011/07/22/apps-vs-the-web/ 18 1 frame 2 frames 3 frames
19. Native or Web technology? ‣Web technology is cross platform, but: • Native offers better user experience (‘shiny’, ‘smooth’, ‘fancy’) • Native is easier to extend with device capabilities (think qr scanning, voice control) ‣Egeniq’s advise: hybrid approach • Start with a native app • Use HTML where it makes sense (content) 19
20. Platform Strengths/Weaknesses IMHO 20
21. Apple iOS ‣Con: • Closed ecosystem / Walled garden • AppStore review process ‣Pro: • Developer friendly • Ecosystem: devices + platform + content • End user experience • Payment platform • AppStore review process 21
22. Android ‣Con: • Rough edges • Many variations in devices, versions (fragmentation) ‣Pro: • Open, multi-vendor ecosystem • More choice in devices • Developer friendly • Fun 22
23. BlackBerry ‣Con: • Not developer friendly (at all!) • Large differences between versions • It’s just not as sexy • Pretty much on its way out ‣Pro: • Security • Business integration 23
24. Windows ‣Con: • It’s Windows • Availability of apps ‣Pro: • Big leaps forward in recent versions • Microsoft’s eagerness to win (or at least survive) 24
25. Cross Platform Development 25 ‣Con: • It’s usually web technology • Less perfect user experience • Common Denominator features ‣Pro: • ‘Write once, run anywhere’ (sort of) • Lower cost
26. Cross Compilers = Instant Coffee 26
27. App Development In Practice “Welcome To The Real World” 27
28. The First Step THINK! 28
29. Before you start ‣Why: Goals • Specific mobile use case • Marketing • Innovative edge • ... ‣What: • Knowing what you want/need • Knowing what’s possible 29
30. Importance of Communication 30 www.projectcartoon.com
31. Define your target audience(s) ‣Important: • What are your users using? • Cost vd Benefit 31 source: http://www.millennialmedia.com/research/mobilemix/
32. The Development Process 32 Developer Customer User
33. The Development Process 33 Interaction Designer Graphical Designer Project Manager Architect Developer Customer User
34. Our ‘Agile’ Process 34 Concept Estimate Project Budget ‣ Concept leads to an estimate of amount of work ‣ Initial estimates form a budget ‣ Budget is used to develop the app ‣ Keeping an eye on budget, changes during the project are welcomed ‣ Deadline and budget are defined up front, functionality will be flexible
35. Our ‘Agile’ Process 35 Design Code Test Polish App Store Review Evaluate ‣ Develop in multiple cycles (sprints) ‣ Each sprint allows project improvements, new ideas, changes in features ‣ The last couple of sprints each deliver a working product that is ‘app store ready’ ‣ While app is being reviewed, next sprint is executed
36. Architecture ‣Software selection (frameworks, packages) ‣Non functional requirements! ‣Think ahead ‣Beware of over-engineering (YAGNI) 36
37. Over-engineering 37 Classroom Teacher Student SysAdmin Classroom Person Entity better ok bad
38. Service Oriented Architecture 38 Some corporate application Dedicated Backend Mobile Optimized API
39. Architecture 39
40. Distributed Source Control (GitHub) 40 Master Repository Developer Repository Code Commit Pull Request Code Review Merge Fork
41. Social Coding 41
42. Quality Assurance ‣QA process is integral part of agile process • Quality is flexible ‣Mind the update life cycle! ‣Testing method & practices • Automated testing (Unit testing) • Manual testing • User Interface testing • Client environment testing (OS versions, hardware) 42
43. Deployment: own your apps! 43
44. App Store Processen 44 Opdrachtgever Bouwer
45. App Store Processen - GOED! 45 Opdrachtgever Bouwer A Bouwer B
46. Real World Development Challenges ‣Security ‣Maintainability ‣Time to Market ‣Performance & Scalability 46
47. What is Scalability? “[...] Scalability is the ability of a system, network, or process, to handle growing amounts of work in a graceful manner or its ability to be enlarged to accommodate that growth.” - Wikipedia 47
48. A few Case Studies 48
49. Case: RTL Nieuws 365 49
50. Native basis ‣Native look & feel ‣Push notificaties ‣Content preloading ‣Performance 50
51. HTML waar het zinvol is 51 HTML
52. HTML waar het zinvol is 52 HTML
53. Scalability ‣API: • LAMP + Varnish • Scenario Driven Design • Content pre-generation ‣ Cron + Command Line PHP • Very important: caching headers and ‘TTL’ ‣Controlled launch process: • Soft launch: sneaky talkshow plug at 23pm day before • Build up buzz throughout launch day • News item in 19.30 RTL News 53
54. Scalability Case: RTLNieuws 365 54
55. Scalability Case: RTLNieuws 365 ‣News item had > 1 million TV viewers ‣40.000 installs on day 1 • 30% of which in 5 minutes following news item ‣~ 100.000 apps installed in week 1 ‣No 1 app store position for 16 days in a row ‣Over 200.000 installs after 2 months 55
56. Case 2: Tiqr 56
57. Tiqr - Mobile Security 57 1 2 3 4 5 6 http://www.tiqr.org
58. Five Tips To Be a Better Developer 58
59. 1. Learn To Google
60. Would I be the only one? Broad Search Generalize the Problem Minimize Scenario Yes No Found Narrow Search Found Post Get help A Problem Solved
61. 2. Ask Questions But Learn To Fish
62. "Give a man a fish and you feed him for a day. Teach a man to fish and you feed him for a lifetime." Chinese Proverb
63. 3. Less = More
64. “Perfection is achieved, not when there is nothing more to add, but when there is nothing left to take away” Antoine de Saint-Exupéry
65. 4. Reflect
66. Evaluate Learn Improve Apply Continuous Evaluation
67. 5. Passion
68. Thank you! Questions? http://www.egeniq.com info@egeniq.com @egeniq http://www.egeniq.com ivo@egeniq.com @ijansch
69. Credits The following creative commons pictures were used in this presentation: ‣ Dow says POO’ by Stepleton - http://www.flickr.com/photos/29407923@N03/2899705638/ ‣ ‘The telephone’ by Tylerdurden - http://www.flickr.com/photos/tylerdurden/529028040/ ‣ ‘Web’ by Kurtxio - http://www.flickr.com/photos/kurtxio/2182760200/ ‣ ‘Heavy cloud, no rain’ by Robynsnest - http://www.flickr.com/photos/robynsnest/12405841/ ‣ ‘Wireless fridge’ from http://www.wirelessgoodness.com/tag/srt746awtn/ ‣ ‘Army iphone app’ by Soldiersmediacenter - http://www.flickr.com/photos/soldiersmediacenter/4271795260/ ‣ ‘Carbon Fibre Wallet’ by Ryan Loos - http://www.flickr.com/photos/rh1n0/4157547404/ ‣ ‘Keys’ by Jamison Judd - http://www.flickr.com/photos/jamisonjudd/2419601050/ ‣ ‘Phone Girl’ by Steffen - http://www.flickr.com/photos/re-ality/460465894/ ‣ ‘Icon_safari_hires’ by Hans Dorsch - http://www.flickr.com/photos/hansdorsch/2861804087/ ‣ ‘Thinking’ by Karola - http://www.flickr.com/photos/karola/3623768629/ ‣ ‘Jus'a web’ by Jusfi - http://www.flickr.com/photos/jusfi/2921202536/ ‣ ‘Fire’ by Matthew Venn - http://www.flickr.com/photos/matthewvenn/366986755/ ‣ Less is more? More than what?’ by Theilr - http://www.flickr.com/photos/theilr/2200873034/ ‣ Google Logo in Building43’ by Robert Scoble - http://www.flickr.com/photos/scobleizer/4249731778/ ‣ ‘Tiffus teaching Hoonan how to fish by Brett Kelly - http://www.flickr.com/photos/inkedmn/758241963/ ‣ ‘Add a spoonful of coffee’ by Martyn Wright - http://www.flickr.com/photos/35521221@N05/5181647830/