Привет
Изучаю премудрости frontend разработки, и в частности vue. Сам vue достаточно красив, своей идеей (по сравнению с jquery, например). Нравится его быстрота и негромоздкость, и главное, тот факт, что его достаточно просто добавить в уже существующий веб проект.
Но как только появляется необходимость использовать сторонние vue компоненты (которые предоставляются в виде так называемых single file components .vue files), начинаются проблемы, ибо такой файл так просто в HTML тегом script не импортируешь (если только автор компонента не позаботился предоставить js файл, чего они обычно не делают).
Для того чтоб интегрировать vue файл, приходится весь проект пересобирать с помощью vue-cli, который в свою очередь вызывает web pack, генерируя малопонятные js файлы на выходе. Это удобно для больших и сложных ui проектов, но для моего небольшого — вызывает кучу мороки, начиная от необходимости отладки только через веб сервер, постоянной пересборкой в случае изменений. Вопрос, возможно ли как то использовать .vue файлы в нетранспилированном vue.js приложении, продолжая работать над HTML/vue.js проектом без пересборок? Возможно, можно как нибудь заwebpack’ить только этот конкретный .vue файл, содержащий сторонний контрол?
И если нет, то возможно react/angular позволяют такое делать?
Здравствуйте, Михaил, Вы писали:
М>Для того чтоб интегрировать vue файл, приходится весь проект пересобирать с помощью vue-cli, который в свою очередь вызывает web pack, генерируя малопонятные js файлы на выходе. Это удобно для больших и сложных ui проектов, но для моего небольшого — вызывает кучу мороки, начиная от необходимости отладки только через веб сервер, постоянной пересборкой в случае изменений. Вопрос, возможно ли как то использовать .vue файлы в нетранспилированном vue.js приложении, продолжая работать над HTML/vue.js проектом без пересборок? Возможно, можно как нибудь заwebpack’ить только этот конкретный .vue файл, содержащий сторонний контрол?
Если собирать все вебпаком, то какие проблемы? Зачем тебе тот сторонний файл отдельно от твоего бандла? Вебпак в режиме разработки сам является вебсервером и умеет отдавать собранные на лету бандлы.
Здравствуйте, Михaил, Вы писали:
М>И если нет, то возможно react/angular позволяют такое делать?
Нет.
Но оно и не нужно, на самом деле. Настройка вебпака и транспиляция кажутся сложными и ненужными только на первый раз, когда ничего нет. Когда настроишь, то оказывается, что с ними очень удобно. Вебпак может висеть в фоне и обновлять файлы как только они обновились и сам может предоставлять веб сервер, он же умеет делать map-файлы, по которым очень удобно отлаживаться.
А после того как для одного проекта настройки под себя сделал — скопировать их в другой проект уже совсем просто.
Здравствуйте, Михaил, Вы писали:
?
М>И если нет, то возможно react/angular позволяют такое делать?
Ага, реально бесит. В сценарии когда пишется не приложение целиком, а какой-то кусочек.
Теоретически angular позволяет такое. Компилировать компоненты в 1 js файл, который можно добавить в любой HTML (без angular), и там юзать в виде <my-component foo="XX" bar="YY">.
Начиная с версии 7, если не ошибаюсь, см. angular elements.
Но размерчик js не обрадует.
Здравствуйте, fmiracle, Вы писали:
F>Здравствуйте, Михaил, Вы писали:
М>>И если нет, то возможно react/angular позволяют такое делать?
F>Нет. F>Но оно и не нужно, на самом деле.
На самом деле (ТМ) оно ещё как нужно
Например: хочу добавить панельку на Vue в страницу на WordPress. Нафига мне там транспилеры и прчая хренотень?
Здравствуйте, bnk, Вы писали:
bnk>Например: хочу добавить панельку на Vue в страницу на WordPress. Нафига мне там транспилеры и прчая хренотень?
Чтобы сделать сложную панельку, очевидным образом.
Началось-то ровно с этого "просто vue недостаточно, надо чтобы еще были сторонние модули и компоненты".
Добавлять ты будешь так же один файл, только он будет результатом транспиляции, проведенной заранее.
Здравствуйте, Михaил, Вы писали:
М>Изучаю премудрости frontend разработки, и в частности vue.
а зачем эти вуе вообще нужны — ведь сейчас в голом html/js есть компоненты, шэдоу, фрагменты, темплэйты, импорты, слежение за объектами и прочее
может просто прочитать соременне доки и не мучать мозг веми этими уже умершими вебпаканглуарреактвуе итд
Здравствуйте, paradoks, Вы писали:
P>Здравствуйте, Михaил, Вы писали:
М>>Изучаю премудрости frontend разработки, и в частности vue.
P>а зачем эти вуе вообще нужны — ведь сейчас в голом html/js есть компоненты, шэдоу, фрагменты, темплэйты, импорты, слежение за объектами и прочее P>может просто прочитать соременне доки и не мучать мозг веми этими уже умершими вебпаканглуарреактвуе итд
Умершими то почему? Почти любой более менее сложный фронтенд сейчас делается на реакте. Потому что упрощает и ускоряет разработку в разы,и, главное, упрощает поддержку и последующее развитие, а vue, например, разбивает его на легкоподдерживаемые компоненты, которые можно просто скачать, вместо написания с нуля. Не говоря уже о поддержке старых браузеров (сколько пользователей сидит на старых андроидах?). Естественно, все это в итоге транспилируется в обычный JS. Если вы пишете блог/todo, естественно все эти фреймворки не нужны, и только добавят оверхеда.
М>Почти любой более менее сложный фронтенд сейчас делается на реакте. Потому что упрощает и ускоряет разработку в разы,
мода + нежелание прочитать современные доки по голому html-js
>а vue, например, разбивает его на легкоподдерживаемые компоненты, которые можно просто скачать, вместо написания с нуля.
и взять в штат юриста чтобы не налететь на подводный камень какой-нить хитрованной лицензии этого компонента или если она вдруг автором измениться
и если этих компонентов будет много то ой — отдел юристов и препирательства с авторами а то и суды...
имхо проще взять 1-го дизайнера со знанием современного голого js/html/css
а подход скачать бесплатно это имхо для небольших некомерческих поделок
Здравствуйте, paradoks, Вы писали:
P>Здравствуйте, Михaил, Вы писали:
М>>Почти любой более менее сложный фронтенд сейчас делается на реакте. Потому что упрощает и ускоряет разработку в разы, P>мода + нежелание прочитать современные доки по голому html-js
Можно пример качественного и сложного интерактивного (с кучей кнопок, списков) и реактивного (т.е. где ui сразу реагирует на ввод) сайта на голом js?
>>а vue, например, разбивает его на легкоподдерживаемые компоненты, которые можно просто скачать, вместо написания с нуля.
P>и взять в штат юриста чтобы не налететь на подводный камень какой-нить хитрованной лицензии этого компонента или если она вдруг автором измениться P>и если этих компонентов будет много то ой — отдел юристов и препирательства с авторами а то и суды...
P>имхо проще взять 1-го дизайнера со знанием современного голого js/html/css
P>а подход скачать бесплатно это имхо для небольших некомерческих поделок
И сколько по времени ваш 1 дизайнер будет вносить каждое изменение в спагеттикоде на plain js, для всяких а/б тестов и прочего?
Здравствуйте, Михaил, Вы писали:
М>И сколько по времени ваш 1 дизайнер будет вносить каждое изменение в спагеттикоде на plain js, для всяких а/б тестов и прочего?
откуда спагети код возьмется?
имхо DOM и ф-ии им манипулирующие компакты и быстры. Большую часть отображения делает не js а css и html для Мобил и ИНОГДА flash для десктопа
так что все компактно, структурировано и удобно для модификаций.
и не пишите чушь про какую-то реактивность
она есть из коробки в современном html+css+js
все работает очень очень быстро, в реальном времени (если НЕ использовать никакие фреймворки).
Не открывается. Казино до сих пор на флешах пишут, кстати? Если да, то причём тут JS?
P>и не пишите чушь про какую-то реактивность
Давайте так: что вы понимаете под реактивностью? Для меня, это когда одной строкой, @bind цепляется к какому нибудь data property, и все, что было прицеплено к этому property, меняется, обновляя ui. Как такое сделать на JS, без писанины всяких listener'ов/observer‘ов ? На Vue сие пишется за считанные секунды, и так же легко и быстро отлаживается.
P>она есть из коробки в современном html+css+js P>все работает очень очень быстро, в реальном времени (если НЕ использовать никакие фреймворки).
Vue работает быстро, настолько, что не замечал тормозов. Вам надо быстрее?
Здравствуйте, Михaил, Вы писали:
P>>и не пишите чушь про какую-то реактивность
М>Давайте так: что вы понимаете под реактивностью? Для меня, это когда одной строкой, @bind цепляется к какому нибудь data property, и все, что было прицеплено к этому property, меняется, обновляя ui. Как такое делается на JS, без писанины всяких listenerl’ов/observer‘ов ? Пишется за считанные секунды, и так же легко отлаживается.
P>>она есть из коробки в современном html+css+js P>>все работает очень очень быстро, в реальном времени (если НЕ использовать никакие фреймворки).
М>Vue работает быстро, настолько, не замечал тормозов.
Нашел результаты тестов (прямая ссылка на таблицу), вроде бы подтверждающие то, что популярные JavaScript-фреймворки по скорости операций с DOM в некоторых случаях мало чем уступают чистому JavaScript: JavaScript Frameworks, Performance Comparison – AJ Meyghani – Medium (см. таблицу DOM manipulation (ms) на один экран ниже заголовка Battle Against All-time Champion)
Допускаю, что бывают особые случаи вроде вышеупомянутых игр (хотя, по идее, для создания игр есть специфические JavaScript-фреймворки).
ты сам не смог догадать почему у тебя не открывается — подсказка, флэш не причем
P>>она есть из коробки в современном html+css+js P>>все работает очень очень быстро, в реальном времени (если НЕ использовать никакие фреймворки).
М>Vue работает быстро, настолько, что не замечал тормозов. Вам надо быстрее?
Здравствуйте, paradoks, Вы писали:
P>но когда надо чтобы быстро на слабых андроидах то они тормозят
А вот не надо играть в игры на слабых андроидах...
P.S. Помню, в каком-то докладе по оптимизации JavaScript-кода сказали, что на бюджетных мобильниках даже загрузка относительно «легкой» веб-страницы может занимать 10-15 секунд из-за того, что слишком долго парсится JavaScript. Какие уж там игры...
P.P.S. Ничего не имею против чистого JavaScript, но фреймворки, которые вызывают у вас смех, иногда заметно облегчают жизнь разработчика.
Здравствуйте, Lazytech, Вы писали:
L>Нашел результаты тестов (прямая ссылка на таблицу), вроде бы подтверждающие то, что популярные JavaScript-фреймворки по скорости операций с DOM в некоторых случаях мало чем уступают чистому JavaScript
А в некоторых случаях, судя по таблице, даже опережают, но как, Холмс?
Здравствуйте, Михaил, Вы писали:
М>Давайте так: что вы понимаете под реактивностью? Для меня, это когда одной строкой, @bind цепляется к какому нибудь data property, и все, что было прицеплено к этому property, меняется, обновляя ui. Как такое сделать на JS, без писанины всяких listener'ов/observer‘ов ? На Vue сие пишется за считанные секунды, и так же легко и быстро отлаживается.
Т.е. реактивность — это запись вида {{a+b}}, вместо написания функции и подключения ее в качестве обработчика к "а" и "b"? А я то все гадал, что значит "у <имя фреймворака> реактивность из коробки". А в чем проблема за секунды написать "addeventlistener"?
Здравствуйте, paradoks, Вы писали:
М>>Не открывается. Казино до сих пор на флешах пишут, кстати? Если да, то причём тут JS?
P>ты сам не смог догадать почему у тебя не открывается — подсказка, флэш не причем
Ну так поясни нормальным языком, пример чего ты тут попытался привести.
М>>Vue работает быстро, настолько, что не замечал тормозов. Вам надо быстрее?
P>чо поставил пару кнопок и круто-быстро, да?
Вроде того, выпадающие календари для выбора дат, drag and drop виджетов на страничке, и подобное.
Здравствуйте, Михaил, Вы писали:
М>>>Не открывается. Казино до сих пор на флешах пишут, кстати? Если да, то причём тут JS?
P>>ты сам не смог догадать почему у тебя не открывается — подсказка, флэш не причем
М>Ну так поясни нормальным языком, пример чего ты тут попытался привести.
