Как лучше разрабатывать сайт с множеством ajax запросов, динамичным обновлением элементов?

Question

[alexh7854]

Приветствую.

Пишу небольшой проект для себя - php, laravel.
На фронте довольно многое делается без обновления страницы, через ajax.

C фронтенд разработкой почти не знаком, поэтому пишу на jquery, но получается не очень. Пишу простые скрипты, например:

$('body').on('click', '.delete_test_case_btn', function() {

        case_id = $(this).attr('data-id');

        $.ajax({
            url: "/test-case/delete",
            method: "POST",
            data: {
                "id": case_id,
            },

            success: function (data) {
                $("li[data-case_id=" + case_id +"]").remove();
            }
        });
    });

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

Подскажите какие сейчас есть современные подходы, с чего начать, что проще и быстрее для небольшого проекта?

Comments

[Александр]

По настоящему современные подходы подразумевают уже имеющуюся базу знаний, где в первую очередь хорошее знание JavaScript, HTML, CSS (если вы таки про frontend). Это самое первое, откуда ноги растут.

Второе - сборщики. Например, Webpack. Все современные проекты юзают какой-нибудь сборщик. Очень помогает. Минусы в сборщиках есть, но плюсы перевешивают. Все это означает, что вам нужно ставить себе в систему nodejs и уметь этой штукой хоть как-то пользоваться

Третье - фреймворки. Говорят, что глубоководным каракатицам мира js фреймворки не нужны, т.к. они даже когда спят, все пишут на чистейшем незамутненном js, но большинство предпочитает переиспользование кода, чтобы не изобретать велосипедов.

Вам посоветовали vuejs. Берите, пригодится. Там второе и третье, по поводу первого - качайте главный мускул программиста не переставая.

Так что, а фиг его знает, как будет проще и быстрее конкретно для вас.

Answer 1

[Сергей delphinpro]

Для вашего стека есть несколько вариантов.

Первый самый очевидный: ларка в виде АПИ, на фронте Vue как SPA.

Второй вытекает из предыдущего. Отказ от полноценного SPA в пользу использования отдельных интерактивных блоков, реализованных на Vue. Всё ещё требует глубокого погружения в изучение фронт-фреймворка. Хотя, на мой взгляд, там не очень высокий порог входа.

Наконец, если вы не хотите глубоко уходить во фронтэнд разработку, и вам требуется при написании простеньких скриптов соблюсти какую-то систему, чтобы потом не погрязнуть в лапшовом коде, то можно попробовать какой-то очень простой фреймворк/библиотеку.
Я могу порекомендовать Стимул – https://stimulus.hotwired.dev/handbook/introduction (перевод на русский)
Вся документация читается и осмысливается буквально за час-два.

Answer 2

[Антон Антон]

https://v3.ru.vuejs.org/