I'm porting my JavaFX application to a web based version, which I'm new to. In my web app the user can search the server database for records.

At present I've chosen to present the records in a Bootstrap "accordion". Rows contain basic information, and the row contents is populated with a form, which is generated from a string I store in my JS with which I use replace to dynamically rename the form elements for each row. When a user clicks a row, the accordion expands that row to view the form. The form is basically duplicated for each row.

Q: Is this approach something modern browsers can handle? I mean, I could end up with 25 accordion rows (that's my maximum limit per page), each row of which has a form inserted into it.

My thoughts are either: (i) this is a bad design choice to begin with, or (ii) there are frameworks out there which handle this sort of thing.

If (i) then I should just have a separate "editing/viewing" form which is used by all records.

If (ii), then is my approach still valid, since a "higher" framework would still need to do all the work I mention above under the bonnet, so to speak.

  • 2
    Knock up a simple prototype containing this content, and see if the browser can handle it. – Robert Harvey Jul 18 '18 at 16:30
  • @RobertHarvey good point, that's what I'm doing now, but just wondered if this is a decent way to go about it. I'd like to just stick with JQuery for the moment, so don't want to use anything more advanced at present. – Pixel Jul 18 '18 at 16:42
  • @RobertHarvey Wow - that worked a treat. Even with 400 rows it works a treat once loaded. Noticeable loading delay with 400 rows, but still not a problem really. However, my first test of 60 rows works a treat with no noticeable loading delay. So 25 per page will be fine. – Pixel Jul 18 '18 at 16:57
  • 1
    I've used D3 to do this kind of thing. It takes a lot of the work out of finding the right element since it manages the binding between your data and the DOM elements it creates. This seems pretty insignificant in comparison to dynamic graphics with 1000s of DOM changes per second. – JimmyJames Jul 18 '18 at 17:26

I'd add this is as a comment if my user rep would allow it BUT my 2 cents:

Rather than making the user's browser do all of the work of replace on all those sections which will slow down the load time, try to modify your user experience to account for only the user's interaction. Create a JSON manifest or API endpoint to load in that form when they click on the accordion so you have a quicker load time.

| improve this answer | |
  • Thanks, I had a similar thought earlier. I will look into this. If it's any help to the browser I only use one replace call per form since I use a "multi regex" replace. – Pixel Jul 18 '18 at 16:47
  • 1
    It certainly helps, but just like with any other programming paradigm, less is more :) best of luck! – Mark T Broomell Jul 18 '18 at 17:38

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.