Modern Mobile App Development

In November 2016 global mobile internet traffic exceeded desktop internet traffic for the first time in history and has increased ever since. Given this ever increasing usage of mobile devices, tools for mobile app development are maturing and improving fast.

In this talk I want to discuss the history, present state and outlook of mobile app engineering. The discussion of the present state will include a technical journey into the development of a mobile app with React Native - the most popular JavaScript framework to craft mobile applications.

Watch the talk on YouTube at https://www.youtube.com/watch?v=cdrmv1tnTzk

Transcript

1. ANDRÉ KOVAC MODERN MOBILE APP DEVELOPMENT 1
2. MODERN MOBILE APP DEVELOPMENT 2 - How mobile devices shape(d) our lives - From Dumbphone to Smartphone - Mobile App Development Trends - Hybrid Development Improvements - Focus on Developer Experience - Serverless: Cloud Tools empower Frontend Developers - Declarative Programming, Style Systems & Components - Technology Agnosticism
3. 3 DEVELOPER COMMUNITY TECHNOLOGY & HACKATHONS OPEN SOURCE & STACKOVERFLOW ANDRÉ KOVAC
4. 4 SCIENCE COMMUNICATION & TECH WORKSHOPS ANDRÉ KOVAC PROGRAM TO HELP PEOPLE STOP SNORING
5. LET’S MAKE IT INTERACTIVE 5 HTTPS://AHASLIDES.COM/MOBILEAPPS
6. WHICH WORDS DO YOU ASSOCIATE WITH THE TERM “MOBILE APP” 6 HTTPS://AHASLIDES.COM/MOBILEAPPS
7. HOW MOBILE DEVICES SHAPE(D) OUR LIVES 7
8. “WHEN WIRELESS IS PERFECTLY APPLIED, THE WHOLE EARTH WILL BE CONVERTED INTO A HUGE BRAIN, WHICH IN FACT IT IS, ALL THINGS BEING PARTICLES OF A REAL AND RHYTHMIC WHOLE. WE SHALL BE ABLE TO COMMUNICATE WITH ONE ANOTHER INSTANTLY, IRRESPECTIVE OF DISTANCE. NOT ONLY THIS, BUT THROUGH TELEVISION AND TELEPHONY WE SHALL SEE AND HEAR ONE ANOTHER AS PERFECTLY AS THOUGH WE WERE FACE TO FACE, DESPITE INTERVENING DISTANCES OF THOUSANDS OF MILES; AND THE INSTRUMENTS THROUGH WHICH WE SHALL BE ABLE TO DO HIS WILL BE AMAZINGLY SIMPLE COMPARED WITH OUR PRESENT TELEPHONE. A MAN WILL BE ABLE TO CARRY ONE IN HIS VEST POCKET. “ NIKOLA TESLA, 1926 8 https://www.thoughtco.com/history-of-smartphones-4096585
9. DEVICES CONNECTED TO THE INTERNET 9 https://www.oberlo.com/blog/mobile-usage-statistics # Devices 0 1.250.000.000 2.500.000.000 3.750.000.000 5.000.000.000 1995 2005 2011 2019 4.350.000.000 2.260.000.000 1.000.000.000 16.000.000 7.71 BILLION TOTAL WORLD POPULATION 2020 4.48 BILLION TOTAL PHONES 3.5 BILLION SMARTPHONES
10. HOW MANY HOURS DO YOU SPEND ON YOUR MOBILE PHONE EACH DAY? 10 HTTPS://AHASLIDES.COM/MOBILEAPPS
11. MOBILE USAGE 2020 11 https://www.oberlo.com/blog/mobile-usage-statistics -US Adults spend 2:55 h daily on their smartphones. 
 -1 titanic movie, -2 football games -3 hour walk in nature
12. 2018 WAS A SPECIAL YEAR 12 https://www.oberlo.com/statistics/mobile-internet-traffic Desktop 48 % Mobile 52 %
13. FROM DUMBPHONE TO SMARTPHONE 13
14. 14 https://www.dailymail.co.uk/sciencetech/article-2725934/First-smartphone-display.html https://www.youtube.com/watch?time_continue=53&v=GUG7nwMmoUc&feature=emb_logo - Send and receive emails, faxes, and pages - Included apps: notes, address book, calendar, world clock, … 1992 SMARTPHONE IBM SIMON 1985 MOTOROLA TRANSPORTABLE COMMUNICATOR PHONE THE FIRST BLACKBERRY 1999 2000+ SMARTPHONE DUMBPHONE FEATURE PHONES
15. 15 https://www.dailymail.co.uk/sciencetech/article-2725934/First-smartphone-display.html https://www.youtube.com/watch?time_continue=53&v=GUG7nwMmoUc&feature=emb_logo 2007 SMARTPHONE IPHONE 2002 PDA - PERSONAL DIGITAL ASSISTANTS NO PHONE - Innovative touchscreen- centric design 2009 ANDROID VERSION 1.1. 2008 APPLE APP STORE LAUNCHES PHONEGAP PROJECT STARTS - BASIS TO BRIDGE GAP BETWEEN WEB AND MOBILE
16. WHAT MAKES A SMARTPHONE A SMARTPHONE? -Touchscreen Interface -Internet Access -Downloadable Apps -3rd party Applications 16 https://www.dailymail.co.uk/sciencetech/article-2725934/First-smartphone-display.html
17. 3RD PARTY APPLICATIONS 17
18. MOBILE APP DEVELOPMENT 18
19. “ANDRÉ, WE WANT TO BUILD A MOBILE APP - HOW MUCH WILL IT COST?” 19 QUESTION I GET ASKED AT LEAST ONCE A WEEK
20. “WELL, IT DEPENDS.” 20 MY USUAL ANSWER
21. “IS A WEBSITE OPTIMISED FOR MOBILE DEVICES GOOD ENOUGH? DO WE HAVE TO BUILD AN APP?” 21 QUESTION I SOMETIMES GET ASKED
22. “YES, YOU SHOULD BUILD A MOBILE APP.” 22 MY USUAL ANSWER “MOBILE APPS HAVE HIGHER ENGAGEMENT RATES THAN MOBILE-OPTIMIZED WEBSITES OR DESKTOP WEB VIEWING, AND 100-300% HIGHER CONVERSION RATES.” https://techjury.net/blog/mobile-vs-desktop-usage/#gref SHOPIFY EXAMPLE: MOBILE ACCOUNTED FOR 79% OF TRAFFIC AND 69% OF ORDERS IN Q1 2019. https://www.shopifyandyou.com/blogs/news/statistics-about-shopify
23. “ANDRÉ, WE WANT TO BUILD AN APP - SHOULD WE BUILD NATIVE APPS OR A HYBRID APP?” 23 QUESTION I GET ASKED AT LEAST ONCE A MONTH
24. “WELL, IT DEPENDS.” 24 MY USUAL ANSWER
25. 25 111 MILLION SEARCH RESULTS
26. TREND: HYBRID MOBILE APP DEVELOPMENT 26
27. NATIVE VS. HYBRID APP DEVELOPMENT 27 SINGLE-PLATFORM DEVELOPMENT MULTI-PLATFORM DEVELOPMENT NATIVE HYBRID PWA ENHANCED WEB APPS https://medium.com/adjust-creative/designing-for-android-and-ios-c32a02c3c06a
28. 28 NATIVE HYBRID PWA BUILD ONCE USE EVERYWHERE BUILD MULTIPLE TIMES FOR EACH TARGET PLATFORM BUILD ONCE USE EVERYWHERE https://medium.com/adjust-creative/designing-for-android-and-ios-c32a02c3c06a BEST PERFORMANCE VARYING PERFORMANCE GREATLY VARYING PERFORMANCE
29. “ANDRÉ, WE WANT TO BUILD AN APP - SHOULD WE BUILD NATIVE APPS OR A HYBRID APP?” 29 QUESTION I GET ASKED AT LEAST ONCE A MONTH
30. 30 USER EXPERIENCE TEAM SKILLS TARGET PLATFORM(S) DEVELOPER EXPERIENCE TARGET MARKET(S) WEB DEVELOPMENT BACKGROUND NATIVE VS. HYBRID - IT DEPENDS ON… PROJECT SCOPE
31. USER EXPERIENCE (UX) 31
32. USER EXPERIENCE - App Design - Ease of use - Performance - Startup time and user interaction speed - Stability - Familiarity 32 USER'S EMOTIONS AND ATTITUDES ABOUT USING YOUR PRODUCT
33. 33 MOBILE APPS OFFER A BETTER USER EXPERIENCE THAN MOBILE WEBSITES COMPANIES WANT YOU TO USE THEIR MOBILE APPS
34. 34 WEB APP IN MOBILE BROWSER
35. PROGRESSIVE WEB APPS (PWA) 35
36. PWA 36 WEB APP IN MOBILE BROWSER
37. NATIVE VS. HYBRID 37 IMPACT ON PERFORMANCE
38. NATIVE DEVELOPMENT 38
39. HYBRID DEVELOPMENT - Multi-Platform development - Can also target Desktop - Three main approaches 39
40. FLUTTER 40
41. REACT NATIVE 41
42. IONIC 42
43. HYBRID 43 NATIVE IONIC REACT NATIVE
44. NOTE - Just keep in mind, performance almost always comes down to how you write your code, not which platform or framework you choose. 44
45. 45 NATIVE HYBRID PWA BUILD ONCE USE EVERYWHERE BUILD MULTIPLE TIMES FOR EACH TARGET PLATFORM BUILD ONCE USE EVERYWHERE https://medium.com/adjust-creative/designing-for-android-and-ios-c32a02c3c06a
46. 46 NATIVE HYBRID PWA BUILD (ALMOST) ONCE USE EVERYWHERE BUILD MULTIPLE TIMES FOR EACH TARGET PLATFORM BUILD ONCE USE (ALMOST) EVERYWHERE https://medium.com/adjust-creative/designing-for-android-and-ios-c32a02c3c06a BEST PERFORMANCE VARYING PERFORMANCE GREATLY VARYING PERFORMANCE
47. DEVELOPER EXPERIENCE (DX) 47
48. USER EXPERIENCE 48 USER'S EMOTIONS AND ATTITUDES ABOUT USING YOUR PRODUCT EMOTIONS AND ATTITUDES OF THE PEOPLE WHO BUILD YOUR PRODUCT WHILE THEY BUILD IT DEVELOPER EXPERIENCE
49. DEVELOPER EXPERIENCE IS IMPORTANT 49 https://www.youtube.com/watch?v=HMhrRovP9qA
50. DEVELOPER EXPERIENCE 50 EMOTIONS AND ATTITUDES OF THE PEOPLE WHO BUILD YOUR PRODUCT WHILE THEY BUILD IT
51. DEVELOPER EXPERIENCE - Maintenance of libraries - Debugging tools - Online Community - Good documentation - Support in learning 51 EMOTIONS AND ATTITUDES OF THE PEOPLE WHO BUILD YOUR PRODUCT WHILE THEY BUILD IT - App Design - Ease of use - Performance - Stability +
52. 52 NATIVE HYBRID PWA TOOLING WAS A PAIN BIG RECENT IMPROVEMENTS ALL IN ONE ALL IN ONE KNOWN WEB TOOLS https://medium.com/adjust-creative/designing-for-android-and-ios-c32a02c3c06a
53. TEAM SKILLS 53
54. 54 ANDROID JAVA/KOTLIN WINDOWS PHONE C# IOS OBJECTIVE C/SWIFT FLUTTER DART REACT NATIVE JAVASCRIPT IONIC JAVASCRIPT PWA JAVASCRIPT VUE NATIVE JAVASCRIPT NATIVE HYBRID PWA XAMARIN C# JAVASCRIPT REACT ANGULAR VUE …
55. 55 NATIVE HYBRID PWA EXISTING JAVASCRIPT KNOWLEDGE EXPERTISE IN TEAM SWIFT UI EASY TO PICK UP FOR REACT DEVS EXISTING WEB-DEV KNOWLEDGE https://medium.com/adjust-creative/designing-for-android-and-ios-c32a02c3c06a
56. PROJECT SCOPE 56
57. 57 NATIVE HYBRID PWA MOBILE APP + CMS + … PLANED ONLY MOBILE APP ON AGENDA TOLERATE DEFICIENCIES FOR IOS USERS https://medium.com/adjust-creative/designing-for-android-and-ios-c32a02c3c06a
58. TARGET MARKET(S) 58
59. WEB TRAFFIC 2020 59 Desktop 48 % Mobile 52 %
60. WEB TRAFFIC 2020 60 https://gs.statcounter.com/platform-market-share/desktop-mobile-tablet/africa Tablet 1,3 % Desktop 38,6 % Mobile 60,1 % Tablet 2,9 % Desktop 56,0 % Mobile 41,1 % AFRICA EUROPE
61. 61 https://www.youtube.com/watch?v=etrE_NcjXX8
62. OPERATING SYSTEM MARKET SHARE WORLDWIDE 62 Chrome OS 0,8 % Unknown 1,5 % OSX 8,7 % iOS 14,5 % Android 36,8 % Windows 37,7 % https://gs.statcounter.com/os-market-share/mobile/worldwide
63. MOBILE OPERATING SYSTEM MARKET SHARE WORLDWIDE 63 Windows 0,03 % KaiOS 0,07 % Unknown 0,13 % Samsung 0,22 % iOS 26,56 % Android 72,99 %
64. MOBILE OPERATING SYSTEM MARKET SHARE EUROPE 64 Unknown 0,01 % Linux 0,04 % Windows 0,06 % Samsung 0,25 % iOS 31,79 % Android 67,85 % https://gs.statcounter.com/os-market-share/mobile/europe
65. MOBILE OPERATING SYSTEM MARKET SHARE USA 65 BlackBerry OS 0,01 % Unknown 0,01 % Windows 0,01 % Samsung 0,12 % iOS 60,23 % Android 39,62 % https://gs.statcounter.com/os-market-share/mobile/united-states-of-america
66. MOBILE OPERATING SYSTEM MARKET SHARE INDIA 66 Nokia Unknown 0,05 % Tizen 0,07 % Samsung 0,15 % KaiOS 0,48 % iOS 3,19 % Android 96,06 % https://gs.statcounter.com/os-market-share/mobile/india
67. TREND: SERVERLESS DEVELOPMENT EMPOWERS FRONTEND DEVELOPERS 67
68. “THERE ARE ONLY TWO HARD THINGS IN COMPUTER SCIENCE: CACHE INVALIDATION AND NAMING THINGS.” 68 PHIL KARLTON
69. TRADITIONAL WAY - Develop separate apps for Android and iOS and … - Care about servers for our API (load balancing etc.) - Databases - Hosting - … 69
70. CLOUD FRAMWORKS… - …help with: - Data storage and Synchronization - Automatic code generation - Authentication + Email/SMS Verification - Adding Analytics - A/B Testing - Running backend functionality - Scaling on-demand via content delivery networks (CDNs) 70 AWS AMPLIFY GOOGLE FIREBASE BACK4APP PARSE …
71. TREND: DECLARATIVE OVER IMPERATIVE 71
72. MOM WANTS KID TO TIDY UP ITS ROOM - Imperative: “Pick up the toys, then empty the bin, then remove dust and finally vacuum the floor.” 
 - Declarative: “Here’s a picture of how your room looks like clean. I want you to get it into that state in 30 minutes.” 72 https://unsplash.com/s/photos/kids-room
73. 73 HTML <body> <h1>Welcome to this App</h1> <button>Show Text</button> <p style="display: none">Hello World</p> </body> JQUERY (LOGIC) $('button').click(() => { $('p').show(); }); IMPERATIVE GIVE IMPERATIVE COMMANDS
74. 74 REACT (LOGIC) import React, { useState } from 'react'; const App = () => { const [didPressButton, setDidPressButton] = useState(false); return ( <div className="App"> <h1>Welcome to this App</h1> <button onClick={() => setDidPressButton(true)}>Show Text</button> {didPressButton ? <p>Hello World</p> : null} </div> ); }; export default App; DECLARATIVE
75. 75 REACT import React, { useState } from 'react'; const App = () => { const [didPressButton, setDidPressButton] = useState(false); return ( <div className="App"> <h1>Welcome to this App</h1> <button onClick={() => setDidPressButton(true)}>Show Text</button> {didPressButton ? <p>Hello World</p> : null} </div> ); }; export default App; <body> <h1>Welcome to this App</h1> <button>Show Text</button> <p style="display: none">Hello World</p> </body> $('button').click(() => { $('p').show(); }); HTML + JQUERY
76. 76 FLUTTER REACT NATIVE Row( mainAxisAlignment: MainAxisAlignment.spaceEvenly, children: [ Image.asset('images/pic1.jpg'), Image.asset('images/pic2.jpg'), Image.asset('images/pic3.jpg'), ], ); <Container> <Image source={require('./images/pic1.jpg')} /> <Image source={require('./images/pic2.jpg')} /> <Image source={require('./images/pic3.jpg')} /> </Container> // const Container = styled.View` flex: 1; flex-direction: row; justify-content: space-evenly; `; https://flutter.dev/docs/development/ui/layout “SHOW, DON’T TELL” “SHOW, DON’T TELL”
77. TREND: CONVERGING STYLE SYSTEM 77
78. PAIN OF CENTERING 78 /* This parent can be any width and height */ .outer { text-align: center; } /* The ghost, nudged to maintain perfect centering */ .outer:before { content: "."; display: inline-block; height: 100%; vertical-align: middle; width: 0; overflow: hidden; } /* The element to be centered, can also be of any width and height */ .inner { display: inline-block; vertical-align: middle; width: 300px; } .outer-container { display: table; width: 100%; height: 120px; background: #ccc; } .inner-container { display: table-cell; vertical-align: middle; text-align: center; } .centered-content { display: inline-block; background: #fff; padding: 20px; border: 1px solid #000; } https://stackoverflow.com/questions/114543/how-to-horizontally-center-a-div?rq=1 🙈 https://news.artnet.com/art-world/see-photographers-hilarious-response-monkey-selfie-lawsuit-363581 HORIZONTAL CENTERING
79. PAIN OF CENTERING - Flexbox design system helps - Adopted by major UI frameworks 79 https://news.artnet.com/art-world/see-photographers-hilarious-response-monkey-selfie-lawsuit-363581 #inner { display: inline-block; } #outer { display: flex; justify-content: center; }
80. 80 FLUTTER REACT NATIVE Row( mainAxisAlignment: MainAxisAlignment.spaceEvenly, children: [ Image.asset('images/pic1.jpg'), Image.asset('images/pic2.jpg'), Image.asset('images/pic3.jpg'), ], ); <Container> <Image source={require('./images/pic1.jpg')} /> <Image source={require('./images/pic2.jpg')} /> <Image source={require('./images/pic3.jpg')} /> </Container> // const Container = styled.View` flex: 1; flex-direction: row; justify-content: space-evenly; `; https://flutter.dev/docs/development/ui/layout PAIN OF EVENLY SPACING OBJECTS
81. TREND: ENCAPSULATED BUILDING BLOCKS 81
82. PAIN OF GLOBAL STYLES 82 🙈 li { margin-top: 0.5rem; margin-bottom: 0.1rem; } li > p { margin-bottom: 0; } ul > li { margin-bottom: 5px; } ul > li { &:before { content: ' ▶︎ '; color: ${theme.colors.brand[500]}; margin-right: 0.3rem; } } ul ul > li { &:before { content: '•'; color: ${theme.colors.brand[500]}; margin-right: 0.3rem; } } ol > li { counter-increment: step-counter; margin-bottom: 5px; } li > ul { margin-top: 0; } ol > li > p, ul > li > p { display: inline; } ol > li { &:before { content: counter(step-counter); margin-right: 4px; margin-bottom: 10px; font-size: 80%; background-color: ${theme.colors.brand[500]}; color: white; font-weight: bold; border-radius: 30%; text-align: center; display: inline-block; width: 1.2rem; } } GLOBAL CSS FILE - Cascading styles which overwrite each other…
83. 83 body { background-color: #f0f0f2; margin: 0; padding: 0; font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", "Open Sans", "Helvetica Neue", Helvetica, Arial, sans- serif; } div { width: 600px; margin: 5em auto; padding: 2em; background-color: #fdfdff; border-radius: 0.5em; box-shadow: 2px 3px 7px 2px rgba(0, 0, 0, 0.02); } a:link, a:visited { color: #38488f; text-decoration: none; } GLOBAL CSS FILE <body> <div> <h1>Example Domain</h1> <p> This domain is for use in illustrative examples in documents. You may use this domain in literature without prior coordination or asking for permission. </p> <p> <a href="https://www.iana.org/ domains/example">More information...</a> </p> </div> </body> HTML FILE <body> <div> <h1>Other page</h1> <p> This is a different page </p> <p> <a href=“https://www.iana.org/domains/ example”>Another link…</a> </p> </div> </body> HTML FILE <body> <div> <h1>Other page</h1> <p> This is a different page </p> <p> <a href=“https://www.iana. example”>Another link…</a> </p> </div> </body> HTML FILE
84. 84 REACT NATIVE COMPONENT import React from 'react'; import styled from "styled-components"; const App = () => ( <Container> <Image source={require("./images/pic1.jpg")} /> <Image source={require("./images/pic2.jpg")} /> <Image source={require("./images/pic3.jpg")} /> </Container> ); const Container = styled.View` flex: 1; flex-direction: row; justify-content: space-evenly; `; LOCAL COMPONENT STYLES
85. 85 FLUTTER WIDGET Text( ‘This is some sample text. Only written to take up some space.', maxLines: 3, overflow: TextOverflow.ellipsis, style: TextStyle( color: Colors.grey[800], fontWeight: FontWeight.w900, fontStyle: FontStyle.italic, fontFamily: 'Open Sans', fontSize: 40), ) LOCAL WIDGET STYLES
86. 86 SWIFTUI MODIFIERS Text(“Some headline") .foregroundColor(.purple) .font(.headline) .padding() .background(Color.orange) LOCALLY MODIFY STYLE OF VIEW WITH MODIFIERS
87. FRAMEWORK AGNOSTICISM 87 TECHNOLOGY AGNOSTICISM &
88. “ANDRÉ, WHICH FRAMEWORK SHOULD I LEARN?” 88 QUESTION I GET ASKED AT LEAST ONCE A WEEK
89. “WELL, IT DEPENDS.” 89 MY USUAL ANSWER
90. “PICK THE ONE WHICH APPEALS TO YOU AND FOCUS ON UNDERSTAND THE UNDERLYING PRINCIPLES.” 90 MY ANSWER WHEN IT’S CONCERNED WITH MOBILE DEVELOPMENT FRAMEWORKS
91. OBSERVATIONS - Frameworks move into similar directions - Underlying principles > Framework details - (Parts of) Dev-ops can be outsourced - However: Understanding the big picture still necessary - Personally, React is a wonderful journey for me. - Rethinking best practices - Sophisticated 3rd party libraries taught me many concepts. 91
92. QUIZ WHAT DID YOU LEARN TODAY? 92 THANK YOU!