ewb

1) При чем здесь NPM? На кой черт он сдался Node'у? И как он перекочевал во фронтенд? Это просто интересная фича Node, которую начали использовать фронтендеры, а bower развивался параллельно?

Это пакетный менеджер, чтобы распространять пакеты централизованно, а не искать по всем закоулкам интернета. К этому пришли/придут все языки/среды разработки. У c# есть nuget, у php - composer...

3) Зачем мне (буду говорить просто) на "сайте" какой-то файл package.json, lock.json? И вообще, зачем мне какие-то зависимости? Установка - да, удобно. Но ведь все условно плагины (галерейки, jquery и пр., и пр.) являются частью сайта и друг от друга не зависят обычно.

все условно плагины

Это хорошо, если написанный Вами код использует только зависимости первого уровня вложенности. В проектах бОльшего масштаба, вложенность зависимостей может достигнуть и 3 и 5 уровней. Это когда используемый Вами пакет зависит еще от трех пакетов, каждый из которых, в свою очередь, зависит еще от нескольких, каждый из которых может принести еще несколько зависимостей... Соберете руками?

Максимум - плагин jquery зависит от самой jquery.

Это в Вашем кейсе так. Но не значит, что у всех поголовно.

Надо передать среду разработки - отдаю vagrantfile

vagrant - сторонняя зависимость.

Вы не смотрите, что Node.js - весь такой из себя сервер. Это в первую очередь тулчейн для разработки, а потом уже интерпретатор js. Ибо исторически, до появления node, сама только мысль о js на сервер-сайде вызывала эмоции вида "WTF? O_o Seriously?" и "LOL xD". Потому node.js релизился именно как готовый тулчейн для разработки поверх интерпретатора js. То, что над репозиторием npm появились другие менеджеры - это работа сообщества. Чем они лучше/хуже и в каких кейсах - думаю, практикующие люди вам ответят сегодня. Хотя, скорее всего отправят в поиск.

Анонимная функция где-то там регистрируется, ссылка на нее есть в объекте, и эту же ссылку ты передаешь в addEventListener. Когда ты создаешь объект, и задаешь переменной новую функцию, то эта функция тоже регистрируется и ссылка на нее устанавливается этой переменной. Но, в eventListner ссылка не будет переназначена. Решить можно разными способами, первое что приходит в голову это удалять старый слушатель и устанавливать новый. Либо задать один какой-то слушатель, который будет вызывать некий код, который будет уже выполнять нужные тебе действия.

function Popup() {
  this.btn = document.querySelector("h1");

  this.btnHandler = e => console.log(e);

  this.btn.addEventListener("click", e => this.btnHandler(e));
}

let p = new Popup();

p.btnHandler = e => console.log(111);

Есть переменная, которая хранит функцию для вызова.

Вот здесь первое заблуждение. Не хранит она функцию. В переменной ссылка (указатель) на функцию, и таких ссылок-переменных может быть несколько. И когда вы делаете pup.btnHandler = function() ..., то переменная теперь указывает на другую функцию, но старая функция, которая уже привязана - никуда не исчезает.

Если надо менять - можно так:

Кривовато выглядит, потому что подгонял под ваш код, чтоб понятнее.

Здесь уже больше зависит от твоих потребностей.
Обычно делают два отдельных git репозитория для фронта и бека.
Так ты всегда сможешь отдельно откатывать изменения для них.

Но возможно, так как разработку ведешь один, будет удобнее использовать один репозиторий и для бека и для фронта.
Только я все равно не рекомендовал бы делать коммиты в которых одновременно изменения и для фронта и для бека. Лучше их по максимуму разделять.

Если я правильно понял твои потребности, то тебе не стоит сильно над этим заморачиваться, а просто начать использовать. И со временем придет понимание того, что именно нужно.
Главное не забудь хранить все на чем-то вроде битбакета.

И да, чтобы не делать бекап структуры базы используй миграции, если еще не используешь их.

Не особо понятно, что вы подразумеваете под словом "правильно". Берёте GIT и просто используйте. У нас все проекты делятся две ветки (SPA. Vue + Laravel):
1) master
2) develop

Разработка ведётся в develop, когда всё протестировано, делается merge в master. Если у вас какая-то большая фича, то можно ответвляться от develop и когда она закончена сливать и удалять её.

Изучать на работе. Мне когда работа "позволяла" это делать - я и изучал и/или свой проект писал.
Да-да. Именно так. Совесть пусть идет в жопу.

Остальные советы - это бред школьников.
Если человек спрашивает, значит у него реально нет времени. Если есть семья - то подавно.
Если устает - то значит устает. Я помню, что значит тратить на дорогу 4 часа в день.
По вых лучше не работать слишком много - реально можно перегореть. Сам сгорал не один раз.
Оптимальное время для всего этого дела - будни.

У вас на сервере должен быть запущен постоянно работающий процесс, чтобы обрабатывать входящие запросы от клиентов. На PHP как правило пишут скрипты, которые не висят постоянно в памяти, а выполняются и умирают раз за разом. В таких условиях нужен посредник в виде постоянно работающего процесса. Поэтому вы используете apache, nginx, etc или пользуетесь встроенным php -S localhost:8080 mysite/index.php

В node.js можно несколько иначе. Скрипты висят в памяти. Чтобы с ними как-то взаимодействовать по сети, вы должны позаботиться об этом самостоятельно и реализовать некий протокол взаимодействия с вашей программой поверх tcp. Это может быть популярный и всем известный http протокол или что-то менее известное или даже придуманное вами.

Поскольку http протокол довольно популярен, то в node.js предоставили готовую реализацию в виде http модуля, который позволяет написать http сервер в несколько строк.

Строго говоря, вы это всё можете делать на любом языке, который умеет работать с сетью и PHP здесь не является исключением. Например вот одна из реализаций http сервера на PHP https://github.com/reactphp/http

думаю это Вам поможет Объясняем современный JavaScript динозавру
Как объяснить 10 лет веб-разработки путешественник...
NodeJs - это движок для JavaScript , который вынесли из браузера и добавили возможности , которые в браузерном JS были невозможны из-за безопасности , например работа с файловой системой и другие. Сам движок NODEJS называется V8 , написан на C++ и компилит JS в машинный код.

Вебсервер - это процесс который слушает определенный порт на HTTP запросы , принимает их , парсит и отдает назад ответ в зависимости от запроса. Раньше в этот ответ помещался готовый html код c данными , которые подтягивались из базы, что и было страницей.

Так как появилась возможность делать JS код вне браузера , то взяли и написали на нем веб-сервер , который все делает на JS . Что дало возможность написать и фронт и бэк сайта на одном языке

Сейчас же при запросе к серверу , сервер отдает сразу HTML код страницы с JS кодом и из этого js кода посылаются асинхронные запросы к бекенду (AJAX) на определенные url адреса сервера RESTip , которые отдают не готовые страницы , а только данные в чистом виде в формате JSON и JS парсит эти данные и вставляет в стандартные html узлы или же кастомные , которые зовутся WebComponets, но пока имеют слабую поддержку браузеров , страницы. Angular упрощает написание кастомных html узлов и внедрение в них данных плюс позволяет их реиспользовать.

Получается что у Вас может один раз прийти html + js код и потом вся работа с сайтом будет идти через одну страницу в которую javascript будет вставлять нужные данные, а при необходимости еще и обрабатывать их перед вставкой. Сайты , которые так работают называются SPA (Single Page Aplication).

хорошим ли выбором будет react?

Если вам действительно важно SEO (вы упоминаете об этом), то react как раз таки снимает эту проблему, т.к. умеет рендериться на сервере.

SPA проще со стороны бэкенда (хотя что может быть проще бэкенда). Есть строго определенный контракт на API, достаточно его выполнить (причем, чаще всего, для платформы есть готовое решение по организации REST) и можно идти пить чай.
SPA проще со стороны фронтенда, можно начинать работу (и даже всю ее сделать) еще до того, как бэкендер перестанет пить чай (при наличии, опять же, контракта на API).
SPA лучше по архитектуре (как правило). Никакого тебе PHP+SQL+HTML+JS+CSS в одном файле, даже при всем желании.

Что же до выбора между SPA и более традиционным сайтом -- надо смотреть, приложение у вас или что. Прелесть gmail, например, в том, что это именно приложение. Оно какое-то время загружается, потом быстро работает и имеет богатый функционал. А прелесть хабра в контенте, никакой динамики там и не надо.

Возьмите за правило, что когда вы пишете новый функционал - всегда отводить новую ветку от основной. В основной у вас будет лежать код, который на данный момент работает на продакшене.

Тоесть, у вас есть проект. Надо реализовать новую фичу шифрования, например. Вы отводите ветку от основной
git checkout -b feature/encryption

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

git clone - выкачать репозиторий
git pull – получение изменений из удаленного репозитория
git checkout - переключиться на ветку
git checkout –b - отведение новой ветки от текущей с переключением на нее
git add – добавление файлов в индекс
git commit –m ‘’ – коммит с комментарием
git push origin - пуш закоммиченных изменений в удаленный репозиторий origin
git branch –d - локальное удаление ветки
git stash save –keep-index + git stash drop – локальное удаление изменений в отслеживаемых файлах

В идеале нужно, что бы проект затрагивал разные важные моменты в языке: работа с сетью, базу данных, интерфейсные решения и прочее.

Напишите файловый сервер с возможностью загрузки файлов через ftp-клиент, через web-морду, через SOAP, через мобильную приложуху с аутентификацией, базой юзеров, также можно в базе хранить какую-нибудь метоинформацию о файле. Например, может быть такой маленький личный фотоальбом с подписями(блог-постами, комментами etc.), фотки из которого доступно скачать и залить повсякому. Попробуете всё)

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