#optimistic ui

Telling a server you’ve optimistically created a post

Last week, I talked about how using optimistic UI improves my app’s performance, and how deletes can be retried until the server responds with a success. Today’s story is about ensuring that the server state reflects the posts that were created or edited optimistically on the app.

As before, we’re storing the requests to be made (create, edit, delete) in a list along with a callback — this is useful when creating or editing a post, because once the request has been made successfully we want to replace the ‘fake’ post (that we had stored and displayed to the user in the app) with the ‘real’ post (that the server responded with). One key difference is that the post’s url will change, because the posts are served via cloudfront, and the url contains a version id that is generated (and returned) by the server.

Keeping track of requests

This is how we add a request:

var _requests = []; function addRequest(url, params, callback) { _requests.push({url: url, params: params, callback: callback}); retryFailedRequests(); }

Nothing fancy, but note that we retry failed requests when we add a new request.

Retrying failed requests

This is the code that retries failed requests:

function retryFailedRequests() { var promiseArr = _requests.map((req) => { if (req.stat === 'succeeded') return req; else return fetch(req.url, req.params).then(res => res.json()).then(req.callback).then(() => { req.stat = 'succeeded'; return req; }).catch(() => { req.stat = 'failed'; return req; }); }); Promise.all(promiseArr).then((res) => { _requests = res; }); }

Basically it maps the array of requests into a new array where each element is either the request itself (if it was successful) or a Promise to retry the request (if its status was failed). This Promise will return the request with its status updated, which will allow us to use Promise.all() to generate the updated array of requests.

Updating the local store with the server’s response

You might have noticed a req.callback in there (after retrying the request and before updating its status). This comes in handy when we need to replace a post with the server’s response:

function replacePost(oldPost, newPost) { delete _posts[oldPost.url]; var i = _postURLs.indexOf(oldPost.url); _postURLs.splice(i, 1); _postURLs.unshift(newPost.url); _posts[newPost.url] = newPost; PostStore.emitChange(); return updateAsyncStore(); }

Optimistically creating a post

Now that we’ve got that in place, creating a post looks like this:

function createPost(post) { // Create a temporary post post.created = new Date().toISOString(); post.updated = post.created; if (!post.id) post.id = post.created; post.key = post.created; post.url = post.key; // Store it locally _postURLs.unshift(post.url); _posts[post.url] = post; PostStore.emitChange(); // Create a request var username = SettingStore.getUsername(); var url = APIURL + ‘/’ + username; post.token = SettingStore.getToken(); var params = {method: ‘POST’, body: JSON.stringify(post), headers: HEADERS}; var callback = (createdPost) => replacePost(post, createdPost); // Add it to the list of requests addRequest(url, params, callback); }

Previously, we had looked at using optimistic UI to improve the performance of deleting, creating and editing posts in my app. The question was what should be done when a delete (for example) fails — we don’t want a difference between what you see on the app and what’s published online.

My first thought was to just keep retrying the request until it succeeds. However, retrying the creation of a post shouldn’t result in duplicate posts. To fix this, I’ve changed the API (not really, I’ve postponed this for now) to accept post metadata from the app, which will basically mean the API overwrites the stored post with the exact same data (for now, we can then avoid this extra write by checking the contents of the post against the stored data before doing a rewrite).

In order to keep retrying the requests until they succeed, my flux store for posts is also going to keep track of the requests made so far, and retry failed requests every time a new request is added to this list.

The code to delete posts used to look like:

function deletePost(post) { var i = _postURLs.indexOf(post.url); _postURLs.splice(i, 1); delete _posts[post.url]; PostStore.emitChange(); var username = SettingStore.getUsername(); var token = SettingStore.getToken(); var body = JSON.stringify({token: token}); var key = post.key; if (!key) key = post.created + post.id; var url = APIURL + '/' + username + '/' + key; var params = {method: ‘DELETE’, body: body, headers: HEADERS}; fetch(url, params).then(updateAsyncStore); }

With the new list of requests, this now looks like:

function retryFailedRequests() { var promiseArr = _requests.map((req) => { if (req.stat !== 'succeeded') { return fetch(req.url, req.params) .then(res => res.json()) .then(req.callback).then(() => { req.stat = 'succeeded'; return req; }).catch(() => { req.stat = 'failed'; return req; }); } else { return req; } }); Promise.all(promiseArr).then((res) => { _requests = res; }); } function addRequest(url, params, callback) { _requests.push({url: url, params: params, callback: callback}); retryRequests(); } function deletePost(post) { var i = _postURLs.indexOf(post.url); _postURLs.splice(i, 1); delete _posts[post.url]; PostStore.emitChange(); var username = SettingStore.getUsername(); var token = SettingStore.getToken(); var body = JSON.stringify({token: token}); var key = post.key; if (!key) key = post.created + post.id; var url = APIURL + '/' + username + '/' + key; var params = {method: ‘DELETE’, body: body, headers: HEADERS}; addRequest(url, params, updateAsyncStore); }

In yesterday’s post on speeding up your app using optimistic UI, I described how you can improve the perceived performance of your app when it comes to deleting posts. Today I’ll be talking about the next step, speeding up the creating and editing of posts. Once again, the code we’re interested in is the flux store. Let’s look at editing posts to begin with, because that is conceptually simpler. The original code looked like:

function editPost(post) { // Set up API call to edit post var username = SettingStore.getUsername(); var key = post.key; if (!key) key = post.created + post.id; var url = APIURL + ‘/’ + username + ‘/’ + key; post.token = SettingStore.getToken(); var params = {method: ‘PUT’, body: JSON.stringify(post), headers: HEADERS}; // Make the API call fetch(url, params).then(res => res.json()).then((post) => { // Add the post that's returned to the list of posts var i = _postURLs.indexOf(post.url); _postURLs.splice(i, 1); _postURLs.unshift(post.url); _posts[post.url] = post; PostStore.emitChange(); return updateAsyncStore(); }); }

To speed things up from the user’s perspective, we’ll save the edited post to our list of posts before storing it online using the API:

function editPost(post) { // Add the edited post to our list var i = _postURLs.indexOf(post.url); var initialURL = post.url; _postURLs.splice(i, 1); _postURLs.unshift(post.url); _posts[post.url] = post; PostStore.emitChange(); // Set up the API call var username = SettingStore.getUsername(); var key = post.key; if (!key) key = post.created + post.id; var url = APIURL + ‘/’ + username + ‘/’ + key; post.token = SettingStore.getToken(); var params = {method: ‘PUT’, body: JSON.stringify(post), headers: HEADERS}; // Make the API request fetch(url, params).then(res => res.json()).then((post) => { // Delete that post we created earlier // And replace it with the data returned by the API delete _posts[initialURL]; _postURLs.splice(i, 1); _postURLs.unshift(post.url); _posts[url] = post; PostStore.emitChange(); return updateAsyncStore(); }); }

As you can see, our code has approximately doubled, both in length and complexity. But the app is now much faster, avoiding a HTTP request that blocks the updating of the UI. It also fixes the weird effect of a “missing” post (earlier, you would edit a post, and it would take some time for the edit to be reflected).

The code to speed up creating a post is similar, you create the post with fake data, and delete it once you get the actual post data from the API response.

function createPost(post) { // Create and store the post with fake data post.created = new Date().toISOString(); post.updated = post.created; if (!post.id) post.id = post.created; post.key = post.created; post.url = post.key; _postURLs.unshift(post.url); _posts[post.url] = post; PostStore.emitChange(); // Create and make the API call var username = SettingStore.getUsername(); var url = APIURL + ‘/’ + username; post.token = SettingStore.getToken(); var params = {method: ‘POST’, body: JSON.stringify(post), headers: HEADERS}; fetch(url, params).then(res => res.json()).then((createdPost) => { // Delete the post with fake data // And replace it with the actual created post delete _posts[post.url]; var i = _postURLs.indexOf(post.url); _postURLs.splice(i, 1); _postURLs.unshift(createdPost.url); _posts[createdPost.url] = createdPost; PostStore.emitChange(); return updateAsyncStore(); }); }

My app’s flux store used to do this when deleting a post:

function deletePost(post) { // Create the API request var username = SettingStore.getUsername(); var token = SettingStore.getToken(); var body = JSON.stringify({token: token}); var key = post.key; if (!key) key = post.created + post.id; var url = APIURL + ‘/’ + username + ‘/’ + key; var params = {method: ‘DELETE’, body: body, headers: HEADERS}; // Make the API request fetch(url, params).then(() => { // Delete the post locally var i = _postURLs.indexOf(post.url); _postURLs.splice(i, 1); delete _posts[post.url]; PostStore.emitChange(); return updateAsyncStore(); }); }

Basically, the app tells the API to delete the post, and when it gets the response, it removes the post from its list of posts. This is then reflected in the UI — which means the user has to wait for the API to respond to see the post removed from the list!

Let’s be optimistic instead, and remove the post from the local list first (before using the API to delete the online copy). This is what the code looks like now:

function deletePost(post) { // Delete the post locally var i = _postURLs.indexOf(post.url); _postURLs.splice(i, 1); delete _posts[post.url]; PostStore.emitChange(); // Create and make the API request var username = SettingStore.getUsername(); var token = SettingStore.getToken(); var body = JSON.stringify({token: token}); var key = post.key; if (!key) key = post.created + post.id; var url = APIURL + ‘/’ + username + ‘/’ + key; var params = {method: ‘DELETE’, body: body, headers: HEADERS}; fetch(url, params).then(updateAsyncStore); }