Month: February 2017

In corporate or enterprise platforms, the representation of tabular data in single-page web apps is a common occurrence. There are challenges with the amount of data rows, the variety of data types, and number of simultaneous columns enterprise users wish to see.

In addition, the perceived performance of tabular data in a client-side web application can be affected by many factors. Ideally, the users would like to have all of the relevant data available locally (not requiring multiple round-trips to the web server) and still have lightning fast performance.

My blog will talk about how I was able to achieve all of the user requirements for displaying tabular data using the popular client-side AngularJS JavaScript framework.

AngularJS framework

Our team develops single-page applications (SPA) for our customer. SPA is a web application that doesn’t reload at any point of time. Instead all necessary code is loaded at once or dynamically when is requested usually by a user action.

AngularJS is a popular JavaScript framework adopting SPA principle. It is based on bidirectional User Interface (UI) data binding. That is when a model changes, the view is updated. When the view changes, the data model is updated accordingly. The model is maintained within the browser. No interaction with the server is needed to update the whole view.

When developing a web page under AngularJS:

• data comes from a web service, database, etc.
• an HTML table is rendered from an array of entities using the ng-repeat directive,
• one-way binding to dynamically render an HTML table is used,
• rendering process takes time when you have hundreds of rows, tens of columns, or you format table cells,
• this will likely discourage the user because the perceived performance is poor.

Solution Options & Overview

Typical approach

One approach would be to use to pagination approach that divides the data into discrete pages. The performance is good however the user has to click to get next or previous page.

Better approach

• render only visible data rows which fill the available space of the browser window,
• custom scrollbar next to table shows current relative position of the visible data vs the entire data set,
• scrollbar gradually fills-up with its background color when the user scrolls down the table,
• allows the user to have entire dataset at hand,
• intention is NEITHER to render the whole table NOR to display the common vertical scrollbar, only visible data rows,
• HTML table occupies a major portion of the browser window (appropriate # of rows),
• browser window size changes trigger table computation of visible area (similar to WinForms behavior).

HTML table with virtual scrolling

My goal was to quickly display only range of data and also allow the user to browse it at ease. The solution renders an HTML table by displaying appropriate number of rows to fit the browser window as if it were a Windows application. By hooking to the window resize event if the browser window size changes, the table height will be re-computed.

The table height is computed within the ng-style directive so the table fits the available browser screen space.

The table uses the ng-repeat directive and a custom range filter to display current range of data. To know how many rows to display in the table, the rendering process is intercepted by a custom directive and the height of first row is computed. The solution expects each row to have the same height. When the table height and rows height are known, it is easy to compute the number of to be displayed rows.

The table columns width depends on their content. When you scroll the table up or down, one row is removed and a new one is added to table. If the content changes, table column width may change which is an unexpected behavior. From this reason every column has a pre-defined width in the table header.

A custom scrollbar displayed to the right of table shows the current position in the whole array of data. The user can use the scrollbar to scroll up and down the table to see rows which are not currently visible. In contrary to the common scrollbar, the custom scrollbar gradually fills-up when the user scrolls down the table.

Consider the restrictions

The solution has some limitations though:

• If the content above or below the HTML table changes, the table height needs to be re-computed,
• the height of each row in the HTML table should be the same. When the first row is rendered, the solution finds out its height. Since we know the height of the first row and the HTML table, we can easily compute the number of visible rows. Also the row height should not change.

Conclusion

This solution renders HTML table fast regarding the amount of data because only data that can be visible NEEDS to be rendered. The next step to take is implementing the solution under Angular (technically Angular 2) to utilize its speed and performance.

Historically Business Process Management (BPM) solutions have primarily been targeted at large enterprises. Smaller organizations have not invested as heavily due to perceived high costs and unknown value. However, BPM is a valuable tool for almost any business. To realize its potential benefits, it needs to be applied to the right opportunities and in the right way. If this is done correctly, the benefits will clearly outweigh the costs and even small business can enjoy great ROI.

For large enterprises, the volume of repetition introduces a bigger set of eligible processes for optimizing. Their role as industry leaders allows these organization to dictate how process should run, and how parties that interact with their processes should behave. That authority often extends to both internal and external actors. This is the perfect environment for implementing transformational BPM solutions as there is a lot of opportunity to orchestrate and control. In a small business environment, it is more important to evaluate which current processes provide the right opportunities to benefit from BPM solutions. Some factors that are important to consider are:

• Costs vs. benefits – Costs can be both tangible and intangible. Typical benefits include, cost savings, improved services, and customer experience
• Agility vs predictability – is the process suitably predictable and stable enough to benefit from automation?
• Growth impact – will automation benefits increase with business growth

Some business processes are proven candidates for most small to medium sized organizations to optimize with BPM. Three examples – invoicing, client onboarding, customer servicing and contract management – benefit from reduced paperwork, automated follow up, integration with external systems, managed SLAs and system managed auditing. For all three processes, the ROI is good, the business activity flows are stable and the BPM solution impacts are improved as the organizations grow.

Approaching BPM in the right way is just as critical as identifying where to use it. There are logical steps that should be followed that will provide insight and tangible benefits throughout the journey:

• Modeling repetitive business processes – journaling routing activities and examining them, looking for repetitive tasks, bottlenecks, redundancy, and high complexity
• Selecting appropriate processes – identifying the processes documented in the previous step that are the best candidates for using a BPM solution. If the processes are bad, ensure that you correct them before starting to automate. A bad process will still be bad once it is implemented in BPM
• Optimizing to address current challenges – what are the key business challenges in the way it is managed today? Looking for and planning to address inefficiencies will improve the benefits of your BPM solution
• Leveraging existing strengths – what technologies and processes are you using today that are working well. You won’t need to change everything. Focus on identifying the technology shortcomings that need to be addressed then procure new technologies to fill the gaps
• Approaching the solution in the right way – business requirements driving functional requirements which are then driving technical requirements. Make sure that the tail is not wagging the dog and that this order is always followed
• Leveraging new technologies as appropriate – cloud solutions and omni channel capabilities are great ways of addressing cost and resource challenges
• Planning for optimization – Implementing the process of process improvement should be universal. Scheduling evaluation and optimization with appropriate business and technical resources will help organizations maximize the benefits they can derive from BPM over time

In any organization, as additional processes are implemented, the cost per process implementation goes down and the cross functional benefits increase. There is more opportunity for transformational benefit in larger organizations, but small companies can benefit too. In a company with 25 employees, if a BPM solution can save each employee one hour of work per week (conservative estimate), that is equal to 1,300 man hours per year (ignoring time off). Cloud based BPM solutions can cost as little as $200 per month, so there is clearly a good case to be made for adopting BPM solutions at small businesses. The room for error is much smaller in smaller organizations and it is critical that the right opportunities are identified and implemented the right way to ensure the benefits of BPM can be realized.

So, why do we need an API Management Platform?

An API platform provides capabilities in managing the APIs; starting from documenting the contract definition to defining the revenue generation model (subscription model), one can use the platform to address non-functional needs such as deployment agility, continuous monitoring, usage metrics, subscription models, scalability, availability, etc. Platforms provide abstraction to these low-level non-functional needs, thereby allowing developers to concentrate on addressing the functional aspects alone, leading to efficiency.

Below is a sample illustration of an API Gateway/Platform that provides an abstraction layer between the consumers and published actual API endpoints (bound to backend services).

Some of the key vendors of API Management/Gateway are Tibco Mashery, Apigee, WSO2, Amazon API Gateway, Kong, and Mulesoft. Kong, which is open-source based solution, has an interesting architecture wherein the core platform can be extended by adding plugins that enable customization to the customer needs. Most of these vendors have both On Premise and Cloud based solutions.

Key features of an API Management Platform are:

Documentation •  Well documented APIs with good examples •  Tools such as Swagger I/O simplify documentation techniques	Onboarding •  Portal for Developer self-service•  Community Support•  API development studio
Deployment Agility •  Flexible support for cloud and on premise deployments •  Automated deployments	Sandbox Environment •  Ability for developers to test APIs •  Increases the value of an API and its adaptation rate
Security •  Provide IAM to users and developers •  Tried and tested authentication schemes •  OWASP threat protection	Operations •  Zero downtime upgrades •  Multi-tenancy and scaling •  Cross-region automated routing & failover
Analytics & Statistics •   Metrics on API usage •   Monitor API availability and uptime, traffic, and response time	Monetization •   Define subscription models •   Define volume and usage tiers •   Reporting and billing

 

By now, you have likely realized the crucial role that the API Economy plays in this Digital Transformation era. There should be no second thoughts about API adoption. It is necessary if an organization wants to provide an exceptional customer experience or wants to optimize their existing application infrastructure and helping the growth of their business. There are many examples of real-world organizations that have derived great business benefit from adopting an API-centric approach.

Contact Ness if you would like help with your Digital Transformation or API strategy.

This is the final blog in a 3-part series on API. “Part 1: API Centric Design” can be viewed here. “Part 2: Key API Design Principles and Best Practices can be viewed here.