Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Azure Portal - the largest SPA in the World

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.

299ad37f586aa79c7e0839fd4a18509a?s=128

Jakub Jedryszek

August 09, 2016
Tweet

Transcript

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

  2. None
  3. None
  4. None
  5. None
  6. None
  7. None
  8. None
  9. None
  10. None
  11. None
  12. None
  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

  15. None
  16. TypeScript

  17. None
  18. None
  19. youtube.com/JakubJedryszek

  20. CHALLENGES

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

    UI
  22. CORE XT

  23. None
  24. None
  25. None
  26. None
  27. None
  28. None
  29. None
  30. None
  31. dev dogfood mpac production On green CI dogfood Thursday Tuesday

    ms.portal.azure.com portal.azure.com RELEASE PIPLINE
  32. CHALLENGE 2 PERFORMANCE

  33. None
  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
  47. None
  48. CHALLENGE 3 REGRESSIONS

  49. None
  50. None
  51. UI UI TYPESCRIPT UNIT TESTS

  52. None
  53. None
  54. None
  55. TypeScript

  56. https://aka.ms/AzureTipsAndTricks

  57. https://aka.ms/AzurePortalFeedback

  58. STAY IN TOUCH! @JakubJedryszek jj09.net