[TRICK] How make your ES6 code to be more compatible

Question

I see many web codes that use new ES version but many users in this comunity (like myself) use old devices that dont support new ES standard. Fortunally exists babel that allow to transpile "on-fly" code, when i have prepared a template code that handle js block also to be "babelized" and allow to write codes with ES6 but run on old devices also (in most cases).... This is the template:

https://code.sololearn.com/WL4QrKP4we6A/?ref=app

Answer 1

I have also noticed that some people are complaining about my "not working" web codes. "let" was the issue, so I had to change it to "var".

Answer 2

thanks KrOW
i been looking for a way to move react jsx code from the HTML tab to the JS tab 😅

Answer 3

this might help in getting browser info correctly

and we could get to know the supported es features from browser version

https://code.sololearn.com/W4vC0w43yqNQ/?ref=app

Answer 4

Ole113 啊额 so youre the rich kid of beverly hills😂,not everyone can afford an iphone.This babel library is quite effective anyway,i always try avoiding es6 in my codes due to lack of support.besides i hate iphones,so uncomstumisable,such expensive crap.My advice is try avoiding es6 where necessary

Answer 5

Sorry but this is not the point... I have my old device and i will use it while it break.

P.S. I cant start a android-vs-iphone flame but i prefer to not have a phone than have an iphone

Answer 6

🇳🇬Brains Me also but MANY users here use ES6 (sometimes where is not necessary) and users like me, with ES6-unsupported browsers, cant see they codes... Its right learn with new standards but the REAL WORLD is that MANY users browsers dont support ES6... My template handle this so anyone can write in ES6 but allow to run his code on not-ES6 browser

Answer 7

I repeat... This code template is maded for who code using ES6 but want his code run on pre-ES6 also... Personally i prefer new style because is cleaner, direct and similar to other oop programming language (i dont like prototyped objects)... Other than use babel the trick is in JS tab where first and last line cannot be removed because your code cant work at all... In practice SL load JS tab like text in a script tag and insert latter into head but for transpile js block, the script element MUST use "text/babel" as type attr... My code simple do this

Answer 8

Here's a deep, interactive support matrix comparing your browser, transpilers + polyfills, desktop browsers, servers/runtimes (like Node) and a couple Apple mobiles.
https://kangax.github.io/compat-table/es6

I've got it linked to ES6 but you can also examine ES5, 2016+, next, intl, and non-standard matrices.

If you visit in a browser (mobile didn't show expansions for me), each line can be expanded to show what subfeatures are supported.

Answer 9

@🇳🇬Brains no lol I almost have the oldest iPhone at my school

Answer 10

KrOW I like the class definition. It's cleaner than the prototype one, but I try to provide non-ES6 alternative codes

Answer 11

Kirk Schafer Useful reference, thank you

P.S. Its better viewed on PC, on mobile it generete panic 😁

Answer 12

Igor Makarsky Exact... Personally i think that much times its illogical like i have said here
https://www.sololearn.com/discuss/1176071/?ref=app

Answer 13

This is awesome! Will it also fix the errors with requestAnimationFrame is not defined?