Ladda example application, showcasing caching and invalidation
Switch branches/tags
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
bin
dist
src
.eslintrc
.gitignore
README.md
package.json
webpack.config.js

README.md

Ladda CRUD Example

CRUD example application for the JavaScript caching library Ladda.

What can I do here?

Visit the app by going to http://opensource.small-improvements.com/ladda-example-crud/. Make sure you open your developer console in your browser to observe the network traffic.

You will find a simple Contact List application, already populated with some sample content. On the right side you will also see a simple activity stream.

All API calls are made with the help of Ladda - you can find its configuration here.

Ladda allows us to code in a stateless fashion - in this application we do not need to manage any state of server-side data: Our components just make requests for Contact and Activity entities through Ladda. Through its caching mechanisms we are guaranteed to call the server for fresh data if needed or to receive our data instantaneously.

You can see this in implemented by looking at the code for the components ContactEdit, ContactList and ActivityList.

We use a higher order component to wrap our stateless presenter component. The HOC withData from ladda-react takes a configuration object, which defines which requests need to be fulfilled before the component can be rendered properly. E.g. in the case of ContactList we ask for a list of contacts by calling our API which is enhanced with Ladda's caching capabilities - the result of this call is then passed to our component as prop.

Try a couple of the following scenarios to see Ladda in action:

  • Click on a contact and save some edits. Observe how we do not need to refetch the list of contacts. As editing a contact creates a new item in the activity feed, we configured Ladda to invalidate activity entities when we make changes to contacts (see here). A request to fetch an updated list of activities is made.

  • Click on a contact, but don't do anything - you will return to the list view instantaneously without any additional server communication.

  • Delete a contact - Ladda again only needs to ask for updates in the activity feed, but not more.