A first look at how to use AmplifyJs to simplify coding of server requests

When coding web UI’s it’s not always we have the server API finished and ready to use. And even if we have it it’s nice to be able to mimic server behaviour so we can focus and test our UI code isolated. Therefore it’s nice to abstract server calling functions from actual Ajax code with URLs.

This also makes it easier to adjust our code in case of future possible API changes. AmplifyJs helps us with this in a really nice way.

Disclaimer: As most things I write about, I’m far from an expert, I write as I learn new stuff. But I only write about stuff I found to be working and useful, and I hope I can help others with similar needs as mine.

Want to read an expert article about amplify.request? Check out Elijah Manors Mocking jQuery AJAX with AmplifyJS Request.

Let’s say we need to save some data to the server from our UI. We know we need to write a Web Api. But we like to focus on the UI at first. We start by writing the Html and a stub to handle the functionality:

Key: <input type="text" id="key"/><br />       
Value: <input type="text" id="value" /><br />

<input type="button" id="get" value="get"/>
<input type="button" id="post" value="post"/>
$(() =>{
    $("#get").click(() =>{
        var key = $("#key").val();
        // get data
    });
    $("#post").click(() =>{
        var key = $("#key").val();
        var value = $("#value").val();
        // post data
    });
});

Now, we could easily add jQuery ajax GET/POST functionality and get things done. But that would require us to write the server side code to be able to test the UI. If we instead add AmplifyJs we can define our request methods at application startup to stay on client side until we’re satisfied with that, and then easily switch to code that calls the server:

The code using amplify.request:

$(() =>{
    $("#get").click(() =>{
        var key = $("#key").val();

        amplify.request("getSomeData",
            {
                type: "someresource",
                key: key
            },
            function (data) {
                alert("Requested for key '" + key + "' and I got: " + data.value);
            }
        );

    });
    $("#post").click(() =>{
        var key = $("#key").val();
        var value = $("#value").val();

        amplify.request("postSomeData", {
            type: "someresource",
            key: key,
            value: value
        }, function (data) {
            alert("Result " + data);
        });

    });
});

1. Configure amplify.request to use client side functions
To add amplify client side functionality we just need to add some code that can mimic get/post behavious. For example use client side storage, which conveniantely enough, is another thing amplify can help us with:

amplify.request.define("postSomeData", (hash) => {
    if (hash.data.type == "someresource") {
        amplify.store(hash.data.key, hash.data.value); /* store the key and the value */
        hash.success(true);
    };
});

amplify.request.define("getSomeData", (hash) => {
    if (hash.data.type == "someresource") {
        hash.success({
            key: hash.data.key,
            value: amplify.store(hash.data.key) /* get the stored data with the key */
        });
    };
});

2. Later on – switch to server calls
When we are pleased with the UI then we switch out the client side code with actual server side code. Amplify handles ajax with the help of jQuery and the code looks like this:

amplify.request.define("getSomeData", "ajax", {
    url: "/api/{type}/{key}",
    type: "GET"
});
amplify.request.define("postSomeData", "ajax", {
    url: "/api/{type}",
    type: "POST"
});

Naturally we could use an if condition to use server functionality only on a live server, or we could have ConfigureAmplifyToUseServer.ts vs ConfigureAmplifyToUseLocalStorage.ts configuration files.

Lazy Typescripting
I wrote this with a lazy Typescript touch. Not many strong types. But I do use the “()=>” symbol frequently (it simply translates to javascript “function()”.) And to get some (not complete) syntax help for amplify I wrote a quick definition file which you can find here.

Advertisements

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s