Sammenligning av mobile utviklingsløsninger

name: inverse
layout: true
class: center, middle, inverse
---
class: center, middle
template: inverse

# Sammenligning av mobile utviklingløsninger
## Bachelorprosjekt 2015
### Jim-Espen Gundersen, Martin Hagerup, Petter Sælen

???
Kort presentasjon av teamet.
---
layout: false
class: inverse

# .center[Agenda]
 
1. Oppgavestiller

2. Problemstilling

3. Hvorfor denne oppgaven?

4. Fremgangsmåte

5. Resultater

6. Videre arbeid

---
class: inverse
 
.center[<a href="http://www.piscada.com" rel="Piscada" target="blank">![Piscada](images/piscada_logo.png "Piscada AS")</a>]

* Startet som SINTEF-prosjekt i 2007

* Fokus på industriell IT, fjernstyring av installasjoner, automasjon og HMI

* Maritim sektor, hjemmetjenesten

.center[![system](images/Grieg_p10_small.png)]

???

---
class: center, inverse
# Problemstilling

### Hva er fordelene og ulempene ved å utvikle mobile applikasjoner i et kryssplattforms\-verktøy, i motsetning til å bruke “native” SDK-er (for hver plattform)?
 
Oppgaven går ut på å sammenligne utviklingsløpene av en mobilapplikasjon for alarmovervåkning på en helseinstitusjon. Det finnes allerede en Windows Phone-applikasjon, og denne er utgangspunktet for utviklingsløpene for iOS, Android og Qt.

Applikasjonene skal utvikles til “prototype-nivå”, dvs. at de ikke er helt opp til kommersiell kvalitet, men innehar de fleste funksjoner som den originale WP-appen.

???
- Stadig nye utviklingsverktøy for smarttelefoner
- Valg av utviklingsløsning er en viktig avgjørelse i et prosjekt
  - Ytelsesreduksjon?
  - Oppfører kryssplatform seg som native app?
  - Merker man forskjellen?
  - Er forskjellen neglisjérbare?

---
class: inverse
# .center[Hvorfor denne oppgaven?]
 
* Spennende, relevant teknologi
.pull-right[![App_alarmliste](images/App_alarmliste_small.png "Windows Phone-appens alarmliste")]
* Stort læringsutbytte

* Annen type arbeidsmetodikk

* Eget kontor hos Piscada
	- Lett kommunikasjon

- Tett oppfølging

- Mange nyttige ressurspersoner

* Klart definert oppgave

???
Eget kontor hos Piscada gjorde at vi hadde tett oppfølging og god kommunikasjon

???
- Kontor (pause for laughs)
---
class: inverse
# .center[Fremgangsmåte]
 
.center[![DSR](images/design_science_small_circle.png "Design Science Research")]

### .center[__Alle tre utviklingsløpene parallelt__]

---
class: inverse
 
## Utviklingsfaser
.pull-right[![App_alarmliste](images/App_alarmkvittering_small.png "Windows Phone-appens detaljerte alarmkort")]
1. Lære plattformene

2. Lage hovedsiden (grafisk)

3. Programmere businesslogikk

4. Fullføre funksjoner for prototypen

???
Fant ut at det var hensiktsmessig for oss å sette opp prosjektplan med forskjellige (utviklings)faser.

1. Satte opp utviklingsmiljø i den første fasen, lærte oss plattformene (og programmeringsspråkene). Satte opp dokumentmaler og prosjektplan.

2. Lagde utkast til alarmlisten i grafisk editor.

3. Implementere flesteparten av funksjonene. Bl.a. navigering, motta alarmer, godta/avvis alarmer, innstillinger-skjerm osv.

4. Implementere de siste funksjonene til prototypene. Få med animasjoner/overganger, innebygd web-klient, bugfiksing.
--

## Sammenligningsfase

- Sammenligne prototypene

- Rapportskriving

???
Hvert teammedlem hadde hovedansvar for ett utviklingsløp.
* Utviklet en teknisk rapport med logger for hver dag.
* Beskrev utviklingsprosessen
---
class: inverse
## .center[iOS]

* Apples nye programmeringsspråk <a href="https://www.apple.com/swift/" target="blank" title="Swift">Swift</a>

* «Objective-C uten C»

* Enklere syntaks. Inspirert av språk som Python, Ruby, Rust, C# ...

.left-column[ ![apple-logo](images/apple.png)]

.right-column[```swift
class TableViewCell: UITableViewCell {

@IBOutlet weak var statusImage: UIImageView!
    @IBOutlet weak var origin: UILabel!
    @IBOutlet weak var alarmText: UILabel!

override func awakeFromNib() {
        super.awakeFromNib()
        // Initialization code
    }
	...
	func populateCell(#alarmData: Alarm) {

let dateformat = NSDateFormatter()
        dateformat.timeStyle = .ShortStyle
        dateformat.dateStyle = .MediumStyle
        if (alarmData.alarmAcknowledged == "0") {
            self.statusImage.image = UIImage(named: "circle_red-100.png")
        } else {
            self.statusImage.image = UIImage(named: "circle_light_gray-100.png")
        }
    ...
```]

---
class: inverse
## .center[Android]

* Blanding av Java og XML

* Skille ut programlogikken og skjermer med Activites og Fragments.

* Teste ut tredjepartsbiblioteker med <a href="https://www.gradle.org/swift/" target="blank" title="Gradle: Build Automation for the JVM, Android, and C/C++">Gradle</a>

.left-column[ ![android-logo](images/android.png)]

.right-column[```java
 if (alarm.isActive()) {
    YoYo.with(Techniques.Flash).duration(500).playOn(ListFragment.alarmRecyclerView);
}
```

```xml
 <application
 android:allowBackup="true"
 android:icon="@drawable/ic_launcher"
 android:label="@string/app_name"
 android:theme="@android:style/Theme.Holo.NoActionBar">
 <activity
 android:name=".MainActivity"
 android:configChanges="orientation|screenSize"
 android:label="PiscadaNA"
 android:screenOrientation="portrait">
 <intent-filter>
 <action android:name="android.intent.action.MAIN"/>

<category android:name="android.intent.category.LAUNCHER"/>
 </intent-filter>
 </activity>
	...
```]

---
class: inverse
## .center[Qt]

* Bruker <a href="https://doc.qt.io/qt-5/qtqml-index.html" target="blank" title="Qt Meta-Object Language">QML</a> for både design og logikk

* <a href="http://json.org/" target="blank" title="JavaScript Object Notation">JSON</a>-aktig syntaks

* Bruker “States” for å gi dynamisk design

.left-column[ ![qt-logo](images/qt.png)]

.right-column[```qml
Rectangle {
    id: alarmIcon
    width: (parent.height / 12)
    height: (parent.height / 12)
    anchors.left: parent.left
    anchors.top: parent.top
    anchors.verticalCenter: alarmID.right
    color: "grey"
    radius: width/2
}
...
State {
    name: "ACTIVE"
    PropertyChanges {target: alarmIcon; color: "red"}
    PropertyChanges {target: rejectButton; state: "ACTIVE"}
    PropertyChanges {target: acceptButton; state: "ACTIVE"}
},
```]
---
class: center, middle, inverse
# Resultater

---
class: inverse
.left-column[
## <img src="images/apple.png" align="left" height="38">   iOS
* Ca. 1300 linjer ren Swift-kode

* Native _look & feel_

* Alle funksjoner implementert

* Lavt ressursbruk]

<video class="right-column" height=55% autoplay muted loop>
 <source src="videos/ios.m4v" type="video/mp4">
Your browser does not support the video tag.
</video>

???
* Lett å finne informasjon
* Lite problemer, til tross for nytt språk
* Vanskelig å ta arkitekturavgjørelser av og til
* Veldig godt integrert utviklingsmiljø (Storyboards)

---
class: inverse
.left-column[
## <img src="images/android.png" align="left" height="38">   Android
* Ca. 1600 linjer ren Java-kode

* Native _look & feel_.red[*]

* Mangler push-notifikasjoner

* Lavt ressursbruk, litt tregere med web-klienten

###### .footnote[.red[*]Bryter litt med design guidelines]]

<video class="right-column" height=30% autoplay loop>
 <source src="videos/android.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>

???
* Lett å finne informasjon
* Stort developer community (mange gode løsninger/forslag til løsninger)
* Litt tungvint med Java/XML
* Greit å implementere funksjoner
* Morsomt å teste ut tredjepartsbiblioteker

---
class: inverse

.left-column[
## <img src="images/qt.png" align="left" height="38">   Qt
* Ca. 1300 linjer QML-kode

* __Ikke__ native _look & feel_

* Mangler en del funksjoner

* Lavt ressursbruk, veldig rask]

<video class="right-column" height=30% autoplay loop>
 <source src="videos/device-2015-04-16-132137.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>

???
* Vanskeligere å finne korrekt/oppdatert informasjon
* Problemer med grafisk utvikling/VCS i Qt Creator
* Vi snakket med en salgsingeniør fra Digia om diverse aspekter rundt Qt
* Qt for mobil har _ikke_ hovedmål å få til native look & feel
* Mer som en utvidelse av eksisterende programvare
* Tilgjengelig informasjon ikke høyt prioritert

---
class: inverse, center, middle

## Programmere nativt for iOS

## Vurdere om man trenger full tilgang til maskinvaren.red[*]

## Se på   <img src="images/Xamarin_logo.png" height="40">

###### .footnote[.red[*]for Android-utvikling]

???
- Vurdere om det lønner seg å vurdere utvikle i Qt eller native for Android.

- Applikasjon med masse grafikk, eller som har fokus på flytende animasjoner og ytelse (som f.eks. et spill) kan være meget aktuelt å utvikle i Qt/QML.

- Om man derimot trenger tilgang til mange av mobilens komponenter (og derfor tilgang til telefon-APIet), kan det fort bli uaktuelt å bruke Qt-rammeverket sånn som det er i dag.
---
class: inverse, center, middle

## Programmere nativt for iOS

## Vurdere om man trenger full tilgang til maskinvaren.red[*]

## Se på   <img src="images/Xamarin_logo.png" height="40">

###### .footnote[.red[*]for Android-utvikling]

???
- Vurdere om det lønner seg å vurdere utvikle i Qt eller native for Android.

- Applikasjon med masse grafikk, eller som har fokus på flytende animasjoner og ytelse (som f.eks. et spill) kan være meget aktuelt å utvikle i Qt/QML.

## Programmere nativt for iOS

## Vurdere om man trenger full tilgang til maskinvaren.red[*]

## Se på   <a href="https://xamarin.com" target="blank"><img src="images/Xamarin_logo.png" height="40" title="Mobile App Development & App Creation Software"></a>

###### .footnote[.red[*]for Android-utvikling]

???
- Vurdere om det lønner seg å vurdere utvikle i Qt eller native for Android.

- Applikasjon med masse grafikk, eller som har fokus på flytende animasjoner og ytelse (som f.eks. et spill) kan være meget aktuelt å utvikle i Qt/QML.

- Om man derimot trenger tilgang til mange av mobilens komponenter (og derfor tilgang til telefon-APIet), kan det fort bli uaktuelt å bruke Qt-rammeverket sånn som det er i dag.

---
class: inverse
# .center[Videre arbeid]
 
* Sammenligne mot <a href="http://xamarin.com" target="blank" title="Mobile App Development & App Creation Software">Xamarin</a>
* Vurdere sammenligning mellom andre kryssplattformsverktøy
	* <a href="http://phonegap.com/" target="blank" title="PhoneGap | Home">PhoneGap/Cordova</a>

* <a href="http://fusetools.com/" target="blank" title="fuse">fuse</a>

* <a href="https://facebook.github.io/react-native/" target="blank" title="React Native | A framework for building native apps using React">React Native</a>

???
* Xamarin: tilbyr native funksjoner og native look & feel men legger til et ekstra lag med kompleksitet fordi man utvikler både native og gjennom Xamarin. Er veldig populært for tiden.

* Cordova/Phonegap: Basert på å kjøre i et lokalt WebView, bruker HTML5/JavaScript. Er gjerne litt tregere enn native applikasjoner, men har tilgang til de aller fleste funksjoner.

* Fuse: Nytt verktøy som fortsatt er i lukket beta. Fokus på animasjoner og godt utseende. Ment for å "samle" utviklere og designere.

* React Native bygger videre på Facebooks JavaScript-rammeverk, der HTML-elementer defineres i JS-koden. Med React Native definerer man native ui-elementer istedet for HTML - og appen får native look and feel, med bruk av ren JavaScript/HTML5 under utviklingen.