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

Optimistic Approach What is it about? Paul Taykalo, Optimistic Approach : How to show results instead spinners without breaking your Application, Stanfy, 2015 2

Optimistic Approach 4 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 works 4 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 wait But 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 wait But user don't like to wait User 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 faster 4 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 ahead 4 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 user 4 Animations 4 Push/Pop 4 Spinner 4 Progress 4 Skeleton 4 Partial info Paul Taykalo, Optimistic Approach : How to show results instead spinners without breaking your Application, Stanfy, 2015 15

Solutions - Predict the result 4 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 result 4 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 user interactions Paul Taykalo, Optimistic Approach : How to show results instead spinners without breaking your Application, Stanfy, 2015 18

Actions and Expectations Paul Taykalo, Optimistic Approach : How to show results instead spinners without breaking your Application, Stanfy, 2015 19

Actions and Expectations 4 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

Predictabe vs *elbatciderpnU_ Paul Taykalo, Optimistic Approach : How to show results instead spinners without breaking your Application, Stanfy, 2015 21

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

Predictable If 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 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); Paul Taykalo, Optimistic Approach : How to show results instead spinners without breaking your Application, Stanfy, 2015 29

Following a person 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 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 unlike like unlike like unlike like unlike like unlike like unlike like unlike like unlike like unlike like unlike like unlike like unlike like unlike Paul 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 updates Take a look at Parse SDK PFObjectEstimatedData.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

Recap 4 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 Approach How to show results instead spinners without breaking your Application by Paul Taykalo, Stanfy Paul Taykalo, Optimistic Approach : How to show results instead spinners without breaking your Application, Stanfy, 2015 44

Links 4 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