coffeescript, jade, less.js

У тебя на календаре какой год?

У меня тут в 2016:

• coffeescript потихоньку загнулся, все давно переползли на ECMAScript 2015+ и babel,
• jade переименовали в pug,
• c less давно перелезли на scss, а потом с scss — на postcss.

Один вопрос начинающего (но подающего надежды) фронтэндщика более опытному:

вот неужели каждый год нужно менять то, что прекрасно отображает нужный нам контент? Зачем ежегодно все ломать и переписывать на новые *.js? новые *css?

Хипстеры-с

Webpack очень мощный инструмент, но сложно настраиваемый
Посмотри на мой пример: github.com/yogurt1/frontend
У меня вебпак собирает все, даже index.html
Если тебе ненужный заморочки, но хочется require на клиенте - то можно прикрутить webpack к gulp
У Ильи Кантора есть серия видео по галп, вебпак и прикручиванию их друг к другу

Год 2016, TypeScript и CoffeeScript пока лучшие языки, компилируемые в JS

Вот просто с моей позиции (отмечу еще раз, что я пока обучаю себя фронт-энд технологиям): есть некоторые базовые вещи, вроде html, css, js php/mysql...ну да, это уже back. Я конечно все понимаю, но различные обертки не явлюятся объектом великого поклонения. По крайней мере, они не должны быть таковыми, если честно....

Получается, что если ты в 2016 году якобы не гоняешь что-то сырое, но новомодное — ты уже не front-end developer?

Подскажи пожалуйста, насколько необходимо при изучении html/css углубляться в эти gulp/webpack?

У меня тут в 2016:
...

читать под под тему Терминатора ( https://www.youtube.com/watch?v=pVZ2NShfCE8 ) предварительно защемив прищепкой нос

1. Потихонечку пытаются запилить CoffeeScript6, таргетом которого является ES6
2. Handlebars хватит всем
3. Я пользуюсь Sass с PostCSS
Sass из-за синтаксиса и миксин, PostCSS из-за Styleguide и других удобный плагинов, напрмер postcss-animate или postcss-circle

Можно собирать и конкатенировать скрипты и Makefile-ом
Вебпак полезен, если у тебя React, куча модулей и т.д.
Галп - это вообще таск менеджер, и при правильной настройке он очень полезен
Сначала надо понять, зачем создан инструмент, а потом пытаться понять, как его применить и куда
Если пытаться забивать гвозди микроскопом, то в итоге ничего не выйдет

Мне для освоение галпа (это было вроде года два назад) потребовалось два дня
Вебпак я осваиваю и по сегодняшний день, и все равно очень много не непонятно
И даже сам разработчик вебпака (@sokra) порой отвечает на Issue IDK
Забей на это все и пиши как можешь
А вот когда появится конкретная цель - сделать сайт, приложение и т.д. - бери инструменты и осваивай
Рекомендую также посмотреть на Meteor - очень интересная штука, которая в себе содержит кучу всего

webpack — бандлер, gulp — билд-система, как их можно сравнивать?

Получается, что если ты в 2016 году якобы не гоняешь что-то сырое, но новомодное — ты уже не front-end developer?

Нет. Но дело в том, что ECMAScript 2015 — не сырой, он стандарт. Даже ECMAScript 2016 уже стандарт. И да, они капитально облегчают жизнь по сравнению с тем же кофе.

PostCSS тоже не сырой, и тоже он капитально упрощает всё по сравнению с less. Плюс на нём реализовано то, что будет поддерживаться браузерами в будущем без костылей, а у less никакого будущего нет.

Смысла начинать новый проект на coffee/less сейчас нет.

1. Потихонечку пытаются запилить CoffeeScript6, таргетом которого является ES6

О, правда? А где его можно посмотреть-потыкать? Асинк там будет?

2. Handlebars хватит всем

Честно — не пользовался, без комментариев.

3. Я пользуюсь Sass с PostCSS
Sass из-за синтаксиса и миксин, PostCSS из-за Styleguide и других удобный плагинов, напрмер postcss-animate или postcss-circle

Автопрефиксер не забудь, который тоже плагин к postcss. А какой конкретно синтаксис sass тебя интересует? По поводу миксинов — для postcss есть реализация @apply: https://github.com/pascalduez/postcss-apply.

CSS Nesting: https://github.com/jonathantneal/postcss-nesting.

Если ты из этой связки Sass выкинешь — ты ничего не потеряешь =).

Всё это я собираю гульпом так: все less компилируются в один main.min.css, все jade - в соответствующие html, зачастую в виде template для vue.js/angular

А теперь запихни всё это (и заодно пару лёгких фонов в png/jpg) в твой bundle.js.

Вы так говорите как будто это плохо.

1. IcedCoffeeScript c асинком идет
А в CS6 хз как будет, можешь issue в гитхабе посмотреть
2. Попробуй.
Mustache/Handlebars/Hogan - все это одни и те же шаблоны, только реализации другие
3. Я знаю про реализации миксин и нестинга, и даже про precs, но удобно Sass пользоваться из-за синтаксиса
Те, кто пользовался Scss синтаксисом, ничего не теряют при переходе на постCSS.
Sass у меня Node-sass, который биндится к libsass, который на плюсах
Скорость улетная
PostCSS у меня и с автопрефиксером, и с cssnano
Кстати, есть еще такая штука, как PostStylus - обертка над Stylus и PostCSS

Но я не хочу пихать картинки и css в JavaScript - это дурной тон. Я посмотрел как webpack запихивает .css в JavaScript - это просто маразм.

Но я не хочу пихать картинки и css в JavaScript - это дурной тон

Чем это принципиально отличается от склеивания всего кода в один min.js?

Не знаю, как с Vue и Angular, но вот про реакт вброшу
Есть такая штука, React-lite называется - React, ReactDOM и аддоны в одном флаконе, только автор выпилил всякие фишки для разработчиков, типа PropTypes
Весит либа 25кб (65кб без минификации)
Для продакшена самое-то
Также Lodash - я перешел на него с underscore из-за того, что внутри он разбит на модули
И есть с underscore я делал {pluck} = require 'underscore', то с lodash я делаю pluck = require 'lodash/pluck', т.е. тянется не весь лодаш, а только нужные для плак модули

Sass у меня Node-sass, который биндится к libsass, который на плюсах

Ненависть. Это та самая хрень, которая качает бинари с сервера и постоянно ломается при обновлении версии ноды.

У меня вебпак выносить CSS с модулями, а уже в коде используются ссылки
То есть require './styles.css' возвращает объект, в котором каждому key соответствует hash value
То есть если в styles у меня написано .class { background: green }, то превратиться это все в { «class»: «_3asfajgn» }, а в styles.css будет ._3asfajgn { background: green }
Для картинок и других ресурсов вебпак также возвращает ссылки
В конфиги вебпака можно указать параметр publicPath, в котором будет адрес, откуда брать ресурсы.
Если в CSS будет background: url(./bg.jpg), то превратится это в background: url(cdn/bg.jpg)
Главное один раз разобраться с настройкой вебпака и все

Ноду я обновляю не так часто, ну и собирается на Core2Duo все это где-то минуту-две
Несложно подождать раз в месяц
Imagemin вообще тащит несколько бинарей
Зато скорость
А для PostCSS есть плагин less.js, который собирает less, и скорость выше обычного less.js :-)

ну и собирается на Core2Duo все это где-то минуту-две

Оно не собирается, оно качает готовые бинарники с сервера емнип.

c less давно перелезли на scss, а потом с scss — на postcss.

Не знаю кто там куда перелез, я только вижу, что на гитхабе less.js самый популярный в разделе css preprocessing - больше всего звёзд и постоянно идёт разработка, про postcss первый раз слышу, посмотрел на хабре статьи - муть ещё та.

Пиши на VanillaJS — никаких проблем не будет.
CSS тоже не так уж сложно собирать без всех этих собиралок, просто надо более ответственно подходить к дизайну архитектуры.

React-lite

Есть preact в 3кб, но я бы не рискнул пускать его в продакшн, по крайней мере без параноидального покрытия тестами.

Не сравнивай

Огурец с томатом.

Webpack + gulp

Употребляй

Салатом.

Качает бинари, делает тесты
Если тесты падают, то собирается
У меня node-sass всегда собирается, еще собирается pngquant (или как там его?)

Ладно JS, но на CSS без препроцессора невозможно
Как минимум - mixin-ы

React-lite имеет совместимость полную
А преакт врядли при таком размере

https://github.com/nodejs/node/issues?q="node-sass" label:invalid — его три раза в ноду приносили!

https://github.com/sass/node-sass/issues?q=build is:closed

У меня нет проблем как с самой сборкой, так и временем на нее
Ты лучше посмотри на issue webpack - одна скорость чего стоит

Нет ничего невозможного, надо только завод по сжиганию хипстеров починить.

Sass:

@mixin moveX($x)
  transform: translate3d(#{$x}, 0, 0)

@mixin frames($width)
  0%
    @include moveX(0)
  @for $i from 1 to 11
    #{$i}0%
      @include moveX($width * $i * 0.1)

$width: 600

@keyframes move
  @include frames(600)

@keyframes move {
  0% {
    transform: translate3d(0, 0, 0); }
  10% {
    transform: translate3d(60, 0, 0); }
  20% {
    transform: translate3d(120, 0, 0); }
  30% {
    transform: translate3d(180, 0, 0); }
  40% {
    transform: translate3d(240, 0, 0); }
  50% {
    transform: translate3d(300, 0, 0); }
  60% {
    transform: translate3d(360, 0, 0); }
  70% {
    transform: translate3d(420, 0, 0); }
  80% {
    transform: translate3d(480, 0, 0); }
  90% {
    transform: translate3d(540, 0, 0); }
  100% {
    transform: translate3d(600, 0, 0); } }

как то так.

https://youtu.be/xPFRUM_oDKA

А вообще фронтэнд превратили в полный ад. ломают все от версии к версии. Нет никаких lts библиотек, плагинов. Цирк да и только

Личный опыт не показатель =). А вот количество багрепортов с жалобами на одно и то же — показатель. Нам в ноду его три раза вносили.

Про webpack не скажу ничего.

Ну а что поделаешь, потому и появились на свет интерпретируемые языки

Я не отрицаю полезность фичи, но твой пример — кривой, этот css работать не будет.

А? Не уловил смысла.

Но ведь работает...

полный sasss:
.wrap
background: yellow
border-radius: 14px 14px 14px 14px
height: 15px

.loader
background: green
border-radius: 14px 14px 14px 14px
height: 15px
animation: loader 2s infinite linear

Ссылку на какой-нибудь-бин дай. Или на html. Код в Webpack vs Gulp (комментарий) работать не может.

Что-то я ошибок налепил, вот на Codepen.io нормальная версия
Фигня конечно, но в качестве примера
http://codepen.io/anon/pen/qNoAbV

Отлично! А теперь давай нормальный юзкейс, а не сферический в вакууме. Потому что в твоём примере получилась дёрганая анимация с артефактом в самом начале.

Ты написал:

@mixin moveX($x)
  transform: translate3d(#{$x}, 0, 0)

@mixin frames($width)
  $width: $width
  $step: $width * 0.1
  0%
    @include moveX(-$step)
  @for $i from 1 to 11
    #{$i}0%
      @include moveX($step * $i)

$width: 150px

@keyframes loader
  @include frames($width)
    
.wrap
  border-radius: 14px 14px 14px 14px
  height: 15px
  width: $width*2
  background: yellow
  overflow: hidden
  
.loader
  @extend .wrap
  background: green
  width: $width
  animation: loader 2s infinite ease-out

Надо было:

@keyframes loader {
  0% { transform: translate(0, 0); }
  100% { transform: translate(150px, 0); }
}
.wrap, .loader {
  border-radius: 14px;
  height: 15px;
  width: 300px;
  background: yellow;
  overflow: hidden;
}
.loader {
  background: green;
  width: 50%;
  animation: loader 2s infinite linear;
}

Если очень хочется с переменной, то:

:root {
  --loader-width: 150px;
}
@keyframes loader {
  0% { transform: translate(0, 0); }
  100% { transform: translate(150px, 0); }
}
.wrap, .loader {
  border-radius: 14px 14px 14px 14px;
  height: 15px;
  width: calc(var(--loader-width) * 2);
  background: yellow;
  overflow: hidden;
}
.loader {
  background: green;
  width: var(--loader-width);
  animation: loader 2s infinite linear;
}

Я в качестве примера привел
Тут суть не в анимации, а в том, сколько кода может заменить миксина
Благодаря Sass стили имеют логику
Можно даже сделать, что бы в зависимости от переменных окружений были разные значения локальных переменных
@if, @for - это базовый минимум, которого не хватает в css
http://thesassway.com/advanced/implementing-bubble-sort-with-sass - вот тебе пример, что может Sass

И вообще http://codepen.io/anon/pen/RRrpQv :-)

Во втором варианте хотя бы понятно сразу что происходит

А что именно в первом не понятно? Вроде цикл FOR есть практически во всех языках
Просто идет перебор, от 1 до 11, а потом уже интерполяция строки с числом процента перехода
За ней строка с трансформацией, куда я вставляю миксин moveX, который принимает аргументом число сдвига, а возвращает translate3d(x-координата, 0, 0) - это что бы не было тормозов, так как 2D анимация практически не ускоряется на мобильных устройствах
А передается миксине число, которое является процентом от длины
Так как мы делаем перебор от 1 до 11, то вместо деления на сто я делю на десять
Ссылку на Codepen с работой этого скрипта можно посмотреть внизу

для нормальной работы webpack надо запускать с --watch - тогда он многое кеширует в ОЗУ и скорость сборки возрастает многократно. на слабой машине особенно ощутимо. вызов же через gulp скорее всего будет запускать сборку каждый раз заново, а другого кеша у вебпака нет.