Статические пререндеры для React/Angular/Vue вебсайтов

Решил протестировать различные решения для генерации статического пре-рендера aka «static cache» для новомодных SPA вебсайтов.

Если кратко и по делу

Платные решения типа «Mega SEO for Your SPA» — унылое гавно. Кому-то может и подойдет, но будет дорого и точно так же как у 1005000 других сайтов.

Проще всего сделано в react-snap — установил через npm, добавил «postbuild» скрипт и все как-то работает. Кстати, странное название для продукта если учесть что никакого отношения к React он не имеет и может билдить снапшеты к любому JS проекту.

Готовый пример

Вот результат на примере внутренней старницы SPA на моем сайте Sea Battle by KARPOLAN. Если загляните в консоль, то увидите несколько ошибок…

Основные проблемы на cейчас

  • Ренедр с помощью реального браузера, даже в инкогнито режиме, содержит код уже «исполненых» скриптов аналитики и рекламы.
  • Ренедр с помошью Headless браузера тоже не спасает, более того там прописвается localhost для многих параметров 🙂
  • Веб-сервер надо более тщательно настраивать, чтобы SPA продолжало работать автономно, а не таскало файлы с сервера каждый раз.

Заключение

Open Source «из коробки» ничего не гарантирует да и работает через пень-колоду… Даже react-snap глючит если задать «homepage» в package.json

P.S. В общем угробил очередную субботу 🙂

Мой код образца 1995 года

Наводил порядок в папке с исходникаи, наткнулся на «шедевры»:

{*************************************************************************}
{********************** Function DeleteChar ******************************}
{*************************************************************************}
Function DeleteChar(PoleStr : String;
                    Ch      : Char    ) : String;
    { Убирает символы Ch из String`a PoleStr                              }
Var
  i,k : integer;
Begin
  k:=1;
  for i:=1 to Length(PoleStr) do
   begin
     if PoleStr[k] = Ch
      then Delete(PoleStr,k,1)
      else inc(k)
   end;{for i:=1 to Length(PoleStr) do}
  DeleteChar:=PoleStr;
End;{Function DeleteChar}

{*************************************************************************}
{************************ Function DateInv *******************************}
{*************************************************************************}
Function DateInv : String;
    { Возвращает Системную Дату в виде String.   Формат : ГГГГММДД        }
    { Специально для 'Уродских' Форматов, Например DBF(Тип Дата)          }
Var
 yy,mm,dd,ww : Word;
 sy,sm,sd    : String[8];
Begin
  GetDate(yy,mm,dd,ww);
  Str(yy:4,sy);
  Str(mm,sm);
  Str(dd,sd);
  if mm < 10
   then sm := '0' + sm;
  if dd < 10
   then sd := '0' + sd;
  DateInv:=sy+sm+sd;
End;{Function DateInv}

{*************************************************************************}
{*********************** Function StrComma *******************************}
{*************************************************************************}
Function StrComma(Nom         : Extended;
                  Digit,Comma : integer) : String;{ Перевод Числа В String}
   { Работает Аналогично Procedure Str(Nom:Digit:Comma,StrComma)          }
   { Плюс вставляет разделительные ',' (1,121,123,231.124)                }
Var
  PoleStr : String;
  MaxLen,i  : integer;
Begin
  MaxLen := Digit + (Digit div 3); {Ширина поля Digits с учетом ','}
  Str(Nom:-1:Comma,PoleStr);
  PoleStr:=InsertComma(PoleStr);
  MaxLen:=MaxLen-Length(PoleStr); {Сколько пробелов добавить}
  if MaxLen > 0 then
   begin
     for i:=1 to MaxLen do
      PoleStr := ' ' + PoleStr;
   end;{if Length(PoleStr) < MaxLen then}
  StrComma:=PoleStr;
End;{Function StrComma}

Отступы не по стандарту, зато коментарии и документацию я даже в «детстве» писал 🙂

 

Тесты на время

Хуже чем проверка знаний на время может быть разве что выдача тестов с неправильными ответами 🙂

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

Почему этой фигней до сих пор страдают люди, особенно в IT, мне не понятно.

Не делайте так!

P.S. Я обычно отказываюсь от прохождения такого, но настойчиво попросили… Результат — половина ответов «в молоко» 🙂

Англоязычный блог

Сделал англозычный блог на сабдомене blog.karpolan.com, буду перенесить туда только самое полезное или очень популярное.

Можете подписываться 🙂

Задачки из Тестовых Заданий

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

Любимая задачка: перевернуть строку, по символьно, задом на перед.

Я понимаю зачем это надо уметь делать на С/C++ без дополнительного выделения памяти когда каждый байт на счету…
Но на собеседовании по JavaScript? Это ж интерпретируемый (иногда не однозначно) язык, где мегабайты памяти утекают по мелочи!

Ну ок, сел и на бумажке написал примерно вот такое. Выпендрился, fat arrow function заюзал 🙂

const reverseStringByHalfLoop = (value) => {
	const length = value.length; 
	const halfLength = Math.floor(length / 2);

	let result = value.split('');
	for (let i = 0; i < halfLength; i++) {
		const char = result[i];
		result[i] = result[(length - 1) - i];
		result[(length - 1) - i] = char;
	}
	return result.join('');	
}

Этот код поставил в тупик интервьювера! Он даже начал проверять что будет если длинна строки нечетная…

Отвечаю: ничего не будет, средний символ сразу стоит на своем месте 🙂

Ёбушки-воробушки© Вот мы и дожились до программистов (более того интервьюверов) которые про алгоритмы вроде и слышали, вопросы на собеседованиях задавать умеют, но вот «стандартные ответы» на эти вопросы видят в первый раз.

Оказалось от меня ожидали JavaScript style ответа. Я потом загуглил, типа вот такого:

function reverseStringByArray(value) {
	return value.split('').reverse().join('');
}

Ладно, проехали…

Вот вам еще вопрос (точнее связка) который уже 2 раза встречал:

  1. Напишите функцию которая суммирует все переданые в неё аргументы (прикол в том что кол-во аргументов может быть любым)
  2. Передайте в написаную вами выше функцию массив как список параметров (подколка на знание spread синтакстиса)

В общем очередная шизиловка 🙂 Если что, это делается это как-то так:


export const sumOfAllArgs = (...args) => {
	return [...args].reduce((a, b) => a + b, 0);
}

let arr = [1,2,3,4,5];
sumOfAllArgs(...arr);

Но я так и не понял зачем 2 вопроса об одном и том же? Скорее всего этим вопросам тоже 100 лет в обед, а раньше, до ES6 синтаксиса, решалось через proptypes или еще какую-то олдскульной JavaScript Magic.

В общем технические интервью это иногдза забавно. Но качество специалистов удручает… Все знают SOLID и меряются кол-вом патернов, а вот чужой код и best practices уже никто не изучает.

P.S. Да, я на старости подрабатываю программистом. Это прикольно, не дает мозгам засохнуть, ну и 30+ баксов в час это таки деньги 🙂

Крестики-Нолики на React JS

Что-то меня на приздниках пробило на по-программить. Раз такое дело, вот еще одна «поделка» и немного кода на JavaScript + React:

Играть в Крестики-Нолики прямо в браузере

Исходные коды игры Крестики-Нолики на JavaScript + React

Cо временем добавлю «всякой крастоты»: индикаторов, преключатель режимов PvP, PvE, Demo Mode и т.д.

Правда про IT-шников

Послание от пьяного Карполана для нового поколения IT-шников:

Записано на Silicon Drinkabout в iHub Kyiv группой студентов, будущих ОйТи-шнегов 🙂

P.S. Все будет хорошо, просто выходите иногда из «IT пузыря» в «реальный мир».