Back in the spring, I worked on an inflation hedge calculator for the mortgage broker who helped our family purchase our house a few years ago. They provided me with a spreadsheet and some examples to work from that I then coded into a Vue.js component that could be loaded through a shortcode on a WordPress site. A key piece of this calculator is accomplished through the use of LoanJS. LoanJS is a small JavaScript library that can be used to calculate the interest and payments based on a loan amount, interest rate, and amortization period. The inflation hedge calculator compares their current mortgage to what their mortgage would look like if it shifted to a different interest rate for the remainder of the amortization. It isn’t a very complicated calculator but can be used by mortgage brokers and realtors to show homeowners some possible ways to save money in the long term.
Six months after that calculator went live, I got an email from the mortgage broker, asking if I could take the work I did for him and put it onto a colleague’s website. That sounded easy enough, as most of the work was already done and it probably wouldn’t take long. Of course things turned out to be a little more complicated. The new site that needed the calculator was built on the Duda platform. I had never even heard of Duda, but after spending a few minutes of reading the Duda documentation I discovered that their developer tools were fairly robust. They had examples of creating custom Duda widgets and how complex compiled JavaScript could be included, going as far as having a widget example built with Vue.js.
At this point I was feeling that Duda was setting me up for an easy layup with their tools establishing the foundation for me to build upon. I took my existing JavaScript and dropped it into their example folder and was able to easily get the code running and testable in my local browser. The tricky part turned out to be the deployment and storage of static assets because Duda does not have a place to upload our compiled JavaScript. Yes, there is HTML, JavaScript, and CSS editors built into the widget builder tool but we reference external JavaScript like this:
function(element, data, api) {
// define the script src
var scriptSrc = 'https://duda-widget-poc.s3.amazonaws.com/static/js/duda-widget.js';
// render the app
api.scripts.renderExternalApp(scriptSrc, element, {});
}
Their own example has the duda-widget.js file sitting in their AWS storage, but they don’t offer us any tool for uploading our own widget JavaScript files to be referenced in the widget builder. To really build Vue.js, React, or Vanilla js compiled scripts in your widget you need to have your own server to host those files from and reference them in the widget builder. For a platform that wants to replace traditional website platforms like WordPress or compete with Wix or SquareSpace, I was surprised that their tool was not self-reliant. We ended up hosting the few small JavaScript files on a traditional server and the widget worked well.
To take things a little further, I decided to add a few customizable titles on the calculator that could be modified when dropping the widget onto your page within the Duda page builder. When building a custom widget we can add a variety of fields that our JavaScript can use to customize the widget, change widget settings, etc. It would be pretty easy to build widgets that interact with APIs, have default settings, show interactive content, etc.
I would definitely like to work on Duda widgets again because their framework meshes well with the type of interactive JavaScript I enjoy building. Hopefully one day Duda will integrate some asset storage for JavaScript and CSS files that can live on their hosting instead of requiring another hosting provider.