Жив ли Vanilla.js?

Question

[Виталий Киренков]

Понимаю, что вопрос очень общий и скорее всего его унесут в tmp, но всё же...

Погуглил, самые топовые ссылки датированы 2012 и 2013 годами, что то из них отсылалось на хабр. И уже тогда о нём как то не особо лестно отзывались. Посмотрел на пару примеров и как то не особо вдохновился.

А вопрос родился из вакансии front-end разработчика в банк Тинькофф, в которой знание ваниллы является требованием.

Comments

[StrangeAttractor]

Кстати хороший вопрос. Вот я, например, ничего другого для web frontend и не умею. Пока. Но это пока у меня длится уже лет 10 - не охото заморачиваться чем-то ещё когда всё прекрасно получается и на ванле. Как-то раз надо было, влепил jQuery, один тот раз поюзал, и благополучно забыл. Так вот - иногда мне кажется, что я такой один, а для всех остальных это как бы всё равно, что на ассемблере писать - ретроградство и кич. Я, по крайней мере, не встречал ни одного другого "JavaScript-программиста" (коих я встречаю много), который писал бы на ваниле.

Answer 1

[Сергей Протько]

То есть вы реально не знаете что такое vanila.js? Вы либо тролль либо не подходите под эту вакансию...

vanilla-js.com

Comments

[Виталий Киренков]

@Fesor На практике никогда не применял. Либо не было необходимости, либо же просто не понял, где и как это можно было бы применить отталкиваясь лишь от нескольких примеров на хабре.

[Виталий Киренков]

@fesor и если вы не будете язвить, а подскажете в каком направлении капать, то я буду благодарен. Все мы чего то не знаем...

[Сергей Протько]

@DeLaVega я дал вам ссылку.

VanilaJS, Ванильный JS, старый добрый JS, без фреймворков библиотек и прочего. Это просто старый добрый классический JS. А сайт "фреймворка" это просто шутка такая.

[Виталий Киренков]

@Fesor Теперь всё ясно. Спасибо за разъяснение.

[Anton Filippov]

Сайт - клевый) Понравилась идея с чекбоксами и скачиванием ))
А Самокрут, какой-то школьник, готовый уступать производительности "патамушта трудна"

[CAMOKPYT]

@Fesor а разве язык где считается моветоном не использовать фреймворки для всего не дерьмище? юз жеквири! Кому нужны эти GetElementByBlaBlaNameORGoFuckYuorSelf без какой-либо совместимости между браузерами. Нет ну правда, даже в паскале и си были модули\заголовочные файлы, а в жс из коробки только накидывание скриптов на страницу. Язык имеет черезжопно-ориентированную парадигму, поэтмоу 100500 фреймворков занимается эмулированием нормального ООП это вообще приемлемо в 2014 для языка которому под 20 лет? Писать на чистом жс можно только фреймворки и то это могут позволить себе только в гугле и аналогичных конторах. Видел я один такой проект с манерным лидом который занимался чистым жс, в итоге SPA была под 30к строк кода!!! В итоге все равно санчала заюзали requirejs для хоть какой-то организации проекта, потом какой-то аналог jquery для монипуляции по DOM, потом был bb, в итоге потратили пол года на рефакторинг чтобы сократить код до примерно 4к строк, в итоге проект планировалось ввести в бету за 8 месяцев, уже прошло полтора года, так ничего не введено. Так что чистый жс это тупой, дешевый и модный понт, как когда-то все фапали на ноду и монгу

[Сергей Протько]

@vicodin если при использовании какого-либо решения производительность труда повышается при незначительном падении производительсноти то логично что это решение лучше. Производительность уже никого не заботит, только 0,01% проектов имеют под собой хоть какие-то основания париться. Это так, к слову.

[Сергей Протько]

@CAMOKPYT с каких это пор в JS считается моветоном юзать фреймворки?

у меня позиция простая. Знать VanilaJS что бы писать с использованием любого фреймворка на JS просто нужно. Нужно понимать как оно там работает. Нужно понимать отличие "нормального ООП" от прототипного наследования что бы как раз не страдать фигней и не пытаться писать "классы" в JS. Нужно понимать тонкости работы с замыканиями, учиться искать утечки памяти в оных и т.д.

Я знаю людей которые не переносят фреймворков потому что все они имеют фатальный недостаток, они сложные, они "медленные". Помню на одном из собеседований чувак пытался меня убедить что "angular.js медленный и потому мы юзаем jquery+backbone". Я тихо улыбнулся и пошел дальше писать свой "медленный" код который по бенчмаркам обгоняет тот же backbone + jquery + underscore и при этом занимает раза в два меньше LoC.

Это проблема не технологии а людей. Всегда найдутся выскочки которые скажут "да говно этот твой фреймворк/библиотека, 100% медленно будет, давай лучше с нуля!". Без профилирования, просто предположения делают на основе которого потом фэйлится проект.

[CAMOKPYT]

@Fesor вот именно, оказывается, что ванила быстрее фремворков в 2-10 раз, но какая разница 0.001 мс или 3 мс? Экономия на спичках, это не С\С++, здесь это неуместно и выглядит "фреймворки слишком сложные, пойду напишу свой велосипед"

[Сергей Протько]

@CAMOKPYT частенько это вопрос архитектуры приложения. Вася пупкин может просто не обладать достаточным опытом что бы реализовать какой-то компонент эффективно, а ребята из гугла этим опытом обладают, у них есть время на профилирование узких мест, отладку и оптимизацию. И в итоге у васи пупкина все плохо а у людей использующих творение ребят из гугла все более менее.

[Сергей Протько]

@CAMOKPYT типичный пример - шаблонизация в JS. Решение влоб будет не эффективным, но для рядового JS разработчика это будет не очевидно.

[Евгений Петров]

@CAMOKPYT вы такой пафосный, такой манерный весь, можете употребить слово «говно». Просто чудесный собеседник.

Однако, зачем ругаться — вот реальная задача. Есть таблица, в которой требуется скрывать произвольные столбцы. В процессе действий пользователя в эту таблицу вставляются подгружаемые строки. В результате в таблице могут находиться сотни и тысячи периодически обновляемых строк.

Вопрос — как именно, и с помощью каких фреймворков решается такая задача?

[Сергей Протько]

@Petroveg https://github.com/airbnb/infinity

[Сергей Протько]

@Petroveg хотя https://github.com/mleibman/SlickGrid подойдет больше

[Евгений Петров]

@Fesor первое совсем не о том, а второй — заменитель таблицы кучей дивов. Не вижу в нём ничего хорошего.
Вопрос-то я задал не для нахождения таких заменителей таблицы нетаблицами, а для понимания сути работы.

[CAMOKPYT]

Я не фронтденщик, но следую правилу, что не надо держать на экране 100500 записей, пусть будет столько сколько можно увидеть + 20% на подгрузку, пока проскролил, несколько дивов появились без лагов, а остальные незаметно подгружаются, ленивая загрузка в вариациях. О чем я и говорю, крутой фронтэндщик, это человек которые знает 100500 фреймворков и в день учит два новых, чтобы решать задачи не только быстро, но и эффективно, поэтому это так сложно и уныло, любые попытки написать что-то свое приводят к тому что твоя самая крутая реализация будет сливать гугловской. И суровая правда жизни показывает, что пишут свое потому что не хватает компетенции юзать готовое, анализировать и не бояться самому немного переписать внутренности используемого фреймворка, это правда сложнее, но если есть компетенция, то получается в разы лучше.

[Roman Zhak]

@Fesor мне тоже нравится angularjs, но по производительности часто он уступает - vuejs.org/perf

[Roman Zhak]

@Fesor в случае с шаблонизацией "в лоб", что Вы имеете в виду?

[Сергей Протько]

@zhak55 нашли на чем бенчмарки гонять, на todomvc... Вы же понимаете что написать медленнее можно на чем угодно. Лень разбираться как проходило тестирование производительности. Доверяю более мение тестам на jsperf, их можно и позапускать, и посмотреть что там происходит...

jsperf.com/template-engine-framework-rendering

Бутстрапинг же приложения измерять смысла мало, то что ватчеры медленные, ну так есть bindOnce и вообще ими не стоит слишком уж часто баловаться. Да и вот честно на моих проектах это никогда небыло узким местом (обычно это работа с DOM все же или какие-то вещи аля putImageData у Canvas)

@Petroveg второе решение как раз таки то что нужно. Если вы будете отображать таблицу миллион на миллион в виде старых добрых таблиц у вас все ляжет. Работать с этим в JS проблемы как бы нет (если памяти хватает), а на экране редко уместится больше чем 1000*1000 элементов. Вывод, мы можем отрендрить только то что влазит. Так что под вашу задачу это дело идеально подходит (с напильником). Первый вариант более универсален и больше подходит просто для бесконечных списков аля стена вконтактике или таймлайн в фэйсбуках.

[Сергей Протько]

@zhak55 без кеширования элементов, без documentFragment и т.д. Каждый чих вызывает reflow документа и т.д.

[Евгений Петров]

@Fesor второй вариант не подходит и не может подойти для задачи по нескольким причинам.

1. Таблицы тем славны, чем и плохи — зависимостью ширины ячеек в ряду и столбце от остальных. Это значит, что скрытие/показ столбца может вызвать смену высоту строк.

2. В этом плагине все «ячейки таблицы» содержат исключительно однострочный текст с обрезанием. Никакого форматирования и многострочных конструкций. Это и понятно — код построен на абсолютно спозиционированных блоках.

Заявление про миллионы строк не представляется серьёзным. Никому они не нужны — сотни строк уже предел для восприятия. А новые можно догрузить в любой момент.

Между тем никаких страшных зависаний не случится при работе с сотнями и тысячами строк обычной таблицы, если делать правильно. Именно про это я и спрашивал, ибо в эпоху быдлокода на jQuery многие почему-то сразу фтыкают траверс и ну давай поэлементно устанавливать правила.

@CAMOKPYT крутой фронтендщик может решать крутые задачи. А знания множества фреймворков лежит мёртвым грузом. тем более, что столько и нет (да и не нужно). Наверное вы имели ввиду также библиотеки и плагины. Последних действительно море, но 90% с лишним — говнокод.

Answer 2

[Дамир Рысаев]

Он живее всех остальных JS фреймворков.
Vanilla JS - это Чак Норрис среди JS фреймворков.

Пара ссылок:
JavaScript MDN
ECMAScript Programming Language

vanilla-js.com - на этом сайте можно собрать VanillaJS под себя. Только посмотрите на размеры получаемого файла: 0 bytes uncompressed, 25 bytes gzipped.

Это самый функциональный и одновременно самый оптимизированный JS фреймворк.

Comments

[Виталий Киренков]

@freepad Простите, но видимо я действительно чего то не понимаю... В обеих ссылках идёт речь непосредственно о js, а не о конкретно ванилле. Возможно если я сам сделаю сборку, может чего то и прояснится, но пока непонятно.

"0 bytes uncompressed, 25 bytes gzipped" - цитата с хабра - "Дайте 2 незапакованных" =)

[Дамир Рысаев]

@DeLaVega возможно эта ссылка вам поможет :)
www.urbandictionary.com/define.php?term=vanilla