Creating custom Duda widgets - Work Journal December 10, 2021

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 = '';

  // 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.

The complete Work Journal series:
1. Week ending January 25th, 2019
2. Week ending February 1st, 2019
3. Week ending February 8th, 2019
4. Week ending February 15th, 2019
5. Week ending February 22nd, 2019
6. Week ending March 1st, 2019
7. Week ending March 8th, 2019
8. Week ending March 15th, 2019
9. Week ending March 22nd, 2019
10. Week ending March 29nd, 2019
11. Week ending April 5th, 2019
12. Week ending April 12th, 2019
13. Week ending April 19th, 2019
14. Week ending August 9th, 2019
15. Week ending September 20th, 2019
16. Week ending September 27th, 2019
17. Week ending December 6th, 2019
18. Week ending October 2nd, 2020
19. Week ending April 2nd, 2021
20. Coding API integrations in Twilio Studio - Work Journal May 8, 2021
21. Trudging through a complex theme implementation - Work Journal October 29, 2021
22. Creating custom Duda widgets - Work Journal December 10, 2021
23. My first Laravel Nova project - Work Journal December 1, 2023
24. Let's talk about Statamic - Work Journal January 12, 2024