CRUD example application for the JavaScript caching library Ladda.
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.