The Azure Portal is Microsoft's largest single-page application, developed by over 500 developers to provide access to almost 100 services across more than 2000 views. It faces significant challenges in enabling large-scale collaboration across its development team and optimizing performance given its scale. Techniques used to address performance include minifying assets, lazy-loading, bundling, caching, using a content delivery network, gzip compression, and writing efficient JavaScript. Extensive testing is also needed to prevent regressions as it is developed in TypeScript by a large team.

1. Azure Portal
jj09.net
@JakubJedryszek
The largest SPA in the World

13. AZURE PORTAL FACTS
Over 500 developers
Almost 100 services
More than 2000 blades (views)

14. Website
Framework
Web Apps
iframe
Virtual Machines
SQL
iframe
iframe

16. TypeScript

19. youtube.com/JakubJedryszek

20. CHALLENGES

21. CHALLENGE 1
ENABLE OVER 500 DEVELOPERS TO WORK ON 1 UI

22. CORE XT

31. dev
dogfood mpac production
On green CI
dogfood
Thursday Tuesday
ms.portal.azure.com portal.azure.com
RELEASE PIPLINE

32. CHALLENGE 2
PERFORMANCE

34. PERFORMANCE TIP #1
MINIFY JAVASCRIPT

35. PERFORMANCE TIP #2
MINIFY CSS

36. PERFORMANCE TIP #3
LAZY-LOAD JAVASCRIPT

37. PERFORMANCE TIP #4
LAZY-LOAD CSS

38. PERFORMANCE TIP #5
BUNDLE JAVASCRIPT

39. PERFORMANCE TIP #6
BUNDLE CSS

40. PERFORMANCE TIP #7
CACHE JAVASCRIPT AND CSS ON CLIENT-SIDE
ETag
Cache-Control
unique URLs

41. PERFORMANCE TIP #8
CACHE JAVASCRIPT AND CSS ON SERVER-SIDE

42. PERFORMANCE TIP #9
USE CONTENT DELIVERY NETWORK (CDN)

43. PERFORMANCE TIP #10
USE GZIP COMPRESSION

44. PERFORMANCE TIP #11
USE SVG WHEN POSSIBLE (AND BUNDLE!)

45. PERFORMANCE TIP #12
USE HTTPS

46. PERFORMANCE TIP #13
WRITE PERFORMANT JAVASCRIPT
#1 CACHE VARIABLES
#2 CACHE FUNCTIONS
#3 MINIMIZE DOM OPERATIONS

48. CHALLENGE 3
REGRESSIONS

51. UI
UI
TYPESCRIPT
UNIT TESTS

55. TypeScript

56. https://aka.ms/AzureTipsAndTricks

57. https://aka.ms/AzurePortalFeedback

58. STAY IN TOUCH!
@JakubJedryszek
jj09.net