In this section you will get a comparative analysis of Pricefx versions, one built using React and the other with Ember. As we are transitioning to React, we want you to have a clear picture of the benefits and differences between the two.

 

Open

Listings in React

Open

More intuitive action button navigation in React

 

 

 

Top Benefits of Migrating to React

Check out more detailed differences between React and Ember later in this article.

Here are the top 10 benefits you gain by migrating from the Ember application to the React version:

1. Advanced Filtering: React offers a more powerful and flexible filtering system that allows you to group rules, utilize nested conditions, and leverage the intuitive quick filter feature. This significantly improves data refinement compared to the basic options available in the Ember application.

2. Flexible and Unified Layout: React's single flexible view for items replaces the three separate views found in the Ember app (tree, table, and simple table). This approach provides a more cohesive user experience and customizable layout options, allowing you to move or hide the side panel for inputs and results as needed.

3. Badges for Error Identification and Filtering: React's "badges" feature helps you quickly pinpoint and filter items with missing or incorrect data. Clicking a badge filters the items, showing only those with errors. This is a substantial improvement over Ember's simple notification system, which lacked filtering capabilities.

4. Clear and Consistent Action Button Behavior: React establishes a clear pattern for action button behavior: buttons above the table affect all items, while buttons below affect only the selected ones. This eliminates the ambiguity found in the Ember application, where button behavior was sometimes unclear.

5. Fixed Header for Enhanced Navigation: React implements a fixed header that remains visible when scrolling through tables. This ensures that crucial action buttons are always accessible, improving navigation, especially when dealing with lengthy tables.

6. Improved Error Visualization and Feedback: The React version provides more effective error handling with features like red borders around empty required fields. This clear visual feedback helps you immediately identify and correct errors, surpassing the less-informative error handling in Ember.

7. Streamlined Data Presentation in a Single View: React's unified view allows you to see inputs, calculations, and data in a more integrated manner, improving comprehension and reducing the need to switch between views. This addresses a limitation in the Ember version, where separate views required more navigation and adjustment.

8. Enhanced Table Interactions: The React application introduces features like the ability to freeze columns and navigate tables as well as drag possibilities for columns, offering a more Excel-like experience. These features improve data manipulation and navigation compared to the more limited table interactions in Ember.

Filtering in React v. Ember

One significant improvement in the React version is the enhanced filtering functionality. While the Ember version offered basic filtering, it lacked the advanced capabilities of React. React allows for grouping filtering rules and applying more complex conditions, including nesting. A notable example is the quick filter feature in React, which provides intuitive filtering options through a user-friendly interface. 

Layout Flexibility in React

React exhibits greater flexibility in layout compared to Ember. The React version introduces a single flexible view for items, replacing the three separate views in Ember (tree, table, and simple table). This unified approach simplifies the user experience, removing the need to switch between views based on specific tasks. Additionally, the side panel in React, which displays input and calculation results, can be moved to the bottom or hidden entirely to prioritize the main table view using the Dock to bottom button in Calculations in the right hand top corner. This customization is not available in the Ember version.

React also addresses a previous user pain point related to action buttons. In Ember, the behavior of action buttons above the table was unclear, sometimes affecting only the selected item. 

Enhanced User Experience in React

React implements a fixed header when scrolling through tables, ensuring that essential action buttons remain visible. This seemingly minor detail greatly improves usability, especially when dealing with lengthy tables. While the Ember version had a fixed header, it did not always maintain visibility of the action buttons.

In React, we are clarifying differences between descriptions and messages with the second one being used only for communication, while descriptions are offering additional information.

Improved Error Handling and Feedback

React demonstrates improvements in error handling and user feedback. The introduction of red borders around empty, required input fields provides immediate visual feedback to you, highlighting errors effectively. Although not present for all error types, this feature is a step towards better error visualization compared to Ember.

React introduces several features that contribute to a better user experience.  The badges feature in React, unavailable in Ember, allows you to quickly identify and filter items with missing or incorrect data. Clicking on a badge filters the items, displaying only those with errors. This is a significant improvement over Ember's simple notification system, which lacked this filtering capability.

The improvements in filtering, layout flexibility, user experience, and error handling collectively contribute to a more powerful and user-friendly application. While both platforms share certain features, React distinguishes itself through features like badges, mass actions, consistent button behavior, and clear error visualization, ultimately providing a more efficient and intuitive experience for you.