In this post I continue on from Part 1: Building a client-side responsive widget framework, to talk over the approach used to building JustGiving widgets.
Problem 4: Allowing widgets to be configurable
Problem 5: Cross-browser CORS XHR requests with promise support
Because our REST API endpoints are called using XHR and are served on a different domain to the widgets themselves the widgets must implement CORS (Cross origin resource sharing) fto make endpoints requests. We tested a set of AJAX micro libraries that claimed support for CORS and we decided on a library that offered full CORS support, even down to IE8. Using the library, a promisified fetchData method was written. This returns a promise (a ‘thenable’) which allows cleaner handling of async flows within the application, and handles the parsing of returned text data* back into JSON for consumption by the widget application.
*IE8 supports CORS but only so far as accepting requests for contentType text/plain but not application/json, where JSON is the usual currency of a REST endpoint. Where JSON data is required, the payload can be stringified by the REST API and sent back to the browser as text. It can then be parsed back into JSON by the consuming application.
Problem 6: Building small and fast
Our widgets will load asynchronously to prevent blocking or slowing of load times of our hosts’ pages. This means that they need to load and render as quickly as possible, so the user doesn’t scroll beyond them before they’re visible. So we made performance a key focus throughout development, particularly application weight and http request count. Native code was preferred over heavier vendor frameworks and libraries. This helped minimise load time, provide faster runtime operations and to speed up page rendering. Build steps such as minification, concatenation and icon data-uri generation were added to further reduce page weight and the number of http requests the widgets must make. Concurrent REST API requests were enabled through used of promise patterns such as Promise.all, and optimised CSS transitions were used to give a jank-free user-experience to interactive UI components.
Problem 7: A re-usable framework
For CSS, creating re-usable styles was equally important to allow for quick iteration of new widgets, as well as ensuring brand consistency. OOCSS architecture was chosen as it is well suited to building out a library of re-usable CSS ‘objects’ that can be applied, combined and re-used across many contexts.
Finally, to complete the framework, we wrote a custom Yeoman generator that bundles in the bower dependency and generates requisite boilerplate code and folder structure for scaffolding out a new widget project in a matter of seconds.
Problem 8: Pulling it all together with gulp
At the time of writing we are using this new framework to build out a set of beta widgets for our charity customers. The next steps are to create a widget builder application that allows end users to select and configure their widgets and delivers their code snippets in an easy-to-use format. In the meantime, look out for a JustGiving widget near you!