Integrating advanced filtering in a web application: Common Expression Language Part 2

For this article, I asked DALL-E Mini to make a picture of Node.js
npm install --save @fleker/cel-js

Web Workers

Since I’m running a bunch of operations, I was interested in adopting web workers, an easy way to run a task in a non-blocking thread.

Angular Service

Since I may be using CEL evaluations in multiple components, I decided it would be best to put everything into a service as I’m using Angular. This aptly-named CelService has just a single method, run , which takes in an array of entries and returns only the ones that evaluate to true in the expression.

Angular Component

So when my list component loads, every entry will be shown. The user can then type in a query that they want and hit the Run button. Then the expression will be run on every single entry and only the valid entries will be shown in the list.

Performance

Performance-wise, it’s not bad. Based on my tests, on an admittedly good desktop, I can filter several thousand objects in about a second. Unfortunately being on the main thread, it means the page freezes for that second.

Wrapping up

Not only did we build a high-quality, robust expressions library, we have incorporated it into the framework of a larger web app.

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Nick Felker

Social Media Expert -- Rowan University 2017 -- IoT & Assistant @ Google