Engineering Wunderlist for Android

César Valiente

Who is this guy?

Image Placeholder

César ValienteAndroid Engineer @Wunderlist (@Microsoft)

FLOSS & Android Google Developer Expert (GDE)

+CesarValiente @CesarValiente

- A very nice and good app.

- Monolithic structure.- Highly coupled.- Sync in batch.- Difficult to test .

Wunderlist 2

Wunderlist 3- Completely redesigned.- Divided into modules (layers).- Highly decoupled.- Real time sync.- Easier to maintain, test and adapt.- Easy to understand.

PARENTAL ADVISORY

The following architecture is shared between all Wunderlist platforms!

yes, iOS, Android, Mac OSX, Web and Windows.

Layers

AndroidLayer

SyncLayer

SDKLayer

Presentation layer(UI and Android stuff)

Model layer(Business logic)

Data layer(Accessing to the API data)

Android project Java project Java project

Sync boundaries SDK boundaries

Dependency rule

The outer model knows the inner, not viceversa.

Presentation

Sync

Sdk

Interfaces are the key

Layered architecture

package com.wunderlist.sdk;

• Websocket (real time).

• REST.

• Services

Network

• API data models.

• Serializers/deserializers.

• Interfaces/callbacks.

• Sync and async tests.

API model

SDK

Real time (websocket)

Request to setup a web socket connection

Response to accept the request

Payload

Payload

Close payload

Initial handshake

Bidirectional flowof packets

Closingthe connection

Real time (2)

package com.wunderlist.sync;

Sync

• Data models.

• Deserializers from the basic model.

• Cache.

• Services that manage data.

Data

• Matryoshka (aka Russian doll).

• Conflict resolver (included in Matryoshka).

Sync logic

Cache

• Caches for different models (Tasks, Lists, Memberships, etc.)

• Data interface which our database model (in presentation layer) and Cache implement to work on the same way.

Dat

a in

terfa

ce

StoreManager

DDBB

Cache

Servicespublic class WLTaskService extends WLService<WLTask, TaskService> { public WLTaskService(Client client) { super(new TaskService(client)); }

public void getCompletedTasks(final WLList list, final SyncCallback uiCallbacks) { ResponseCallback responseCallback = new ResponseCallback() {

service.getCompletedTasksForList(list.getId(), responseCallback); }

@Override public void onSuccess(Response response) {

//Manage your responseuiCallbacks.onSuccess(tasks);

} @Override public void onFailure(Response response) { //Manage your response uiCallbacks.onFailure(response); } };

Used to communicate the Android layer with the SDK.

Matryoshka (Russian Doll)

Mechanism to properly sync entire model.

Revision based.

When a child is updated the revision changes the whole tree up (eg.: when a Task is created the List's revision is incremented, as well the root).

package com.wunderlist.wunderlistandroid;

Presentation layer• UI + Android libs and code.

• Maximized decoupling among UI and business logic.

• Database, sadly, is located here (native SQLite ddbb).

Communication

Activity/FragmentA

FragmentB

(do something that theActivity/Fragment A

uses to update its UI)

BUS

Subscription Data Data

Code which managesa mutation

(this data has to be usedby the Activity/Fragment A)

Data

Retrieving local data

Loader

(Gets the data anddoes something with it)

Activity/Fragment

BUS

Subscription Data

Event or data is fired

Data

What’s next (WIP)?

Presenter(Supervising controller)

Passive view

User events

Updates model

Updates view

State-changes event

Model

Model View Presenter (MVP)

Java project

Sync (domain)MVP

Presentation

Interactors (use cases)

Repository

Cache

Web socket

DDBB

REST

Data

Repositoryinterface

Clean Architecture

?+CesarValiente @CesarValiente

License

(cc) 2015 César Valiente. Some rights reserved. This document is distributed under the Creative Commons Attribution-ShareAlike 3.0 license, available in http://creativecommons.org/licenses/by-sa/3.0/

Image licenses• Wunderlist images: permission granted.

• Computer (CC0): http://goo.gl/ChBXuX

• Server (CC0): https://goo.gl/WRTm4y

• Matryoshka (CC0): http://goo.gl/HWgVa6

• ReactiveX logo (CC-BY 3.0, ReactiveX): http://goo.gl/hK076f