Программирую по работе и в качестве хобби. Обучаю молодых специалистов. Также преподаю программирование.
Контакты
Местоположение
Беларусь, Гродненская обл., Гродно

Достижения

Все достижения (1)

Наибольший вклад в теги

Все теги (11)

Лучшие ответы пользователя

Все ответы (11)
  • Какими технологиями стоит пользоваться при создании CMS на js?

    KulakovAngel
    @KulakovAngel
    Full Stack Developer (Node.JS)
    Конечно использовал бы пакеты.

    Хотя все зависит от цели, которую Вы перед собой ставите. Когда у меня была обучающая цель написать собственный фрэймворк для разработки серверной части на Node, естественно, я писал все сам, на этом я хорошо усвоил паттерны проектирования, архитектуру, да и сам Node (EventEmitters, etc).

    Но когда я хочу сосредоточится не на шаблонном коде (а-ля обработка ошибок, авторизация и маршрутизация), а на решении поставленной задачи, я (как и, наверное, преобладающее большинство программистов любых технологий/языков) конечно же использую готовые решения. Хотя, для каких-то небольших и достаточно простых вещей можно написать и собственный мидлвар, скажем.

    Что касается совета по технологиям, я бы использовал express как каркас приложения (это небольшой и несложный фрэймворк, основной задачей которого является реализация паттерна Chain of Responsibility + маршрутизация). Для авторизации я заюзал бы passport. Для фронтэнда взял бы шаблонизатор pug. Стоит понимать, что первые два - это стандарт де-факто для многих, а вот третья рекомендация (pug) вообще особо ни на что не влияет, просто вопрос привычки/удобства. Если знаете другой шаблонизатор - используйте. Также я бы установил админ-панель, например adminbro. Естественно, будет еще множество более мелких пакетов, например "jsonwebtoken" для токенов, если будете их использовать и т.д.. Можете что-то написать полностью вручную, например, авторизацию. Или Админ-панель. Но для этого нужно четко понимать, как это делается.

    Последний совет - как новичку)) Не пытайтесь установить кучу пакетов, не понимая принципа их работы. Если Вы только начинаете изучать программирование - изучайте паттерны, ООП. Узнайте про client-server архитектуру. Напишите пару простых приложений на чистом JS (раз Вы взялись за него), например, todo-app. Изучите основной функционал Node. Параллельно изучайте Express. Если знаете/хотите узнать TypeScript - присмотритесь к loopback (только для CMS он не очень подходит, мне кажется).
    Ответ написан
  • Каковы best practice по использованию React вместе с PHP-шаблонизаторами (Blade, Twig)?

    KulakovAngel
    @KulakovAngel
    Full Stack Developer (Node.JS)
    Доброго дня! Давайте разберемся.
    Достаточно ли просто создать div#catalog и рендерить в него компоненты реакта?

    Ответ: достаточно просто (ссылка на песочницу). Допустим, имеется шаблон (я использовал HTML, но, думаю, с Blade проблем не возникнет):
    <html>
      <head>
        <title>PHP React Test</title>
    
        <script src="https://unpkg.com/react@17/umd/react.production.min.js" crossorigin></script>
        <script src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js" crossorigin></script>
        <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
      </head>
      <body>
        <?php
          $INIT_PARAMS = ['user' => 'Vasilij']; // данные из PHP
          echo '<p>Hello React App</p>';
        ?>
    
        <div id='react-app'></div>
    
        // React-component. Конечно, лучше вынести в отдельный файл, если кода много.
        //  Еще лучше скомпилировать и подключить минифицированный бандл. Здесь - концептуальный пример.
        <script type="text/babel">
          'use strict';
          const {useState} = React;
    
          function App({user}) {
            const [liked, setLiked] = useState(false);
            return (
              liked ? (`You (${user}) liked this.`) : (
                <button onClick={() => setLiked(true)}>
                  Like
                </button>
              )
            )
          }
    
          const domContainer = document.querySelector('#react-app');
          ReactDOM.render(<App user={'<?=$INIT_PARAMS['user']?>'}/>, domContainer);
        </script>
      </body>
    </html>


    И как быть с SEO в таком случае?

    Правильный вопрос. То, что мы сделали выше - называется "клиентский рендеринг". Для оптимизации SEO он не очень подходит. Такой способ прост, но используется там, где SEO не нужно (например, приложение, в которое в принципе нельзя зайти, не пройдя процедуру авторизации). Для оптимизации SEO используется серверный рендеринг (SSR), а точнее изоморфная структура приложения (совмещаем SSR и CSR). Но поскольку PHP и JS - разные языки, нам потребуется "компилятор JS" прямо в PHP (мы же хотим скомпилировать JS на сервере и отправить клиенту готовый HTML). Для этого можно использовать V8Js. Почитать подробнее можно, погуглив, например.

    Но, наверное, многие согласятся, что такое использование не типично и крайне усложняет и без того сложный процесс. Если Вы хотите попробовать из академического интереса - я кое-что объяснил. Если же мы говорим про best practice, то давайте разберемся, что Вы хотите:
    • Использовать PHP?
    • Или использовать React SSR?


    1. Если Вы хотите использовать PHP и добавить компонентам реактивности, нечто подобное уже реализовано в Laravel: присмотритесь к laravel-livewire или inertiajs. Я бы рекомендовал laravel-livewire. Инструкция по установке того и другого: jetstream Получите архитектуру, почти как в React, только на сервере. Все живое, стэйт обновляется (как? автоматически через скрытые ajax-запросы). Вот, нашел наспех что-то из своего проекта (public $adJob играет роль состояния):
      <?php
      
      namespace App\Http\Livewire;
      
      use Livewire\Component;
      use Illuminate\Support\Facades\Auth;
      
      class AdJob extends Component {
          
          public $adJob;
          
          public function mount($adJobId) {
              $this->adJob = \App\Models\AdJob::find( $adJobId );
          }
          
          public function setReleaserForAdJob($releaserId) {
              $this->adJob['releaser_id'] = $releaserId;
              $this->adJob['status'] = 'in_progress';
              $this->adJob->save();
          }
          
          public function setAdJobDone() {
              $this->adJob['status'] = 'done';
              $this->adJob->save();
          }
      	
          public function render() {
              return view('livewire.ad-job-with-reviews');
          }
      }

      И последнее. Если не знакомы с Laravel, но нравится PHP - самое время начать изучать.

    2. Ежели желаете использовать React - то много проще (чем с PHP) использовать React SSR на Node.js. Самые популярные способы:
      1. Nextjs, как заметил Андрей Хохлов. Здесь все просто: изучайте документацию по этой технологии.

      2. React SSR + Express. Здесь, по сути, все то же самое, просто настроить все нужно самому. Хотя, это и более интересно (мне так кажется). Ситуация такова:

        1. Создаем React-приложение на клиенте. Делаем бандл. В пункте 3 будет небольшое дополнение сюда.


        2. На нужных маршрутах на сервере используем
          res.send(ReactDOMServer.renderToString(myElement)) - получаем нечто вроде создания "шаблона" (res.send - API express, остальное - react)


        3. На клиенте вместо ReactDOM.render() вызываем ReactDOM.hydrate(element, container), это позволяет не создавать разметку заново, а "гитратировать" HTML, отрендеренный React-ом на сервере и полученный браузером.


        Есть также пакеты, позволяющие настроить использование React как шаблонизатора, например: @react-ssr/express. Под капотом он использует тот же renderToString, только с правильной архитектурой и дополнительными, уже настроенными возможностями. В 12-ой строке файла default.tsx из пакета можно увидеть:
        const html = ReactDOMServer.renderToString(app);





    Таким образом, если интерес для Вас представляет именно PHP - рекомендую Laravel + livewire-компоненты. Если хотите именно React SSR - я бы предпочел Node-стэк (Next или Express+React, вначале сам попробовал бы, потом можно попробовать использовать готовый пакет). Вообще best practice - Next.
    Ответ написан
  • Как узнать есть ли у элемента пара?

    KulakovAngel
    @KulakovAngel
    Full Stack Developer (Node.JS)
    const array1 = [1, 2, 3];
    const array2 = [1, 2, 3, 5];
    let counter = 0;
    
    for (let i=0; i<array1.length; i++) {
        if (array1[i] === array2[i]) {
            counter++;
        }
    }


    Стоит отметить, что я исхожу их предположения, что массивы одинаковой длины, и что элемент массива- примитивный тип данных (число, строка, bool). Просто сравниваем элемент по индексу в одном и другом массивах.

    В варианте для массивов разной длины вначале определим наименьшую длину (так как нет смысла идти по более длинному массиву, совпадение в более коротком не может существовать - нет соотв. индекса)
    const array1 = [1, 2, 3];
    const array2 = [1, 2, 3, 5];
    const minLength = array1.length <= array2.length ? array1.length : array2.length;
    let counter = 0;
    
    for (let i=0; i<minLength; i++) {
        if (array1[i] === array2[i]) {
            counter++;
        }
    }
    Ответ написан
  • Как передать через fetch() на бекенд картинку?

    KulakovAngel
    @KulakovAngel
    Full Stack Developer (Node.JS)
    Есть смысл сгенерировать картинку в формате строки base64 и потом JSON-ом передавать на бекенд?

    Думаю, смысл есть. Нужно знать контекст. Смотря что разрабатываете. Смотря что ожидает сервер. Смотря, как хранятся данные. Скажем, если у Вас RestFull API, и общение с сервером происходит на основе JSON, то я бы и картинку передавал в JSON, как Вы и написали. Если же это "доделка" к, скажем, WordPress, или другой CMS, и она ожидает именно картинку, то см. ответ Выше (Tim).
    Ответ написан
  • Какие методы отправки http запросов сейчас наиболее современные, актуальные?

    KulakovAngel
    @KulakovAngel
    Full Stack Developer (Node.JS)
    Если Вы находитесь на стадии обучения основам JS/front-end, вначале изучите XMLHttpRequest и технологию HTTP (основы). На основе него создана промис-обертка (гораздо удобнее в реальном использовании) - Fetch. Но и это еще не конец.

    В реальной разработке часто используют готовые решения, упрощающие решение. Например, для разработки клиента часто используют React, Vue, Angular и др.. Для управления состоянием приложения - Redux, MobX и др.. Так вот, хорошая библиотека для выполнения запросов - это Axios. Чем она лучше Fetch? Во-первых, самостоятельно парсит тело ответа (например, в/из JSON), отправляет необходимые заголовки. Сравните:
    fetch('https://jsonplaceholder.typicode.com/users')
        .then(res => res.json())
        .then(users => dispatch(addUsers(users)));
    
    axios('https://jsonplaceholder.typicode.com/users')
        .then(users => dispatch(addUsers(users)));

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

    Стоит понимать разницу между AJAX, XMLHttpRequest, Fetch, Axios.
    • AJAX - технология опроса сервера без перезагрузки (противовес ей - отправка данных кнопкой submit или ссылкой "a href="""). Чаще всего сегодня данными сервер и клиент обменивается через JSON
    • jQuery.ajax() - метод библиотеки jQuery, обертка над XMLHttpRequest. Т.е. библиотека.
    • XMLHttpRequest - объект браузера (BOM), позволяющий отправлять запросы к серверу, т.е. реализация упомянутой в первом пункте технологии AJAX
    • Fetch - более современный метод, использующий промисы. Более удобен, но под капотом используется XMLHttpRequest, естественно.
    • Axios - одна из библиотек (т.е. ее нужно подключать, как, например, тот же jQuery), наверное, самая распространенная, еще более упрощающая реальную разработку.


    Изучайте архитектуру на React (или др. фрэймворке), и увидите насколько проще использовать axios.
    Ответ написан