5+1 OPLOSSINGEN VOOR EEN APP Auteur: Fokke Zandbergen – App Imagineer 6 November 2013
5+1 OPLOSSINGEN VOOR EEN APP
Introductie: 5+1 oplossingen voor een app ________________________________________________ 3 De kans ____________________________________________________________________________ 3 De uitdaging ________________________________________________________________________ 3 Software ___________________________________________________________________________ 3 Hardware ___________________________________________________________________________ 3 IT ________________________________________________________________________________ 4 De 5+1 oplossingen __________________________________________________________________ 4 The right tool for the job _____________________________________________________________ 4 1. HTML website ____________________________________________________________________ 4 Mobiele of responsieve website ________________________________________________________ 4 Responsieve websites ________________________________________________________________ 4 Geen kleine stap _____________________________________________________________________ 5 Compatibiliteit ______________________________________________________________________ 5 Distributie __________________________________________________________________________ 5 2. HTML app ________________________________________________________________________ 5 Een website in een app ________________________________________________________________ 5 Veredelde browser ___________________________________________________________________ 5 Build once, run everywhere ____________________________________________________________ 5 Same everywhere ___________________________________________________________________ 6 3. Pure Native ______________________________________________________________________ 6 Volledig native ______________________________________________________________________ 6 Altijd actueel _______________________________________________________________________ 6 Wiel opnieuw uitvinden ______________________________________________________________ 6 4. Cross Native _____________________________________________________________________ 6 Native interface _____________________________________________________________________ 6 Platform‐eigen interface ______________________________________________________________ 7 Gedeelde logica ______________________________________________________________________ 7 Build once, adapt everywhere __________________________________________________________ 7 5. Compiled Native ___________________________________________________________________ 7
5+1 OPLOSSINGEN VOOR EEN APP Volledig native _______________________________________________________________________ 7 Compiled ___________________________________________________________________________ 7 Compiled JavaScript _________________________________________________________________ 8 6. App Factories ____________________________________________________________________ 8 Denken in componenten _____________________________________________________________ 8 Publieke app factories _______________________________________________________________ 8 Eigen app factory ___________________________________________________________________ 8 Een vergelijking _____________________________________________________________________ 9
Introductie: 5+1 oplossingen voor een app DE KANS INTEGRATIE 1 In april publiceerde de VN een rapport waarin de conclusie werd getrokken dat inmiddels meer mensen de beschikking hebben over een mobiele telefoon dan over sanitair. Het is blijkbaar voor mensen makkelijker én belangrijker om een telefoon aan te schaffen. Dit zegt veel over de belofte van mobiele toepassingen. Dat geldt voor consumenten, maar zeker ook voor het bedrijfsleven. In een tijd waarin de grenzen tussen werk en privé vervagen en consumenten gewend zijn om overal en altijd alles te kunnen doen, verwachten werknemers dit ook van hun werkgever, én visa versa. Neem de bekende roep om “meer blauw op straat”. Met apps voor uren registratie, het uitschrijven van bonnen, opmaken van een proces‐verbaal, natrekken van gegevens enzovoorts, kan de kostbare tijd van agenten veel effectiever besteed worden.
DE UITDAGING DIFFERENTIATIE
SOFTWARE De smartphone en tablet markt zoals we die nu kennen is niet uitgevonden, maar wel bepalend gevormd door 2 3 de introductie van de iPhone in 2007 de iPad in 2010 . Beide zijn een klassiek voorbeeld van Disruptive 4 Innovation waarbij giganten als Nokia en Microsoft het nakijken hadden. Maar zoals elke jonge, snel 5 groeiende markt is er inmiddels meer dan Apple. Google presenteerde in 2009 Android en is inmiddels in 6 aantal installaties groter dan Apple’s iOS. Ook betraden nieuwkomers zoals FireFox en Tizen de markt.
HARDWARE Maar niet alleen op het vlak van software zien we differentiatie. Tussen phones en tablets ontstond de 7 8 9 phablet categorie en terwijl iedereen uitkijkt naar Google Glass , zien ook smartwatches het licht en worden 10 zelfs auto’s voorzien van apps. We spreken dan ook wel over Internet of things . Talloze apparaten met elk hun eigen specifieke eisen.
1 http://blogs.worldbank.org/africacan/more‐cell‐phones‐than‐toilets 2 http://www.youtube.com/watch?v=t4OEsI0Sc_s 3 http://www.apple.com/apple‐events/january‐2010/ 4 http://www.claytonchristensen.com/key‐concepts/ 5 http://nl.wikipedia.org/wiki/Android_(besturingssysteem) 6
http://tcrn.ch/1bccUj4 http://nl.wikipedia.org/wiki/Phablet 8 http://www.google.com/glass/ 9 http://bit.ly/1cN3RpO 10 http://en.wikipedia.org/wiki/Internet_of_Things 7
5+1 oplossingen voor een app
3
IT Een derde vlak wat mede door deze ontwikkeling te maken heeft gekregen met differentiatie is de achterliggende IT van bedrijven. Grote bedrijven hebben te maken met tientallen informatiesystemen waaruit zij op een veilige manier informatie wil ontsluiten naar apps en visa versa. Maar buiten eigen systemen is er 11 12 ook behoefte om aan te sluiten op systemen van leveranciers, SAAS , open data van bijvoorbeeld 13 overheden, sociale media (B2C) en BYOD/A .
DE 5+1 OPLOSSINGEN Dit gefragmenteerde landschap vraagt om flexibele middleware om de data uit de achterliggende IT te aggregeren, bewerken en vervolgens te ontsluiten. De apps voor de verschillende software platformen en hardware varianten kunnen hierdoor licht worden gehouden. Bovendien hoeven al deze apps hierdoor niet bij elke veranderingen in de achterliggende IT te worden gewijzigd. Een derde voordeel is dat de middleware de achterliggende gegevens kan voorbewerken en bufferen, waardoor de apps snel en op maat hun gegevens ontvangen.
THE RIGHT TOOL FOR THE JOB We hebben dus lichte apps nodig, voor een groot en groeiend aantal platformen en apparaten. In het vervolg van dit artikel bespreek ik de kenmerken, voor‐ en nadelen van 5 technieken om apps te ontwikkelen: van HTML website tot pure native app. Met elk van deze technieken is het ten slotte mogelijk om tot een 6e oplossing te komen, namelijk die van de App Factory.
1. HTML website
MOBIELE OF RESPONSIEVE WEBSITE Elke smartphone heeft de beschikking over internet en een browser waarmee vrijwel elke website bekeken kan worden. Omdat het scherm klein is en de apparaten minder krachtig, zijn er wel beperkingen. Om hier rekening mee te houden bieden websites vaak een specifieke mobiele variant aan. Deze heeft meestal een eigen adres zoals http://m.nu.nl/ bijvoorbeeld.
RESPONSIEVE WEBSITES Een recente trend is die van “responsieve websites”. Door gebruik te maken van de nieuwste HTML5, CSS3 en JavaScript technieken, vormen deze websites zich automatisch naar het formaat van het scherm en de mogelijkheden van het apparaat. Dit heeft als groot voordeel dat er maar één website onderhouden hoeft te worden, die bovendien ook tablets beter bedient.
11 http://nl.wikipedia.org/wiki/Software_as_a_Service 12 http://nederlandopentdata.nl/ 13 http://www.mobileiron.com/en/smartwork‐blog/enterprise‐mobility‐management‐byoa‐new‐byod
5+1 oplossingen voor een app
4
GEEN KLEINE STAP Van een reguliere website of web applicatie naar een mobiele of responsieve versie lijkt in eerste instantie een kleine stap. Houdt er echter rekening mee dat de website niet alleen volledig opnieuw zal moeten worden vormgegeven, maar ook doordácht. Niet alleen de vorm moet zich aanpassen. Op een smartphone moet ook daadwerkelijk minder informatie worden getoond en lange formulieren lenen zich eveneens niet voor mobiel gebruik.
COMPATIBILITEIT Een andere belangrijk aandachtspunt is de compatibiliteit met de grote range aan verschillende browsers. Net als voor desktop computers zijn er veel verschillende mobiele browsers. De verschillen worden kleiner, maar zijn er wel degelijk. Het gebruik van een front‐end framework zoals Bootstrap of jQuery Mobile kan dit grotendeels ondervangen.
DISTRIBUTIE Mobiele websites zijn overal en op elk type telefoon te bereiken, zonder tussenkomst van een App Store. Op de meeste systemen kan de gebruiker een snelkoppeling naar de website maken en deze tussen de iconen van de apps plaatsen. Distributie buiten de App Store heeft ook nadelen. Zo kan er geen geld worden gevraagd voor de download en kan de app geen gebruik maken van de meeste systeemfuncties. Toegang tot de GPS, camera en zelfs push notificaties voor websites zijn wel in ontwikkeling.
2. HTML app
EEN WEBSITE IN EEN APP Met name vanwege de beperkte toegang tot systeemfuncties en om gebruik te maken van de (betaalde) distributie via de App Store, is een oplossing bedacht waarbij mobiele websites feitelijk worden “verpakt” in een “echte” app.
VEREDELDE BROWSER Zo’n app is in feite niet veel meer dan een simpele browser ‐ zonder adresbalk en knoppen ‐ die slechts één website toont. Ook deze website wordt verpakt in de app. Via JavaScript kan de app indien nodig informatie van het internet ophalen en tonen. Op een vergelijkbare manier kan de website in de app ook contact maken met de app waarin zij verpakt is. Zo kan de website in beperkte mate ook systeemfuncties aanroepen. Omdat dit aanvraag voor aanvraag afgehandeld moet worden is de reactiesnelheid wel beperkt.
BUILD ONCE, RUN EVERYWHERE Alleen de verpakking hoeft voor elk platform (iOS, Android etc.) te worden ontwikkeld en kan bovendien voor 14 meerdere apps opnieuw gebruikt worden. Oplossingen zoals Cordova/PhoneGap zijn dan voor een groot 14 http://phonegap.com
5+1 oplossingen voor een app
5
aantal platformen beschikbaar, waardoor weinig ingeleverd hoeft te worden op het grote bereik van een reguliere mobiele website.
SAME EVERYWHERE Elk platform heeft zijn eigen identiteit en manier van werken. Websites verpakt als app zien er echter meestal overal hetzelfde uit. Er wordt geen gebruik gemaakt van voor het platform standaard knoppen, menu’s en dergelijke. Dit kan voor gebruikers verwarrend zijn, zeker wanneer de website naar één specifiek platform (vaak iOS) gemodelleerd is. Een ander nadeel van HTML in plaats van een echte, “native” vormgeving is de snelheid. De reactiesnelheid van een web interface is merkbaar trager dan die van apps.
3. Pure Native VOLLEDIG NATIVE Een native app is een app volgens het boekje. Gebouwd met de software en in de programmeertaal zoals deze is voorgeschreven door het platform.
ALTIJD ACTUEEL Een groot voordeel van deze oplossing is dat al vanaf de eerste beta van een nieuwe versie van bijvoorbeeld iOS kan worden geëxperimenteerd met nieuwe mogelijkheden. Geen tussentaal of ‐laag betekent onbeperkte toegang tot de duizenden systeemfuncties en beschikbare onderdelen van derden, zoals koppelingen met sociale netwerken, SAP systemen etc.
WIEL OPNIEUW UITVINDEN Aan de andere kant betekent dit ook dat voor elk nieuw platform weer andere specialistische kennis vereist is en de app in de specifieke taal van elk platform geschreven moet worden. Naar mate het aantal platformen toeneemt levert dit een aanzienlijke kostenpost op.
4. Cross Native NATIVE INTERFACE Een heel andere benadering in reactie op de beperkingen van zowel HTML websites als Pure Native apps, is wat ik “cross native” zou willen noemen. Net zoals bij HTML apps kunnen vanuit één bron meerdere platformen bediend worden. Het grote verschil zit hem echter in de manier waarop.
5+1 oplossingen voor een app
6
PLATFORM-EIGEN INTERFACE Alles aan een cross native app is “echt”. De knoppen, navigatie‐elementen zoals tabs, toolbars en Android actionbar zijn geen HTML imitaties, maar daadwerkelijk de platform‐eigen onderdelen. Op iOS zul je dus geen actionbar tegenkomen en op Android geen tabgroup onderaan. De app reageert en ziet er op elk platform precies uit zoals je dat daar van een app verwacht.
GEDEELDE LOGICA Pas op het moment dat je op een knop drukt verschilt cross native van puur native. Elk platform gebruikt haar eigen programmeertaal. Zo zijn apps voor iOS in Objective‐C geschreven en gebruikt Android JAVA. Dit is precies de reden waarom het ontwikkelen van een app voor meerdere platformen zo kostbaar is en oplossingen zoals tot nu toe besproken steeds populairder worden. Bij cross native apps wordt vanuit de platform‐specifieke taal een stuk code in een ándere, gedeelde taal uitgevoerd, zoals bijvoorbeeld JavaScript. Nadat de code is uitgevoerd is bijvoorbeeld duidelijk dat er een nieuw scherm geopend moet worden.
BUILD ONCE, ADAPT EVERYWHERE Tot wel 90% van de code van een cross native app kan identiek zijn voor elk platform. Maar anders dan bij een HTML app is het motto hier niet “run everywhere”, maar “adapt everywhere”. Per platform zal de interface aangepast moeten, maar tegen een fractie van de tijd en kosten voor het volledig ontwikkelen van een app per platform. 15 16 Oplossingen in deze categorie zijn Appcelerator Titanium en Kony .
5. Compiled Native VOLLEDIG NATIVE De laatste oplossing die ik wil bespreken heb ik Compiled Native genoemd. Deze oplossing combineert de voordelen van Cross Native met die van Pure Native.
COMPILED Terwijl iOS geschreven wordt in Objective‐C en Android in JAVA, wordt bij beide de code wanneer de app verpakt wordt voor distributie omgezet in assembly, ook wel machinetaal genoemd. Dit proces heet compileren. Andere talen zoals HTML, CSS, JavaScript, maar bijvoorbeeld ook het bekende PHP en de klassieke ASP worden geïnterpreteerd. Vergelijk dit met het lezen van een Engelstalig boek. Je kunt deze vooraf laten vertalen in het Nederlands, of deze vertaalslag tijdens het lezen van het boek eigenlijk zelf uitvoeren. Het laatste wordt door de meeste mensen als inspannender ervaren. Voor computers is dat niet veel anders. 15 http://www.appcelerator.com 16 http://kony.com
5+1 oplossingen voor een app
7
COMPILED JAVASCRIPT Behalve sneller, heeft een gecompileerde taal ook als voordeel dat op machine‐niveau de verschillende met andere talen wegvallen. En dit is precies waar compiled native haar belangrijkste voordeel behaalt. De app kan worden geschreven in bijvoorbeeld C# of JavaScript, maar zonder uitzondering alles gebruiken en bereiken wat pure native kan. 17 18 Oplossingen in deze categorie zijn Appcelerator Titanium 4.0 en Xamarin .
6. App Factories DENKEN IN COMPONENTEN Anders dan desktop applicaties concentreren apps zich het beste op één of enkele taken. Bij grotere bedrijven is dan ook al snel behoefte aan tien tot zelfs tientallen in‐ house apps en vaak ook meerdere B2C apps. Met BYOD zullen veel van die apps bovendien voor meerdere platformen beschikbaar moeten zijn. De keuze voor één van de bovengenoemde cross platform technieken ligt dan voor de hand. Maar de échte besparing valt te behalen door cross app te denken. Ontwikkel middleware rond services in plaats van één specifieke app, ontwikkel vervolgens app componenten en stel ten slotte hieruit apps samen.
PUBLIEKE APP FACTORIES Voor B2C zijn er inmiddels een aantal dienstverleners die het app factory model aanbieden. Een goed 19 voorbeeld is het Europese GoodBarber . Via een zeer gebruiksvriendelijk CMS kan een pure native app voor iOS en Android, maar ook een mobiele website opgebouwd worden uit tal van componenten. Denk hierbij aan bronnen als RSS, Wordpress, iCal, maar API’s van eigen middleware. Hiermee kan werkelijke binnen enkele uren een app ingericht en op maat vormgegeven worden.
EIGEN APP FACTORY Een bestaande app factory zal voor in‐house apps waarschijnlijk niet alle noodzakelijke componenten bevatten. Er zal dan door het bedrijf of een technische partner een eigen app factory moeten worden opgezet. Cruciaal is de keuze voor een duurzame middleware oplossing. Deze moet probleemloos aan kunnen sluiten op bestaande én toekomstige back‐end systemen, zowel in‐house als van externe partners. Ook voor de componenten moeten duidelijke standaarden worden bepaald, zodat de ontwikkeling van nieuwe apps een kwestie van dagen tot weken kan zijn.
17 In ontwikkeling: http://www.appcelerator.com?s=tinext 18 http://xamarin.com 19 http://www.goodbarber.com/
5+1 oplossingen voor een app
8
EEN VERGELIJKING Welke van de 5 oplossingen voor uw organisatie het meest geschikt is, hangt af van verschillende factoren. In de onderstaande tabel vindt u een vergelijking op verschillende van deze factoren. Hoe meer sterren des te beter, maar het mag duidelijk zijn dat een tabel als deze geen recht doet aan de nuances en afwegingen bij elk punt. Zij dient slechts om een beeld te geven van de verschillende sterke en zwakker punten.
HTML website
HTML App
PURE NATIVE
CROSS NATIVE
COMPILED NATIVE
User Experience
★
★★
★★★★
★★★
★★★★
HTML
HTML
Native
Native
Native
★★★★
★
★
★
★
Google
App Store
App Store
App Store
App Store
Security
★
★★
★★★★
★★★
★★★★
Monitization
★
★★★
★★★★
★★★★
★★★★
Performance
★
★
★★★★
★★★
★★★★
★
★★
★★★★
★★★
★★★★
3
★
★★
★★★
★★★★
★★★★
4
★★★★
★★★
★
★★
★★
★★★★
★★★
★
★★
★★
Maintenance
★★★★
★★★
★
★★
★★
Sharing
★★★★
★
★
★
★
Offline
★
★★
★★★★
★★★★
★★★★
★
★
★★★★
★★
★★★
Distribution
2
API’s Platform unity Platform reach 5
Zero to app 1
6
Innovation 1
Gemak waarmee de app kan worden geüpdate. Mate waarin gebruik kan worden gemaakt van systeemfuncties. 3 Eenheid bínnen een platform, bijvoorbeeld in versies en apparaten. 4 Bereik in termen van aantal platformen en apparaten pér techniek. 5 Relatieve gemak waarmee de oplossing ingezet kan worden. 6 Snelheid waarmee de techniek zich ontwikkelt. 2
5+1 oplossingen voor een app
9
5+1 oplossingen voor een app
10
Enterprise App Store BV | Fruitweg 240 | 2525 AC | Den Haag | T +31(0)88 63 77 250 | E
[email protected] Rabobank Den Haag rekening nr..: 1749.71.834 IBAN: NL12RABO0174971834 BIC: RABONL2U Kamer van Koophandel Haaglanden nr.: 56447493 5+1 oplossingen voor een app | BTW nr.: NL852129609B01 11