Зачем в angularjs использовать jquery?

Question

[Максим Васильев]

Опыта работы с ангуларом пока нет.
В интернетах много написано, как не нужно использовать jquery вместе с angular.
Темболее, что есть встроенный jqLite.
Тем не менее, некоторые модули/плагины используют их в связке (например, ng-grid).

Возникает вопрос - есть ли что-то такое в jquery, чего прям совсем не хватает или труднореализуемо в angular,
кроме привычек мышления?

Update:
Имеетсся ввиду - ¿в каких ситуациях нехватает стандартных ангуларовских средств (templates/databinding/events/routing) и приходится использовать методы jquery или jqlite?

Answer 1

[Sergey Romanov]

Если по вопросу, и нет ни каких требований, но можно вообще не использовать jQuery. По началу я я всегда включал jQuery на страницу по инерции что ли. Но со временм понял что Англяр реально хочет владеть DOM и использовать jQuery очень не просто, а лайт как уже сказано есть и в ангуляр.

С недавних пор вообще не использую jQuery в проектах на Ангуляр. И пока что не испытываю неудобств. Все легко решается модулями ангуляр, или кастом директивами. И в конце получается гораздо чище код и правильней оргинизованый. А ведь это и есть ради чего мы используем Ангуляр. Одно из его приимществ.

Так что мой ответ на "Зачем в angularjs использовать jquery?" - "Да незачем."

Answer 2

[Mikhail Osher]

Когда Вам нужна поддержка сторонних библиотек, зависимых от jQuery.
А нормальные библиотеки практически всегда используют неймспейсы для эвентов.
Выдержка из описания:

bind() - Does not support namespaces, selectors or eventData
children() - Does not support selectors
find() - Limited to lookups by tag name
next() - Does not support selectors
on() - Does not support namespaces, selectors or eventData
off() - Does not support namespaces or selectors
one() - Does not support namespaces or selectors
parent() - Does not support selectors
triggerHandler() - Passes a dummy event object to handlers.
unbind() - Does not support namespaces

Answer 3

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

angular - для построения приложений, jquery - для работы с DOM. Знаете, бывает такая грустная и печальная ситуация, когда в спецификациях к проекту прописывают очень грустную строчку типа "Supported browsers: IE8+ and last two versions of another browsers". И вот после того как закончишь пускать скупую слезу, открываешь консоль, переходишь в директорию проекта и пишешь: bower install --save jquery.

Суть не в дурацких jQuery плагинах (хотя и это может быть вполне себе веской причиной), а в том что jQuery предоставляет чертовски удобное API для работы с DOM, которое содержит в себе огромную кучу кастылей только ради того, что бы вы не думали о тех нюансах, которые могут вас подстерегать при казалось бы банальных вещях.

На своих проектах, которые реализуются под десктопные браузеры, я всегда подключаю jQuery, только потому что обжегся уже несколько раз при использовании API браузера в чистом виде. Иногда там такие интересные особенности закрадываются, которые без пары лет опыта работы и не узнаешь, а тратить деньги клиента только потому что "jQuery это уже не круто" и потом впустую просирать время за долгими ночными дебагами, имхо дебилизм.

Comments

[Максим Васильев]

Я интересовался не "jquery vs браузер", а "jquery vs angularjs"

[Максим Васильев]

Ну тоесть, я вот изучив пачку документаций, туториалов и курсов по ангулару, но не написав пока ни одного продакшн, не понимаю - зачем нужен jquery, когда есть директивы, биндинги, шаблоны и роутеры.
Для IE8 я так и быть поднапрягусь и вставлю директиву через комментарий.

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

@qmax а по вашему angular-приложения запускаются не в браузерах? Внутри директив не идет работы с DOM? angular просто позволяет вам писать приложения с грамотной инкапсуляцией функционала, структурированные проекты которые в теории можно масштабировать бесконечно а UI-ые компоненты спокойно реюзать. Фишка ангулара в том, что вас не должно волновать что происходит внутри директивы, написана она на ванильном js или с примменением jquery. Просто все это добро инкапсулируется в директиву и вам, как пользователю оной, глубоко плевать на то как оно работает внутри, если оно работает.

p.s. я стараюсь по минимому юзать jquery в проектах. Так же если есть возможность выбора. стараюсь обходиться без лишних зависимостей. Так же я ни разу не использовал ng-grid и считаю таблицы, которые пихают к месту и не к месту, устаревшей фигней (если речь не идет о демонстрации табличных данных, тут все понятно. Но делать списки таблицами это отстой).

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

@qmax "директива через комментарий" это вообще о чем? angular-у jquery не нужен, он нужен вам как разработчику. У вас нету столько времени (а если есть я рад за вас) что бы тратить время на дебаги странного поведения браузеров, если это уже хэндлится библиотеками типа jquery. И да, нужно стараться избавлять директивы от лишних зависимостей. Скажем jquery-ui использовать в проектах на ангуляре я считаю дикостью. jqLite хорошо работает только в webkit-ах и мозиле, ибо он для этого и предназначен. Если вы подключите jquery как зависимость, вы можете использовать то же API jqLite (они интегрируются друг в друга) и надеяться что когда-нибудь можно будет просто удалить jquery и ничего не поломается.

[Максим Васильев]

Мне, как программисту, не пофиг, как писать директиву - с использованием возможностей ангулара или jquery.
Ванильным js или чистым api браузера я ни разу не интересовался.
А одной из фишек ангулара мне кажется то, что мне не нужно использовать jquery.

Можете привести примеры, где приходится использовать jquery потомучто иначе никак?

[Максим Васильев]

"директива через комментарий" я имел ввиду как вот тут: https://docs.angularjs.org/guide/ie пункт 4

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

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

Помню что у меня были проблемы с получением и записью текста в ноды (API чуть различается в старых версиях браузеров и ведет себя немного по разному), так же обработка событий. jqlite не предоставляет возможности эмитить свои DOM события и т.д. что иногда приходится делать (чаще для кастылей).

Сходу что-то другое я не могу вспомнить (именно в контексте приложений на angular, а так много всякого было, но тут и jquery и jqlite не помогут). Я не гуру фронтэнда, и мне не особо нравится разбираться в тонкостях реализации (особенно если эти тонкости - баги разных версий разных браузеров). Я хочу тратить время на полезные вещи, на разработку бизнес логики приложения и не хочу заморачиваться такой ерундой. Да, я стараюсь использовать исключительно API jqLite дабы обезапасить себя. Можно потом отключить jquery и сделать смоук-тест в основных браузерах и там уже делать выводы.

Хотя пожалуй самый распространенный кейс - 90% что одна из зависимостей попросит у вас jquery в качестве зависимости. От этого надо избавляться, и это уже лучшая статистика чем была год назад. Тогда любая директива с драг н дропом тянула за собой еще и jquery + jquer ui draggable/sortable.

[Максим Васильев]

Мне кажется, вы разговариваете либо не со мной, либо о чём-то своём.
Мой вопрос был - в каких ситуациях при разработке на ангуларе приходится использовать jquery вместо родных средств ангулара?
При этом jqLite я считаю разновидностью jquery а не родным средством.

Вставка текста в ноды делается через {{scope_ref}}
Получение текста из инпута - через ng-model="scope_ref"
Навешивание стандартных событий - через ng-foo="handler()"
Кастомные события - через scope.$on|$emit|$broadcast

[Максим Васильев]

Я обновил вопрос с уточнением.

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

@qmax есть масса случаев, когда делать что-то через $scope становится не практично (слишко много $digest циклов, приложение начинает тормозить). В таких случаях "узкие места" я выношу в кастомные директивы.

[Максим Васильев]

Что это за случаи то?

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

@qmax хотя, если подумать, подобными изощрениями я занимаюсь обычно на проектах-гибридах, где такие вот мелочи спасают от диких лагов, и там я jquery не использую... Один из последних случаев - календарик с ивентами, с гестурами и прочим, если делать его на стандартных средствах angularjs все безбожно педалит. Пришлось выносить в директиву все, что касается формирования DOM.

Еще если вам интересно, некоторые используют внутри директив react.js изза концепции виртуального DOM и более оптимизированного рендринга. И да, этого можно добиться тупо используя различные штуки типа ngBindOnce и т.д. и получить даже существеннее профит.

Короче все что я писал можно сократить до:
jquery в 90% нужен из-за зависимости сторонних директив от нее
jquery часто подключают что бы jqlite получал поддержку выборки по селекторам, jqlite умеет не так много в этом плане.
jquery нужен если супортишь IE до 10-ой версии (в ней у меня особо проблем небыло, а какие проблемы в IE9- я уж и не вспомню), и то можно подключать в порядке эксперемента когда что-то в этом плане не работает
Следует делать зависимость от jquery минимальной, ипользуя API jqlite (при подключении jquery до angular, он это дело разруливает подменяя jqLite на jQuery и делая API совместимым). Следует всегда стремиться избавиться от этой зависимости но много времени на это лучше не тратить.

[Максим Васильев]

А почему вынос в директиву означает использование jquery?

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

@qmax вынос чего-либо в директиву не означает использование jquery, это может быть jqlite и еще какие-то вещи.

Короче что вы пристали, просто не используйте если вам это не нужно. Есть jqLite, которого хватает. Есть необходимость добавлять готовые решения которые требуют jquery. Приходится либо тратить кучу времени на реализацию этого решения без jquery (только jqlite например) или подключать jquery.

[denver]

@qmax в целом - да, можно обойтись без jQuery. Хотя @Fesor прав - не всё целесообразно портировать на Angular. Скажем я бы НЕ взялся переписывать весь jQuery UI (а если кто-то взялся - я б еще подумал юзать ли). Плюс есть уже масса компонентов, написанных на JS или jQuery - календари, чарты, 3д движки, мало ли чего. Переписывать которые без jQuery или pure JS имеет смысл только если планируется жить вечно. Тут @Fesor прав на 100%: инкапсуируем и даже не лезем смотреть как оно работает, хоть на mootools - плевать.

Answer 4

[Никита Гусаков]

Angular - это DI + директивы. Все встроенные директивы просты и под них действительно хватает JQLite. Однако есть куча готовых решений, которые возможно уже используются в проекте. Одна из фишек ангуляра - его можно начать внедрять постепенно.

Comments

[Максим Васильев]

Я обновил вопрос с уточнением..

[Sergey Romanov]

Да. согласен. Но вот например врапер для твитер бутстрап сделан так что вообще не надо твитер бутстрап скрипт и jQuery. Думаю так это и будет развиваться. Уже полно разных компонентов для Ангуляр. Думаю в будующем их будет только больше. Это в плане того что ситуация что сейчас много готовых решений под jQuery может изменится и будет достаточноготовых чисто под ангуляр.