Разделение по бандлам в React JS

По работе была задача уменьшить размер React приложения чтобы быстрее загружалось ©

Начиная с версии 16.6 в Реакте есть встроеный «ленивый загрузчик» модулей: React.lazy. Работает он пока неполноценно (только для export default компонентов и нет ServerSide рендеринга), но зато в «одну строчку» и подхватывается биледрами типа WebPack.

А вот добавление loading/fallback компонента в «одну строчку» разработчики забыли, пришлось написать свой HOC (High Order Component) для помощи стандартному React.lazy()

Встречайте withSuspense() для lazy loading компонентов в React

Пользуйтесь на здоровье 🙂

 

Статические пререндеры для 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. В общем угробил очередную субботу 🙂

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

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

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

Я понимаю зачем это надо уметь делать на С/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 и т.д.

Тестовое задание на React JS

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

Список ресторанов с разными вариантами фильтров и отображений.

Вот наваял Поиск с Сортировкой Ресторанов на React JS. Может еще чего-то добавлю со временем, Debug Info там интересный получилося.

Исходники выложил на GitHub, может кому-то полезно будет… Хотя писал я это за один день, так что не факт что стоит копировать мои решения не задумываясь 🙂

Тот редкий случай когда Гавно-Код™ лучше универсального.

Опять занесло меня в PHP программирование, надо было сделать подержку настроек из глобального config.json для уже существующих сайтов на WordPress.

И вот столкнулся с тем редким случаем когда Гавно-Код™ aka Как-Индусы® лучшее решение:

$props = explode('.', $configPropertyName);
switch (count($props)) {
// TODO: Add more deep cases if the Config become too nested.
    case 3:
        $value = $config->{$props[0]}->{$props[1]}->{$props[2]};
        break;
    case 2:
        $value = $config->{$props[0]}->{$props[1]};
        break;
    default:
        $value = $config->{$props[0]};
}    

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

P.S. Не забывайте писать TODO: для таких вот «хаков», через год сами не поймете почему так написано и вместо добавить пару копи-пастов начнете рефакторить с криками: «Да кто так пишет?!»