Secrets of JavaScript: A Tale of React, Performance Optimization and Multi-threading

Part One: The Challenge

The task seemed simple enough:
“Here is a data set retrieved from a backend. It contains 13,000 items with very long, wordy names (Scientific Organizations). Make a search bar with an auto-suggest using this data set.”

Not so bad, you’re thinking…

Complication 1:

No backend help. Backend provides only the initial set of data and all search logic has to be done on front-end.

Complication 2 (self-imposed):

Developer (me): “These organization names are really long and technical. If we are just doing simple string matching and a user mistypes or misspells the search, it will be really hard to find anything”

Client: “Good point, make it intelligent so it can predict what the user intends to type, despite typos.”

Disclaimer: In general, suggesting unsolicited difficult features without the consent of your Project Manager is not recommended! This is known as feature creep. In this case, I happened to be on a relatively easy solo contract with plenty of headroom, so I thought it would be an interesting challenge.

Complication 3 (also self-imposed):

Now this is the big one. The intelligent (otherwise known as “fuzzy”) search engine I chose was SLOW…

The search algorithm library had painfully long search times as the length of the search term got longer. And, seeing as how this was such a huge list with very wordy items, users would need to type a long search term to get to their desired suggestion. There was no getting around it, the search wasn’t going to be able to keep up with the user typing and the UI would end up hanging badly.

 

I don’t know if the library I chose for the search algorithm was bad or if this was an inevitability of any “fuzzy” search algorithm. But thankfully, I didn’t bother trying to find alternatives.
Even though most of these complications are self-imposed, I decided to stubbornly plug away at trying to optimize this implementation. While I understand that this is likely not the best strategy for a lot of jobs, in this case the situation allowed it, the results will speak for themselves and, most importantly, it turned out to be a fantastic learning experience and an opportunity to grow as a developer.

The Journey
The coolest thing about trying to solve this challenge was that it seemed to lend itself to a great learning experience. The way the solution unfolded led to many different iterations, each making an incremental improvement and carrying an essential lesson about JavaScript, React and good UI. And it allowed me to explore new and interesting web technologies and patterns! This does mean that there is a lot of content worth sharing.

Each article in this series will document a different implementation and the lessons learned. If you’re a fan of pushing front end JavaScript to its limits, I hope you will find these implementations dive into advanced topics and interesting perspectives worth exploring.

Next up, Understanding the Problem. Stay tuned!

More News

| 17th Jul 2019

Secrets of JavaScript: v1.1.0 Async Rendering

In part three of our latest series, Secrets of JavaScript, Leo takes a look at async rendering.

| 9th Jul 2019

Secrets of Javascript: v1.0.0 Understanding the Problem

Senior interactive developer, Leo Fabrikant, takes a look at the secrets of JavaScript. Part two of a four part series.

| 30th May 2019

Image Recognition and Object Detection at Isobar

Ramtin Hosseini explores machine learning.