Azure Portal - the largest SPA in the World

The Azure Portal is one of the biggest, and most complex Single Page Applications (SPA) in the World. Are you curious what’s under the cover? Let’s check what tools, frameworks, libraries and techniques are used to enable over 500 developers to work on one web application, and having possibility to release a new version anytime.

In this session I will uncover all details of end-to-end development process, performance tweaks, and how we implemented Continuous Integration, and Continuous Delivery.

Transcript

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