LINUX.ORG.RU

JS фреймворк для фронтэнда с минимальным погружением

 , ,


3

5

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

Из поверхностного обзора веяний моды в этой области я узнал, что то, что я ищу, описывается термином single page application. В идеале, фреймворк должен взять на себя и визуальную составляющую, но если что, CSS я напишу сам.

Хочется сказать фреймворку: «Положи на DOM 4 кнопки, 2 списка, затем еще 3 кнопки. И пусть оно выглядит не совсем отвратительно.» Для каждого из элементов DOM прописать простенькую логику и повесить на события: сходи на сервер с таким запросом, из ответа возьми данные и замени контент там-то. Часть данных о состоянии для каждого элемента желательно хранить за пределами DOM, они нужны не пользователю, а чтобы составить правильное обращение к бэкэнду. Желательно иметь заготовки для чисто клиентских операций: сортировать список, фильтровать список и т.п.

На моем уровне знаний я бы сгенерировал DOM на стороне сервера, обмазал бы элементы коллбэками и для красоты взял бы CSS от Bootstrap. Но (а) это долго и скучно, (б) в результате получится хрупко и плохо читаемо, (в) я никуда не спешу и поэтому хочу сделать хорошо.

Обзор хелловорлдов для фреймворков из списка «Топ 10 баззвордов чтобы зашибать деньги на фрилансе» показал, что кашу они там заварили знатную, и вот это коричневое в ней - вряд ли шоколад. Поэтому прошу совета, с каким из фреймворков приятнее иметь дело для краткого и довольно дилетантского знакомства?

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

Так это не фронт виноват, а сроки и менеджмент в проекте.

Если процесс поставлен нормально - в продакшн идет билд, где все работает.

А вот когда спринты, прыжки между задач, приоритеты скачут, тебя дергают между 2-3 проектами, то конечно, какой процесс - такой и результат.

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

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

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

А кто там у нас писал, что на реакте всё быстро пишется? Хотя, да, все-таки основная причина — это падение уровня исполнителей, а там уже нет разницы, будь то криво сверстаная страница на чистом HTML+CSS, будь то динамика на React.

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

Не всегда. Магазин может решить, что онлайн ему торговать на своей площадке не обязательно и отдавать xml-фиды на другие торговые площадки. Соответственно, поиск и т.п. не особо нужны.

В нормальных магазинах, согласен, нет разницы какая технология и разнесен ли бэк и фронт, делается и поиск, и корзина, и личный кабинет, и т.п. Движки, вроде elasticsearch или sphinx они в любом случае на бэке. Отсутствие корзины или поиска это не проблема современного веба, а скорее потребность/непотребность (исходя из экономической выгоды) самого магазина. Ну или «легкий старт» на первое время.

P.S. Всем привет, похоже :) Сила есть, воля есть, силы воли - нет. Не, надо перерыв от форума, а то тут какая-то жопа у вас.

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

Согласен. Да, от сроков, которые порой ставят, React не спасет. Особенно когда бывали случаи, что фича сделана сегодня, а завтра уже сдача. Никакого буфера на потестить.

Время на unit-тестирование хотя бы тоже никто не закладывает.

Вот и получается: Катим в продакшн не пойми, что.

Судя по Cyberpunk 2077 такая тенденция много где. Катим багованное говно. Главное выложить, а там потом разберемся

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

Ничего не жопа, я вообще веселюсь, общаюсь, все норм.

Надел очки с фильтром троллинга и прочего негатива и нормально :)

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

Катим багованное говно. Главное выложить, а там потом разберемся

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

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

А когда решение выпускает «Васян», такой уверенности нет.

Вообще то я Вован, а не Васян.

Владимир

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

Потому столько людей пишут на C++, а не на простом Си, и еще более простом ассемблере.

Вот ты вроде иногда правильно пишешь, а иногда такую уйню, что тебя и читать больше не хочется. Ты уж выбери.

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

Большая часть jQuery уже находится в составе ES6, потому jQuery и отправлена на покой.

А так умеет

$('#demo').val(value);

вместо унылого

document.getElementById("demo").innerHTML = value;

Или заполнять dropdown list по-человечески, а не по-убогому? Сотни и сотни примеров тебе в тачку. Вот пока js является гогном, которое написали гогноеды, оно и будет гогном для гогноедов ;)

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

Хуже вебарей только «учёные», которым нравится матлаб.

И python.

Ты сделал мой день :)

Я, кстати, такого «ученого» знаю. Выступает на конфах и вообще «светлая голова науки». И нет, не в рашке, а таки в европах. Веду пристальные наблюдения за его карьерой и вытераю фейспалмы спиртовыми салфетками. И плакать хочется и смеяться. И с уеб-погромистов и с «ученых».

Найди себе НОРМАЛЬНУЮ работу, web-макака, не позорься.

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

Да он в другом месте топит за jquery. Странный чувак. Сам же и приводил пруфы, что большинство сайтов продолжают использовать jquery. Почему нужно записываться в меньшинства неясно. Хейт jquery это самое странное явление в вебне. Маленькая либа, которая реально облегчает жизнь здесь и сейчас. Можно наговнокодить с ней, ну да. А на ванили нельзя что ли? Или на том же реакте. Умиляют конечно макаки жаждущие волшебного фреймворка, который докинет им мозгов и выпрямит руки.

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

Хуже вебарей только «учёные», которым нравится матлаб.

Я, в некотором роде, ученый, но с матлабом не знаком, увы мне.

Владимир

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

Но ведь реакт сам по себе ничего не умеет кроме управления DOM и событиями. Для красивого оформления нужно еще что-то, типа material-ui или обертки над bootstrap

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

У тебя же не эквивалетные коды, мань. В первом случае на жквери ты устанавливаешь свойство value элементу, во втором, ты ему innerHTML меняешь. Если ты даже этого не понимаешь, то куда ты лезешь?

Ну и да, на js, твой пример выглядит вот так

 Object.assign( demo, { value } )
anonymous
()
Ответ на: комментарий от anonymous

маня, маня, твой пример выглядит вот так {{{{ говно говно говно говано вагина }}}},, !@#$%^& ятиперьвзрослый возмитеминя впрограмираваниее нупажалустаааа явыучил дадада}} !@#$ уу

язнаю DOOM язнаю reaaact ууааа

тьфу!

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

А так умеет

$('#demo').val(value);

вместо унылого

document.getElementById(«demo»).innerHTML = value;

Я так понимаю, что на PHP бэкэнде запросы к БД ты тоже делаешь через конкатенцию строк.

Или заполнять dropdown list по-человечески, а не по-убогому?

var select = document.createElement("select");
for (var key in fruits) {
  var fruit = fruits[key];
  select.options[select.options.length] = new Option(fruit.Description, fruit.id);
}

Куда еще понятнее?

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

Хейт jquery это самое странное явление в вебне. Маленькая либа, которая реально облегчает жизнь здесь и сейчас

При чем тут хейт? Вы предлагаете использовать устаревший инструмент, я отвечаю, что он устарел. Ну он же устарел? Устарел. Да, на нем можно писать сайты. Но не нужно.

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

Не нервничай так. В бизнесе довольно частая ситуация, когда заказчик хочет сдвинуть сроки под какое-то событие, акцию, праздник… И зарелизить требуется почти «прям сейчас». На тесты времени, естественно, не остается. Код тоже не самый лучший получается, пишется на скорую руку. Пошла прибыль - требование расширить функционал, тесты и привидение кода в порядок откладывается. Подобные дедлайны случаются у всех, это тебе не свой pet-project писать на коленке, когда захочется.

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

Маленькая либа, которая реально облегчает жизнь здесь и сейчас.

И реакт и вью весят меньше жквери, например, а упрощают жизнь куда сильнее.

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

В бизнесе довольно частая ситуация, когда заказчик хочет сдвинуть сроки под какое-то событие, акцию, праздник… И зарелизить требуется почти «прям сейчас». На тесты времени, естественно, не остается. Код тоже не самый лучший получается, пишется на скорую руку. Пошла прибыль - требование расширить функционал, тесты и привидение кода в порядок откладывается. Подобные дедлайны случаются у всех

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

Как правило, картина, которую ты описываешь, является следствием непонимания заказчиком принципа технического долг, который спустя некоторое время подобной разработки либо похоронит систему заказчика, либо прибыль будет достаточно велика, чтобы просто завалить систему костылями и надеяться, что она не развалится и стоимость ее поддержки не съест всю прибыль. Вот у Slack и Uber, например, стоимость поддержки системы съедает прибыль и оборачивается стабильными убытками.

Как правило, это является следствием некомпетентности заказчика — а таких заказчиков большинство, что уж тут скрывать. Почему мне и не нравится коммерческое программирование. Если же заказчик оказывается минимально адекватным, то получается какой-нибудь CloudFlare, или Яндекс, или Гугл.

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

Я в таких случаях всегда объясняю последствия. Лучше обождать пару дней и сделать по-человечески, чем потом расхлебывать не пойми сколько времени.

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

И реакт и вью весят меньше жквери, например, а упрощают жизнь куда сильнее

А отстствие библиотек весит еще меньше, и упрощает жизнь на маленьких проектах еще сильнее.

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

А есть что нибудь для таблиц, кроме вот этого не «старья»? По функционалу datatables?

https://quasar.dev/vue-components/table

Подобных решений много, но они, как и databables, годятся только для достаточно банальных решений. Для чего-то более сложного есть продвинутые таблички на чистом JS, в том числе коммерческие: ag-Grid, AnyGrids, Backgrid. Их такими делают для того, чтобы можно было долго их разрабатывать, не парясь, какой там фреймворк стал популярным за последние два года.

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

упрощает жизнь на маленьких проектах еще сильнее. Только в слусае прямых рук разработчика, при наличии которых и на проектах среднего размера 3rd-party dependicies не нужны. Вот только ты либо не знаешь, либо не уситываешь, что 95% людей идиоты и разрботчики в том числе, либо живешь в вымышленном мире.

Залача программирования не красивый код писать, а решать проблемы прелметной области. И вопрос эффективности этого решения вовсе не в качестве, а в стоимости и сроках.

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

Вы предлагаете использовать устаревший инструмент

Ты как тот эксперт из баяна? Но нет, я верю, ты не такой. Но большинство именно такие.

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

Вот только ты либо не знаешь, либо не уситываешь, что 95% людей идиоты и разрботчики в том числе, либо живешь в вымышленном мире

Серьезно?

www.linux.org.ru/search.jsp?q=95%&range=ALL&interval=ALL&user=byk...

Залача программирования не красивый код писать, а решать проблемы прелметной области. И вопрос эффективности этого решения вовсе не в качестве, а в стоимости и сроках

Ну вот у нас наняли индусов за еду, они уже пролюбили все сроки сдачи, которые только можно, и никакой React им не помог. Им гришь «у нас тут статичная страница, тут даже JS почти не нужно», а они тебе «ну как же, React — это надежно, быстро, расширяемо, переиспользуемо». Справедливости ради, научиться писать на JS для браузера реальные проекты не так просто, как научиться писать hello world и говнокод на JS. Впрочем, не менее сложно писать SSR на React/Vue/Svelte, чтобы это потом работало и на no-JS, и просто сразу грузилось у тех, у кого JS есть, и были ссылки нормальные на страницы.

Ну и что теперь, брать вообще кого попало на позицию разработчика? Если чел умеет хорошо писать на jQuery, но не может отбить дупля в реакте — хорошо, пусть пишет на jQuery. Правда, я хотел бы посмотреть на такого кодера, который бы сказал, что божит на jQuery, а современный ванильный JS его не устраивает. Обычно это все-таки необучаемый человек, который за пять лет не смог осилить ни одной новой технологии.

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

Ты как тот эксперт из баяна? Но нет, я верю, ты не такой. Но большинство именно такие

Чел отвратительно пишет, так диалоги между живыми мартышками не строятся. Он как бы подбрасывает сам себе фразу и сам ее ловит — это до неприятности заметно. Что он пытался показать таким образом — я так и не понял. Что много молодых технологий в JS? Это описано настолько гротескно, что даже не понятно: то ли он удивляет новыми технологиями, то ли аля reverse psychology пытается убедить в обратном. Я не согласен ни с одной из этих крайних позиций. ES2015 и новые фичи CSS, вроде Flexbox и Grid Layout — это огромный шаг вперед, поскольку до них фронтендеры харкали кровью. И именно потому сечас возникло заметно больше пространства для того, чтобы не использовать ни jQuery, ни React, а писать минимальное число динамики на ванильном JS, при необходимости транспилируя это дело в ES5-крипоту.

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

Там в гротескной форме описана вся суть фронтенда: хочешь показать данные в табличке, а тебе предлагают разгребать десяток слоев баззвордов. Потому что «сейчас все так носят». А через пару лет уже комок новых баззвордов слепили. Это очень далеко от инженерии, а больше похоже на мир высокой моды.

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

Правда, я хотел бы посмотреть на такого кодера, который бы сказал, что божит на jQuery, а современный ванильный JS его не устраивает

Вы задолбали с предпосылкой, что все работают с чистого листа. Если у тебя уже этого жопоквери полные штаны, сфигали ли его и дальше не использовать? В совершенно новом проекте может и не стоит. Но опять же, начнутся головняки с совместимостью, полезут из всех щелей транспиляторы и прочий бред. И жоквери-плагины еще чем-то нужно будет заменять. Короче, никакого профита я не вижу. К тому же ванильку тебе никто не разрешит, а скорее всего впендюрят реакт (еще может и поверх существующего кода с жоквери, что вообще треш и угар).

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

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

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

Когда тебе нужно просто коснуться поверхности, то ты просто качаешь NPM, и запускаешь:

npx create-react-app helloworld
cd helloworld
npm start

Всё, ты у мамки — фронтенд разработчик реакта.

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

Вы задолбали с предпосылкой, что все работают с чистого листа. Если у тебя уже этого жопоквери полные штаны, сфигали ли его и дальше не использовать?

Пф-ф-ф, если проект уже написан — о чем тут говорить? Это React и Vue плохо взаимодействует с другими фреймворками, а ванильному JS, jQuery, и даже Svelte как-то пофик вообще. Удивительно, но в проекте на jQuery можно применять ванильный JS — вот так сюрприз.

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

За «просто показать данные в табличке» нужно было начинать убивать ещё во времена, когда это делалось на настольных тулкитах. В подавлющем большинстве случаев ТЗ по этим табличкам будет содержать всё, что умеют таблицы в отчётах яндекс метрики как минимум.

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

Кого именно убивать? Манагеров, заказчиков или макак? Я предлагаю сначала макак, которые колупаются по полгода со списками товаров и т.п. И оно потом нихера не работает как надо. А потом и манагеров, благодаря которым макаки потратили всё время на изучение и разгребание инфраструктуры и архитектуры.

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

Это не JavaScript говно, это DOM API так спроектирован и реализован. jQuery сотоварищи дают альтернативный интерфейс.

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

Это не JavaScript говно, это DOM API так спроектирован и реализован. jQuery сотоварищи дают альтернативный интерфейс

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

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

А я и не говорю, что DOM API плохо спроектирован. Я говорю, что JS тут ни при чём.

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

Речь шла о лаконичности и красоте jQuery. JS «устарел» куда сильнее чем jquery

Где лаконичность, где красота? В выборке на каждый чих элементов по CSS селекторам? Если ты вычеркиваешь эту «красоту», то что остается от jQuery?

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

Я тебе пример привел и таких примеров десятки. Зачем что-то вычеркивать? Я по-этому jQuery и пользую вместо ванильного js. Оно красивее и лаконичнее.

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

Скорее всего ты просто не знаешь ванильного жс и вебапи в должной мере. Остался там в 2005 и больше не развивался, утенок. Жквери отвратителен в сравнении с чистым жс в 2021.

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

Я тебе пример привел и таких примеров десятки. Зачем что-то вычеркивать? Я по-этому jQuery и пользую вместо ванильного js. Оно красивее и лаконичнее

Если не считать тех двух однострочников, которые делают разные вещи и потому несопоставимы — я не видел никаких примернов от тебя. Заполнение select-а на jQuery выглядит плюс-минус так же:

var $dropdown = $("#dropdown");
$.each(result, function() {
    $dropdown.append($("<option />").val(this.ImageFolderID).text(this.Name));
});

Конечно, если не считать необходимости парсить щитимэле в цикле. А если считать, то код на jQuery — говно.

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

Повторяю вопрос в другой форме: покажите мне плохо спроектированный DOM API

У меня только одна хоть сколько-нибудь серьёзная даже не претензия, а «хотелка» к DOM API: было бы удобно, если б NodeList, DOMTokenList и прочие *List кроме forEach() давали map, filter и reduce, а то приходится порой прототипы патчить. Да и forEach-то не все дают…

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

У меня только одна хоть сколько-нибудь серьёзная даже не претензия, а «хотелка» к DOM API: было бы удобно, если б NodeList, DOMTokenList и прочие *List кроме forEach() давали map, filter и reduce, а то приходится порой прототипы патчить. Да и forEach-то не все дают

Ваше желание исполнено:

for (const item of document.querySelectorAll('div')) {
    if (item.textContent) console.log(item);
}
[...document.querySelectorAll('div')].filter(item => item.textContent).forEach(item => console.log(item));
Array.from(document.querySelectorAll('div')).filter(item => item.textContent).forEach(item => console.log(item));
byko3y ★★★★
()
Ответ на: комментарий от anonymous

Пока так никто и не сказал чем заменять жоквери плагины. Лисапедами? А так трындеть за ванильку все горазды.

anonymous
()
Вы не можете добавлять комментарии в эту тему. Тема перемещена в архив.