Sergiu Mitu

Вставлю свое слово. На jQuery забивать в наше время не стоит - оно подходит для разработки различных лендингов и подобных сайтов. Но когда в проекте должны использоваться вещи, которые сложнее, чем различные слайдеры и плавные скроллы до якорей, например: взаимодействие с интерфейсом, получение и обработка разных данных (само собой, в простой ситуации получение данных можно выполнить на jquery). В общем, все, что касается логики, крайне неэффективно писать без использования таких "боевых" фреймворков, как реакт, вью и ангуляр.

Актуален и еще долго будет.

Пара кейсов, после которых идея "передать на фронт и фильтровать там" перестает казаться такой хорошей

1) Прилетел массив на 10 000 элементов. Клиент зашел с Samsung galaxy S2 , попробовал загрузить/фильтрануть, посмотрел, как завис браузер, и ушел. Не забывайте, что не все пользователи сидят с десктопов как у разработчиков с 16-32Gb оперативы. Мобилка может поперхнуться банально из-за большого json-а

2) Как только потребуется сделать паджинацию - фильтрация на фронте станет выдавать неожиданно некорректные данные

Пинайте сервер-сайд, пусть разрабы или кэшируют, или расставят индексы в базе правильно, если у них SQL, или перейдут на подходящий поисковый движок с фасетным поиском

Я верю, что можно сделать выдачу и фильтрацию чисто на фронте с любым количеством элементов, если команда состоит из сплошных ниндзя и рокстаров, но практика в 3 подобные ситуации показывает, что в итоге эту фильтрацию придется переписывать как минимум на гибридную (и поддерживать 2 решения, на фронте для малого количества записей, и на бэке для большого), либо полностью на сервер сайд, так как к сожалению команда никогда не состоит из идеальных разработчиков, чаще из обычных живых людей

Попробую на пальцах объяснить.

Событие – это конверт, на котором написано его название. Внутрь конверта можете вложить что-нибудь, а можете оставить конверт пустым.

Элемент – это столик. Кто угодно может подойти и положить на столик свой конверт.

Слушатель – это мужик, который топчется около столика и смотрит, нет ли чего с интересующим его названием. Может несколько человек поджидать конвертики с определённым названием – прочтут все, если только в конверте не написано «по прочтении съесть» – тогда кто-то съест и дальше не передаст.

Как создать/отправить конверт. В любом месте кода создайте конверт и дайте ему название: var myEvent = new Event('teaTime'); Остается положить конверт на нужный столик:

document.getElementById('stolik').dispatchEvent(myEvent);

Чтобы в событие вложить какие-то данные, нужно использовать другой конструктор и передать нагрузку в поле detail:

var event = new CustomEvent('saySomething', { detail: "Hello there!" });

Для чего нужно создавать свои события? Чтобы развязать куски кода. Например, в разных местах документа можно нажать на кнопку повторяющегося виджета. Виджет создаст на document событие "widgetClicked". А ещё несколько одинаковых компонентов в странице, слушающих document на предмет события "widgetClicked", получат пинок и что-нибудь вытворят.

Вопрос далеко не простой. Если прогнать через jsbeautifier.org и убрать шум, то останется такой код:

(function(){

function ExitApi () {};
  
ExitApi.prototype.exit = function() {
   console.log("Exit API: Close requested.")
};

ExitApi.prototype.delayCloseButton = function(e) {
   if (e < 5) e = 5;

   console.log("Exit API: Close Button will not appear for " + e + " seconds.")
};

var b = new ExitApi(),
   method = "ExitApi",
   _this = this;

if (!method in _this && _this.execScript) {
  _this.execScript("var " + method);
}

if (!_this[method] || _this[method] === Object.prototype[method]) _this[method] = ExitApi;

}).call(this);

_this в данном случае скорее всего объект window или аналог.
Если оставить только суть, то она приблизительно такова:

(function(){

function Foo () {};
  
Foo.prototype.exit = function() {
   console.log("Exit API: Close requested.")
};

Foo.prototype.delayCloseButton = function(e) {
   if (e < 5) e = 5;

   console.log("Exit API: Close Button will not appear for " + e + " seconds.")
};

this.ExitApi = new Foo();

}).call(this);

То есть он создает инстанс, у которого есть два метода, которые исключительно пишут в консоль и не выполняют никакой задачи. Смысла в этом коде пока нет, выглядит словно старались запутать специально.

Какие еще вопросы по безопасности нужно закрыть?

ровно всё тоже самое что и при монолитном приложении.
пишите нормальный код без дыр в виде sql инъекций и всякого такого.

Насколько это безопасно и как защититься от подделок запросов в целом?

для вас неважно подделка это или нет.
Запросы выглядят одинаково и в случае отправки с сайта, и в случае отправки например каким-нибудь скриптом "злоумышленника".
Если надо защиту, то делайте проверку авторизации и лимит на количество запросов.
Больше вы ничего не сделаете.

В общем разделение не переворачивает весь сайт с ног на голову, это все тот же сайт со стандартными "угрозами" и защитой от них.

РЕшил проблему с fullscreen при помощи js кода:

function toggleFullScreen(elem) {
    	if ((document.fullScreenElement !== undefined && document.fullScreenElement === null) || (document.msFullscreenElement !== undefined && document.msFullscreenElement === null) || (document.mozFullScreen !== undefined && !document.mozFullScreen) || (document.webkitIsFullScreen !== undefined && !document.webkitIsFullScreen)) {
    		if (elem.requestFullScreen) {
    			elem.requestFullScreen();
    		} else if (elem.mozRequestFullScreen) {
    			elem.mozRequestFullScreen();
    		} else if (elem.webkitRequestFullScreen) {
    			elem.webkitRequestFullScreen(Element.ALLOW_KEYBOARD_INPUT);
    		} else if (elem.msRequestFullscreen) {
    			elem.msRequestFullscreen();
    		}
    	} else {
    		if (document.cancelFullScreen) {
    			document.cancelFullScreen();
    		} else if (document.mozCancelFullScreen) {
    			document.mozCancelFullScreen();
    		} else if (document.webkitCancelFullScreen) {
    			document.webkitCancelFullScreen();
    		} else if (document.msExitFullscreen) {
    			document.msExitFullscreen();
    		}
    	}
    }

Но появилась другая проблема, при двойном клике по Youtube плееру, он становиться fullscreen и перекрывает мою панель, как можно этот двойной клик блокировать ?

Что бы по двойному клику не открывался fullscreen нужно для iframe в css прописать:

user-select: none;
pointer-events: none;

Насколько я понимаю переводить следует как "неправильная" или "неравномерная" активность. Могут заморозить в целях безопасности. Пишите в саппорт, других вариантов нет.

Рекомендую более актуальный материал!

<button class="addToCart" data-id="001">в массив 1</button>
<button class="addToCart" data-id="002">в массив 2</button>
<button class="addToCart" data-id="003">в массив 3</button>
<button class="addToCart" data-id="004">в массив 4</button>

var cart = {};

function addToCart(articul) {
  cart[articul] = 1;
  console.log(cart);
}

var addBtn = document.getElementsByClassName('addToCart');
[].forEach.call(addBtn, function(element) {
  element.addEventListener('click', function() {
    addToCart(this.getAttribute('data-id'));
  });
});