0

We're developing a web application using React for the FrontEnd part of the various modules. One of the pages of the application is a master-detail view. On the master we're going to show a simple grid of database-records with a hyperlink/button on each row to edit the details of each record.

My boss proposed that when we click on an edit link/button, we should do an asynchronous call to swap the master-view with the detail-view for the selected database-record without to navigate to a separate URL and reload the entire page.

From his point of view,

  • this approach is much more performance-friendly since we wouldn't have to reload the entire page
  • this is the way to build modern web applications / single page application.

I remarked that this way the users wouldn't be able to open each database-record in a new tab since we would swap a component instead of navigating to the URL for the details-view.

From my point of view this would be a big drawback because

  • the users would not be able to open each database-record in a new tab, which would be very uncomfortable
  • the approach of opening each record in a new tab is a widespread pattern over a lot of websites.
  • I think a lot of users around the web are used to open many detail-views in new tabs to have them opened at once, for example
    • to compare their data without to navigate forward and backward
    • or just to store them in different tabs to be able to check them at a later point of time.

Which of these approaches makes more sense considering

  • the common (navigation) patterns used for websites / web applications
  • the best practices to be considered to build web applications / single page applications

bumped to the homepage by Community 2 days ago

This question has answers that may be good or bad; the system has marked it active so that they can be reviewed.

  • 1
    Sounds like an A/B issue. Why do you think it is not possible to have asynchronous loading and right-clickable hyperlinks? – PixelSnader Nov 15 '18 at 10:08
  • 1
    The title is a bit misleading, the question is whether to link to another page or replace content within the existing one, or whether it's required to support people who open in a new tab -- not whether to always open in a new tab – nafg Dec 16 '18 at 22:42
0

New tabs involves context switching for the user and often reserved for a starting separate parallel user journey or multi-tasking. I agree that the modern way of web apps is to build content in a single page application without forcing control of the users tabs, UI tabs in the application are commonly seen as the modern way of solving this.

If the problem is orientating the user around having multiple databases open, you could think about solving it in the UI.

0

You can get the best of both worlds with a link that works when you go to its href, however with javascript you can make that if you do a normal click, it uses ajax as an optimization, only updating the parts of the page that need to be updated, and using the history API to update the address bar URL appropriately.

You might use https://github.com/MoOx/pjax.

0

Generally speaking, internal links should always open in the same browser tab. (There's some debate as to whether external links should open in a new tab or not.) I agree with your boss that modern web apps should function within a single tab.

I would draw attention to a key point in your question: your users will be clicking on the hyperlink in the data grid in order to edit the details of the selected record. If your user research has shown that your users will be editing multiple records simultaneously, your boss's proposal may not be the best, but not for the reasons you listed. You may want to look at a nested grid master/detail with editable cells. I searched Google and found an example: https://www.ag-grid.com/javascript-grid-master-detail/#example-editing-cells-with-master-detail

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.