What is best web development workflow

[Spacerat]

OK so I am working on a dashboard type web project and wanted to know what the best workflow is in terms of coding and designing a page. Apologies for possible rambling...

I am aware that you need to split the design/layout from the interaction. Hence making extensive use of CSS.

The web project is an unattended dashboard type site that will display live telemetry data. I have split the data into 2 parts. Page metadata (static) that provides all the info (JSON) to construct the static page and layout. Page live data (JSON) that represents the data to be presented. All data originate from WebAPIs (metadata & live data via polling) or realtime (live data via websockets).

The page is based on MVC i.e. controllers etc and Razor marked up cshtml pages. On the front end I use Bootstrap/jQuery.

As far as I understand there are 2 ways of rendering the page (with metadata) and content (live data):

1: Controller & CSHTML
Get metadata and initial live data from WebAPI in Controller and then use model binding and CSHTML file to render the page and required structure. The div ids and classes are coded in the CSHTML file (can be dynamic based on model). Subsequent live data updates are then via polling the WebAPI on the page or a websocket subscription.

• The issue I have here is that if the WebAPI takes long to return the data the first time, the initial page render takes long. The WebAPI is on Azure so sometimes it takes about 10 secs to spin up.
• The structure/layout of the page is static. E.g. If I display lists and the lists change it would require a page reload

2: AJAX
(1) Render a basic page with an empty content div. (2) Then use AJAX to fetch the metadata from the WebAPI and build the page structure. (3) After that, use AJAX to fetch the live data populate the divs. Subsequent live data updates just reuses (3) on a timeout.

• The advantage is that the page is responsive in the sense that it is rendered fully with only a progress type animation and that the structure and content will render when ready.
• The disadvantage is that if you dynamically create the structure it is harder to make changes.

I understand that the designer will design the data elements, layout, fonts etc. I assume the dev will then take that and edit the .CSS to get the desired effect? Do you use the CSHTML file and then edit the CSS file continually while refreshing the page. Or do you use a sample HTML and CSS with a tool like Brackets to tweak the HTML/CSS combo?

 

[animal531]

You want the layout to be dynamic as well?

If not then create the page with (empty) html controls and your css for the look and feel and just use AJAX in its own little update frame to call code behind to retrieve data, which you will then fill into the html frontend via e.g. C#->JSON->JS.

If you want the layout to be dynamic as well, that's a bit trickier because you'll have to emit/change the html on the fly. The dynamic new html+data can then still be bound to your existing css values. You can also change your current css file to a different one if you want to change the look and feel completely.

For my last project I used e.g. C# + Bootstrap + HTML to build the frontend (JS to dynamically manipulate it), then did all the styling and effects with CSS. It was a solo project so I just mostly did everything by hand, so I unfortunately can't advise on best practices/tools if you're running as a team.

 

[Spacerat]

You want the layout to be dynamic as well?

Well there are a number of lists on the page. And items can move from one list to the other. I want this to reflect on the page without reload. So that means moving divs from one parent to the other.

If not then create the page with (empty) html controls and your css for the look and feel and just use AJAX in its own little update frame to call code behind to retrieve data, which you will then fill into the html frontend via e.g. C#->JSON->JS.

This is one thing I tried. Created a representative fully populated HTML with ids and classes. The loaded into Brackets to tweak the CSS. But any changes to the structure in the HTML I then had to redo the sample HTML.

If you want the layout to be dynamic as well, that's a bit trickier because you'll have to emit/change the html on the fly. The dynamic new html+data can then still be bound to your existing css values. You can also change your current css file to a different one if you want to change the look and feel completely.

Yep this is what I am doing now. But this is quite a bit more tricky when needing changes. Hence canvassing for input... n

 

[animal531]

Mmm, I'd try and create the html for e.g. the lists, then a separate AJAX update panel so that when it reloads the data it doesn't reload the lists. Then use the data that comes back to update the lists via the JSON/JS path (ie. C#->JSON->JS update the contents of the lists with the new data), without having to move html elements around.

Unless if you mean that the things in your lists are also html elements of whatever, and not just text etc? If so you'll just have to delete and then can create new dynamic html lists from JS based on the data.

 

[Spacerat]

Mmm, I'd try and create the html for e.g. the lists, then a separate AJAX update panel so that when it reloads the data it doesn't reload the lists. Then use the data that comes back to update the lists via the JSON/JS path (ie. C#->JSON->JS update the contents of the lists with the new data), without having to move html elements around.

Unless if you mean that the things in your lists are also html elements of whatever, and not just text etc? If so you'll just have to delete and then can create new dynamic html lists from JS based on the data.

Have actualy been looking at json2html. Looks like it can do a lot of this.

But I still need to get a handle on good ways to edit CSS/html