Quick Note on CRM Web UI

The Web UI in CRM is based on fairly standard practices with web UIs and is constructed as a Single Page Application (SPA) at least SPA "per-form." That is, each major form you bring up, say the form for editing a Contact, is a SPA in that it downloads all the code needed for that form and you can navigate to different "tabs" within the form without going back to the server for more javascript. It may go back to the server for more data of course.

The issue with the current architecture is that it is has slow page rendering. If you F12 your browser and watch the amount of javascript loaded, and the redundant downloads, you realize that there is really no hope of the page rendering quickly. That coupled with multiple iframes means that the amount of javascript and other assets it must download before you can use the page is enormous. The current architecture does not appear to use serverside rendering, it downloads javascript code, then loads data, then completes rendering.

It is unfortunate that many web apps have the same issue. Opinions differ, but the net effect for Dynamics is that there are significant delays when initially rendering a page. Once the browser cache is warmed up, page flipping is much faster of course, but still a bit dogged. Overall, with a reasonably fast connection, CRM page rendering is generally good enough not to impede user effectiveness.

Progressive rendering, rendering on the server and being smart about loading strategies, introduces significant complexity into the development and build process and affects how you use your tools. We will not factor in progressive rendering into the code developed in this book, but be aware that you'll probably want to migrate to progressive rendering model for your own code over time. Frameworks like react help you implement server side page rendering which is part of the store for implementing progressive rendering.

One of the reasons that native applications are highly preferred is because they often have more expressiveness and because they "seem" to display content quickly after starting. This makes the application appear more responsive. Modern web apps help reduce the expressiveness problem as there are some javascript plugins that can interface to the mobile device's hardware such as the camera or microphone. Addressing the initial startup experience, you have to pursue progressive rendering techniques.

Dynamics also has multiple interfaces, as you would expect. There are multiple interfaces for browser-based agents. To handle these variations you will need to handle multiple "target" environments in your code. Handling these variations using config files and other tools is the best way to adapt. We cover some o these techniques in latter sections.