1

I've recently bumped into users that use old devices and whose browsers (mainly Safari 9) raise JS errors because they do not implement the const keyword that we use in our modern SPA app*.

I suppose a fix would be to let Babel recompile the whole app with regular var keywords, but I'm afraid of the speed loss of the website by doing so. Do you have any ideas/experience ith this ?

If we decide to support such broswers, is there a way to maybe compile a version of the website just for those browsers ? I've heard it was possible to use media queries for javascript files. Is it convenient ?

*We are hosting a ReactJS app at https://www.myjobglasses.com that comes from an ejected create_react_app

Cyril Duchon-Doris
  • 12,964
  • 9
  • 77
  • 164
  • 1
    Have you tried using *var*? I really don't think you'll experience a speed problem. – Reinstate Monica Cellio Oct 12 '18 at 10:45
  • did you try using babel-polyfill ? – Pranay Tripathi Oct 12 '18 at 10:50
  • 1
    *I'm afraid of the speed loss of the website by doing so. Do you have any ideas/experience ith this ?* If this were true, nobody would use Babel. You need it any way for normal React development. *comes from an ejected create_react_app* - CRA already uses Babel, doesn't it? Just use it.That's what it's for. – Estus Flask Oct 12 '18 at 11:20

2 Answers2

1

Use Babel to transpile the website code before uploading it. From my experience, it should not slow down your app significantly, even when targeting a bit older browsers.

Babel has a great tool to transpile code for particular browsers, called babel-preset-env:

https://babeljs.io/docs/en/babel-preset-env

As it uses this: https://github.com/browserslist/browserslist for checking, you can define different rules that your transpiling will follow, hence - you'll always have working code as a result, e.g. (taken from preset-env documentation):

{
  "targets": "> 0.25%, not dead"
}

{
  "targets": {
    "chrome": "58",
    "safari": "9"
  }
}

Another idea - if you want to delve deeper, you can actually prepare two bundles and load them conditionally, based on browser version (so, essentially, for this specific case of Safari).

That would require you to somehow detect browser when connecting to the server (e.g. by User-Agent) and serve different bundles, but it's doable ;)

SzybkiSasza
  • 1,591
  • 12
  • 27
0

What about using a package like Modernizr? You could check if the client's browser supports certain feature that is well known to fail in Safari, and include it in you Modernizr support. It is pretty straight forward, I think. Check out Modernizr here

Also, this answer could be useful: https://stackoverflow.com/a/13480430/7868769

nicoramirezdev
  • 466
  • 3
  • 14
  • 2
    I'm afraid this isn't about a language feature but a language `keyword`, its not even about a language function being available or not I'm afraid... typing `const` in Modernizr search engine yields nothing. Also the problem isn't about detecting the browser/ – Cyril Duchon-Doris Oct 12 '18 at 17:44