Разделение по бандлам в 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+ баксов в час это таки деньги 🙂

Как зарабатывают на веб-сайтах

Большинство веб-сайтов в Интернет не зарабатывают ничего!

Посещаемые веб-сайты

Популярные сайты (начиная от 1000 человек в день) могут зарабатывать на:

  • Показах чужой рекламы (в среднем $1 за 1000 показов для Google AdWords).
  • Продаже ссылок со страниц своего сайта, на страницы заказчиков (от $1 до $100 за «вечную» ссылку).

Популярные веб-сайты

Супер-популярные веб-сайты (100 тысяч и более посетителей в день) помимо указанных методов заработка могут практиковать:

  • Размещение чужого контента: заказные статьи, обзоры товаров и т.д.
  • Уникальные предложения для своей аудитории: купоны со скидкой, лотерея с призом и т.д.
  • Генерация leads с оплатой за действие (CPL или CPA модель).
  • Массовая реклама с оплатой за показы и не важно кликал ли кто по банеру (CPM модель).

Веб-сайты для Бизнеса

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

  • Статьи и обзоры — привлекают посетителей из поисковых систем и других веб-сайтов по ссылкам на наш сайт.
  • Посадочные страницы — конвертируют анонимных посетителей, кликнувших по контекстной рекламе, в заинтересованных клиентов.

Выводы

Веб-сайты без посетителей на зарабатывают ничего.
Зарабатывать на веб сайтах можно разными способами.
Сайты для бизнеса это каналы маркетинга и редко монетизируются напрямую.

Факты о Бизнесе — Маркетинг, это не реклама или продажи

Маркетинг это не реклама, продажи и прочее, а построение продукта так чтобы он был востребован на рынке.

Усьо будет JavaScript ©

Все состоявшиеся программисты не довольны…

Но популярный продукт всегда побеждает, даже более технологичные или перспективные решения.

Привыкайте к новой реальности — осваивайте JavaScript 🙂

Как правильно начинать бизнес?

Решайте бизнес-задачи в обратном порядке!

Сначала сделайте все для приема денег и удовлетворения клиента, а уже потом можете заняться маркетингом, дистрибуцией и производством.

Более детально тут: Что значит «делать с конца»?