Какой использовать стэк технологий для вёрстки интернет-магазина?

Question

[Дмитрий]

Здравствуйте! С помощью чего сейчас имеет смысл делать фроненд магазина наподобие Озона (т.е. не SPA)? У нас бэкенд на cms, на php, а с вёрсткой полный бардак, используются различные версии jquery, bootstrap и много чего ещё. Нужно привести это всё к нормальному, упорядоченному виду.

Основные требования к стеку такие:
1-2. Скорость работы у пользователей
1-2. Удобство разработки для разработчиков; т.е. наличие документации, примеров
3. Распространнёность и опробованность; т.е. совсем новое не подходит

Имеет ли смысл использовать bootstrap или есть варианты легче? Имеет ли смысл использовать БЭМ в css? Какие критерии можно использовать для выбора инструментов?

Comments

[Andrey Tsvetkov]

вы сейчас формируете стек, а после будете формировать команду под стек?

[Дмитрий]

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

Answer 1

[Igor Koch]

Используйте Webpack для сборки кода JS + SASS (Есть возможность подключать только то что нужно от библиотеки а не всей кучей), от JQuery вообще лучше бы отказаться, Т.к. Javascript и возможности css полностью его покрывают (И есть много альтернатив под конкретные задачи а от JQ вам нужно МАКСИМУМ 15% его возможностей).

Для верстки ушёл от bootstrap, использую Uikit 3.
Vue.js очень мощная штука, но индексировать сайты на vue умеет пока только гугл, у яндекса с этим все плохо.

БЭМ - Однозначно стоит использовать, т.к. структурирует название классов верстки и не надо ничего велосипедить.

Список отличных инструментов на все случаи жизни - https://github.com/sindresorhus/awesome

Comments

[Дмитрий]

Возможно глупый вопрос, но для общего понимания задам. Если отказаться от jquery, то как, например, кроссбраузерно отправлять ajax-запросы?

[Igor Koch]

Дмитрий, https://github.com/axios/axios

[Данил Разумков]

Стоит присмотреться к nuxt.js, тот же vue, но оптимизированный для поисковиков.

[Igor Koch]

Данил Разумков, nuxt.js имеет смысл с бэкендом на node.js

[Данил Разумков]

Igor Koch, через axios или $.ajax, можно спокойно и php

Answer 2

[Данил Разумков]

Vue.js + jq, справляется с большей частью задач. Где не подходит vue используем jq и на оборот.

Comments

[riot26]

Мешать vue с jq в одном проекте - глупая затея

[Данил Разумков]

riot26, Можете сказать почему?

[Igor Koch]

Данил Разумков, для каких задач нужен jQuery в проекте на vue?

[Данил Разумков]

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

[Igor Koch]

Данил Разумков, Например?

[riot26]

Данил Разумков, потому что с vue нет смысла больше обращаться к DOM напрямую. Смешиваются уровни абстракции.

Answer 3

[skoval]

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