Upload
fwdays
View
231
Download
0
Embed Size (px)
Citation preview
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