LINUX.ORG.RU

динамические web приложения на python без «npm run ...»

 , , , ,


0

4

Когда то лет 8 назад я фанател по php в связки с jquery и это покрывало все мои задачи, на данный момент для себя самого мне потребовалось написать веб приложение на python (flask) с динамическим интерфейсом (вкратце это drag and drop списки с изменяемым контентом в них и отправкой на сервер), решил попробовать react, понял что эта вся поделка не будет ограничиваться «flask run», куча мусора и всякие «npm run ...», начал понимать что jquery (наверное) уже устарел давно и озадачился вопросом о толковом использовании каких либо библиотек при создании динамических приложений без всратой nodejs.

Подскажите или направьте пожалуйста.

★★★

Ответ на: комментарий от gruy

и все же, спорный топик, он не ответил на вопрос, как писать на «нативе» без свистоперделок фронтендеров, я ужасно это не люблю, я не хочу делать «npm run dev && flask run» ))) Хотелось бы заниматься тем чем я занимался все это время - backend. С js нет вопросов, его я знаю от и до, но вопрос в том как это воспримет общественность после продакшена.

foozzi ★★★ ()
Последнее исправление: foozzi (всего исправлений: 2)
Ответ на: комментарий от foozzi

поэтому и задаю вопрос, появилось ли что то удобнее jquery для backend разработчиков (если нужно)

Да. Теперь всё, что ты делал на жквери, можно делать без него. Ванильно.

anonymous ()

https://habr.com/ru/company/mailru/blog/340922/

Эта статья помогла мне лучше понять мир современного JS. В двух словах: там не все так плохо.

P.S. Статье уже несколько лет, так что к современому JS-у она, наверное, уже отношения мало имеет. Но вдруг окажется полезной.

trex6 ★★★★★ ()

На сколько я понимаю (это далеко не моя специализация), сейчас выбор между js-фреймворками на фронтенде выглядит примерно следующим образом: react + примочки, angular2 (устаревшее говно, чуть лучше jquery), vuejs - примочки реакта из коробки, и не такой pure-fp, не требует изучения jsx (кто в теме поправьте), и Svelte (вообще хз что это). Все остальное либо легасит, включая jquery и angular, либо поделка совершенно без инфраструктуры. Поэтому, если тебе не нравится react, то выбор очевиден - vue или svetle.

P.S.: еще есть clojurescript, но опять же, на сколько я понял, там в основном обертки (более продвинутые конечно) над реактом. cast Nervous.

alienclaster ★★★ ()
Ответ на: комментарий от trex6

В двух словах: там не все так плохо.

Там всё ужасно. За пять лет развели столько бандлеров с трансляторами, что даже сишка с крестами нервно курят за углом.

anonymous ()
Ответ на: комментарий от alienclaster

Перед vue - бОльшая «развесистость», больше похоже на объектные модели десктопных UI. Но вообще, мне ,больше всего angular 1 нравился с его жёстким двусторонним биндингом. Но это сильно тормозило, если не следить за количеством привязок/событий.
react - это вообще библиотека, наследник jQuery имхо.

Shadow ★★★★★ ()
Последнее исправление: Shadow (всего исправлений: 1)

всякие «npm run …»,

Не в продакшне же (если ты, конечно, не юзаешь server-side rendering всего этого фронта). А на CI и локалхосте это можно вытерпеть.

x3al ★★★★★ ()
Ответ на: комментарий от foozzi

Поднять и слушать сокет или отправлять асинхронные запросы на ванильке ­— проще простого.

Вот первый попавшийся пример аякса:

var request = new XMLHttpRequest();
 
request.onreadystatechange = function() {
  if(request.readyState === 4) {
    consol.log('...');
    if(request.status === 200) { 
      consol.log('yay');
    } else {
      consol.log('nay');
    } 
  }
}
 
request.open('GET', 'whatever');

Вот примеры сокетов:
https://developer.mozilla.org/en-US/docs/Web/API/WebSockets_API/Writing_WebSocket_client_applications

И везде ноль зависимостей и ничего дополнительного вообще запускать не надо

Goury ★★★★★ ()
Последнее исправление: Goury (всего исправлений: 1)

Что-то задача лично мне не очень ясна, попробую уточнить.

Тебе нужно писать JavaScript, но ты не хочешь использовать NodeJS?

Если так, то зачем ты используешь NodeJS? На нём ведь куча инструментов написана, чтобы автоматизировать сборки и прочие вещи, а если ты хочешь писать к примеру всё в один файл огромной простынёй, то тебе и сборщики не нужны.

В общем, я не до конца понял, что ты хочешь.

serioja ()
Ответ на: комментарий от serioja

Именно не использование Nodejs, а к примеру:

var Example = {
    test: function(){

    }
}
Но в более удобном виде что-ли, за 8 лет то что то должно было похорошеть)
Не до конца просто понимаю рациональность использования react и прочего в минималистичном приложении
Кто то выше советовал vue.js, вот из всего перечисленного более заинтересовал.
Еще помню был такой ember.js, но хз как сейчас с ним обстоят дела

foozzi ★★★ ()
Последнее исправление: foozzi (всего исправлений: 1)
Ответ на: комментарий от trex6

Эта статья помогла мне лучше понять мир современного JS. В двух словах: там не все так плохо

Ровно до тех пор, пока ты не начинаешь разрабатывать фронт так, как написано в статье. Когда у тебя вебпак зависает со 100% загрузкой проца без малейшего писка и указания на какой-либо файл, потому что ты где-то не поставил скобочку. Когда после горячей перекомпиляции в браузере происходит черт знает что, и не понятно, то ли это баг в коде, то ли глючит вебпак. Когда и без того глючным инструментам разработчика хрома с картами отображения сорцов вообще срывает башню: отладчик отказывается ставить точки останова, или ставит их сразу пять штук куда попало, или отказывается проходить шагами по коду. Что? Вычисление выражений в отладчике? Они тебе были не нужны.

Казино с подбором версий пакетов в NPM — это вообще отдельный разговор. Как правило, разраб пакета тестит его ровно на одной версии зависимостей. А ты тестишь на остальных. Конечно, у пакетов есть описания зависимостей, но обычно они не идеальны, а иногда и вовсе некорректны.

Порой, зависимости пакета имеют такую версию, что она не совместима с версией пакета, требуемого другой либе. Тогда NPM сует конфликтную версию в папку с зависящим пакетом. Как, в общем-то, он изначально должен был делать с всеми пакетами и не выёживаться. «Проблема решена» — подумали вы? А вот вам фигушки. Отдельные пакеты написаны в стиле nodejs-only, потому их нужно транспилировать в правильном режиме и с подстановкой заглушек-прокладок для нода-специфичных модулей. И модуль «fs» — самый проблемный, для него нельзя сделать универсальную прокладку, потому под каждый пакет опции webpack/browserify пишутся отдельно. Когда же вы рискуете собрать это всё хозяйство в один проект, то выясняется, что у разных пакетов есть разные заглушки под fs, потому собрать их вместо просто не получится. К счастью, тот же pdfkit из репы NPM уже имеет предварительно собранную browserify версию со всеми-привсеми зависимостями. И это хорошее решение, если вас не смущает необходимость пользователю в итоге грузить в браузер 5 Мб ПОЖАТОГО жавоскрипта, и это в дополнение ко всем остальным зависимостям, которые вы натащили в проект.

В общем, NPM — это та еще помойка, которыя сделана для сервера, для Node.js, но на браузер она налазит как сова на глобус. Да, можно оправдать ее тем, что она нужна только для транспилятора и упаковщика. Но, к сожалению, транспилятор и упаковщик на Node.js получились дермовые. То ли у их авторов кривые руки, то ли это фундаментальная ущербность ноды — я склоняюсь к последнему, но у меня нет доказательств.

И не слушай истории про магическую траспиляцию для поддержки старых браузеров, потому что норм разметка начинается с flexbox-ов, которые весьма глюкавы в IE11, и примерно там же находится граница поддержки ES6:
https://caniuse.com/flexbox
https://caniuse.com/?search=es6
По этой причине ко фреймворкам с транспиляцией в ES5 также обязательно должны прилагаться стили с костылями под IE11 — а такое бабель уже делать не умеет.

Короче говоря: пиши на jQuery/Vanilla, пока требования твоего проекта тебе это позволяют, и будешь счастлив.

byko3y ★★★ ()
Ответ на: комментарий от alienclaster

каких либо библиотек при создании динамических приложений без всратой nodejs.

vue.js?

Ты знаешь, компиляция шаблонов компонентов в рантайме — это такое себе развлечение. Vue и так не особо быстрая.

byko3y ★★★ ()
Ответ на: комментарий от alienclaster

еще есть clojurescript, но опять же, на сколько я понял, там в основном обертки (более продвинутые конечно) над реактом

ClojureScript реализует FRP в первозданном виде. Единственный плюс его — это неизменяемые структуры данных с copy-on-write и вообще многоверсионностью. Правда, налазит это на имеющиеся решения на JS весьма сомнительно. Потому для «сделать по бырику вебсайтик» clojurescript ну вообще не годится.

byko3y ★★★ ()
Ответ на: комментарий от Shadow

Можешь в двух словах рассказать, в чем преимущества angual 11 vs vue3 / react? Svetle смотрел?

Перед vue - бОльшая «развесистость», больше похоже на объектные модели десктопных UI. Но вообще, мне ,больше всего angular 1 нравился с его жёстким двусторонним биндингом. Но это сильно тормозило, если не следить за количеством привязок/событий

Я писал в соседнем треде, что Angular находится в иной весовой категории, нежели React и Vue:
JS фреймворк для фронтэнда с минимальным погружением (комментарий)
Angular — это готовое решение, в котором уже всё есть. Под React и Vue нужны дополнительные либы, чтобы на них можно было писать интерфейсы, а не hello world-ы.

Если же смотреть на фундаментальный принцип формирования отношений данные-отображение, то старый Angular устарел, потому что сайты растут и полный опрос дерева после каждого обновления уже не прокатывает. Я не знаю, как в новых версиях, но в старых для обхода этой проблемы применяли заморозку компонентов, что приходилось делать руками — короче, лютый гемор. Впрочем, та же проблема есть и в реакте, и она так же вручную решается (shouldComponentUpdate).

react - это вообще библиотека, наследник jQuery имхо

Неа, совсем разные.

byko3y ★★★ ()
Ответ на: комментарий от alienclaster

Имею ввиду, что clojurescript зачастую используется с обортками над реактом - reagent, re-frame итд

Я понимаю, но я просто не раскрывал проблем ущербности классического FRP. Функциональная чистота вообще плохо натягивается на программу, вся суть которой заключается в работе с побочным эффектом.

Это не какая-то неотъемлимая проблема ClojureScript, как диалекта Лиспа, а скорее проблема конкретной реализации, которая пытается заскочить на тренд популярности React вместо того, чтобы пытаться следовать за последними разработками в этой сфере. Они же могли на макросах сделать отслеживание связей данных с отображением, за счет чего обновлять только изменившийся DOM — и получился бы передовой фреймворк. А так они идут за тухлым реактом.

byko3y ★★★ ()
Ответ на: комментарий от alienclaster

react, angular, vue

еще есть clojurescript

Это же просто отдельный язык, компилируемый в JS. Соответственно, там теоретически можно использовать все, что угодно, но лично мне на глаза попадались в основном надстройки над react — от тонкой обертки (reagent) до полноценного фреймворка (om, re-frame).

И такой подход мне нравится. Никакого велосипедизма ради велосипедизма.

Nervous ★★★★★ ()
Ответ на: комментарий от Nervous

еще есть clojurescript

Это же просто отдельный язык, компилируемый в JS. Соответственно, там теоретически можно использовать все, что угодно

Теоретически — да. Практически объекты и функции JS не являются родными сущностями CS, потому потребуют значительных телодвижений. Не говоря уже о выпадении из парадигмы неизменяемых структур данных.

byko3y ★★★ ()
Ответ на: комментарий от byko3y

о выпадении из парадигмы неизменяемых структур данных.

Ну вот реакт, видимо, минимально выпадает. Кстати, я слышал, что сljs + react быстрее, чем js + react. Как раз из-за immutable data structures с их супердешевым обнаружением изменений.

Nervous ★★★★★ ()
Последнее исправление: Nervous (всего исправлений: 1)
Ответ на: комментарий от Shadow

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

Владимир

anonymous ()
Ответ на: удаленный комментарий

Я аналитик, ранее - маркетолог-аналитик и сисадмин.
Соответственно, для себя мне нужны вещи типа django, odoo, pandas, датасатанизм и всё такое.
На php я закончил с bitrix.

Shadow ★★★★★ ()
Последнее исправление: Shadow (всего исправлений: 1)
Ответ на: комментарий от foozzi

В фрейморках без NodeJS делать нечего.

Я всё ещё не понимаю, чем тебе не угодил NodeJS или фреймворки?

Если у тебя достаточно времени и компетенции, просто бери JS и начинай писать код, в чём собственно проблема то? Все эти потуги вокруг NodeJS и фреймворков для того чтобы упростить разработку, создать структуру проекта, потом архитектуру какую-то(если это можно так назвать) и т.п. То есть весь код разбивается на части по каким-то принципам и потом обратно собирается в несколько выходных файлов. Ибо в самом JS всё ещё нет нормальной поддержки модулей (привет https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules ) и ещё есть разные проблемы.

Сам посуди, среда исполнения - браузер и разработчики языка или приложения, не могут контролировать среду исполнения, соответственно, вынуждены делать так, чтобы код работал «везде», а делать это вручную, ну я даже не знаю какой во всём этом смысл для программиста?

serioja ()
Ответ на: комментарий от alienclaster

Angular - хейтят сторонники React, коих очень много. А хейтят потому, что порог входа несоизмеримо высок по сравнению с React. Если посмотришь в github angular то увидишь, что жизнь там есть.

Суть снижения популярности очень проста - сейчас тенденция Вайти-в-Вайти и что при этом выбирают преподаватели курсов и студенты? Правильно! То что имеет максимально низкий порог входа.

Несомненно, у React есть определённые плюсы перед Angular, Vue, Ember, Svelte или каких-то других технологий, но есть и минусы, но всё затмевает его популярность.

serioja ()
Ответ на: комментарий от serioja

Основное из плюсов, как я понимаю, это virtual dom (он появился в последних версиях ангулара?), frp, свой «уличный» подход к шаблонам типа JSX. На этом, похоже, технические преимущества на первый взгляд заканчиваются. Но под реакт уже сформировано комньюнити, написаны либы и можно в него на clojurescript. Возможно, я что-то упустил.

alienclaster ★★★ ()
Ответ на: комментарий от alienclaster

Om, вроде, сдох

Может быть. Мне как-то re-frame больше зашел.

Но надо учитывать, что в кложурном мире темп изменений значительно ниже, чем в JS.

Nervous ★★★★★ ()
Последнее исправление: Nervous (всего исправлений: 1)
Ответ на: комментарий от alienclaster

Основное из плюсов, как я понимаю, virtual dom (он появился в последних версиях ангулара?)

Не нужен и не плюс.

frp

Докажи/

свой «уличный» подход к шаблонам типа JSX

Не плюс, а просто очередной язык шаблонов.

На этом, похоже, технические преимущества на первый взгляд заканчиваются

С технической стороны React — это сырая поделка.

Но под реакт уже сформировано комньюнити, написаны либы и можно в него на clojurescript

Вот. А остальное не важно.

byko3y ★★★ ()
Ответ на: комментарий от byko3y

virtual dom - производительность, frp - проще понимать, что происходит с состоянием. JSX - вкусовщина, у меня не сформировано однозначное мнение.

С технической стороны React — это сырая поделка.

Можешь подробнее рассказать? Сейчас надо писать проект небольшой с фронтендом, предположительно беру vue. Что с реактом не так?

alienclaster ★★★ ()
Ответ на: комментарий от alienclaster

Сравнивать React с Angular/Vue - бредовая затея. React - это библиотека для отрисовки компонентов, а Angular/Vue - это фреймворки. React - это чисто view, а если нужно что-то больше этого - обвешиваешься библиотеками. В Angular/Vue для этого уже есть готовые модули, встроенные во фреймворк. Насчёт того, что «с технической стороны React - это сырая поделка» - это голословное утверждение, потому что это достаточно зрелая библиотека. Но чтобы на React писать нормальный поддерживаемый код, нужны прямые руки просто и опыт. Взять доку и начать писать правильно не прокатит, потому что React - это не готовый инструмент, а лишь часть необходимого инструмента. Это как для разработки бэкенда взять Flask вместо Django или Slim вместо Laravel - будет то же самое, потому что потребуется обвешиваться кучей библиотек. А возьмёшь Django или Laravel - будет куча всего «из коробки». Кому-то нравится один подход, кому-то другой.

dimuska139 ★★ ()
Ответ на: комментарий от dimuska139

Сравнивать React с Angular/Vue - бредовая затея. React - это библиотека для отрисовки компонентов, а Angular/Vue - это фреймворки

Мы сравниваем react как фреймворк, то есть вместе с redux и так далее. В том числе reagent (clojurescript) + re-frame.

Это как для разработки бэкенда взять Flask вместо Django

Вроде как давно именно так и делают, берут flask и aiohttp вместо django, а в некоторых экосистемах (типа clojure) там никакого django и в помине нет - сам компонуешь себе фреймворк из отдельных не-(или слабо) связанных компонентов.

А возьмёшь Django или Laravel - будет куча всего «из коробки»

В современных реалиях - нужность такого подхода *очень* сомнительна. А django вообще хоть как-то юзабелен только в варианте django-rest-framework.

Кому-то нравится один подход, кому-то другой.

Если сделать что-то «по-быстрому», ты уже знаешь условный django и не напрягает его монструозноть, прибитость определенных решений гвоздями или отсуствие возможности подключить свои запчасти - то да, laravel и django вроде как неплохо. Но на мой взгляд это было «неплохо» лет 6-7 назад, но не в 2k20.

alienclaster ★★★ ()