Should I provide a fallback to ES6 codes?

Question

In my codes I am using several ES6 features, such as class and arrow function declaration.

Do you think I should provide fallback code using feature detection or not?

https://code.sololearn.com/WTvhHZWRgMan/
https://code.sololearn.com/Wzzt1aZK3nQC/

Answer 1

So I just ran your codes in this app with my other Android phone which has the kitkat version 4.4.2 and it's throwing the following error message:

"Uncaught SyntaxError: Unexpected reserved word
Line 8"

So I copied the links of your codes and ran those outside of SoloLearn with the same phone in the Chrome browser (which gets 97% compatibility on your test link) and they are running perfectly fine. So I guess the problem is not the device itself but the version of the WebView being used in the SoloLearn app.

But I was able to make it work inside of SoloLearn by using Babel to transpile your codes from ES6 to ES5. I put the Babel script tags in the head and then I grabbed all your ES6 code from the JS tab and put it at the bottom of the HTML inside of a script tag with type="text/babel"

Here are the script tags I used for Babel:

<!-- Babel version 5.8.38 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.38/browser.min.js"></script>

<!-- Babel's polyfill fix v5.8.38 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.38/browser-polyfill.min.js"></script>

Answer 2

At the moment, those features are supported by the majority of browsers out there.

Of course except mine.

Answer 3

I think it would be nice 😊 I always try to add -webkit, -moz, and sometimes even -o prefixes in my css animations to support more browsers, so more users can have a better experience 😊

Edit: And I'm not using ES6 at the moment on SoloLearn because I've noticed a lot of users are still using older devices :)

Answer 4

@Basile, everything is working here with this last version, Android 4.4.2

@Paola excellent, i just tried Babel to compile ES6 and it worked on SL too, never thought about that. :D

Answer 5

@Basile: Sure, I'll be glad to help you test it 😊👍

Answer 6

@Basile: Sorry, I was sleeping 😊 but as @Maz mentioned it is working fine 👍

@Maz :D :D :D

Answer 7

Hi Morpheus 👋! Just to make sure I've attached the code using babel. Try running it and let me know if you're still getting the error message. If you are, please share the error message displayed and more info about your device. Thanks 😊
https://code.sololearn.com/WZq4gL8VF6dQ/?ref=app

Answer 8

I will give it a try (if not I will provide alternative codes).
All my main browsers on http://kangax.github.io/compat-table/es6/ score 97%.
Only IE11 scores only 11%.

BTW what are your scores?

Answer 9

@Pαolα: I will write the version with the fallback or the alternate one and I'll send it to you for testing (if you don't mind).

Answer 10

@Pαolα: it's ready: https://code.sololearn.com/WrsvmVbC2iD2/

Answer 11

@Maz: can you give it a go too?

Answer 12

Now I have to convert back the NN code too.
I tested it too on IE11 and it worked OK, but I wasn't completely sure.

Answer 13

as an experienced developer, here's what i do: i code a page to work on the browsers i want it to work on. it's that simple. just consider what audience u want your page to work for. most browsers already support ES6 so, it's not important to me. but it's up to u.

Answer 14

Thanks for all the help.
Just made it public.

Answer 15

Yes, use polyfills to patch areas where support is lacking. Remember not everything can be polyfilled so check first.

Answer 16

Just rewriting without the ES6 specifics, no polyfills.

Answer 17

@Maurice: already did. Thank you!

Answer 18

Pαolα I am getting reference error , i is not defined, with your links

and my script type as text/babel

Answer 19

https://www.sololearn.com/discuss/1220172/?ref=app

Answer 20

Here I want to make code that works for as many people as possible. That's why I'm going to make a non ES6 version of the codes I write.