Browser UI Extensions: Establishing Best Practices for a Novel Framework

The key problem when working with any new technology is always: ‘How do you do something right if you’ve never done it before?’

This was precisely the problem faced by developers for Oracle B2C Service Cloud at the beginning of the transition from Agent Desktop (a traditional locally downloaded console) to the browser-based Agent Web. With Agent Web’s adoption came the need for Browser User Interface (BUI) Extensions to extend the out-of-the-box functionality, which brought new development challenges.

Having never developed using this specific technology before, how do you ensure consistently high-quality work?

This blog outlines what BUI Extensions are, the shift to building for the Oracle B2C Service Browser UI, and an overview of the best practices we established to help you develop on this platform.

What are Browser UI Extensions #

Browser User Interface (BUI) Extensions are cloud-based JavaScript extensions hosted in online directories and executed client-side by the browser’s runtime. These integrate into a web of different APIs and frameworks to further the existing technical solution and expand the standard business logic.

These extensions can be as simple as opening a pop-up or as complex as third-party integrations, allowing for an extension of the standard capabilities of Oracle B2C Service Cloud.

Reflect on your .NET Practices #

Before BUI Extensions (and Agent Web in general), Oracle B2C Service Cloud was accessed entirely through a locally downloaded console. As such, all modifications to the core framework were done using traditional .NET Add-Ins written in C# code.

With the introduction of BUI Extensions, the wait times for compiling C# code and some of the more time-consuming aspects of developing for that technology have disappeared. However, what hasn’t disappeared are the years of hard work to establish industry standards and best practices for how best to modify Oracle B2C Service Cloud. Before beginning development for BUI, review the .NET best practices to decide which are relevant to your new platform.

For example, before building any .NET Add-In, it is essential that you first define the overall setup: folder structures, files, separation of concerns, etc. This ensures long term maintainability by easing source code navigation for future developers.

Without reviewing these best practices, it’s easy to fall back on JavaScript development’s lower minimum requirements. These considerations are the first step taken to establishing BUI specific best-practices and ensuring the bar is set far above those minimum requirements, with modifications that can be maintained and altered long-term.

The Tools for the Job (documentation) #

Now that we’re all caught up on the best way to modify the old framework, we’re ready to start looking into how we can build upon the new framework. But before we can do that, we need to know what tools we have and what canvas we’re working on. In this case, we need to review the documentation and understand the environment.

The Boxfusion team was already well established with the environment, having developed extensively on the Oracle B2C Service Cloud platform. With the thorough documentation provided by Oracle for BUI Extensions, it was easy to take what was already known and apply it to this new technology. However, some significant differences and considerations had to be taken into effect.

Security First #

Unlike their C# predecessors, BUI Extensions are JavaScript files hosted within URL accessible directories. This means anyone can access your source code and as such, security should be your number one priority as what was previously bad practice might now be considered a valid security concern. Security first remains an essential doctrine for any development, but the particular focus was given during these early stages to ensure sub-optimal practices weren’t established as norms.

Platforms can therefore be protected using simple techniques such as placing external credentials for API calls inside Configuration Files that cannot be accessed without administration rights.

Internal validation is similarly protected by removing standard credentials and replacing them with user-specific single-use Session Tokens. This avoids exposure of credentials and allows time-limited access, whilst maintaining the ability to monitor access.

For even more sensitive logic, this can be held within server-side scripts. Although these require API calls which could impact execution time for larger scripts, this strengthens security by hiding any potentially exploitable source code and allows limits on the data passed back to an end-user.

Asynchronicity #

As BUI Extensions are executed browser-side rather than server-side, data must be accessed via the APIs built into the Oracle B2C Service Cloud. With this, developers must consider how to run code in order to provide a positive user experience efficiently.

Consider this case where a request is sent from within JavaScript; the code does not wait for a response but instead continues executing the rest of the code. If you wish to do anything with the data sent back, you must specifically request that your code wait or define a function within your code (known as a callback function) to execute when the response has come in.

This feature where the extension does not wait for a response before continuing with the rest of the code is a core feature in Asynchronous JavaScript and can be highly advantageous when utilised correctly.

For example, imagine a case where you must access ten different APIs to receive ten different pieces of information. Once all the information has been returned the code can continue but, in this scenario, your internet connection is slow and therefore a request takes 0.5s to return a value.

If running synchronously, you would have to wait for each request to return before proceeding with your program, meaning the user must wait for 5s. If this same command is run multiple times, this could severely impact users.

Alternatively, asynchronous code can send all the requests off simultaneously and receive all the responses at the same time because it isn’t waiting for the previous request to finish before sending another. This means that the code takes ~0.5s to run in this scenario, a tenfold improvement.

When utilised correctly, the advantages for any developer are faster, more efficient code, which culminates as a positive user experience.

Practice makes perfect #

Now we understand what tools and canvas we have, it’s time to start painting.

Simple “Hello World!” applications can be helpful to get off the ground, but they don’t teach anything more than you already know. Instead, attempting to rebuild existing C# Add-Ins on the new platform or improve upon existing applications can help to better understand the practical applications of the framework. For Boxfusion, consultants have revised internal solutions, comparing results in order to optimise the code before any future rollout.

If there are no pre-existing solutions, applications can be built that mirror existing functionality or functionality that might be achievable by another method; this also helps to understand what is and isn’t feasible.

During this process, a repository of steadily higher and higher quality extensions will be produced, each improving off of the methods of the last. Any work done at this stage is also documented for future training once these standards have been established.

Pause and Reflect #

It's vital after building each extension to take the time to review and criticise your work.

Ask questions like:

• How might I breach the security on this extension?
• Are API requests being sent in the most time-efficient way?
• How easy would this be to maintain and modify?

Once you've answered these questions, repeat the process by building and reviewing more extension. Through this process, you will iteratively improve the quality of the extensions being produced, expanding on the points we've already made.

Finally, once you're comfortable with beginning building extensions on projects, incorporate this feedback loop into your standard process, taking in feedback from both developers and stakeholders to ensure that any knowledge obtained can be carried over into the next project.

Get Started #

Throughout this article, we've outlined how best to approach BUI Extensions as a new technology by taking the time to understand the technology's unique features.

We've demonstrated a security-first approach to development and the unique challenges present for BUI. We've also discussed the use of asynchronous JavaScript and how to fully utilise the benefits of this feature whilst ensuring we avoid the potential pitfalls that can occur if poorly built.

Using a combination of these best practices and the feedback cycle outlined, it is possible to build high-quality extensions that can be seamlessly integrated into a solution.

Finally, knowing the documentation, using online community forums, reading upgrade documentation, and keeping up-to-date with the newest JavaScript features (and limitations) will all ensure that the extensions you produce remain consistently high in quality.