Optimistic ApproachHow to show results instead spinnerswithout breaking your Application

by Paul Taykalo, StanfyPaul Taykalo, Optimistic Approach : How to show results instead spinners without breaking your Application, Stanfy, 2015 1

Optimistic ApproachWhat is it about?

Paul Taykalo, Optimistic Approach : How to show results instead spinners without breaking your Application, Stanfy, 2015 2

Optimistic Approach4 Speeding up application

4 "Speeding" up application

4 Making user happier

4 It's all about user-friendliness

Paul Taykalo, Optimistic Approach : How to show results instead spinners without breaking your Application, Stanfy, 2015 3

How mobile application works

Paul Taykalo, Optimistic Approach : How to show results instead spinners without breaking your Application, Stanfy, 2015 4

How mobile application works4 Handle user action

4 Send request to the server

4 Get response from the server

4 Update UI

Paul Taykalo, Optimistic Approach : How to show results instead spinners without breaking your Application, Stanfy, 2015 5

Paul Taykalo, Optimistic Approach : How to show results instead spinners without breaking your Application, Stanfy, 2015 6

User need to wait

Paul Taykalo, Optimistic Approach : How to show results instead spinners without breaking your Application, Stanfy, 2015 7

User need to waitBut user don't like to wait

Paul Taykalo, Optimistic Approach : How to show results instead spinners without breaking your Application, Stanfy, 2015 8

User need to waitBut user don't like to waitUser don't have time to wait

Paul Taykalo, Optimistic Approach : How to show results instead spinners without breaking your Application, Stanfy, 2015 9

Loading next slide

Paul Taykalo, Optimistic Approach : How to show results instead spinners without breaking your Application, Stanfy, 2015 10

Solutions?Paul Taykalo, Optimistic Approach : How to show results instead spinners without breaking your Application, Stanfy, 2015 11

Solutions - Making app faster4 Decrease sizes

4 Compression

4 Opened connection to the server

Paul Taykalo, Optimistic Approach : How to show results instead spinners without breaking your Application, Stanfy, 2015 12

Solutions - One step ahead4 Caching

4 Preload pages

4 Load content in the backround

4 Be prepared

Paul Taykalo, Optimistic Approach : How to show results instead spinners without breaking your Application, Stanfy, 2015 13

Solutions - Entertain user

Paul Taykalo, Optimistic Approach : How to show results instead spinners without breaking your Application, Stanfy, 2015 14

Solutions - Entertain the user4 Animations

4 Push/Pop

4 Spinner

4 Progress

4 Skeleton

4 Partial infoPaul Taykalo, Optimistic Approach : How to show results instead spinners without breaking your Application, Stanfy, 2015 15

Solutions - Predict the result4 Precalculate result

4 Show it to user

4 ????

Paul Taykalo, Optimistic Approach : How to show results instead spinners without breaking your Application, Stanfy, 2015 16

Solutions - Predict the result4 Precalculate result

4 Show it to user

4 Pray :)

Paul Taykalo, Optimistic Approach : How to show results instead spinners without breaking your Application, Stanfy, 2015 17

Types of userinteractions

Paul Taykalo, Optimistic Approach : How to show results instead spinners without breaking your Application, Stanfy, 2015 18

Actionsand

ExpectationsPaul Taykalo, Optimistic Approach : How to show results instead spinners without breaking your Application, Stanfy, 2015 19

Actions and Expectations4 If I press like I expect that

4 If I edit post I expect that

4 If I follow this guy I expect that

4 If I open a post I expect that

4 If I ask for a radom number I expect that

Paul Taykalo, Optimistic Approach : How to show results instead spinners without breaking your Application, Stanfy, 2015 20

Predictabevs

*elbatciderpnU_Paul Taykalo, Optimistic Approach : How to show results instead spinners without breaking your Application, Stanfy, 2015 21

PredictablePaul Taykalo, Optimistic Approach : How to show results instead spinners without breaking your Application, Stanfy, 2015 22

PredictableIf I can predict the result, why should I wait for confirmation?

Paul Taykalo, Optimistic Approach : How to show results instead spinners without breaking your Application, Stanfy, 2015 23

Optimistic models

Paul Taykalo, Optimistic Approach : How to show results instead spinners without breaking your Application, Stanfy, 2015 24

Non optimistic model

Paul Taykalo, Optimistic Approach : How to show results instead spinners without breaking your Application, Stanfy, 2015 25

Paul Taykalo, Optimistic Approach : How to show results instead spinners without breaking your Application, Stanfy, 2015 26

Paul Taykalo, Optimistic Approach : How to show results instead spinners without breaking your Application, Stanfy, 2015 27

Following a person[self.requestManager follow:original result:^(Person *res, NSError *err) { if (err) { // Handling error resultBlock(nik, err); } else { // Updating to the new value resultBlock(res, nil); }}];

Paul Taykalo, Optimistic Approach : How to show results instead spinners without breaking your Application, Stanfy, 2015 28

Following a person// Saving original for later usagePerson *original = self.person;

// Create fake resultPerson *fake = [self.person copy];fake.followingStatus = @"Following";

// Updating current objectself.person = fake;resultBlock(fake, nil);

Paul Taykalo, Optimistic Approach : How to show results instead spinners without breaking your Application, Stanfy, 2015 29

Following a personif (error) { // rollback weakSelf.person = original; resultBlock(original, error);} else { // Updating to the new value weakSelf.person = updatedPerson; resultBlock(updatedPerson, nil);}

Paul Taykalo, Optimistic Approach : How to show results instead spinners without breaking your Application, Stanfy, 2015 30

Following a person// Following a person

- (void)follow:(void (^)(Person *person, NSError *error))resultBlock { __weak __typeof(self) weakSelf = self;

// Saving original for later usage Person *original = self.person;

// Create fake result Person *fake = [self.person copy]; fake.followingStatus = @"Following";

// Updating current object self.person = fake; resultBlock(fake, nil);

// Calling request manager [self.requestManager followPerson:original result:^(Person *updatedPerson, NSError *error) { if (error) { // rollback weakSelf.person = original; resultBlock(original, error); } else { // Updating to the new value weakSelf.person = updatedPerson; resultBlock(updatedPerson, nil); } }];}

Paul Taykalo, Optimistic Approach : How to show results instead spinners without breaking your Application, Stanfy, 2015 31

What about non-breaking?

Paul Taykalo, Optimistic Approach : How to show results instead spinners without breaking your Application, Stanfy, 2015 32

Correct View Layer

MVVM*Paul Taykalo, Optimistic Approach : How to show results instead spinners without breaking your Application, Stanfy, 2015 33

Correct View Layer

Paul Taykalo, Optimistic Approach : How to show results instead spinners without breaking your Application, Stanfy, 2015 34

Correct View Layer

Paul Taykalo, Optimistic Approach : How to show results instead spinners without breaking your Application, Stanfy, 2015 35

Hiperactive User?

Paul Taykalo, Optimistic Approach : How to show results instead spinners without breaking your Application, Stanfy, 2015 36

Hiperactive User?like unlike like unlike like unlike like unlikelike unlike like unlike like unlike like unlikelike unlike like unlike like unlike like unlikelike unlike like unlike like unlike like unlikePaul Taykalo, Optimistic Approach : How to show results instead spinners without breaking your Application, Stanfy, 2015 37

State based on multiple updates

Paul Taykalo, Optimistic Approach : How to show results instead spinners without breaking your Application, Stanfy, 2015 38

State based on multiple updatesTake a look at Parse SDKPFObjectEstimatedData.h

Paul Taykalo, Optimistic Approach : How to show results instead spinners without breaking your Application, Stanfy, 2015 39

Demo?Paul Taykalo, Optimistic Approach : How to show results instead spinners without breaking your Application, Stanfy, 2015 40

Recap

Paul Taykalo, Optimistic Approach : How to show results instead spinners without breaking your Application, Stanfy, 2015 41

Recap4 It's pretty easy to trick user

4 Show user what he expect

4 Fight for your users, they deserve it

4 Now you can write even cooler apps :)

Paul Taykalo, Optimistic Approach : How to show results instead spinners without breaking your Application, Stanfy, 2015 42

Last slide :)

Paul Taykalo, Optimistic Approach : How to show results instead spinners without breaking your Application, Stanfy, 2015 43

Optimistic ApproachHow to show results instead spinnerswithout breaking your Application

by Paul Taykalo, StanfyPaul Taykalo, Optimistic Approach : How to show results instead spinners without breaking your Application, Stanfy, 2015 44

Links4 http://www.reactnative.com/

4 https://speakerdeck.com/frantic/react-native-under-the-hood

4 https://medium.com/stanfy-engineering-practices/do-not-let-your-user-see-spinners-35b824c3ce2f

4 ComponentKit

Paul Taykalo, Optimistic Approach : How to show results instead spinners without breaking your Application, Stanfy, 2015 45

Paul Taykalo, Optimistic Approach : How to show results instead spinners without breaking your Application, Stanfy, 2015 46