Be a SPFx Ninja with these Performance Debugging

Be a SPFx Ninja with these Performance, Debugging, Logging and Telemetry Tricks!

Overview • Java. Script Pitfalls / Hidden Dangers • Debugging SPFx Solutions with VSCode • Leverage Google Chrome’s Developer Tools • Stay Away from the Rocks with Lighthouse • Become a Ninja with Chrome’s Tracing • Logging, Metrics & Telemetry with Azure App Insights

Host Andrew Connell @andrewconnell | www. andrewconnell. com • Microsoft MVP o Office Servers & Services • Co-Host, Microsoft Cloud Show o @mscloudshow o http: //www. Microsoft. Cloud. Show. com • Founder, Voitanos o @voitanos o https: //www. voitanos. io

Java. Script Pitfalls & Hidden Dangers

Pitfall #1: Avoid Heterogeneous Arrays • Don’t mix object types in arrays unless absolutely necessary • When heterogeneous objects in an array, Java. Script engines can’t use proper arrays & break it down to dictionaries • Searching & filtering is much more expensive in heterogenous arrays

Pitfall #2: Put Common Code in Functions • Java. Script’s JIT compilers optimize “hot code” o Code used repetitively • Chromium’s V 8 engine stores compiled binary of hot code if sig is unchanged • Thus, put common code in a function o JIT compilers will compile & optimize it

Pitfall #3: Avoid Using Delete • Same reason as Pitfall #2 & common code • delete internally changes the hidden class of the object • Compiled code becomes invalid & compilers treat the object separately • Solution: set property to null

Pitfall #4: Create Classes for Similar Kinds of Objects • Again… back to the JIT • Make a class & constructor • Gives JIT best chance to optimize code // don’t let foo = { a: 1, b: 2 }; let bar = { a: 3, b: 4 }; // do function foo. Bar(a, b) { this. a = a; this. b = b; } let foo = new foo. Bar(1, 2); let bar = new foo. Bar(3, 4);

Pitfall #5: Avoid for. . . in & for() in favor of. for. Each() • Consider an array of 1, 000 items • for() & for…in will iterate over every item o regardless if some are null / undefined • . for. Each() only iterates over items that are non-null

Debugging SPFx Solutions with Visual Studio Code

Debugging SPFx Solutions with VS Code & Chrome • Visual Studio Code + Google Chrome • Requires Chrome Developer VSCode Extension o https: //marketplace. visualstudio. com/items? item. Name=msjsdiag. debugger-forchrome • Steps o Configure VS Code launch configurations o Launch local SPFx web server o Quit all running instances of Chrome o Launch Chrome from VSCode • https: //docs. microsoft. com/en-us/sharepoint/dev/spfx/debug-in-vscode

DEMO Debuging SPFx w/ VS Code

Google Chrome Dev Tools

Google Chrome Dev Tools • https: //developers. google. com/web/tools/chrome-devtools

DEMO: Google Chrome Dev Tools

Google Lighthouse Open source, automated tool for analyzing web pages & web apps from Google.

Lighthouse • https: //developers. google. com/web/tools/lighthouse • An open-source, automated tool for improving the quality of web pages. You can run it against any web page, public or requiring authentication. It has audits for performance, accessibility, progressive web apps, and more. • Part of Chrome Developer Tools • Tool to test the performance, accessibility & best practices • Give it a URL and it runs a series of audits • Also available via CLI & Node module (for automated testing)

Lighthouse: Performance Audits • Consistently interactive • Critical request chains • Enable text compression • Estimated input latency • First interactive • First meaningful paint • Has enormous network payloads • Java. Script bootup time is too high • Keep server response times low • Offscreen images • Optimize images • Oversized images • Perceptual speed index • Reduce render-blocking scripts • Reduce render-blocking stylesheets • Serve images in next-gen formats • Time to interactive • Unoptimized images • User timing marks & measurements • Uses an excessive DOM size

Lighthouse: Accessibility Audits • Background & foreground colors have sufficient contrast ratio • Buttons have an accessible name • Document doesn’t have a title element • Element aria-* attributes are followed for this role • Element aria-* attributes are valid and not misspelled or non-existent • Element aria-* attributes have valid values • Elements with ARIA roles have the required aria-* attribute • Every form element has a label • Every image as an alt attribute • No element has a tabindex greater than 0

Best Practices Audits • Avoids application cache • Avoids console. time() • Avoids Date. now() • Avoids deprecated APIs • Avoids document. write() • Avoids mutation events in it's own scripts • Avoids old CSS flexbox • Avoids requesting the geolocation permissions on page load • Avoids requesting the notification permission o n page load • Avoids web SQL • Displays images with incorrect aspect ratio • Includes front-end Java. Script libraries with • • known security vulnerabilities Manifest’s short_name won’t be truncated when displayed on homescreen Opens external anchors using rel=”noopener” Prevents users from pasting into password fields Some insecure resources can be upgraded to HTTPS Uses HTTP/2 for its own resources Uses passive event listeners to improve scrolling performance

DEMO: Lighthouse

Google Chrome Tracing Detailed CPU & GPU profiling + memory analysis

Chrome Tracing Get under the hood on what Chrome is doing Identify hard to isolate / identify issues Go beyond the Chrome Developer Tools

Chrome Tracing Resources • Chromium Projects o Trace Event Profiling Tool • https: //www. chromium. org/developers/how-tos/trace-event-profiling-tool • V 8 Stats in Chrome (setup) o https: //docs. google. com/presentation/d/1 Lq 2 DD 28 CGa 7 bxaw. VH_2 Ocmyi. Ti. Bn 74 dv. C 6 vn 2 essro. Y

DEMO: Google Chrome & Tracing

Azure Application Insights Centralized Logging, Metrics & Telemetry

Azure Application Insights (App. Insights) • https: //azure. microsoft. com/services/application-insights • Get actionable insights through application performance & analytics • What does it track? o Dependencies* o Events o Exceptions* o Metrics o Page views o Traces • Configure alerts to be notified about issues / breaking thresholds • Customizable dashboards / connect to Power. BI • Portal saves 90 days; preservation options for long term analysis

Azure Application Insights + Share. Point Online • Add to every page in your tenant o Use SPFx Extension: Application Customizer • Initialize App. Insights JS on the page • Optionally identify the user • Log page view o Leverage Share. Point Pn. P Power. Shell / Office 365 CLI to deploy to all sites • Once deployed & configured in your SPO tenant & sites o You can add page views & other custom tracing / events / metrics • SPFx customizations can be written to assume App. Insights is already on the page o If not, the script won’t error… it just won’t report back to App. Insights

Azure App Insights Resources • Docs o https: //azure. microsoft. com/services/application-insights • Java. Script Docs (client-side) o https: //docs. microsoft. com/azure/application-insights/app-insights-javascript • Java. Script SDK o https: //github. com/Microsoft/Application. Insights-JS • Java. Script SDK API o https: //github. com/Microsoft/Application. Insights-JS/blob/master/APIreference. md

DEMO: Azure App Insights & SPFx Solutions