Friday, June 10, 2022

Introducing the new UI component library

The UI component library in Bookmark Ninja was 6 years old, so it was time to update it to a newer version. The update of the UI component library was a big work that took several months to complete. It affects both the desktop and mobile UI. Updating the library for the mobile UI was the more complicated task, it required rewriting about 80% of the mobile UI code. The work that had to be done on the desktop UI was less, it affected about 10% of the code.

What are the benefits of having an updated UI component library?

It was necessary to update the UI component library in order to keep up with the improvements of the browsers and to minimize the possible incompatibilities.

Also the new UI library includes a lot of improvements and bug fixes that will provide a better user experience:

  • The rendering of the UI components is faster.
  • Now additional UI components are available that we can use in the future developments of Bookmark Ninja.
  • The new UI component library provides a solution for the "blank page flash at page load" Chrome issue.
  • During integrating the new UI component library all the known UI related bugs have been fixed.

What does the new UI look like?

The UI in the desktop browsers looks like the old one, there aren't noticeable differences, the big change is under the hood.

In mobile browsers the UI got a nicer, cleaner look. The mobile UI components have been updated in order to be more consistent with the desktop UI while the mobile specific screen layouts were kept:



Are there any functional changes?

Yes, there is one. Until now you could invoke the bookmark context menu on the Dashboard in mobile browsers with "tap and hold". From now on you have to tap on the new menu icons (3 blue, horizontal lines) next to the bookmarks. The "tap and hold" functionality has been removed.

In desktop browsers this functionality hasn't changed, you can still invoke the context menu of the bookmarks on the Dashboard with a right mouse click on the bookmarks.