
Op 3 december heb ik mijn tweede praatje voor de Nederlandse Appcelerator Titanium User Group [@TitaniumNL](//twitter.com/TitaniumN) gehouden. In [mijn praatje](//meetup.com/TitaniumNL/events/192330472/ 'TitaniumNL Meetup 3 December 2014') heb ik verteld hoe wij op basis van één gedeelde JavaScript codebase zowel web als mobile apps ontwikkelen.

<Image
  src="/assets/blog/shared-web-ti-app-javascript-codebase/TitaniumNL_2014-Dec-03.jpg"
  alt="TitaniumNL_2014-Dec-03"
/>
<Break />

In mijn presentatie laat ik zien op welke redelijk eenvoudige wijze wij een gedeelde codebase hebben opgezet om te gebruiken in Titanium apps en HTML5 web applicaties.

Aan de manier hoe wij tot onze opzet zijn gekomen, ligt een aantal overwegingen ten grondslag. Onderstaand volgen puntsgewijs de voornaamste uitgangspunten.

## Uitgangspunten

Met het maken van een gedeelde JavaScript codebase wilden wij de volgende zaken oplossen:

- Zoveel mogelijk business logica moet slechts op één plaats onderhouden kunnen worden. Wijzigingen in de business logica hoeven niet langer in zowel web applicatie als mobile app apart gemaakt te worden.
- Unit tests kunnen geschreven worden voor de gedeelde codebase.
- Per platform (web en app) moet het mogelijk zijn de beste (veelal niet gedeelde) technieken voor rendering en UI te kunnen gebruiken:

  - Voor de HTML5 web applicatie betekent dit: dat we [backbone.js](//backbonejs.org/) in combinatie met bijvoorbeeld [layoutmanager](//github.com/tbranyen/backbone.layoutmanager) en [stickit](//nytimes.github.io/backbone.stickit/) willen kunnen gebruiken.
  - Voor de Ti Alloy app moet het mogelijk zijn: via [Alloy](//github.com/appcelerator/alloy) native Android en iOS views en [Alloy MV binding](//github.com/appcelerator/alloy) te gebruiken.

- Verder moet het simpel blijven zonder veel of exotische afhankelijkheden. Of noodzaken tot wijzigingen in of het forken van libraries.
- Het moet voor iedere developer eenvoudig op te zetten zijn binnen zijn of haar eigen ontwikkelomgeving.

## Hoe het werkt

Doordat we per platform gebruik willen maken van de op dat platform beschikbare tools (bepaalde versie van backbone i.c.m. een specifieke plugin) óf omdat per platform zaken anders werken (logging, video playback, analytics, etc.), maken we gebruik van [dependency injection](//en.wikipedia.org/wiki/Dependency_injectio) via een proxy per platform en een proxy voor de shared codebase om de unit tests uit te kunnen voeren zonder platform vereiste.

### Dependency injection

Op deze manier kun je bijvoorbeeld in de Android app en iOS app via de native media players video afspelen, terwijl je dit in de HTML5 web applicatie bijvoorbeeld via een vendor library als [video.js](//videojs.com/) doet. De interface voor de video player is bepaald in de shared library, de implementatie verschilt en vindt plaats per platform. Hoe dit voor onze setup precies werkt, kun je het beste zien in [de slides van de presentatie](//speakerdeck.com/karaoak/shared-web-plus-ti-app-javascript-codebase) of in de [code](//github.com/karaoak/SharedJS.Core) zelf.

## Atwood's Law

Daar waar we al JavaScript gebruikten om op een snelle manier native apps voor zowel Android en iOS te compilen [met behulp van prebuilder scripts](/blog/gruntify-your-app-workflow 'Gruntify your Workflow'), inmiddels geschreven in JavaScript, gaan we weer een stapje verder door alles wat voorheen server side gerenderd werd als HTML en we sinds een aantal jaren alweer in een [SPA](//en.wikipedia.org/wiki/Single-page_application) eveneens middels een JavaScript MVVM maken, nu via node modules als [browserify](//browserify.org/) te packagen vanuit een shared JavaScript codebase. En dit ook nog eens te testen met bijvoorbeeld [mocha.js](//mochajs.org/). Kunnen we dan nog ontkennen dat [Atwood's Law](//en.wikipedia.org/wiki/Jeff_Atwood 'Wikipedia: Jeff Atwood') niet opgaat?

> "Any application that can be written in JavaScript will eventually be written in JavaScript"

Jeff Atwood

Mogelijk zal ook onze server side business logica binnenkort geschreven zijn in JavaScript en draaien op [node.js](//nodejs.org/). Mogelijk voortkomend uit één en dezelfde shared, JavaScript, codebase.

## Meer informatie?

<ListItem icon="play">

Zie [Speakerdeck](//speakerdeck.com/karaoak/shared-web-plus-ti-app-javascript-codebase) voor mijn slides.

</ListItem>

<ListItem icon="github">

Zie [Github](//github.com/karaoak/SharedJS.Core) voor voorbeeld code.

</ListItem>

<ListItem icon="file">

Klik hier voor een [PDF versie van de slides](/assets/blog/shared-web-ti-app-javascript-codebase/shared-web-ti-app-javascript-codebase/TiMeetupTalk_20141203_SharedCodebase.pdf).

</ListItem>

<ListItem icon="hand">

[TitaniumNL Meetup](//meetup.com/TitaniumNL/).

</ListItem>


Op 3 december heb ik mijn tweede praatje voor de Nederlandse Appcelerator Titanium User Group @TitaniumNL gehouden. In mijn praatje heb ik verteld hoe wij op basis van één gedeelde JavaScript codebase zowel web als mobile apps ontwikkelen. In mijn presentatie laat ik zien op welke redelijk eenvoudige wijze wij een gedeelde codebase hebben opgezet.

Shared Web + Ti App JavaScript Codebase


<ImageRight src="/assets/blog/android-5-lollipop/android-lollipop.jpg" alt="Android 5.0 Lollipop" />

Vandaag is Android 5.0 'Lollipop' officieel uitgebracht. Deze versie van Android is een aantal weken geleden al aangekondigd, maar vandaag is de naam 'Lollipop' officieel en zijn alle nieuwe features en functies bevestigd. Android 5.0 Lollipop wordt standaard geleverd op de eveneens nieuwe Google Nexus 9 en Google Nexus 6.

Android 5.0 Lollipop is geoptimaliseerd voor zowel kleine schermen als grote schermen. Lollipop verschijnt daarom niet alleen op zowel handhelds en tablets, maar ook op mediaspelers en TV’s. Lollipop komt met een compleet nieuw design door Google 'Material Design' genoemd.

## Material Design

Android 5.0 Lollipop heeft een volledig nieuw en herzien design dat Google ‘Material Design’ noemt. Het nieuwe design zorgt voor een verbeterd gebruiksgemak. De nieuwe user interface is grotendeels gebaseerd op views en windows die een eigen 'real-time shadow' kunnen krijgen en over elkaar heen kunnen liggen en bewegen.

De kleuren zijn ook allemaal nieuw en lekker fris. De vlakken, lijnen en icons zijn allemaal nog strakker en minimalistischer geworden. Ook heeft het standaard Android Roboto font een update gekregen. Een nieuwe animatie API maakt het voor app developers mogelijk om dezelfde soepele overgangen tussen windows in apps en tussen apps te maken als Android zelf in haar interface gebruikt.

### Android 5.0 Lollipop video

In onderstaande video zie je de belangrijkste nieuwe features van Material Design.

<YouTube id="Q8TXgCzxEnw" />
<Break />

## Eén look&feel

Een belangrijk speerpunt van Google is dat Android er vanaf nu op alle devices een en dezelfde look&feel moet hebben. Zo moet de interface voor een handheld telefoon overeenkomen zijn met de interface op een tablet en zelfs een laptop. Voor app developers is het vanaf nu middels nieuwe API’s eenvoudiger om apps dezelfde interface en hetzelfde uiterlijk te geven voor een handheld en voor een tablet.


Vandaag is Android 5.0 ‘Lollipop’ officieel uitgebracht. Deze versie van Android is een aantal weken geleden al aangekondigd, maar vandaag is de naam ‘Lollipop’ officieel en zijn alle nieuwe features en functies bevestigd. Android 5.0 Lollipop wordt standaard geleverd op de eveneens nieuwe Google Nexus 9 en Google Nexus 6.

Android 5.0 Lollipop


Vandaag is het eerder gepresenteerde iOS 8 beschikbaar gekomen. Vanaf nu kun je je iPhone of iPad updaten naar de laatste versie van iOS.

Visueel is de update niet zo groot als de iOS 7 update van vorig jaar. Ogenschijnlijk niet. Maar volgens eigen zeggen van Apple is dit de grootste update van iOS tot nu toe! Dit komt door verschillende nieuwe vooral technische features die benodigd zijn voor nog te introduceren nieuwe producten (Apple Watch) of diensten (Apple Pay, Health app en HealthKit API).

Voor een gebruiker zijn de wijzigingen dus misschien aanvankelijk niet zo groot, voor ons, als ontwikkelaar, des te groter. Wij zijn dan ook zeer enthousiast met deze laatste versie van iOS. Naast de afgelopen maanden al diverse tests en updates te hebben gemaakt om bestaande door ons ontwikkelde apps te updaten om ook goed te werken op een iPhone 6 of iPhone 6 Plus, hebben we ons ook al verlekkerd aan een aantal nieuwe -Kit API's of vanaf nu opengestelde API's (Touch ID).

## Maar wat is er nu nieuw?

### Hardware: Nieuwe iPhones... en oudere...

Allereerst is iOS 8 de minimaal vereiste versie om voor iPhone 6 en iPhone 6 Plus specifieke apps te kunnen maken. Daarnaast is het helaas ook zo dat om iOS 8 te kunnen draaien, je minimaal een iPhone 4S, iPad 2 of iPad mini 1 nodig hebt. De iPhone 4 uit 2010 wordt niet meer ondersteund.

Alhoewel iOS 8 officieel wordt ondersteund voor een iPhone 4S en iPad 2, merken wij wel dat de eerdere testversies van iOS 8 langzamer werkten door een minder krachtige processor in deze devices. Maar de performance van iOS 8 op deze toestellen zal hoogstwaarschijnlijk in de volgende iOS 8.0.x update verbeterd moeten zijn.

## Software: Nieuwe functionaliteiten

Onderstaand lichten we de belangrijkste nieuwe functies zeer kort toe. Maar je kunt de belangrijkste feature ook bekijken en deze video van [TechRadar](//techradar.com/).

<YouTube id="cFjO-uGRjlM" />
<Break />

### HealthKit en Health App

Via de HealthKit API maakt Apple het makkelijker om losse informatie m.b.t. je gezondheid komende van fitness accesoires of gadgets (bijvoorbeeld de harslagmeter in een Apple Watch) op een centrale plek te beheren en met elkaar in verband te brengen. Zelfs zonder losse te verbinden gadgets zijn de nieuwste Apple M8 en M7 co-processor al in staat je aantal gelopen stappen en afgelegde afstand te registreren. Maar in de toekomst zou zelfs ook je hele medische dossier via Apple Health beheerd en bewaard kunnen worden.

### Apple Pay

Met een iPhone 6(+) kun je met iOS 8 binnenkort contactloos betalen. Je kunt je creditcard koppelen aan een digitale Apple 'portemonnee'.

### Touch ID

Vanaf nu is er een publieke Touch ID API beschikbaar. Dit houdt in dat naast Apple ook zg. third party app ontwikkelaars toegang hebben tot een aantal belangrijke functies van Touch ID. Het is vanaf nu bijvoorbeeld mogelijk om een app (bijv. van je bank) te unlocken met je vinger in plaats van met een in de betreffende app apart ingestelde pincode.

### Interactive Notifications

Ook hier heeft Apple de teugels iets laten vieren en API's voor het notification center beschikbaar gesteld aan derden om zg. interactieve notificaties te kunnen versturen. Dit houdt in dat je nu een notficatie kunt versturen waaraan gekoppeld een actie kan worden gedaan door de gebruiker. Je kunt dus bijvoorbeeld direct vanuit een notificatie van een berichtje een berichtje terugtypen en versturen. Je kunt dus veel sneller en makkelijker reageren. Je hoeft niet eerst naar de betreffende app te gaan.

### Quicktype keyboard

Apple claimt dat haar nieuwe iOS 8 toetsenbord het 'slimste toetsenbord ooit is.
De QuickType functie biedt zg. 'predictive texting' want lijkt op SwiftLey en Swype. Iets wat op Android al veel langer beschikbaar is.

### iOS 8 Extensions

Apple komt ook hier third party app ontwikkelaars tegemoet door verdere toegang te geven tot het OS en hiermee deze de mogelijkheid te geven extra functionaliteit te ontwikkelen en te integreren binnen iOS. Hierdoor is het mogelijk als ontwikkelaar een eigen keyboard (bijv. Swype of Fleksy) aan te bieden of andere extensies aan te bieden (bijv. delen via WhatsApp of extra foto filters binnen de Camera app aan te bieden).

### Continuity

Met het bijna beschikbare nieuwe Mac OS X Yosemite is het mogelijk middels de combinatie van Yosemite en iOS 8 telefoontjes met je Mac te maken en te ontvangen. Voor iMessages was dit al langer mogelijk, maar nu zal dit ook voor SMS berichten werken. Daarnaast kun je via Apple's AirDrop makkelijker bestanden tussen je telefoon en Mac uitwisselen.

### Diverse kleine verbeteringen en integraties

Het is mogelijk om voortaan direct vanuit je Messages app je locatie te delen met het contact waarmee je op dat moment messages uitwisselt. Dit werkt zeer eenvoudig en is ons zeer handig bevallen.

Daarnaast biedt je Messages app nu geïntegreerde functionaliteit om ook binnen Messages direct voice-, video- en foto's op te nemen en te versturen.

Met je standaard Camera app is vanaf iOS 8 mogelijk nu timelapses te maken.

## Teveel om op te noemen

Bovenstaand heb ik geprobeerd de belangrijkste veranderingen in iOS 8 op te sommen. Maar er zijn er natuurlijk nog veel meer. Kleinere, maar ook grotere.

- Synchronisaties via iCloud en API's hierop zijn verder uitgebreid.
- iOS 8 Family Sharing, hiermee kun je o.a. aankopen gedaan in de App Store, iBooks en iTunes delen of aankoop verzoeken van anderen autoriseren.
- HomeKit. Middels dit framework wil Apple het eenvoudiger maken allerhande apparaten in huis met elkaar te verbinden en te bedienen.
- Updates voor Siri en Spotlight
- Splitscreen mode en Landscape mode voor iPhone 6 Plus

Kortom teveel om op te noemen! Wij gaan ons momenteel eerst richten op het compatible maken van onze apps met iOS8 voor iPhone 6(+). Maar zullen ons daarna snel storten op o.a. WatchKit. We zien uit naar de release hiervan!


Vandaag is het eerder gepresenteerde iOS 8 beschikbaar gekomen. Vanaf nu kun je je iPhone of iPad updaten naar de laatste versie van iOS. Visueel is de update niet zo groot als de iOS 7 update van vorig jaar. Ogenschijnlijk niet. Maar volgens eigen zeggen van Apple is dit de grootste update van iOS tot nu toe!

Projecten

Contact

Over ons

Blog

Android 5.0 Lollipop

Material Design

Android 5.0 Lollipop video

Eén look&feel