Под какой ES сейчас все работают?
 

Привет.

Заметил что в бутстрапе, jQuery, vuejs все еще используются var, т.е. они в стиле ES5 написаны.
Такого стиля и надо придерживаться при разработке скриптов для браузеров?
Учебник вот этот на сайте прохожу, а там уже сразу let, const, наверное еще кучу других штук туда добавили и непонятно как это использовать или нет.

Плохо смотрел. Открываем рандомный файл Vue и видим, что всё там по-современному.
Если ты смотрел на дистрибутивы, то очевидно, что они все прогнаны через babel, чтобы работать на максимальном количестве платформ.

Да вот в руководстве по установке первый подключаемый файл что встретил, тот и глянул.

Так что насчет своего кода, можно безопасно писать на том js что в учебнике, а потом с babel на ES5 все что угодно переганяется? Классы, Symbol type?
Это такой подход сейчас в js разработке?

Надо еще постараться найти браузер, который не подддерживает ES6
Про ИЕ даже сами мелгкомягкие давно забыли.
Сейчас больше надо думать не о том, какой синтаксис поддерживает браузер, а о поддержках современных API. С этим разница есть.
С поддержкой самых современных свойств CSS тоже может быть разница.
Но все современные Хромовые браузеры (Хром, Опера, Яндекс, последние Ейджи) все хорошо поддерживают. Проблемы иногда бывают с Файрфоксом и Сафари.
Хотя и в синтаксисе Хром тоже уже поддерживает многие нововведения ЕS2018, которые пока четко не вошли в стандарт.

Про поддержку синтаксиса и API различными браузерами можно посмотреть
ES6 http://kangax.github.io/compat-table/es6/
ES2016 http://kangax.github.io/compat-table/es2016plus/
ES2018 http://kangax.github.io/compat-table/esnext/

Поддержку фич браузерами лучше смотреть тут:
https://www.caniuse.com/#feat=let
Изначально решаете какие браузеры начиная с какой версии ваш сайт должен поддерживать и потом всё время сверяйтесь с кэн-ай-юз. Касательно let/const - лично я придерживаюсь мнения, что нет смысла терять 5% посетителей ради них. Они привносят лишь небольшое удобство, которое даёт профит только на больших проектах, а на стандартных сайтах и с var нормально живётся.

Я так понимаю, что вы не используете и многого другого, что бы не терять те же 5%. Ведь браузеры, которые не поддерживают let и const много чего другого не поддерживают тоже.
spread, rest, классы, стрелочные функции, не говоря уж о новомодных API и CSS стилях.

voraa,
совершенно верно. Я не работал с сайтами, в которых что-то из этого было бы необходимо. А потеря 5% для интернет-магазина неприемлема.

У вас может быть другая специфика, предполагающая иные подходы. Я никому не навязываю своё мнение, только поделился своим.

Ну да. У меня другая специфика.
Публичные сайты я не делаю.
Делал три раза. Ну прилеплял полифил для Promise в ИЕ.
А работает в настоящее время из них только один, сделанный еще в конце 90. (Еще с фреймами )))) )
Ну и проблемы у меня немного другие - типа не работающих, PointerEvent ( в мобильном файрфоксе вообще, а в десктопном - большей частью). Ну решается это просто - я говорю заказчику - не будете вы пользоваться файрфоксом на планшетах и ноутах с сенсорным дисплеем. Они соглашаются.

Мне просто не понятно, что движет людьми, сидящими на ИЕ 10-11. Ведь именно они составляют большую часть из этих 5% Тех, кто на ИЕ 9- или ни в какую не хочет обновлять свой старый Файрфокс или Оперу вряд ли и 1% наберется. Много таких реально покупает что то в интернет-магазинах? Есть такая статистика?
(ИЕ 10-11, конечно поддерживают let и const, но так, что лучше бы они этого не делали)

Насчёт покупок не знаю, но на сайт заходят. Если что-то не работает в браузере с долей 1-2 процента (по конкретно их статистике посещений), владельцы магазинов обычно заморачиваются чтоб починить в них это.

Сочувствую.
Есть еще некоторый % параноиков, которые отключают Javascript.
Как с ними вопрос решается?

Таких исчезающе мало и они достаточно подкованы чтобы включить его обратно, если захотят что-то купить.

Интересно, кто может спросить про убытки c Microsoft?
Хоть кто то читает лицензии на Windows или их браузер?
И что даже Яндекс браузер не катит?
Одно время его заставляли ставить в гос.конторы. Хорошо, хоть Яндексу хватило ума не изобретать велосипед и сделать его на хромиуме.

По моему глупо "отказываться от фич ради 5%" когда есть babel.
Он же элементарно включается в процесс разработки тысячей удобных способов.

Многие вещи и бабель не разжевывает.
Например, всякие прокси.
Про теневой дом, не знаю, я им не пользуюсь, но сомневаюсь.
Ну и при многих фичах от CSS бабель тоже бессилен.

"Для бензопилы нет бензина, так что я продолжу каменным рубилом. Простая пила? Не стоит того."
Как-то так для меня выглядит ваше возражение.

Даже такая вещь, как WeakMap/
Ну если нет ее в браузере то и ни какой бабель, никакой полифил не спасут. Внешне будет казаться, что он есть. Но внутренне то?
Ну будет работать ИЕ 10- на полифиле, пока память не кончится.

Они вернут стоимость покупки. Или 50$, если это продукт получен бесплатно (типа для образовательных учреждений)
Такие прецеденты бы были, если бы такое было возможно. В последнее время было не мало сообщений, что винда глохла после установки обновлений, и на ее восстановление уходило до нескольких дней. Сами на работе сталкивались, что домашняя 10-ка не могла установить обновление и уходила в бесконечную перезагрузку.
Ладно мы - люди юридически неграмотные. Но в самих штатах не так. Там простой компьютера - потеря денег для бизнеса.
И никаких требований к мелкомягким о компенсации.

Об этом случае я не знал. Может единичные и есть. Но тут ситуация другая. Одно дело тебе без спроса впихивают обновления, другое дело, ты вдруг что то теряешь из-за ошибки в старом браузере, который сто раз положено было обновить, и который никто уже не поддерживает.

Самое смешное, что никто ИЕ исправлять не будет.

Вот, например, промисы реально удобны и для них есть полифил / аналоги в библиотеках. Ими я пользуюсь. А let/const что даст для маленького скриптика? Можно и на сях писать с последующей компиляцией в js, но какой в этом профит?
А что сделает бабел с fetch? Другой синтаксис для XMLHttpRequest с иллюзией наличия новых фич?

Буду пилить бензопилой как обычной пилой пока не привезут бензин.
Как-то так для меня выглядит ваше возражение.

async\await - мастхэв.
стреолочные функции - мастхэв.
... - мастхэв.
деструктуризация и аргументы по умолчанию - мастхэв.
class - мастхэв.
optional chaining(foo?.bar) - мастхэв.

декораторы - приятный бонус.
typescript - очень приятный бонус.)

И это только навскидку.

Всё это очень серьёзно уменьшает количество кода, улучшает читабельность и ускоряет разработку. Вкусив раз - я уже от этого ни за какие jQuery не откажусь.)

Не возражаю, пусть будут.

Вкусовщина, которой не место на работе.

Ну у многих же еще Windows 7, а там из ИЕ максимум ИЕ11 идет.

Да, есть другие браузеры но их может не хватать, когда несколько человек на одном компе тусят. Поэтому я, после поломки ноута с win10, перешел на свой резервный, и на нем как раз ИЕ11 пользуюсь...

С чего бы? Работа должна приносить удовольствие.
Благо программисты - товар востребованный. Если начальство захочет заставить меня жрать дерьмо - я просто уйду в любое из сотен мест, где мне позволят работать так, как мне нравится.

Это пока молодой.
А вот постарше будешь, хрен куда устроишься.
Мне вот (по старым законам) в этом году на пенсию. А на основной работе почти все ВЕБовские дела, которыми занимался больше 15 лет, закрыли.
Остались только разовые работы в частном порядке у клиентов, которым когда то что то делали.
А на основной работе сказали заниматься гребанным Интербейсом и переделывать старые UDF на гребанном паскале.
И приходится делать

Ну если ты покажешь сильные скилы и знание современных технологий - могут и взять если поискать. У тебя же судя по постам не только в возрасте проблема, но и в отставании от трендов лет на 5.
Как альтернативный вариант - забугорный(наш - гиблое дело) фриланс, тот же upwork. Там уж возраст роли не играет.

Это конечно при условии что "порох в пороховницах" не кончился. А иначе и смысла нет.

Это english нужно знать, разговорный. :)

Прохожу сейчас учебник и там многовато незнакомого мне:
- типы Map, Set
- итераторы
- деструктивное присваивание

В учебнике ни намека с какого ES каждая из этих фичей работает.
Как такие вещи побыстрее понимать/находить?
Например по деструктивному присваиванию.

Тот учебник, он что по последнему какому то самому ES с абсолютным игнором браузеров?

Я один хороший совет дам

https://www.google.ru/
Далее, в строке поиска вводишь? например
javascript map (iterator, destruction...)
или
mdn map

И читаешь.
Если проблемы с языком, то используешь Chrome. Там можно попросить вполне понятный перевод.

По поводу совместимости браузеров см
https://caniuse.com/
В строке ввода - нужное понятие (функцию, свойство)

Дык если транспилять всё равно - то какая разница?)

Протранспиляй WeakMap и WeakSet.
Так, что бы работали как положено, а не видимость представляли.

В эпоху, где браузеры сами обновляются, это не проблема... У обычного человека всегда будет обновлённый браузер с необходимым функционалом, а тех, кто использует что-то старое, вся ответственность лежит на них... Для них следует вывести напоминание, что пора обновиться, как это делает, например, YouTube и множество других сайтов!

И как это сделать для WASM или WebGL? Правильное решение — предложить обновиться до последней версии. Это не сложно!

Я, например, не вижу такой необходимости, если вам везде нужна стабильная работа приложения, то вы сами можете использовать нужный браузерный движок! Например, Electron используют Skype, VS Code и пр.

А между тем большинство тех, кто начинает сегодня программировать, скорей всего не сталкивались с IE. И правда, где можно встретить IE? Молодой человек покупает телефон/планшет/ноутбук, разве там такое есть? Даже я его только видел только в виртуальной машине, когда запустил там ради интереса Windows XP. Знаете, этот ваш IE — это лицорука и развод пенсионерами! Там даже CSS нормально не работает! Вы должны радоваться, что больше нет такого мерзкого браузера, а не думать, как туда что-то транспилировать!

Транспилять всё равно надо. Потому что typescript. Потому что vue sfc. Sass. CSS modules... И т.д. и т.п.
Без транспиляния нынче как без штанов.

А при чем тут приложение?
Просто код в браузере. На простой ваниле.
Я, например, довольно широко использую WeakMap.
Есть у нас некоторые внутренние библиотеки, где на них многое держится.
Навешиваются на элемент DOM некоторые дополнительные массивы данных. Если элемент удаляется, то не приходится думать, что эти данные застрянут в памяти и не будут убраны сборщиком мусора.

А можно с тем же успехом по старинке навешивать на элемент DOM некоторые дополнительные массивы данных... (буквально)

Плохо смотрел. Это не JavaScript. И вообще какие мотивы движут людьми, которые напишут что-то на TypeScript и дают имени файла расширение .js (вместо .ts)? С# тоже местами похож на JS, однако ни у кого не возникает желания косить под JS! 😜😜

Если это вам так важно, то приложение как раз гарантирует, что ваш WeakMap всегда сработает, а сайт могут открыть (почему-то) в старом браузере.

Какая ложная аналогия! Вы вполне можете писать на стандартном JS и всё нормально будет работать.

Навешивать прямо на DOM не хорошо. Нельзя в чужой объект пихать свои поля. Нет никакой гарантии, что когда-нибудь производитель браузера не введет туда поле с таким же именем.
Есть легенда, что тип Symbol появился как раз из за этого. Когда захотели ввести итераторы, то первая мысль была ввести в массивы и разные другие объекты служебное поле iterator (ну как есть length у разных объектов) Выяснилось, что существует довольно много библиотек, которые внедряют в прототипы стандартных объектов поля и методы с этим и другими именами. Пришлось вводить новый тип, который гарантированно никто не использует.

И не «по старинке» тоже...

const array = Symbol();
node[array] = [];

Да, тип Symbol именно для этого и предназначен!

Объявление переменных при помощи var было доступно как в ES3, так и доступно до сих пор в ES2020. Конечно в большинстве случаев вам достаточно let с его блочной видимостью, однако когда вам не нужна блочная видимость, то как раз подходит var — например, два последовательных цикла, второй из которых использует переменные инициализированные (при помощи var) в первом цикле.

Если у вас долгоиграющий проект, то у вас был сайт (например, написанный в одну кучу на PHP), а теперь вы, например, хотите сделать его как «одностраничное» приложение (SPA). Не спешите разрушать или дефрагментировать диски со старым проектом, вы можете его перенести с https://example.com/ на https://example.com/olddesign. А по адресу https://example.com/ разместить свой новый проект, в котором будет проверка на нужные API, в случае их отсутствия, будет перенаправление на https://example.com/olddesign.

А если проект совсем новый, то и беспокоится не о чем... 😂 😂 😂 ни у кого из пользователей нет опыта работы с приложением через старый браузер, так что вы можете им спокойно продавать теорию о том, что нужен новый браузер! Поверьте, они купятся и скачают! 😉

Тут недавно дошло до смешного. Написал довольно большой модуль (т.к. мы можем в своей работе не думать про всякие ИЕ и прочее старье) то использовал те возможности, которые считал более удобными. Решил его минифицировать с помощью гугл клаши.
Не тут то было. Выдает ошибку за ошибкой. Оказывается клаша не распознает синтаксис полей классов, которые были введены еще в 72-ом Хроме (а сейчас уже 80-й)

Ну не красиво. Запариваешся эти скобки постоянно писать.
К тому же иногда думаешь об оптимизации (хотя по большому выигрыш, наверно, в наносекундах)
V8 при оптимизации многие функции компилирует в машинный код. При выполнении ряда условий. Например вызов этой функции должен всегда происходить с параметрами одного типа. Как выяснилось если параметр объект, то {а: , b: }, {a:, b:, c:}, {b:, a:} - это уже разные типы

А ещё когда-то в «Кроум» (Chrome — это вам не «Хроме») были введены HTML imports, которые потом были благополучно выпилены. Не всё, что есть в Chrome — стандартизировано, и соответственно может исчезнуть! Полей классов не было в ECMAScript2019, соответственно и не поддерживается в Closure Compiler.

Поля классов даже в этом году скорей всего не войдут в стандарт!

Это стандартный синтаксис для определения поля при помощи символа. Тоже самое вам придётся сделать, если имя вычисляемое!