Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

Everything about Google Translate crashing React (and other web apps)

martijnhols.nl

Post reply on HN
Print view View original

11–20 of 88 posts

Re: Everything about Google Translate crashing React (and other web apps)

#11

Post by dgoldstein0 »

rjst01 wrote: post #8

> When I first ran into this issue back in 2017, I posted in the React issue tracker that I had ”fixed” my app by blocking translation entirely. Please do not do this! In almost every instance I've encountered severe Translate-related broken-ness, it's still worked well enough to get me a snapshot of the current page translated. Fighting through this is still less cumbersome than the alternatives. > The only alternat…

When you say locale, you mean your current location, e.g. as detected by geoip?

Re: Everything about Google Translate crashing React (and other web apps)

#12

Post by zelphirkalt »

nottorp wrote: post #10
bryanrasmussen wrote: post #9

Earlier quoted context omitted.

I think the fundamental problem is you have two applications, the primary application and google translate altering the application state of the primary application at the same time, without any possible communication between the two regarding locking or alterations or anything. I'm pretty sure most applications in the history of computing would not fare any better if you constructed that situation.

Both Google and React are guilty here if i read the article right. Google replaces an element with a different element (Text with Font containing Text?), and React's virtual DOM keeps the old, deleted elements alive because the virtual DOM still references them. React "applications" would crash when Google Translate changes their stuff from under them if they didn't accidentally keep the old elements alive. Which wou…

Yeah, Google translate shouldn't have to "research"/reverse engineer, what kind of framework is being used on any random website it translates. It assuming, that it simply interacts with static information would still be a reasonable assumption. While Google translate is also at fault, if it changes the DOM structure. Why not leave things the same and just exchange textnodes? Seems silly.

Re: Everything about Google Translate crashing React (and other web apps)

#13

Post by dgoldstein0 »

rjprins wrote: post #4

Another solution would be a React-native machine translation implementation that updates the TextNodes without replacing them. It would still have the issues of merging adjacent nodes to get a proper translation, but at least it could update on any state change.

One idea that crossed my mind while reading the article: for websites that already use react-intl, have react-intl implement an API to allow supplying machine translations of messages into languages otherwise not supported by the app.

The problem with this is that it will only help sites that already put in effort to internationalization. Whereas the main target of Google translate are the sites that do not bother with i18n.

Still, it'd be quite valuable to the sites early in their internationalization journeys to get support for tons of languages right upon introducing internationalization.

Re: Everything about Google Translate crashing React (and other web apps)

#14

Post by friendzis »

bryanrasmussen wrote: post #9
nottorp wrote: post #3

So the fundamental problem is the DOM is too inefficient to do applications on it. No surprise there, considering the original design of HTML was for presenting information, not for interactive applications.

I think the fundamental problem is you have two applications, the primary application and google translate altering the application state of the primary application at the same time, without any possible communication between the two regarding locking or alterations or anything. I'm pretty sure most applications in the history of computing would not fare any better if you constructed that situation.

The primary application is the browser.

The problem here is that react "application" builds its own state of the web page, fails to reconcile it with changes to actual state, ends up in a detached state with stale information and then proceeds to alter actual state based on the corrupted information it has.

Re: Everything about Google Translate crashing React (and other web apps)

#15

Post by pwagland »

dgoldstein0 wrote: post #11
rjst01 wrote: post #8

> When I first ran into this issue back in 2017, I posted in the React issue tracker that I had ”fixed” my app by blocking translation entirely. Please do not do this! In almost every instance I've encountered severe Translate-related broken-ness, it's still worked well enough to get me a snapshot of the current page translated. Fighting through this is still less cumbersome than the alternatives. > The only alternat…

When you say locale, you mean your current location, e.g. as detected by geoip?

Sometimes, but not always. Sometimes it is also based on the locales in your browser.

Re: Everything about Google Translate crashing React (and other web apps)

#16

Post by jtsiskin »

LordHeini wrote: post #6
nottorp wrote: post #3

So the fundamental problem is the DOM is too inefficient to do applications on it. No surprise there, considering the original design of HTML was for presenting information, not for interactive applications.

That is not the case anymore. React and many other SPA frameworks use an additional virtual DOM which gets mapped onto the real DOM. This used to be faster 10 years ago and allowed for a unified interface. Any addon manipulating the DOM forces the virtual DOM to go out of sync thus crashing the app. As shown be the likes of Svelte, the virtual DOM is just legacy modern browsers are fast enough to get by without.

It’s not that modern browsers are faster - Svelte is a different approach and figures out how to update at compile time rather than using a runtime virtual DOM. 10 years ago it would also have been faster

Re: Everything about Google Translate crashing React (and other web apps)

#17

Post by MartijnHols »

nottorp wrote: post #10
bryanrasmussen wrote: post #9

Earlier quoted context omitted.

I think the fundamental problem is you have two applications, the primary application and google translate altering the application state of the primary application at the same time, without any possible communication between the two regarding locking or alterations or anything. I'm pretty sure most applications in the history of computing would not fare any better if you constructed that situation.

Both Google and React are guilty here if i read the article right. Google replaces an element with a different element (Text with Font containing Text?), and React's virtual DOM keeps the old, deleted elements alive because the virtual DOM still references them. React "applications" would crash when Google Translate changes their stuff from under them if they didn't accidentally keep the old elements alive. Which wou…

They both do reasonable things, so I wouldn't really blame either. Google Translate was there first and is a big accessibility advantage for the web. At the same time, Google Translate is the user-specific browser extension that is executed last, on top of existing apps. It affects not just React[1], so even if React were to implement a fix, Google Translate would continue to interfere with other webapps.

I think any real fix to Google Translate would be very complicated. I fear the only solution might be to elevate Google Translate to be part of the browser's rendering engine instead of acting like an extension. This would allow it to work in the rendering pipeline without modifying the DOM, but even that will probably run into site-bugs because of things like text being longer or shorter.

[1]: https://martijnhols.nl/blog/everything-about-google-translat...

Re: Everything about Google Translate crashing React (and other web apps)

#18

Post by bryanrasmussen »

nottorp wrote: post #10
bryanrasmussen wrote: post #9

Earlier quoted context omitted.

I think the fundamental problem is you have two applications, the primary application and google translate altering the application state of the primary application at the same time, without any possible communication between the two regarding locking or alterations or anything. I'm pretty sure most applications in the history of computing would not fare any better if you constructed that situation.

Both Google and React are guilty here if i read the article right. Google replaces an element with a different element (Text with Font containing Text?), and React's virtual DOM keeps the old, deleted elements alive because the virtual DOM still references them. React "applications" would crash when Google Translate changes their stuff from under them if they didn't accidentally keep the old elements alive. Which wou…

I mean they have to keep the old elements alive because that is the data they use to render to the DOM.

What React could do is to catch that there have been changes made to the structure of the DOM by someone other than them and then re-render the full page. Which would probably not be the most performant solution for anyone.

But anyway then people would complain that React was breaking Google Translate.

Essentially you have two applications fighting to control rendering of the application state of one of them.

Re: Everything about Google Translate crashing React (and other web apps)

#19

Post by pta2002 »

dgoldstein0 wrote: post #11
rjst01 wrote: post #8

> When I first ran into this issue back in 2017, I posted in the React issue tracker that I had ”fixed” my app by blocking translation entirely. Please do not do this! In almost every instance I've encountered severe Translate-related broken-ness, it's still worked well enough to get me a snapshot of the current page translated. Fighting through this is still less cumbersome than the alternatives. > The only alternat…

When you say locale, you mean your current location, e.g. as detected by geoip?

A locale is a combination of several things, including a language, but not only.

E.g. I'm from portugal. I'm visiting an american site, which does not have professional portuguese translations, but does have auto-generated ones.

I don't like the auto-generated ones and can read english just fine, so I want to have the language set to english (en-US in this case).

However, I still want it to apply some locale-specific things from Portugal, e.g.:

- Units (Metric vs. Imperial vs. Whatever mess countries like the UK do)

- Date formatting (DD/MM/YYYY vs MM/DD/YYYY)

- Time formatting (AM/PM vs. 24hr clock)

- Currency formatting (10€ vs. 10 € vs. 10 EUR vs. €10)

- Number formatting (10,000.00 vs 10.000,00)

- When the week starts (Monday vs. Sunday)

If you take a look at the windows locale options, it mostly lets you mix-and-match whatever you want (which is great! Now if only the MS apps let me stop using the localized keyboard shortcuts...): https://learn.microsoft.com/en-us/globalization/locale/langu...

Re: Everything about Google Translate crashing React (and other web apps)

#20

Post by DecoySalamander »

dgoldstein0 wrote: post #11
rjst01 wrote: post #8

> When I first ran into this issue back in 2017, I posted in the React issue tracker that I had ”fixed” my app by blocking translation entirely. Please do not do this! In almost every instance I've encountered severe Translate-related broken-ness, it's still worked well enough to get me a snapshot of the current page translated. Fighting through this is still less cumbersome than the alternatives. > The only alternat…

When you say locale, you mean your current location, e.g. as detected by geoip?

It means system/browser settings like the one available in navigator.language.
Post reply on HN