How to Leverage Salesforce Using a Client Written in Svelte

In the “Leveraging Salesforce Without Using Salesforce” article, I navigated the course to introduce a Spring Boot service that would leverage the well-established Salesforce RESTful API. This service aims to act as a middleware layer to allow clients not written in Salesforce to retrieve and update contact data stored in Salesforce. This backend service implemented its own caching layer to provide a faster response time and cut down on the number of times Salesforce needed to be called.

In this article, I will introduce a client application using the Svelte framework to interact with the Spring Boot service.

Why Svelte?

When I planned this series, I knew I would utilize Spring Boot as the middleware tier in my design. I also knew that I wanted to provide sample client applications using Angular, React, and Vue.js because they represent the majority of JavaScript-based clients currently in use.

At the same time, I wanted to push myself and use a JavaScript-based framework that was 100% new to me. In fact, I wanted to use one that I had never even heard of before. This wasn’t that huge of a task since I am primarily a service-tier developer.

I reached out to my good friend, Michael Bogan, who pitched the idea of using Svelte. Of course, I said “yes” to the idea before I even did a “svelte” Google search.

As soon as I performed that “svelte” search in Google, I was excited to try a JavaScript framework that provides the following advantages:

1. Svelte builds upon the API of the internet. It doesn’t introduce anything new (like JSX) and is designed to run with basic JavaScript, CSS, and HTML. Because of this, most developers are ready to start building applications in a few minutes and are comfortable after only an hour.

2. Svelte is extremely fast (proven to outperform Angular, React, and Vue.js) and production-ready. Current users of the framework include GoDaddy, IBM, Square, and The New York Times.

3. There are zero (yes, zero) client dependencies.

   
   

If you would like to read more, check out this wonderful article by Robert Hall.

public class Contact {
    private String id;
    private String name;
    private String title;
    private String department;

    private SalesforceAttributes attributes;
}

public class SalesforceAttributes {
    private String type;
    private String url;
}

If you want to see the Spring Boot service, you can access the Spring Boot Service source code here:

https://gitlab.com/johnjvester/salesforce-integration-service

Getting Svelte Up and Running

Getting a new client created and running in Svelte is quite simple. In fact, the following terminal commands were executed on my MacBook Pro to create a new instance called “salesforce-integration-svelte”:

npx degit sveltejs/template salesforce-integration-svelte
cd salesforce-integration-svelte
npm install
npm run dev

These commands resulted in the following output:

╭─john.vester@john ~/projects/salesforce-integration-svelte 
╰─$ npm run dev

> [email protected] dev /projects/salesforce-integration-svelte
> rollup -c -w

rollup v2.52.7
bundles src/main.js → public/build/bundle.js...
LiveReload enabled on port 35730
created public/build/bundle.js in 466ms

[2021-07-04 17:09:15] waiting for changes...

> [email protected] start /projects/salesforce-integration-svelte
> sirv public --no-clear "--dev"


  Your application is ready~! 

  - Local:      http://localhost:5000
  - Network:    Add `--host` to expose

────────────────── LOGS ──────────────────

Navigating my browser to localhost:5000 presented the “hello world” message:

Adding Some Dependencies

As a next step, I wanted to see if it was possible to leverage Bootstrap for my new application. After all, I am not the best at UI/UX and feel like Bootstrap provides something quick and easy to use which doesn’t look like Web 1.0.

Within a few minutes, I located the sveltestrap dependency, then added it to my project using the following command:

npm install --save svelte sveltestrap

Next, I added the following <link> in the public/index.html file:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">

Now, Bootstrap classes can be used in my new Svelte application.

Next, I randomly picked the svelte-inline-edit inline editor out of a list of Google search results. I have no idea if this is the best one to use, but it appeared to meet my basic needs. I added my second custom dependency using the following command:

npm install svelte-inline-edit --save-dev

At this point, I was ready to focus on handling the Contacts object that lives in Salesforce.

Creating the Contacts Component

The remainder of my work centered around a single file in the project’s /src folder, called Contacts.svelte. Having everything in a single file is often viewed as another benefit to adopting the Svelte framework.

Adding the View

Knowing the payload of the Contact object, I added the following view logic in the Contacts.svelte file:

{#if contacts}
    <table class="table">
        <thead class="thead-dark">
            <tr>
                <th scope="col">Name</th>
                <th scope="col">Department</th>
                <th scope="col">Title</th>
            </tr>
        </thead>
        <tbody>
            {#each contacts as contact }
                <tr>
                    <td>{contact.Name}</td>
                    <td>{contact.Department ? contact.Department : "(not set)"}</td>
                    <td><InlineInput length="2" bind:value={contact.Title} on:save={patchContact(contact)} ></InlineInput></td>
                </tr>
            {/each}
        </tbody>
    </table>
{:else}
    <p class="loading">loading ...</p>
{/if}

There is really nothing high-tech here, but there is a special rule to show “(not set)” when the contact’s department is null. Additionally, we add the InlineInput tag to ensure the title column updates directly from the view.

Adding the Service

I created the service side of the component next:

<script>
    import { onMount } from "svelte";
    import InlineInput from 'svelte-inline-edit';

    export let contacts;

    onMount(async () => {
        await fetch(`http://localhost:9999/contacts`)
            .then(r => r.json())
            .then(data => {
                contacts = data;
            });
    });

    async function patchContact(contact) {
        console.log('contact', contact);

        const headers = {
            "Content-type": "application/json"
        }

        const res = await fetch('http://localhost:9999/contacts/' + contact.id, {
            method: 'PATCH',
            body: JSON.stringify({
                "Title": contact.Title
            }),
            headers: headers
        })

        const json = await res.json()
        console.log(JSON.stringify(json));
    }
</script>

The onMount() event loads the data via a GET call to the RESTful service and the patchContact() function performs the PATCH call to the RESTful service.

Final Steps

With the Contact component ready, I needed to update the App.svelte file to include the Contacts component and get rid of the “hello world” sample code.

<svelte:head>
  <title>`salesforce-integration-svelte` App</title>
</svelte:head>

<h1>Contact List (from Salesforce)</h1>

<main>
  <Contacts {contacts} ></Contacts>
</main>

Finally, I cleaned up the main.js file to remove the last of the “hello world” code:

import App from './App.svelte';

const app = new App({
	target: document.body,
	props: { }
});

export default app;

Using the Svelte Client

With the changes in place, I executed the npm run dev command again. After making sure the Spring Boot RESTful service was running and connected to Salesforce, navigating to localhost:5000 presented the following information:

Single-clicking on the Title for Sean Forbes (second row) places the cell into edit mode:

The title for Sean Forbes was updated from “CFO” to “CEO”:

When I click the checkmark, the client sends the new value in a PATCH request to the Spring Boot RESTful service, which is then passed on to Salesforce. Reloading the page displays the updated information:

As a result, we can meet the business needs and update Salesforce data without actually using a Salesforce client to do so.

Conclusion

Starting in 2021, I have been trying to live the following mission statement, which I feel can apply to any IT professional:

“Focus your time on delivering features/functionality which extends the value of your intellectual property. Leverage frameworks, products, and services for everything else.”

J. Vester

In this example, I used Svelte for the very first time. In fact, within a short period of time (less than two hours for me), I went from an empty folder to a functional application that reads and updates contact information in Salesforce … without actually using a Salesforce client.

Of course, a production-ready scenario would require some additional work to prepare this application for “prime time” use. However, the Svelte framework allowed me to focus my time on meeting the business needs stated in the example case.

If you are interested in the source code used for the Svelte client, navigate to the following repository on GitLab:

https://gitlab.com/johnjvester/salesforce-integration-svelte

Future articles are also planned for the following other JavaScript-based clients:

• Vue.js
• React (React Native)
• Angular
• Lightning Web Components (outside the Salesforce ecosystem)

Have a really great day!