Settings

Theme

MS Teams Switches from AngularJS to React, Ditches Electron.

twitter.com

67 points by po1nter · 72 comments

Reader

12 threads
enlightens

The linked tweet says that they're switching away from Angular, not AngularJS. These are two entirely different frameworks.

https://en.wikipedia.org/wiki/Angular_(web_framework)#Differ...

roydivision

UI wise one of the worst apps I’ve had the misfortune of using. Buggy (ticks for mono space text never work first time), really slow, like 300 baud modem typing experience on a laptop that otherwise has no problems, confusing UI, teams/chat/activity I never know where to go. Also it often crashes entirely. I really hope this change clears up some of these problems.

olyjohn

I hope this also takes care of the battery life issue. Teams video meetings will take my 8 hour battery life, and suck it all down in under an hour. Zoom would not even put a dent in my battery any more than me doing my regular work.

  • qixv

    This. Also, my Teams is _really_ slow. When I, during a video meeting, decide to paste my clipboard into the chat to share an URI, it takes upwards of 10 seconds from when I first push the chat button to it having loaded, and having loaded the input field to having sent the message. It is the same when loading a chat with a new person. It is just _slow_.

    Thankfully it is weekend now, so I have two full days before returning to work and having to use Teams again.

    • godelmachine

      Not forgetting to mention Teams is a memory guzzler

      Just boot it up and puff, 500MB gone into oblivion

      • brutal_chaos_

        Was that the fault of Teams or maybe because of Electron itself using gobs and gobs of RAM?

        • olyjohn

          If it's an Electron issue, then it's still Teams' fault for choosing to use it!

  • ska

    This (video, specifically) is more likely a codec issue, and perhaps lack of support (or nonexistence of) for hardware accel paths in it on your hardware.

    • sharken

      I'd also like to see more info on this, Teams will consistently bring a quite powerful laptop to it's knees.

      Posting something to chat while in a meeting will take 5-10 seconds, i have never seen it work instantaneously.

      • ska

        re: posting to a chat I suspect it is routed through sharepoint for good and ill. Different set of tradeoffs. FWIW i've never seen it quite that laggy, but have noticed before.

  • brundolf

    I doubt the UI framework has much to say about video chat performance

    • qwerty456127

      An UI framework well may have or lack support for hardware acceleration (video encoding/decoding acceleration in particular) or have it incompatible with particular video card models.

      • brundolf

        AngularJS and React are both web-based; the web browser itself determines the video technology available

        • qwerty456127

          Sure, but the Edge engine, although being essentially the same as the Chromium engine behind Electron, can be built with different flags, have different set of accelerations enabled and probably even be integrated with DirectShow (and ActiveX maybe?). I don't know if it is, just speculating.

SigmundA

Wonder why WebView2 would be any better than Electron? They are both Chromium based and if kept ups to date should be almost identical, would it just be saving disk space and sharing some memory since it would be using a single install of the browser engine?

  • jmkni

    I'm using WebView2 on a project at the moment, inside a WPF (dotnet core) app.

    One thing I've been having some fun with is the ability to host a REST dotnet core API inside the same application and then calling Javascript functions/updating the UI on an HTTP request.

    It's very handy if you have multiple applications on the same machine (or the same application on multiple machines on a LAN) and you want them to talk to each other.

    Also, I couldn't find a way to build a normal Windows installer with Electron (if there is please let me know), but was able to use Wix to build one for my WPF/WebView2 app.

    • nerdywordy

      Intrigued by this approach!

      Is the source shareable?

      We have an enterprise app that was originally built as a UWP application via Xamarin.Forms (Hot mess, I know. But the decision predates me).

      We've been prototyping a rebuild in React and Electron but if we could port into WebView2 and reuse a lot of our existing business logic with a port into a local api layer a lot of time could be saved.

      I'm a web guy, so not sure how the nuts&bolts of this would work. Does the WPF app bootstrap a REST API on localhost on startup that is callable?

    • moogly

      > I couldn't find a way to build a normal Windows installer with Electron (if there is please let me know)

      https://www.electronforge.io/config/makers

      - WiX MSI

      - Squirrel.Windows

      Are your options here. I had more luck with Squirrel than WiX.

      With auto-update support.

  • qwerty456127

    > Wonder why WebView2 would be any better than Electron?

    Because its under their own control. Using a platform you control is great if you actually have the resources to maintain it.

    • amunicio

      Don't they own GitHub which employs most of Electron's contributors?

      • qwerty456127

        The community around Electron still has specific expectations. With an actual framework of their own they can safely make maintaining compatibility with the APIs their products use a top priority and also introduce questionable and Windows-specific things which probably aren't welcome in Electron.

    • manquer

      They could always fork electron, it would have been first thing to do, unless they are expecting to do lot of radical changes which is quite hard to do on electron perhaps

  • fuzzy2

    On a single PC it probably wouldn’t matter that much, but if distributed at scale, the savings in bandwidth could be enormous. Electron is quite large after all.

    Teams shipped with incredibly outdated versions of Electron for a very long time.

    • treespace8

      Keeping up the latest electron is f@$king impossible.

      It takes months/years to get all clients updated. By then you are already running on an outdated version.

      • manquer

        Is integrating auto-update functionality not standard part of distributed application tooling by now ?

        • treespace8

          Sure, if the user has proper permissions.

          But when you are a small app running on a corporate citrix, APP-V, or whatever locked-down environment you are out of luck.

          You will be able to update the app running inside electron without much of an issue. But you won't be able to download and execute a new exe.

          • manquer

            Enterprise deployment setups have a lot of their own flavour. However the ownership is on dedicated IT dept to keep the apps updated on your system and rest of the fleet.

            Microsoft has the network to train, enable and get IT to administer these kind changes. They are after all able to get windows patches in fairly regularly at higher frequency than ever before in windows 10.

            Sure there were will be some small minority like still active XP users , you sell extended support or whatever to either enable them or you can stop support.

  • gigel82

    I played with WebView2; while possible to save some disk space, the memory is (surprisingly) worse than Electron, and the API surface is also not as rich.

    I like the idea of using a (system-deployed) WebView in general, but this implementation needs more work.

  • Wowfunhappy

    Shouldn’t it also help significantly with memory usage, if the user is also browsing the web or using other WebView2 apps?

derimagia

I noticed in the Powertoys devdocs[1] it mentions the settings[2] uses React. This looks to be for the settings. Windows 11 had some multi-tasking changes which look very similar to Fancy Zones and I wouldn't be surprised if they are using React in Windows 11 itself.

I assume they are probably using React Native through their FluentUI[3]. Would be curious if anyone knows more info on it.

[1] https://github.com/microsoft/PowerToys/tree/fa92f2e581e8c74c...

[2] https://github.com/microsoft/PowerToys/tree/fa92f2e581e8c74c...

[3] https://developer.microsoft.com/en-us/fluentui#/get-started/...

qwerty456127

"Ditching Electron" is a clickbait - it doesn't go native, just switches to their own clone which seems very reasonable to me as long as they are capable and willing of maintaining it.

Switching from Angular to React seems weird. What for? AFAIK the only way React is better is there are more developers familiar with it. I wonder if they considered switching to PHP instead /s

  • kunagi7

    Skimming through the Tweets, it seems like the rest of the online Office suite uses React and Teams was the outlier using Angular. Somehow it makes sense to use the same framework for everything and save resources.

    • MR4D

      So now we know that react will never die! Somewhere in Office 2047 will be some code from it I’m sure!

  • treespace8

    When even Microsoft isn't writing native desktop apps anymore, you know it's dead.

    • aero-glide2

      Is that why MS Teams is so glitchy? I really wish companies don't abandon native.

      • qwerty456127

        I believe companies are abandoning native because Electron lets them reuse the same code and the same developers they employ for the web and also because there is no cross-platform GUI toolkit good enough. Qt could be such a toolkit but you can only choose between very expensive and GPL, and you probably wouldn't even have the GPL version if the company behind wasn't forced to maintain it.

        • aero-glide2

          I can understand if MS Teams was some indie dev. Surely MS can just hire more developers?

      • solarkraft

        The Office suite is no less glitchy.

    • sebazzz

      Well, it does make me wonder. Going from Angular or AngularJS to React is basically rewriting the front-end - also conceptually in regard to React immutability concept.

      On the other hand, they have already WebView for Blazor and they need Teams to be cross-platform, also for Linux.

  • fuzzy2

    It is not switching from Angular 2+. It truly is still AngularJS. Very different and an incredible leap.

  • raarts

    If it's React Native they could eventually move to RN for Windows which is close to native windows.

rado

So no native. It is terribly slow. 1-2 seconds to switch tabs. Why are people tolerating this? Not nitpicking, it really is a disaster.

  • fuzzy2

    > Why are people tolerating this?

    Because it’s mandated by management.

haolez

The input lag in Microsoft Teams is atrocious. If they eventually fix this, I'd consider it a decent communication tool, regardless of some inconsistencies in the UX. But this performance issue is very distracting and harms productivity.

wayneftw

Like many in that thread, I'm wondering how WebView2 will work on Linux or Mac.

Will it be a PWA or will they build a native shell around native web views for each platform?

qznc

It is still powered by a browser engine, so will this really make a difference?

  • manquer

    More control, Edge ( also chromium based yes) gives them more control to fine tune performance better than Electron perhaps, or they are able to fix bugs/ add features to Edge WebView2 easier than with Electron.

Mountain_Skies

Interesting that they didn't go with Blazor.

  • octopoc

    WebAssembly (and by extension Blazor) is for people who want to keep writing in their preferred (non-Javascript) language, but have to target the web.

    Electron/Webview2 is for people who want to keep writing Javascript, but have to target the desktop.

    The two tools are for opposite groups of people.

  • SigmundA

    Office for web already committed to React, Blazor barely production ready, Office team doesn't seem to be a big fan of .Net, C++ or JS all the way

jerhewet

With any luck the Microsoft Teams redesign will eliminate all of the "57 replies from ...", "See More", "Expand (52 lines)" and other pointless and annoying prompts from the entire product.

Keyboard Shortcuts

j
Next item
k
Previous item
o / Enter
Open selected item
?
Show this help
Esc
Close modal / clear selection