Lancer.Rev.X

Пользователь

Регистрация: 07.12.2014

Сообщения: 4228

Рейтинг: 2246

Lancer.Rev.X

Регистрация: 07.12.2014

Сообщения: 4228

Рейтинг: 2246

img

пишу веб приложение, выбрал vue в качестве своего первого фреймворка, так как решил, что он самый простой, в будущем все равно планирую хотя бы поверхностно ознакомиться со всеми крупными фреймворками.


пишу код в редакторе visual studio code.


насколько я понял, он не поддерживает автодополнение и подсказки, если просто подключать библиотеку через HTML (script src), поэтому я установил vue с помощью npm.


Далее я выяснил, что нужно использовать специальный упаковщик, чтобы подключить библиотеку, установленную с помощью npm, в скрипт для браузера.


я опробовал webpack и browserify, мне они не понравились, поскольку я не смог из консоли браузера получить доступ к переменным из своего скрипта, а именно это предлагалось сделать в документации по vue, чтобы изменить данные и посмотреть на его реактивность. но судя по всему выбор здесь невелик.


вопрос: так ли работают серьезные люди (frontend разработчики)? или вы используете какие то другие технологии для разработки? можете дать какой нибудь совет для начинающего frontend developer'а?


еще вопрос: что вы используете в настоящих проектах: fetch api или XmlHttpRequest? Про fetch api я прочитал, что там куча всего недоступно, да еще и куки по дефолту не отправляются, для них нужно вписывать лишнюю опцию, есть ли смысл его использовать?

Siller__

Пользователь

Регистрация: 31.10.2014

Сообщения: 1484

Рейтинг: 468

Siller__

Регистрация: 31.10.2014

Сообщения: 1484

Рейтинг: 468

Lancer.Rev.X сказал(а):

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

Нажмите, чтобы раскрыть...

к каким именно? которые в "data" расположены?

Lancer.Rev.X

Пользователь

Регистрация: 07.12.2014

Сообщения: 4228

Рейтинг: 2246

Lancer.Rev.X

Регистрация: 07.12.2014

Сообщения: 4228

Рейтинг: 2246

img
Siller__ сказал(а):

к каким именно? которые в "data" расположены?

Нажмите, чтобы раскрыть...

там в документации самый первый пример - это блок с сообщением message, привязанным к экземпляру Vue app, предлагается в браузере поменять app.message, чтобы пронаблюдать, как сообщение на странице сразу изменится. я не смог получить доступ вообще ни к каким переменным, они все оказались неопределены, видимо, такая специфика работы упаковщика.

Siller__

Пользователь

Регистрация: 31.10.2014

Сообщения: 1484

Рейтинг: 468

Siller__

Регистрация: 31.10.2014

Сообщения: 1484

Рейтинг: 468

Lancer.Rev.X сказал(а):

там в документации самый первый пример - это блок с сообщением message, привязанным к экземпляру Vue app, предлагается в браузере поменять app.message, чтобы пронаблюдать, как сообщение на странице сразу изменится

Нажмите, чтобы раскрыть...

и как ты хочешь вывести в консоль "данные"?
они ж "сокрыты"

можешь получить(как пример) через методы жизненного цикла например:


updated() {
console.log(this.message);
}


upd: а, понял
скинь свой код/залей его хоть куда-нибудь, а то так тяжко понять

Lancer.Rev.X

Пользователь

Регистрация: 07.12.2014

Сообщения: 4228

Рейтинг: 2246

Lancer.Rev.X

Регистрация: 07.12.2014

Сообщения: 4228

Рейтинг: 2246

img
Siller__ сказал(а):

и как ты хочешь вывести в консоль "данные"?
они ж "сокрыты"

можешь получить(как пример) через методы жизненного цикла например:


updated() {
console.log(this.message);
}


upd: а, ну эт пример без изменения данных


короче, что ты именно хочешь понять?

Нажмите, чтобы раскрыть...

да я по упаковщикам уже все проверил, если просто в скрипте объявить переменную, то она через консоль браузера доступна, а если скомпилировать этот скрипт с помощью browserfy, то недоступна, поэтому я про них не спрашиваю

Jaood

Пользователь

Регистрация: 09.09.2019

Сообщения: 3399

Рейтинг: 2051

Jaood

Регистрация: 09.09.2019

Сообщения: 3399

Рейтинг: 2051

Lancer.Rev.X сказал(а):

а если скомпилировать этот скрипт с помощью browserfy

Нажмите, чтобы раскрыть...

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

Lancer.Rev.X

Пользователь

Регистрация: 07.12.2014

Сообщения: 4228

Рейтинг: 2246

Lancer.Rev.X

Регистрация: 07.12.2014

Сообщения: 4228

Рейтинг: 2246

img
Siller__ сказал(а):

скинь свой код/залей его хоть куда-нибудь, а то так тяжко понять
Нажмите, чтобы раскрыть...
Спойлер: "без упаковщика"
Спойлер: "с упаковщиком"

вот

Siller__

Пользователь

Регистрация: 31.10.2014

Сообщения: 1484

Рейтинг: 468

Siller__

Регистрация: 31.10.2014

Сообщения: 1484

Рейтинг: 468

Jaood сказал(а):

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

Нажмите, чтобы раскрыть...

тут немного другая тема

Jaood

Пользователь

Регистрация: 09.09.2019

Сообщения: 3399

Рейтинг: 2051

Jaood

Регистрация: 09.09.2019

Сообщения: 3399

Рейтинг: 2051

Siller__ сказал(а):

тут немного другая тема

Нажмите, чтобы раскрыть...

Если я не ошибаюсь, упаковщики при компиляции меняют имена переменных на максимально короткие вроде a,b,c,d

Siller__

Пользователь

Регистрация: 31.10.2014

Сообщения: 1484

Рейтинг: 468

Siller__

Регистрация: 31.10.2014

Сообщения: 1484

Рейтинг: 468

Lancer.Rev.X сказал(а):
Спойлер: "без упаковщика"
Спойлер: "с упаковщиком"

вот

Нажмите, чтобы раскрыть...

хорошо
а теперь смотри:
в своем первом примере напиши код вот так:


(function () {
let variable = "hello";
})();

и попробуй достать значение "variable"
иииии... ты его не получишь т.к. IIFE)
примерно по такому же принципу работает сборщик


Jaood сказал(а):

Если я не ошибаюсь, упаковщики при компиляции меняют имена переменных на максимально короткие вроде a,b,c,d

Нажмите, чтобы раскрыть...

не, тут другой случай
пояснил выше

Jaood

Пользователь

Регистрация: 09.09.2019

Сообщения: 3399

Рейтинг: 2051

Jaood

Регистрация: 09.09.2019

Сообщения: 3399

Рейтинг: 2051

Siller__ сказал(а):

хорошо
а теперь смотри:
в своем первом примере напиши код вот так:


(function () {
let variable = "hello";
})();

и попробуй достать значение "variable"
иииии... ты его не получишь т.к. IIFE)
примерно по такому же принципу работает сборщик


не, тут другой случай
пояснил выше

Нажмите, чтобы раскрыть...

Понял, значит таки дело было просто в области видимости

Siller__

Пользователь

Регистрация: 31.10.2014

Сообщения: 1484

Рейтинг: 468

Siller__

Регистрация: 31.10.2014

Сообщения: 1484

Рейтинг: 468

Jaood сказал(а):

Понял, значит таки дело было просто в области видимости

Нажмите, чтобы раскрыть...

тип тогоnate.gif

Lancer.Rev.X

Пользователь

Регистрация: 07.12.2014

Сообщения: 4228

Рейтинг: 2246

Lancer.Rev.X

Регистрация: 07.12.2014

Сообщения: 4228

Рейтинг: 2246

img
Поднятие темы

Шрек 2

Пользователь

Регистрация: 24.03.2018

Сообщения: 4173

Рейтинг: 2269

Шрек 2

Регистрация: 24.03.2018

Сообщения: 4173

Рейтинг: 2269

Чел, не позорься, хватит создавать подобные высеры, на них все уже давно ответили

Siller__

Пользователь

Регистрация: 31.10.2014

Сообщения: 1484

Рейтинг: 468

Siller__

Регистрация: 31.10.2014

Сообщения: 1484

Рейтинг: 468

Шрек 2 сказал(а):

Чел, не позорься, хватит создавать подобные высеры, на них все уже давно ответили

Нажмите, чтобы раскрыть...

Та хрен с ним - пусть спрашивает)

это и то лучше чем «как вкатицца в айти», а хоть какие-то мало-мальские "прикладные" вопросы

а если ты пригорел с апа темы то он, как мне кажется, случайно нажал

Lancer.Rev.X

Пользователь

Регистрация: 07.12.2014

Сообщения: 4228

Рейтинг: 2246

Lancer.Rev.X

Регистрация: 07.12.2014

Сообщения: 4228

Рейтинг: 2246

img
Siller__ сказал(а):

случайно нажал

Нажмите, чтобы раскрыть...

я там вопросик добавил про fetch api

Siller__

Пользователь

Регистрация: 31.10.2014

Сообщения: 1484

Рейтинг: 468

Siller__

Регистрация: 31.10.2014

Сообщения: 1484

Рейтинг: 468

Lancer.Rev.X сказал(а):

еще вопрос: что вы используете в настоящих проектах: fetch api или XmlHttpRequest? Про fetch api я прочитал, что там куча всего недоступно, да еще и куки по дефолту не отправляются, для них нужно вписывать лишнюю опцию, есть ли смысл его использовать?

Последнее редактирование: 1 янв 1970 в 03:00
Нажмите, чтобы раскрыть...
Нажмите, чтобы раскрыть...

для общего понимания желательно знать как работает XHR, но в реальных проектах используется fetch API(либо библиотека axios)
XHR не удобен, но т.к. часто нужна поддержка старых браузеров(а фетч - это современные фичи языка) приходится использовать "транспайлеры" из нового стандарта языка ECMAScript в старый(просто перегоняет, условные, let и const в var, стрелочные ф-ции в обычные function и тд и тп). Самый часто используемый инструмент(если не единственный, в тему не углублялся поэтому не могу говорить наверняка) - Babel.

в следующий раз лучше не апай тему, а сразу пиши новое сообщение, ибо хрен поймешь)

Dr.Geologist

Пользователь

Регистрация: 21.12.2015

Сообщения: 1181

Рейтинг: 773

Dr.Geologist

Регистрация: 21.12.2015

Сообщения: 1181

Рейтинг: 773

img
Lancer.Rev.X сказал(а):

пишу веб приложение, выбрал vue в качестве своего первого фреймворка, так как решил, что он самый простой, в будущем все равно планирую хотя бы поверхностно ознакомиться со всеми крупными фреймворками.


пишу код в редакторе visual studio code.


насколько я понял, он не поддерживает автодополнение и подсказки, если просто подключать библиотеку через HTML (script src), поэтому я установил vue с помощью npm.


Далее я выяснил, что нужно использовать специальный упаковщик, чтобы подключить библиотеку, установленную с помощью npm, в скрипт для браузера.


я опробовал webpack и browserify, мне они не понравились, поскольку я не смог из консоли браузера получить доступ к переменным из своего скрипта, а именно это предлагалось сделать в документации по vue, чтобы изменить данные и посмотреть на его реактивность. но судя по всему выбор здесь невелик.


вопрос: так ли работают серьезные люди (frontend разработчики)? или вы используете какие то другие технологии для разработки? можете дать какой нибудь совет для начинающего frontend developer'а?


еще вопрос: что вы используете в настоящих проектах: fetch api или XmlHttpRequest? Про fetch api я прочитал, что там куча всего недоступно, да еще и куки по дефолту не отправляются, для них нужно вписывать лишнюю опцию, есть ли смысл его использовать?

Нажмите, чтобы раскрыть...

а ты думал откуда шутки про node modules. Ты еще про линтеры, спелчекеры, тест раннеры и еще кучу всего забыл.

Vadteaz

Пользователь

Регистрация: 28.03.2015

Сообщения: 234

Рейтинг: 209

Vadteaz

Регистрация: 28.03.2015

Сообщения: 234

Рейтинг: 209

Lancer.Rev.X сказал(а):

пишу веб приложение, выбрал vue в качестве своего первого фреймворка, так как решил, что он самый простой, в будущем все равно планирую хотя бы поверхностно ознакомиться со всеми крупными фреймворками.


пишу код в редакторе visual studio code.


насколько я понял, он не поддерживает автодополнение и подсказки, если просто подключать библиотеку через HTML (script src), поэтому я установил vue с помощью npm.


Далее я выяснил, что нужно использовать специальный упаковщик, чтобы подключить библиотеку, установленную с помощью npm, в скрипт для браузера.


я опробовал webpack и browserify, мне они не понравились, поскольку я не смог из консоли браузера получить доступ к переменным из своего скрипта, а именно это предлагалось сделать в документации по vue, чтобы изменить данные и посмотреть на его реактивность. но судя по всему выбор здесь невелик.


вопрос: так ли работают серьезные люди (frontend разработчики)? или вы используете какие то другие технологии для разработки? можете дать какой нибудь совет для начинающего frontend developer'а?


еще вопрос: что вы используете в настоящих проектах: fetch api или XmlHttpRequest? Про fetch api я прочитал, что там куча всего недоступно, да еще и куки по дефолту не отправляются, для них нужно вписывать лишнюю опцию, есть ли смысл его использовать?

Нажмите, чтобы раскрыть...

Авиодополнение есть же и подсказки вроде,как тоже.Посмотри в магазине плагинов,там много всяких ништяков

Siller__

Пользователь

Регистрация: 31.10.2014

Сообщения: 1484

Рейтинг: 468

Siller__

Регистрация: 31.10.2014

Сообщения: 1484

Рейтинг: 468

Dr.Geologist сказал(а):

а ты думал откуда шутки про node modules. Ты еще про линтеры, спелчекеры, тест раннеры и еще кучу всего забыл.

Нажмите, чтобы раскрыть...

пробел поставь, а то не все тут знают что такое линтеры
да и в питоне же тоже самое, разве нет?

Lancer.Rev.X

Пользователь

Регистрация: 07.12.2014

Сообщения: 4228

Рейтинг: 2246

Lancer.Rev.X

Регистрация: 07.12.2014

Сообщения: 4228

Рейтинг: 2246

img
Siller__ сказал(а):

пробел поставь, а то не все тут знают что такое линтеры
да и в питоне же тоже самое, разве нет?

Нажмите, чтобы раскрыть...

по крайней мере в pycharm анализатор работает из коробки

Dr.Geologist

Пользователь

Регистрация: 21.12.2015

Сообщения: 1181

Рейтинг: 773

Dr.Geologist

Регистрация: 21.12.2015

Сообщения: 1181

Рейтинг: 773

img
Siller__ сказал(а):

пробел поставь, а то не все тут знают что такое линтеры
да и в питоне же тоже самое, разве нет?

Нажмите, чтобы раскрыть...

Спасибо, поправил.

Да, так же, промышленный стандарт же


Lancer.Rev.X сказал(а):

по крайней мере в pycharm анализатор работает из коробки

Нажмите, чтобы раскрыть...

Не все работают в пайчарме, плюс нужно все это встраивать в ci чтобы перепроверять за разрабами