Category:

Overview:

When I arrived at Hootsuite as a Summer High School Technical Intern I was tasked with creating sample apps for the Hootsuite App Directory. These apps should be easy for developers to host, quickly modify to suit their purposes, and use a minimal amount of external libraries in order to make the source code easy to understand for as many people as possible.

The GitHub repository for the sample apps I’ve mentioned in this blog post can be seen here.

Goals

  • Reduce the amount of time it takes for a developer to get a basic app up and running
  • Find flaws in the documentation and Hootsuite SDK
  • Code can be easier to process for developers than documentation
  • Allow developers to test out the Hootsuite SDK
  • Having a reference implementation
  • Give developers an understanding of what Hootsuite apps are
  • Address common pitfalls and “gotchas”

To JQuery or not to JQuery

I knew that I didn’t want to use any frameworks like React or Angular because we wanted the Sample App code to be readable by as many JavaScript developers as possible. I would still have to use JavaScript to manipulate the DOM though, and I had to decide whether JQuery was the right choice here. Because jQuery is an external library and not a part of the JavaScript language I decided that it wasn’t the right choice and that I would use the groundbreaking VanillaJS instead. This meant that I had to make a few simple helper functions for some common operations like finding a single element by class name but this was worth it in my opinion because it didn’t add unnecessary bloat to this barebones sample app.

Here’s an example of a few of the functions I created instead of using JQuery:

Choosing a backend

The backend for this Sample App is very simple because all it does is serve static content and accept POST requests so that window.postMessage could communicate with the Hootsuite dashboard. I initially started off with Python/Flask but switched to Node/Express so that all of the code could be in JavaScript and so that the Sample App would be easier to host on Heroku. Similar to the motivations of not using JQuery in the frontend, the backend doesn’t use any databases, or anything that would over-complicate the sample app.

Easy hosting

One of the challenges with the postMessage API is that your endpoint must be able to accept POST requests. This means that the sample app is more difficult to host than just setting up static files. This is where Heroku is really useful because the free tier is more than enough to host this kind of an app and it deals with HTTPS for you as well, which is required for integrations with Hootsuite. Heroku is very well integrated with NodeJS/Express and works seamlessly. Hosting with Heroku helps achieve one of the primary goals of writing sample apps, which is to reduce the time it takes for a developer to get an app up and running.

Production Readiness

One challenge with creating something so public facing is that the code needs to be clean and easily readable, with comments explaining what is going on throughout the code. The best process for achieving this is code review. Before any change goes out to the public it is reviewed by multiple people at Hootsuite, making sure that all the code is easily understood and follows best practices. To save reviewers time, it is a good idea to run a linter, such as JSHint for Javascript before you submit the code for review.

Another challenge with Open Source Software is that you must have a way to make sure that secrets, API keys, and other sensitive information aren’t checked into your version control. The way that I dealt with this is with explanations on how to input user-specific credentials into a configuration file and/or information into the sample app in the README, and also logging errors when users haven’t input an API key or secret.

Conclusion

There were many benefits to writing a sample app for the Hootsuite SDK. One of first benefits was simply having fresh eyes on the SDK. There were many small issues and inconsistencies in both the documentation and the SDK that I was able to point out because I had a fresh perspective. Once these issues are resolved, the Hootsuite SDK will be easier to use for all developers. Another key benefit of writing sample apps is to provide developers with a base to work from. Sample apps provide a lot of the boilerplate code so that developers can get to writing the valuable parts of their apps much faster.

About The Author

Vadym Martsynovskyy is a high school summer student on the Developer Products team. He will be studying at Computer Science at the University of Toronto starting in September 2017. In his spare time he enjoys programming, watching Game of Thrones fan conspiracy theories, playing video games, and skiing.