• react
    ASP.NET Core,  React,  SPA

    React code splitting and server-side rendering with ASP.NET Core – Part 1

    Thanks to [crayon-65186da2e7a2d343843421-i/], code splitting has become easy with dynamic [crayon-65186da2e7a31429268900-i/]. However, for code splitting to work together with server-side rendering, things become more tricky and not that straight forward because at the server side, the modules have to be loaded synchronously in order to render the page correctly. There are several different available loaders that can help get the…

  • react
    ASP.NET Core,  SPA

    Simple long polling in ASP.NET Core SPA

    Typically, ASP.NET MVC model handles requests by receiving the request, do some processing and then return the response, all within an action method. But in case of doing a long polling, we don’t have anything to return until the expected event occurs. Therefore, the long polling request needs to be able to wait for the event, without holding up the…

  • react
    Uncategorized

    redux-first-router, migrate from redux-little-router, for React/Redux SPA

    This is a simple tutorial showing how to switch from [crayon-65186da2e997e176353472-i/] to [crayon-65186da2e9982796394320-i/]. The settings are pretty similar so the changes should be easy to understand. For more information about comparison of the 2 router packages, check out my other post redux-first-router vs redux-little-router for React/Redux SPA Get started Goal: To use [crayon-65186da2e9984396928982-i/]. Base project code: Example code from React Routing with redux-little-router, ASP.NET…

  • react
    ASP.NET Core,  React,  SPA

    redux-first-router vs redux-little-router for React/Redux SPA

    Client side routing is definitely one of the center piece of gears that empowers single page application. For our [crayon-65186da2e9d91826989857-i/] projects, we have been using [crayon-65186da2e9d94480657145-i/] that fits in reasonably well. Recently, I had a chance to hand on evaluating and trying out another router package, [crayon-65186da2e9d95774566157-i/]. Both packages are designed with [crayon-65186da2e9d96268119314-i/] in mind and so they both work and integrate well with…

  • react
    Uncategorized

    Improve React/Redux SPA Performance, with ASP.NET Core – Part 2

    After taking steps to optimize React component rendering discussed in Improve React/Redux SPA Performance Part 1, let’s look at other aspect of the application that can further improve the performance and loading speed. Minimize application bundle size The smaller the application bundle size, the faster the initial loading would be. Code splitting The initial bundle only contains modules needed to render…

  • react
    React,  SPA

    Improve React/Redux SPA Performance, with ASP.NET Core – Part 1

    Fast web experience is what users expect nowadays. Fast mobile web experience is essential when most people are accessing websites with their mobile devices. And it’s only becoming more critical now that google takes website loading speed as a ranking factor. Improving/maximizing [crayon-65186da2ea3f7973910457-i/] application performance therefore should be treated as a top priority. Minimize unnecessary re-render This could possibly the most…

  • react
    React

    React async rendering, getting prepared

    React async rendering, a new exciting built in feature, is coming in react version 17. While we don’t know the exact time frame, it may well be very soon. For existing projects, most likely you will have some preparation and migration works to finish before you can take advantage of this new cool feature. We finished the migration and sure…

  • react
    ASP.NET Core,  CSS,  React,  SPA

    route transition for redux-little-router, react ASP.NET Core

    [crayon-65186da2eaaa1953025029-i/] is a good client side routing library for project that uses [crayon-65186da2eaaa3980591574-i/] and [crayon-65186da2eaaa4061486322-i/]. However, adding transition to the route pages could be tricky. [crayon-65186da2eaaa5235349269-i/] provides a react component [crayon-65186da2eaaa6717196863-i/] for use to define the route pages. Each route page component will be wrapped by a [crayon-65186da2eaaa7503407082-i/] component. As far as I know (after looking at the coding), [crayon-65186da2eaaa8745057057-i/] component will render the route page…

  • react
    CSS,  Javascript

    Prevent body scrolling for safari/chrome

    Prevent body scrolling when showing modal dialog or popup with overlay. Any content in the background should not be moving. That’s because the user actions and experience should focus on the popup/dialog and any movement (scrolling) in the background could cause confusion. And it becomes more annoying when you try to scroll the content of the popup/dialog but ended up it’s…