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

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

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

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

Нашел не доделаный веб-сайт

Продлевал домены, обнаружил что у меня на DeepTown.com не доделаная поделка на WordPress. Я там когда-то тестировал всякие снипеты, кастомные типы постов, связи между ними…

В общем надо бы доделать, сейчас проверим как это все индексирутеся:

P.S. Какой только фигни у меня в загажниках не валяется…

Тестовое задание на 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: для таких вот «хаков», через год сами не поймете почему так написано и вместо добавить пару копи-пастов начнете рефакторить с криками: «Да кто так пишет?!»

Идея на миллиард: Codename «Gone Fishing»

Примерно год назад я решил сделать «боле оцфрованным» такое хобби как рыбалка.

Идея в 2х словах на этом видео:

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

Так же написал технические задания, разбил на таски и попытался найти подрядчиков или партнеров на изготовление прототипов…

В общем пытался построить продукт и компанию по правильному, с customer development и по lean методике.

Краткий отчет за первый год: НЕ СДЕЛАНО НИЧЕГО!

Вывод простой: Хотите что-то сделать? Ищите деньги и нанимайте людей. Даже закрывшись от всего мира на полгода, вряд ли что-то нафигачите самостоятельно 😦

Читать «Идея на миллиард: Codename «Gone Fishing»» далее