Join us to learn how to leverage HTML5 FileReader API, combined with the JSForce JavaScript library and JavaScript Promises, to create a bulk data importer with a Visualforce front-end. We'll demo how to create multiple batches, and collect summary statistics of the batch results using Javascript Promises. You will come away understanding how to apply these libraries to your tooling challenges.

1. Leveraging Javascript Promises
and the Bulk API
​ Jim Rae
​ Cloud Solutions Practice Lead
​ jrae@xede.com
​ @jimraeSFDC
​
HTML5, JSForce, Javascript Promises and More

2. u Overview
u What are Javascript Promises
u JSForce and the Bulk API
u HTML5 FileReader
u Summary
Agenda

3. This session will educate you on how to apply a Javascript application of the various APIs (via
JSForce) combined with Promises techniques to optimize asynchronous processing.
Examples include:
u Allowing long running processes to continue in background, and provide updates to the user
u Process large volumes of data into and out of salesforce.com
u Execute complex query against very large dataset
u External callouts to webservices
Overview

4. ​ A Promise represents a proxy for a value not necessarily known when the
promise is created. It allows you to associate handlers to an asynchronous
action's eventual success value or failure reason. This lets asynchronous methods
return values like synchronous methods: instead of the final value, the
asynchronous method returns a promise of having a value at some point in the
future*
What are Javascript Promises
*https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise

5. u Promises allow you to flatten your
asynchronous API calls an remove the
“Pyramid of Doom” (or Callback Hell)
u Promises allow you to choose when
you want to handle the result of an
asynchronous call
u Promises can be chained, and chains
can be extended at any time
u Promises allow you to effortlessly
handle errors, even when chaining
Why are they better
What are Javascript Promises
*https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise

6. ​ A promise can be:
• fulfilled The action relating to the promise succeeded
• rejected The action relating to the promise failed
• pending Hasn't fulfilled or rejected yet settled Has fulfilled or rejected
You will also hear the term “then-able” to describe an object that is promise-like, in that it has a “then”
method.
What are Javascript Promises

7. ​ Promise Methods include:
• Promise.all(iterable) Accepts an iterable array of promises and resolves as a new promise when all
promises in the iterable are resolved
• Promise.race(iterable) Accepts an iterable array of promises like the All method, but resolves to a new
promise when the first element in the array is resolved
• Promise.reject(reason) Returns a promise object that is already rejected with the specified reason
• Promise.resolve(value) Returns a resolved promise with the specified value
• Promise.then(onFulfilled,onRejected) Appends the fulfill and reject handlers to the new promise
• Promise.catch(onRejected) Appends a reject handler to the promise
What are Javascript Promises

8. Callback style
fs.readFile("myFile.txt", function(err, fileContents){
if(!!err) {
throw Error(err);
return;
}
myConvertFile(fileContents, function(err, newContents){
if(!!err){
throw Error(err);
return;
}
fs.writeFile('myNewFile.txt', newFileContents, function(err, saved){
if(!!err){
throw Error(err);
return;
}
console.log("YAY! SAVED FILE!");
}
}
Promise style
fs = Promise.promisifyAll(fs);
myConvertFile = Promise.promisify(myConvertFile);
myWriteFile = Promise.promisify(
fs.readFileAsync("myFile.txt")
.then(myConvertFile)
.then(function(newFileContents){
return fs.writeFileAsync('myNewFile.txt’,newFileContents);
})
.then(console.log.bind(console))
.catch(function(err){
console.err("Error:", err);
});
What are Javascript Promises
Sample code source: http://blog.namangoel.com/dealing-with-callback-hell

9. Let’s Look at the Code
Javascript Promises

10. JSForce (jsforce.github.io) is a Javascript library that encapsulates Salesforce APIs into asynchronous
JavaScript function calls. It works both on the Client and Server side, and with Node.js as well as
Javascript
Included APIS:
u REST API
u Apex REST
u Analytics API
u Bulk API
u Chatter API
u Metadata API
u Streaming API
u Tooling API
JSForce and the Bulk API

11. Using the JSForce Library on a Visualforce
page is a straightforward process. Simply
download the library from jsforce.github.io/
download and create a Static Resource in
your org. Then, include the resource as a
script in the header of your page.
<apex:page standardcontroller=”Contact”
docType="html-5.0”
title="Bulk Contact Processor" >
<apex:includeScript
value="{!
URLFOR($Resource.JSforce)}" />
<script>
//script here
</script>
<apex:pageblock>
//Show stuff here
</apex:pageblock>
</apex:page>
JSForce and the Bulk API
​ Getting Started

12. The Salesforce Bulk (or Batch) API is a RESTful API that is optimal for loading or deleting large sets
of data. You can use it to query, insert, update, upsert, or delete a large number of records
asynchronously by submitting batches that Salesforce processes in the background.
You first send a number of batches to the server using an HTTP POST call and then the server
processes the batches in the background.
While batches are being processed, you can track progress by checking the status of the job using
an HTTP GET call.
All operations use HTTP GET or POST methods to send and receive XML or CSV data.
JSForce and the Bulk API
Source: https://developer.salesforce.com/docs/atlas.en-us.api_asynch.meta/api_asynch

13. Let’s Look at the Code
Javascript and JSForce

14. The FileReader object lets web
applications asynchronously read
the contents of files (or raw data
buffers) stored on the user's
computer, using File or Blob
objects to specify the file or data
to read.
File objects may be obtained
from a FileList object returned as
a result of a user selecting files
using the <input> element, from
a drag and drop operation's
DataTransfer object, or from the
mozGetAsFile() API on an
HTMLCanvasElement.
When leveraging the FileReader
API, you should first verify it is
supported on the users browser.
​ Check for browser support
​ if (window.File && window.FileReader && window.FileList && window.Blob) {
​ // Great success! All the File APIs are supported.
​ } else {
​ alert('The File APIs are not fully supported in this browser.');
​ }
​ Get the File(s)
​ <input type="file" id="files" name="files[]" multiple />
<script>
​ //process the file here
​ </script>
HTML5 FileReader
Source: https://developer.mozilla.org/en-US/docs/Web/API/FileReader

15. CanIuse.com
HTML5 FileReader
Source: CanIuse.com

16. Let’s Put it all Together

17. ​ In this session we have looked at :
u Promises – What are they, and what are they good for?
u JSForce – How to leverage this library to expose the suite of Salesforce APIs to your Javascript
u Salesforce Bulk API – How to work with large volumes of data in “record time” (pun intended)
u HTML5 FileReader – How to use the FileReader as one method of getting data into Salesforce
via Javascript
u Use Cases:
u Bulk File upload
u Large dataset query and summary
u Calling External Webservices
u Execute and Monitor long running processes
Summary

18. Q & A

19. ​ Promises – https://promisesaplus.com
​ JSForce – https://jsforce.github.io
​ Demo Files – https://github.com/jimrae/df15Demo
Where can I get the code and learn more
19

20. Thank you
20