The Sharp Coder - Some practices for setting up a clean, responsive and real-time support web project (ASP.NET)

responsive ui I have built a simple demo for showing practices in web development (ASP.NET), aim to set up a clean, responsive and real-time support project.

As a full-stack .NET developer, I have built this site based on ASP.NET MVC. Here are notable things:

1. Responsive UI

As the modern trend of web-based design, with a single code base your websites and applications will easily be scaled from phones to tablets to desktops. Let try opening the site on your phone or tablet and see different and resolution-oriented menus, boxes arrangement and controls sizing.

Desktop view

Mobile view

2. Ad-hoc UI behavior

I use a hierarchical to-do list to demonstrate a common case, but there is no available free/open-source UI control (at the time of writing). On this UI, you can add, edit, remove, check, move up and down items. Nodes with child/children can be expanded/collapsed and explanation tooltips are added to icon buttons in order to make it more user-friendly. All of them are built from scratch with Javascript, HTML and communicating with the server via AJAX.

3. Real-time

ASP.NET SignalR is a library that simplifies the process of adding real-time web functionality to applications. Real-time web functionality is the ability to have server code push content to connected clients instantly as it becomes available, rather than having the server wait for a client to request new data. You can open the demo page on different browsers or devices, try to post from one and see it shown on others. This technology currently is the best choice for real-time applications, such as dashboards, monitoring screens, games and stock/financial apps.

4. Graphic charts

Data visualization helps users in analyzing and reasoning about data and evidence. It makes complex data more accessible, understandable and usable. On the demo page I use Highcharts - one of most fabulous interactive graphical libraries on the market - to build a combination graphical statistics. You can hover your mouse on items or click on the bottom data series and experience its interactive behaviors.

5. Resources minification

In many web-based applications, performance is a critical requirement. If you take a look at the HTML source of the demo page, you can see all JS/CSS files have been minified and compressed. It reduces the amount of transfered data as well as make it difficult for script stealing. This is just a behind-the-scene feature, but it makes your web faster, more robust and of course more effectively for the end-users.

Let enjoy my live demo!

Thanks for reading my post!

I hope you have good time. If you want to share an idea or discuss a job, do not hesitate to contact at

minhhoa.work@gmail.com

Happy working!