LINUX.ORG.RU

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

 , , ,


3

5

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

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

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

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

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

★★★

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

Зачем для этого фреймворк? Это делается тупо на изкоробочных ивентах + fetch. Ну можешь jQuery обмазаться, по-дидовски.

no-such-file ★★★★★ ()

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

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

Особенно это касается React, который делает реализацию большинства задач СЛОЖНЕЕ. Помешательство на React родило абсолютно нездоровый спрос на кодеров на React, поскольку поддерживать и модифицировать проект на React сложнее, чем на ванильном JS.

byko3y ★★★ ()

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

А фронт делается на html/css + jQuery + ajax вызовы. Можно еще пару библиотек взять для таблиц с их сортировками и фильтрами.

И все. Что еще надо? Какие нафик фреймворки? o_O

anonymous ()

https://vaadin.com/

Пиши всё на одном нормальном языке, будь мужиком.

Vaadin is the only framework that allows you to write UI 100% in Java without getting bogged down in JS, HTML, CSS, and other stupid shit.

А Web-макаки пусть дальше прыгают по фреймворкам аки тараканы по кухне пролетария.

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

https://ru.svelte.dev/tutorial/basics

Svelte v3 — это очень хороший фреймворк для SPA. Но есть большая проблема — под него почти нету готовых решений. То есть, в итоге ОП-у нужно будет писать свой компонент табличек или переписывать готовые полусырые решения,.. или брать табличку для jQuery/Vanilla и присобачивать ее к Svelte, что есть сама бессмысленность и беспощадность.

byko3y ★★★ ()
  • Положи на DOM 4 кнопки, 2 списка, затем еще 3 кнопки.
  • для каждого из элементов DOM прописать простенькую логику
  • события: сходи на сервер с таким запросом, из ответа возьми данные и замени контент там-то
  • данные о состоянии для каждого элемента желательно хранить за пределами DOM

Да, фреймворк не нужен. А ReactJS + Redux - самое то.

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

А фронт делается на html/css + jQuery + ajax вызовы.

21 век же: html/css + js + fetch/websockets

Для работы с DOM всё уже в чистом js есть.

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

Гвозди уже приготовил, да микроскоп подбираешь? Фреймворки нужны там, где много обновлений интерфейса, много кода, есть необходимость расширяться и во многих случаях, есть необходимость загнать дизайн-систему в компоненты. Ничего из этого не описывает твоё «простенькое веб-приложение».

то, что я ищу, описывается термином single page application

Судя по тому, что ты написал, вообще ни разу не SPA.

На моем уровне знаний я бы сгенерировал DOM на стороне сервера, обмазал бы элементы коллбэками и для красоты взял бы CSS от Bootstrap.

И так, не запариваясь, сделал бы то, что тебе нужно.

(а) это долго

Это не дольше, чем делать приложение на любом фреймворке.

(б) в результате получится хрупко и плохо читаемо

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

(в) я никуда не спешу

Тогда к чему вот это «долго»?

и поэтому хочу сделать хорошо

Ничто не мешает сделать хорошо на ванильном жс или жокваэри.

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

Успойкойся, клоун. Я предлагаю ТС ровно то, что он хочет.

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

@Route("hello")
public class HelloWorldView extends VerticalLayout {

  public HelloWorldView(@Autowired GreetService service) {
    Button button = new Button("Greet");
    button.addClickListener(e -> {
      log.info("click");
    });

    ListBox<String> list = new ListBox<>();
    list.setItems("Option one", "Option two", "Option three");
    list.setValue("Option one");

    add(list, button);
  }
}

И никакого Web-макакинга с HTML, CSS, JavaScript и прочим 💩 Зато из коробки сортировка списков/таблиц, фильтрация и т. д.

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

Особенно это касается React, который делает реализацию большинства задач СЛОЖНЕЕ

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

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

А я вообще не понимаю, зачем frontend фреймворки нужны. На бэкенде, там да, секурити, бд, всякие сложные штуки, которые сам не будешь делать, ибо баги и долго.
А фронт делается на html/css + jQuery + ajax вызовы. Можно еще пару библиотек взять для таблиц с их сортировками и фильтрами

Давай я тебе отвечу с другой стороны баррикады. Представь себе, на фронте тоже своя БД, в которой кэшируют ответы с сервера. Можно также кэшировать и в оперативной памяти.

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

Тогда ты захочешь сделать единый механизм хранения состояния и реакции на его изменение. Тогда ты получаешь ранние фреймворки с jQuery, но без Angular. Однако, без компилятора описание логики будет выглядеть по прежнему печально, потому что тебе нужно будет вручную подписываться на события, писать руками обновления DOM при изменении каждого параметра, что иногда будет разваливаться, потому что обновления из одной функции ломают селекторы в другой функции.

Тогда ты придешь к тому, к чему пришли создатели Angular/React — сделать центральный механизм обновления DOM, который не будет убивать сам себя по мере роста сложности. Но вот беда: описать грамотно всё что нужно для обновления состояния и DOM даже с простейшими компиляторами получается ни разу не просто и не читаемо.

После всех этих мытарств ты наконец понимаешь то же, что поняли создатели Ractive.js/Vue/Svelte — нужно применять достаточно сложную компиляцию, чтобы организованная работа с соcтоянием и рендер DOM описывались через чистые шаблоны и ясную логику, а не горы артефактов. Сами же выхлоп компилятора и вызовы рантайма будет скрыты от разраба большую часть времени, и кэширование ответов с сервера в единое хранилище в таких условиях делается просто и естественно.

Писать SPA на jQuery — это примерно как редактировать HTML регулярками. Да, прокатывает. Да, можно много чего сделать. Но чем сложнее твой HTML, чем сложнее твои правки, тем более невыносимой и неподъемной становится задача, тем чаще твое приложение разваливается в самых неожиданных местах. Но пару тэгов порезать на регулярках — самое оно, парсер на тьюринг-полном языке не обязателен.

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

write UI 100% in Java

Кончили ссаться — начинаем сраться

Справедливости ради, все-таки готовые решения в vaadin есть, и ими можно воспользоваться, получив связанны фронтэнд и бэкэнд. К сожалению, Java ставит это решение на грань адекватности, поскольку сама по себе вносит сложность в код сверх необходимого. Пока готовые решения в vaadin тебя устраивают — проблем нет. Как только либу нужно будет расширять — настанет время ее сливать или готовить вазелин.

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

Особенно это касается React, который делает реализацию большинства задач СЛОЖНЕЕ

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

Фронтэндеры получают больше не потому, что они выучили баззворды. Они получают больше, потому что современный браузер представляет собой десятки слоев обратной совместимости, в которых черты ногу сломает. Просто подобрать правильную HTML разметку с CSS стилями, которые будут хорошо отображаться на разных устройствах — это уже подвиг. Bootstrap стал путеводной звездой этого абсурда, поскольку средний фронтэндер таки не может сделать грамотную верстку, а поскольку задачу эту надо решать, то и возникло сообщество, полирующее готовые решения.

Как autotools, которое, казалось бы, решает элементарнейшую задачу запуска gcc main.c -o main, но огромные залежи обратных совместимостей и наследственных уродств Си раздувают решение до умопомрачитаельных размеров.

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

Ваадин это тормазнутое г…, стейт пользователя хранится на стороне сервера, фронт работает как тонкий клиент. Сколько такая вещь потянет пользователей?

На нем легко накидать прототип если прототип уложится в стандартные элементы, потому как свой виджет/расширение делать это нужно кучу усилий приложить в освоении vaadin и стать фронт девелопером, а потом придется женится на этом расширении.

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

+1. React - это как раз то, что ты хочешь. Здесь фреймворк не нужен. Возможно и Redux тебе не нужен

Лично в моих глазах твоя фраза выглядит как «возможно, МЧС вызывать не нужно. Достаточно ёршика и смыть».

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

Ваадин это тормазнутое г…, стейт пользователя хранится на стороне сервера, фронт работает как тонкий клиент. Сколько такая вещь потянет пользователей?

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

Вон, учись у Slack: 12 миллионов пользователей, 400 млн долларов расходов за 2019 год. То есть, 30 долларов в год на пользователя. А чо, сервера-то дешевые, каналы нынче широкие.

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

https://github.com/jorgebucaran/hyperapp

IMHO, дичь. Подойдет для «мама, я сделал», но прикладной ценности не имеет, когда Hello world занимается столько же трафика, сколько и либа, при этом исходник совершенно вырвиглазен. Есть полноценный реакт на 3 кб рантайма: https://preactjs.com/

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

React - это как раз то, что ты хочешь

Зачем мне реакт? Я пишу сайты вообще без жабаскрипта. Сайты летают просто, пока ты тут людей плохому учишь.

Владимир

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

Да как бы плевать на твой взгляд. ТС просил инструмент под конкретные цели. ReactJS полностью покрывает потребности ТС, достаточно быстрый, просто изучить, легкий синтаксис. Дает хорошую расширяемость и не создает избыточного оверхеда и т.д. Если нужен SSR - Next.js. Redux для простых задач не нужен. Тут вообще последнее время какой-то лютый тупняк от многозвездочников.

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

Он другой. И на данный момент хуже. Выигрыш в десяток миллисекунд и меньший размер bundle (или как это правильно назвать в случае Svelte?) не покрывает все его минусы.

Не груби мне

Да, как-то грубо написал. Прости, @byko3y.

Последнее время на форуме ответы на любой вопрос или «все говно и ненужно» или простыни на 10+ страниц вообще без ответа по делу. Может ReactJS и говно, как и весь современный фронт-энд, но для определенной задачи (по условию ТС, например) - лучшего, и с поддержкой от огромной транснациональной корпорации, с огромным комьюнити и массой готовых решений, просто нет.

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

Ок. Значит я вообще не понимаю в вебе ничерта. Я думал, чтобы что-то обновить, надо нажать F5. А вместо кеширования ответов сервера, делать пагинацию на бекенде.

Но я, да, я рабочие решения привык делать, а не вот это вот всё.

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

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

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

не покрывает все его минусы

Какие?

ddidwyll ★★★ ()