[{"data":1,"prerenderedAt":153},["ShallowReactive",2],{"work-\u002Fwork\u002Fanalytics-dashboard":3},{"_path":4,"_dir":5,"_draft":6,"_partial":6,"_locale":7,"title":8,"description":9,"tags":10,"role":16,"duration":17,"client":18,"client_named":6,"permission":6,"featured":6,"order":19,"body":20,"_type":146,"_id":147,"_source":148,"_file":149,"_stem":150,"_extension":151,"sitemap":152},"\u002Fwork\u002Fanalytics-dashboard","work",false,"","Real-time analytics dashboard in Angular","Built the SignalR real-time layer and the charting components for an enterprise discovery and notification platform, having not written Angular before joining.",[11,12,13,14,15],"Angular","TypeScript","NG-Zorro","SignalR","Apache ECharts","Frontend engineer","3 months","An enterprise internal platform",4,{"type":21,"children":22,"toc":138},"root",[23,32,38,43,49,54,59,65,76,86,96,106,116,122,127,133],{"type":24,"tag":25,"props":26,"children":28},"element","h2",{"id":27},"context",[29],{"type":30,"value":31},"text","Context",{"type":24,"tag":33,"props":34,"children":35},"p",{},[36],{"type":30,"value":37},"An internal platform for a large organisation: a place to find resources, receive broadcasts and\nget real-time alerts. The stack was Angular throughout.",{"type":24,"tag":33,"props":39,"children":40},{},[41],{"type":30,"value":42},"I had not written Angular before joining this project.",{"type":24,"tag":25,"props":44,"children":46},{"id":45},"the-hard-problem",[47],{"type":30,"value":48},"The hard problem",{"type":24,"tag":33,"props":50,"children":51},{},[52],{"type":30,"value":53},"The team needed me contributing in weeks, not months, and the piece I took on — the real-time\nnotification layer — was the most involved part of the build.",{"type":24,"tag":33,"props":55,"children":56},{},[57],{"type":30,"value":58},"Connection handling is where real-time features usually fail. Not the happy path, but what happens\nwhen a connection drops mid-session, when the server restarts, or when a client reconnects and has\nmissed messages.",{"type":24,"tag":25,"props":60,"children":62},{"id":61},"what-i-did",[63],{"type":30,"value":64},"What I did",{"type":24,"tag":33,"props":66,"children":67},{},[68,74],{"type":24,"tag":69,"props":70,"children":71},"strong",{},[72],{"type":30,"value":73},"Learned Angular by mapping it onto what I knew.",{"type":30,"value":75}," Component composition, reactive state and\nlifecycle hooks exist in Vue and React too, under different names. I was shipping features in about\ntwo weeks by treating the framework as a different spelling of familiar ideas rather than starting\nfrom nothing. Where Angular actually differs — dependency injection, RxJS as the default idiom — I\nhad to learn it properly.",{"type":24,"tag":33,"props":77,"children":78},{},[79,84],{"type":24,"tag":69,"props":80,"children":81},{},[82],{"type":30,"value":83},"Built the SignalR layer:",{"type":30,"value":85}," connection management, reconnection with exponential backoff, and\nbroadcast messaging that propagates through the application.",{"type":24,"tag":33,"props":87,"children":88},{},[89,94],{"type":24,"tag":69,"props":90,"children":91},{},[92],{"type":30,"value":93},"Ran a department training session on SignalR",{"type":30,"value":95}," once it was working, so the next team to touch it\nwould not have to rediscover the same behaviour.",{"type":24,"tag":33,"props":97,"children":98},{},[99,104],{"type":24,"tag":69,"props":100,"children":101},{},[102],{"type":30,"value":103},"Built a shared drawer service",{"type":30,"value":105}," any module could call, which handles stacking and cleans up after\nitself.",{"type":24,"tag":33,"props":107,"children":108},{},[109,114],{"type":24,"tag":69,"props":110,"children":111},{},[112],{"type":30,"value":113},"Wrapped Apache ECharts in Angular components",{"type":30,"value":115}," with change detection and resize handling that\nbehave correctly, which is most of the work in charting.",{"type":24,"tag":25,"props":117,"children":119},{"id":118},"outcome",[120],{"type":30,"value":121},"Outcome",{"type":24,"tag":33,"props":123,"children":124},{},[125],{"type":30,"value":126},"The real-time layer shipped and the training session became the team's reference for it. The drawer\nservice was picked up across several modules.",{"type":24,"tag":25,"props":128,"children":130},{"id":129},"stack",[131],{"type":30,"value":132},"Stack",{"type":24,"tag":33,"props":134,"children":135},{},[136],{"type":30,"value":137},"Angular, TypeScript, RxJS, NG-Zorro, SignalR, Apache ECharts.",{"title":7,"searchDepth":139,"depth":139,"links":140},2,[141,142,143,144,145],{"id":27,"depth":139,"text":31},{"id":45,"depth":139,"text":48},{"id":61,"depth":139,"text":64},{"id":118,"depth":139,"text":121},{"id":129,"depth":139,"text":132},"markdown","content:work:analytics-dashboard.md","content","work\u002Fanalytics-dashboard.md","work\u002Fanalytics-dashboard","md",{"loc":4},1790598049535]