Skip to content

Instantly share code, notes, and snippets.

@nishithMobinius

nishithMobinius/.md

Created May 13, 2020 06:33
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save nishithMobinius/501eda535bc99a9d2e532c68238d78e8 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save nishithMobinius/501eda535bc99a9d2e532c68238d78e8 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. nishithMobinius created this gist May 13, 2020.
    41 changes: 41 additions & 0 deletions .md
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,41 @@
    # Design Sketch: Design to impliment React Concurrent Mode and its efficiancy

    ## Background
    To Make Better UI experience for clients with Priority DOM and state updates using React concurrent mode

    ## Problem
    Due to current high speed internet network and high performance machines, it feels redundant of several DOM updations like rendering Loading symbol while api calls and rendering unwanted chunk of data to DOM for operations like Autosuggestion feild showing suggestions according to user input

    The solution mentioned below showcases the way forward in closing this issue.


    ## Principles
    React is giving a better way of solving above mentioned UI related issues, with async rendering of DOM based on user events. React has released it first ever concurrent mode feature for all it's early bird adopters



    ## Constraints
    As asych rendering of DOM elements is a new experiment to the front-end world, and as this is still in experimental mode, there are light chances concurrent mode does not reach the market

    ## Assumptions
    There will continius internet connectivity with the application

    ## Acceptance Criteria
    The standard of code does not breach or violate any standards set by React Community, and does not break the application at any given condition.
    Usage of the Concurrent mode gives enahancing User Experiences to client by eliminating unnecesary loader splashing and eliminatingunwanted DOM updations especially repeated DOM updates based on user input
    Lesser code, Cleaner code with much more advanced User Experience

    ## Performance 
    As number of DOM updations are less, and less code written to manager Loading state of React component, there is real surge with the application performance
    ## Expected Workload
    The library would be expected to be used and called as often as required and the workload would be smaller since the data packets passed and received would be smaller.

    ## Solution
    Using React Concurrent mode, would definetly reduce all the code chuks handling the loader part and resolves the splashy loading and gives buttersmooth user experience


    ## Limitations
    As this is still in experimental mode currently, would be unpredictable of it's features when coming to release

    ## Alternatives
    Asych DOM updation is purely one of a kind, there are no alternatives features offering from any other framework