I am a front-end developer with over 6 years of experience, who is passionate about development that is modern, performant, accessible and adheres to standards that can be followed and understood by other developers who may work with my code.
My team and I were tasked with the front-end uplift of a tool called Partner Search, which is an online directory designed to connect Small to Medium Enterprises (SMEs) with accountants and bookkeepers- particularly, those with experience and credentials related to MYOB software.
Built in Angular 1, it needed to be modernised and brought in line with current MYOB standards. This meant rebuilding it in React and ensuring that it could be housed within Adobe Experience Manager (AEM), as well as making it conform to the internal component library and style guide known as Astridd. A range of things needed to be done to achieve this.
First, the existing back-end was tied to the old front-end, so we needed to ensure those could be successfully decoupled. However, the admin section was not included in the scope of this uplift and so needed to remain intact.
Second, in order to allow the React SPA to live within AEM, a custom template needed to be created that could reference the relevant assets, as well as allow the SPA version to be authorable. This allowed for quick deployments that remained independent of the CMS codebase, as well as quick rollbacks should they be necessary. We also needed to set up AEM's route mappings appropriately to ensure that React router could still function within this context.
Third, Astridd was unfortunately not yet React-ready, which meant that the parts of it we needed had to be translated into React components while retaining their visual integrity and expected behaviour.
Finally, in order to ensure a performant experience ElasticSearch was used to optimise the search behaviour and allow us to retrieve not only the results of searches made via keyword and/or suburb, but also the range of filters that could then be applied to that search.
The Blix platform underwent an almost complete rebuild in late 2017, where back-end services were integrated with a Business Intelligence tool called Qlik Sense.
I was responsible for the front-end infrastructure; a static front-end was built and hosted on Amazon S3 and connects to both NodeJS and Qlik Sense via asynchronous requests.
To achieve this I developed a workflow using a combination of Gulp and Webpack to automate things including transpilation of ESNext to IE11 compatible JS, minification, asset hashing and automatic deployment of assets to S3 and JS sourcemaps to Rollbar for error monitoring.
Qlik Sense uses WebSockets to generate visualisations server-side before sending rendering information to the client. It ships with a set of visualisation options; however, as these were not flexible enough for our needs I developed several custom visualisations in JavaScript to work with Qlik.
As the connection to Qlik is established in the front-end, the visualisations need to be constructed in client-side JavaScript. This, along with the range of other things involved, resulted in a project of significant size. Thus, great care was taken in breaking the front-end down into reusable components for the sake of readability, maintainability and testability.
While at eg+ worldwide, my work ranged from EDMs to microsites to full-scale websites, requiring strong HTML, CSS and JavaScript skills, usually within tight deadlines.