Модульность на фронтенде?

Добрый день! Интересует вопрос модульности.
Уже относительно долгое время занимаюсь фронтендом, особенно версткой, и сейчас хочу это все автоматизировать и подготовить шпаргалку для сборки проекта, чтобы каждый раз не настраивать все заново. В своей работе использовал gulp/grunt, css-препроцессоры. Но как-то кажется, что не использовал это все на 100%.
Ищу советы как это все собирать, какая должна быть структура проекта (н-р для лендинга). То есть, сейчас это так я вижу ... каждый блок в отдельном модули, в модуле файл jade и sass, скрипты, пожалуй отдельно, собирал бы это все gulp/webpack.
Хотелось бы увидеть как выглядит этот сборник у профессионалов или хотя бы услышать совет. Какие плагины используются, возможно другие шаблонизатором, плюсы и минусы всего.
Заранее спасибо)
  • Вопрос задан
  • 6789 просмотров
Решения вопроса 1
maxfarseer
@maxfarseer
https://maxpfrontend.ru, обучаю реакту и компании
(кратко про себя)
Все лежит в папках: компонент + стиль. Собирается webpack'ом. Но у меня react-проекты.

(длинно, но вроде бы по делу)
Если относительно долго занимаетесь - у вас скорее всего уже выработались части, которые похожи - их выносите. Так же скорее всего у вас есть одинаковая структура (обычно это js/css/images и html, либо как вы пишите компонентами (отдельными папками) внутри котороых html + стили и может js ). Делайте шаблон для будущих проектов, в первую очередь удобным для себя - ведь вам с ним работать, а в нем реализуйте то что умеете по-максимуму (жмите картинки, оптимизируйте js и т.д)

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

кажется, что не использовал это все на 100%

Всем так кажется, поэтому когда не хочется заниматься работой, идем в гугл и смотрим опен-сорс проекты других людей: gulp, wepback, затем если нашли что-то любопытное идем в npm/github читаем доку. Пытаемся применить в работе.

Что имеем в итоге?
1) если все работает и вас устраивает (скорость сборки, удобство проверки в разных браузерах ...) - "работу работать";
2) если есть время и желание - гуглите опен-сорс решения, читайте твиттер интересных людей / новостную подписку;
3) если хочется услышать мнение коллег, но при этом коллег рядом нет - пишите статью на хабр. Просто статья: я использую такие-то плагины в своем "шаблоне" - вряд ли получит лестные отзывы, но возможно кто-то напишет: вот в этом месте у вас плохо, сделайте иначе. Возможно, вы придумаете, как написать статью интересно - тогда честь и хвала. И критика. А обоснованная критика всегда хорошо.

P.S. если используете Jade и следуете BEM-методологии, то я бы порекомендовал посмотреть на этот проект
Ответ написан
Комментировать
Пригласить эксперта
Ответы на вопрос 6
@Lev_Shestov
1. Посмотрите пристальнее на BEM, они разработали не только подход, но и многие утилиты под разработку. Въехать сложно, но есть на что посмотреть.

2. TARS - сборщик фронтенда от ДубльГис. Очень интересная штука, позволяет не только внедрить модульность, но и избавить программиста от многих задач. Работает она на основе того же gulp'а, но создавать сборки не нужно, нужно только в конфигах указать, какие препроцессоры использовать, и дальше TARS уже сам разберется.
В TARS используется методология БЭМ, но в отличие от нативного БЭМ-сборщика от яндекса, в TARS гораздо проще въехать и начать работать.
Статья на хабре - она не очень, если честно. Всех фишек TARS не раскрывает.
Документация
Использование вышеуказанного Bemto под TARS позволит дополнительно привнести ясности в код.
Ответ написан
Комментировать
@uniquenicknqame
В современном фронтенде модульности нет.
AMD, RequireJS, CommonJS, ES6 (он же ES2015), TypeScript итд: зело употребляют это слово, но в конечном итоге все сводится к Java-подобной системе импортов.
Хотите убедится?
--Создайте папку и с помощью npm установите туда что-то простое, но посложнее хэлло-ворда; теперь загляните в папку node_modules -- кто все эти люди?? Казалось бы простую вещь ставил, а в результате 10-ки мб кода на борту..

Компонентов тоже нет.
Angular, React -- обманывают. Особенно ангулар.
Компонент предполагает переносимость.
Попробуйте перенести что-либо более менее весомое с одного ангулар проекта на другой; я уж молчу про перенос на не ангулар проект.

В итоге пришлось писать свою систему с четким управлением зависимостями, композишн рутом итд итд.

Вобщем, если интересно, посмотрите в сторону серьезных "экосистем", таких как Java и/или C#.
Поищите по ключевым словам: dependency injection, IoC (-container), composition root итд
А на фронтенде это все даже не в зачаточном состоянии.
Ответ написан
xmoonlight
@xmoonlight
https://sitecoder.blogspot.com
1. Сборка из HTML-блоков: https://github.com/xmoonlight/includeHTML
2. Шаблонизатор nano: https://github.com/trix/nano
3. ООП на JS: largescalejs.ru
Ответ написан
Комментировать
@xfg
Посмотрите yeoman.io у него огромное количество генераторов это заготовки для старта проекта, можно найти заготовку под что угодно. Структура проекта, препроцессоры, сжатия, оптимизации, юнит-тесты, всё уже настроено. Нужно взять и использовать. Делать всё с нуля, особенно первые разы не стоит. Стоит сначала посмотреть, как это принято правильно делать.
Ответ написан
Zoxon
@Zoxon
Веб-разработчик
Ответ написан
Комментировать
iCoderXXI
@iCoderXXI
React.JS/FrontEnd engineer
Я за React+Webpack
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы