Какие инструменты сейчас в арсенале у верстальщика/front-end разработчика?

Question

[Василий]

Добрый день, замечал что во многих проектах сейчас используется grunt/gulp(знаю что это), так же видел использование bower(примерно понял что это), расскажите что ещё используется при разработке? И ещё интересен примерный workflow вот этого вот всего. Так же интересно какие либы чаще всего применяете(webpack? modernizr? requirejs?)
Сам я backend, приходится залезать во frontend за неимением рук(это к сути вопроса не относится) и хотелось бы как то это организовать правильно и без боли
Upd: ещё про структуру каталогов - я так понял каталог dist - негласный стандарт куда складывают библиотеки готовые к употреблению?

Comments

[Андрей К]

Вот тот же вопрос... Не понимаю, в чем проблема ответить? Почему-то я могу рассказать тоже самое про back-end.

Answer 1

[Ваге]

Chrome dev tools
Лучший инструмент, который мы имеем в наших руках сегодня. С момента своего рождения, хром вложил много в его инструментов разработчика и до сих пор их улучшения непрерывно. Каждый выпуск (каждые 6 недель или так) идет со своими собственными торговыми новых функций DEV инструмента.

LiveReload
Сколько раз в среднем вы нажмете клавишу обновления на клавиатуре каждый день? Много, верно? LiveReload простой веб-протокол, который вызывает события для клиентов, когда файлы были изменены.

Тестирование фронтэнд JavaScript код с помощью Mocha / Chai / Sinon

Karma тест бегун Javascript написаны парней за AngularJS.

Eще много есть но по моему это самые нужные список front-end

Comments

[Василий]

Не в обиду, но то что вы привели ну совсем ясельная группа, интересно как оно выше организуется в зависимости, как минифицируется, в какие каталоги потом всё раскладывается и с этим всем потом работать

[monochromer]

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

Answer 2

[Artem Malko]

Я, пожалуй, порекомендую инструмент, в котором уже все реализовано базовое для комфортной разработке — TARS. Ничего дополнительно изучать не нужно и можно уже сразу погружаться во frontend с комфортом. Есть документация, на русском и английском + всегда можно лично мне задавать вопросы.

Comments

[Василий]

Artem Malko чтобы не дублировать комментарии и не терять контекста, я ниже оставил комментарий TimLee. И прошу прощения за то что не оставил тот коммент под вашим ответом, тот ответ был ниже. Интересно было бы услышать ваше мнение

[Artem Malko]

Насколько я понял, речь идет о extend, расширении текущего шаблона. В TARS это не доступно из коробки для handlebars, но имеет место в Jade средствами самого Jade. Как-то так.

[Василий]

Да, речь об extetnd. Но jade же только для ноды и js или я ошибаюсь?

[Василий]

Тут просто какая двойная работа - сначала всё оптимизируем до пары файлом, затем из этой пары файлов опять расшиваем на мелкие лоскуты для шаблонизатора

[Artem Malko]

Василий с TARS делать двойную работу не придется. Насколько я понял, у вас backend далек от ноды. Ну и пусть. Делайте верстку с handlebars, путь и без экстендов. Делите сразу правильно на модули и потом эти модули просто переносите к себе, с поправкой синтаксиса. Скомпилированный вариант нужен будет только для того, чтобы посмотреть, как выглядит верстка итоговая.

Answer 3

[sergey]

Сборщики вы правильно указали gulp/grunt/webpack -кому что больше нравится, без них нынче проекты не проекты:), bower - это кладезь фронтенда, также нужно уметь пользоваться и использовать препроцессоры sass/less/stylus также кому что, ну если уже в самое начало так еще фотошоп или ему подобное. Ну и базис без которого никуда: HTML/CSS/JS, а вотвсе остальное вас облепит когда погрузитесь во фронтенд:)

Comments

[Василий]

а workflow какой-нибудь? как это всё объединить? потому как bower'ом мы поставили пакет какой-нибудь, это ж его руками надо в грант, к примеру, прописать, написать где у него находятся нужные файлы, потом ручками на страничку или это нормально? Нет такого инструмента что в пакет-листе прописал, оно автоматом и в грант ушло и к странице подцепилось?

[sergey]

Василий: погугли, должно быть, навскидку у looftblog по gulp есть видео, там же bauer

Answer 4

[TimLee]

Шаблон проекта для быстрого старта от практиков.
Там тебе и инструменты (gulp, stylus, jade), и workflow (бэм, browser-sync), и структура каталогов.
bower уже не моден. Те же задачи решает npm и он уже есть из коробки

Comments

[Василий]

TimLee так, немного поясните про "Те же задачи решает npm и он уже есть из коробки".
Примерно так и представлял. Если можно, то добавьте немного деталей - сейчас практически все фреймворки используют шаблонизаторы, которые расширяют родительский шаблон, блоки и т.д. Представим ситуацию(даже наверное типичный случай) - надо внести изменение в дизайн(стиль поменять, блок и т.д.) - куда это теперь?
В index? Так у нас шаблон уже порезан на base и т.д.
В кусочки шаблона? - рассинхрон с проектом
Как такие случаи разруливаются?
Понятно что мы собираем всё в asset минифицированное и т.д., но когда переводим в шаблоны для шаблонизатора, мы же опять всё на кусочки дербаним

[TimLee]

Василий: Я честно пытался понять суть вопроса, но она осталась для меня не доступной. Возможно из-за того, что я другими шаблонизаторами кроме Jade (если его можно назвать шаблонизатором) не пользовался.

[Василий]

TimLee: может на примере понятнее будет)
К вам обратилась пых студия, пишут они сервис на симфони2, им нужен дизайн и всё всё всё, у симфони шаблонизатор твиг, вы им просто кидаете то что на левой картинке тут cpt.csssr.ru ? и они уже сами дальше делают как им надо? Какая типовая поставка проекта чтоли? ) Если это не секрет, конечно

[TimLee]

Василий: Думаю, нет типовой поставки. На примере этой студии — да, то что на левой части картинки.
Можете заглянуть в кишки любого yeoman generators yeoman.io/generators всё зависит от выбранных технолигий

Answer 5

[Елизавета Борисова]

Конфиг gulp/grunt/webpack прописываете самостоятельно, т.к. это зависит от потребностей проекта. Можете, конечно. найти какой-нибудь yo генератор, он вам сгенерирует шаблон ( например).

Нет такого инструмента что в пакет-листе прописал, оно автоматом и в грант ушло и к странице подцепилось?

ну кто знает, что вам нужно упаковывать и как
Из стандартного набора могут быть sass/less, postcss, concat, uglify, imagemin и тп

Answer 6

[Dmitry Strelets]

Прости меня за краткость, но вот тебе для ознакомления. m.habrahabr.ru/company/it-grad/blog/270589
Подписывался, следи, читай, интересуйся. Ты на верном пути

Comments

[Василий]

я читал это, многим пользуюсь, но немного не то. Там список всего и вся и всё. Гуглом я умею пользоваться :) Хотелось бы больше ответа в духе описания workflow, типа - вот у нас есть грант, такие то таски, потом это уходит бекэндам, они запускают такие то таски, для js у нас то то и то то, собирает зависимости и следит за совместимостями то то, разворачивается через это вот, для ксс то то. Методологию хотелось бы, а не голый список, понимаю что лень, проще список скинуть