Юрий Кравчук

Расскажите плиз о технологии, и чем развёрнутей, тем лучше.

Вот захотел ты сделать сайт SPA или PWA с любимой тебе вёрсткой на базе Twitter Bootstrap и любимой библиотеки Vue. Сверстал. Поповеры не появляются, дропдауны не выпадают, модалки не открыватся, формы не валидируются, клики не работают.

Оригинальный Twitter Bootstrap имеет поддержку интерактивных элементов на Javascript. Реализовано это на библиотеке jQuery. Если делаешь на Vue, придётся подключать ещё и jQuery, что лишняя библиотека на 100+ килобайт, что, конечно, не катастрофа (пока ты не на мобилке).

Vue работает с состояниями привязывает данные к отображению, а jQuery работает с DOM и событиями. Это вопрос производительности. Работа JQuery начитается когда загружен и распарсен JS и HTML. Работа Vue начинается в тот момент, когда загружен и распарсен JS, то есть чуть раньше. jQuery модифицирует DOM на лету, перестраивая текущий документ. Vue работает с shadow DOM, а затем подсовывает уже готовую интерактивную страницу в пустой документ, что быстрее (разница в секунды на десктопе, десятки секунд на м...).

Vue реализует компонентную парадигму. Куски страницы являются изолированными кусочками кода (HTML CSS JS), которые цепляются между собой динамически, а обмениваются данными через аттрибуты и события. Предположим, что вы решили следовать компонентной парадигме, тогда согласно вот такому примеру нужно будет увязать самостоятельно все интерактивные компоненты. Компонента-кнопка. Компонента-поле ввода. Компонента-форма. Компонента-контейнер. Получается около 50 компонент. Для некоторых надо будет написать логику на jQuery. Если посмотреть на код jQuery этих микрокомпонент, то он окажется несложный, его вполне можно переписать на Vue. Ну там класс заменить или клик отработать. Когда от кода jQuery не останется следа, его можно будет из проекта удалить.

И вот получается Bootstrap-Vue

На компоненты побили. От Jquery избавились. Написано в единой парадигме. Работает быстрее.

Добавляем тот факт, что в Vue можно не импортировать компоненты, которые не нужны (например, я не работаю с дропдаунами и модальным окнами) и код становится меньше, грузится быстрее, работает быстрее.

Так же будет Не лишним оценить технологию: плюсы, минусы, стоит ли вообще с этим работать ...

Это сам изучай и сравнивай. Навыки и опыт воздушно-капельным и через Internet не передаётся

https://ru.vuejs.org/v2/guide/comparison.html

Возможно что то не так в конфигах webpack ?

У меня сейчас в проекте порядка 600+ vue компонентов.
Пересборка в dev с hot reload занимает 2-5 сек.
(win, ram 16gb, ssd, какой то старенький i3)

Паттерны в JS уже прочитали?
Возможно, вы не уделяете внимание рефакторингу по мере написания приложения. Про рефакторинг можно много читать, например вот

Для себя одного git, как мне кажется, нужен только как "машина времени" и "обратный роадмап".
То есть, чтобы иметь возможность посмотреть более ранний вариант кода и чтобы в потоке коммитов найти, когда были какие-то конкретные изменения.
По большому счету, ничего, кроме коммитов в мастер, тут и не требуется. Разве что желательны мелкие коммиты с осмысленным написанием изменений, а не куски того, о чем сам не вспомнишь через неделю.

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

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

Emmet - ускоряет формирование html.
SASS, LESS, Stylus - CSS препроцессоры (также есть постпроцессоры).
Gulp, Grunt, Webpack - помогают собирать проекты. По сути менеджеры задач по компиляции sass, less, coffee и т.д. и сборки этого всего в пару файлов.
Для ускорения верстки также порекомендовал бы использовать CSS фреймворки типа Bootstrap, Foundation. Но не злоупотреблять стилями по-умолчанию =)

Вообще, макет перед работой нужно смотреть, и если область контента не соответствует стандартам, обсуждать это ещё до начала работ. Если макет не 1:1, и заказчик об этом заранее не упоминал, шлите со всеми претензиями к хренам собачьим, а за доработки требуйте доплату. На будущее, всегда требуйте от заказчика детальное ТЗ, по которому работа будет приниматься.

html -> css -> js -> Конец
JS изучать весь и практиковаться

Устройся на работу – это самый лучший вариант обучения. И это единственная возможность получить опыт в решении конкретных прикладных задач, за которые и платят деньги. Если хорошо знаешь верстку, то, думаю, тебе не проблема будет устроиться верстальщиком с перспективой развития до фронт-энд разработчика — довольно часто ищут не матерых спецов, а людей с горящими глазами, желающих развиваться.
Нет смысла тратить годы на подготовку. Поищи вакансии, походи на собеседования, посмотри, что тебе нужно подтянуть, подтяни. Устроишься на работу — и навыки пойдут в гору.