Расширяем возможности мобильного приложения на WebView. Опыт Ozon Банк

Интересная статья от ребят из Ozon, где они коротко рассказывают, почему используют webview в приложении Ozon Банк и какие плюсы и минусы есть у такого подхода.

Причины выбора именно webview достаточно просты: webview позволяет быстро начать разрабатывать функционал на все платформы небольшой командой. При этом мобильная версия сайта уже была, а значит и "нулевая" версия вебвью уже готова

Какие плюсы видят в использовании webview:
- Синхронное обновление функционала на пользователей. Все пользователи одновременно получают весь функционал, чего практически нереально добиться для кросс-платформенной разработки
- Поддержка всех платформ небольшой командой
- Единый UI. Это улучшает восприятие пользователей, облегчает работу команде разработки и упрощает дизайн-ревью

Минусы:
- WebView требует загрузки ассетов. А значит, первое открытие экрана может быть долгим. Это конечно можно попробовать решать разными способами, но факт остается фактом - вы либо смиряетесь с тем, что первый раз экран долго грузится, либо делаете какую-то обвязку для менеджмента ассетов
- Низкая автономность. Если интернета нет - не будет работать и WebView. Это также решаемая проблема, но не совсем из коробки.
- Есть сложности с навигацией. Часть экрана построена как нативный UI (шапка и футер), часть - как WebView. При этом поверх WebView может открываться нативный модал. В таком гибридном приложении есть сложности с навигацией между экранами
- Из-за особенностей WebView на мобильных платформах, может случится такое, что приложение еще живет, а WebView была "остановлена" операционной системой

Из интересного в статье также рассказывается реализация коммуникации между JS и нативным кодом. Обычное взаимодействие асинхронное и делается так: нативный код инжектит в WebView JS, с которым может общаться код WebView и ожидать резолва промисов от этого API. Но иногда требуется синхронное взаимодействие, т.е. необходимо "подвесить" поток WebView. Для этого ребята сделали следующую штуку: они переиспользовали возможности prompt. По умолчанию это команда открывает модальное окно в браузере, в которое необходимо что-то ввести. Но ребята написали свой обработчик prompt и используют эту механику, когда нужно сделать какую-то синхронную коммуникацию



https://habr.com/ru/companies/ozontech/articles/828186/

#development #javascript #webview #ozon

Дайджест за 2024-07-22 - 2024-07-26

—————

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

—————


Moving from express to fastify, pt 1
Статья от команды Val Town про то, зачем и как они мигрировали с express на fastify.

Express - это веб-фреймворк для Node.js, который был создан в 2009 году и позволял в 10 строчек поднять сервер, отдающий Hello World. В то время это было реально круто. Однако прошло 15 лет - экосистема JS сильно изменилась, а express почти не изменился - и в этом его главная проблема. Практически реальный пример, почему нужно быть agile :)

Sneaky React Memory Leaks: How the React compiler won't save you

Интересная статья про утечку памяти в React. Если коротко, то когда вы используете хуки, вы создаете замыкание на контекст рендер функции. Если в этом контексте будет больший объект, созданный во время рендера, то сборщик мусора не сможет его собрать (ведь он доступен через замыкания). Пока выглядит, что криминала нет, но по факту может случится следующее - при каждом новом рендере будет создаваться новое замыкание на новый контекст и при этом будет оставаться замыкания на старый контекст, что приведет к созданию двух объектов, которые не может почистить сборщик мусора.

What's coming next for ESLint
В апреле зарелизился ESlint 9.0.0. Это первый крупный релиз ESlint за почти 3 года и в этом релизе видно, что команда ESlint собирается активно развивать свой инструмент. Эта статья показывает, куда пойдет ESlint в ближайшем будущем.

2 года назад было принято решение, что ESLint должен поддерживать не только JS, но и другие языки. Чтобы достичь этого, требуется переделать ядро проекта. Сейчас эта переделка уже в работе и должны появится пакеты:

es-toolkit
es-toolkit - очередная библиотека утилит, которая поддерживает современные тренды, высокопроизводительна, мало весит и типизирована.

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

Расширяем возможности мобильного приложения на WebView. Опыт Ozon Банк
Интересная статья от ребят из Ozon, где они коротко рассказывают, почему используют webview в приложении Ozon Банк и какие плюсы и минусы есть у такого подхода.

Причины выбора именно webview достаточно просты: webview позволяет быстро начать разрабатывать функционал на все платформы небольшой командой. При этом мобильная версия сайта уже была, а значит и "нулевая" версия вебвью уже готова

——————————————

Спасибо что читаете, ставите реакции и отмечаетесь в комментариях. Если вы хотите помочь каналу - расскажите о нем своим коллегам или друзьям. Также оставляйте фидбек по формату, материалу и чему-угодно еще 🙂

В node.js добавили минимальную поддерджку typescript

В node.js добавили возможность запускать TS модули. Под капотом типы просто вырезаются с помощью swc, то есть нельзя использовать продвинутые фичи типа еnum и нет никакой проверки типов самой нодой.

С одной стороны сделано не так уж много, с другой стороны этого не хватало всегда, но сейчас, учитывая бурное развитие альтернатив в виде bun и deno, предоставляющие полноценную интеграцию из коробки, такой запрос просто нельзя игнорировать. И даже такая простая реализация просто необходима.


https://github.com/nodejs/node/pull/53725

#development #javascript #nodejs #typescript

Вышел релиз Astro 4.12 с Server Islands

Вышел релиз Astro 4.12. Основная фича - server islands. Astro использует концепцию Островов интерактивности в море Статичного Контента - по задумке, с сервера приходит статичная разметка, в котором есть Интерактивные элементы работающие на js. Эти элементы реализованы как JS скрипты, загружаемые в браузер.

В новом релизе добавлена возможность делать серверные острова. То есть это как серверные компоненты, но для островной архитектуры.



https://astro.build/blog/astro-4120/

#development #javascript #astro #islandsArchitecture

Why is spawning a new process in Node so slow?

Хорошая статья обозревающая проблему перформанса при Запуске под-процессов в Node.js. Оказывается, Node.js очень плох в Запуске под-процессов.

Если делать наивное решение, то Node.js окажется в 3 раза медленнее чем bun и deno и в 8 раз медленнее чем Go и Rust.

Статья не даёт конкретного объяснения этому феномену, но в ней разбираются различные способы запуска под-процессов и они бенчмаркаются между платформами.

Из интересных открытий - в одном из бенчмарков Node.js запускающий под-процессы bun оказался быстрее чистых Node.js, deno u bun.

Интересная статья, рекомендую к прочтению если вы занимаетесь Node.js разработкрой.

https://blog.val.town/blog/node-spawn-performance/

#development #javascript #nodejs #bun #deno #performance #recommended

Дайджест за 2024-07-30 - 2024-08-01

В node.js добавили минимальную поддерджку typescript
В node.js добавили возможность запускать TS модули. Под капотом типы просто вырезаются с помощью swc, то есть нельзя использовать продвинутые фичи типа еnum и нет никакой проверки типов самой нодой.

С одной стороны сделано не так уж много, с другой стороны этого не хватало всегда, но сейчас, учитывая бурное развитие альтернатив в виде bun и deno, предоставляющие полноценную интеграцию из коробки, такой запрос просто нельзя игнорировать. И даже такая простая реализация просто необходима.

Вышел релиз Astro 4.12 с Server Islands
Вышел релиз Astro 4.12. Основная фича - server islands. Astro использует концепцию Островов интерактивности в море Статичного Контента - по задумке, с сервера приходит статичная разметка, в котором есть Интерактивные элементы работающие на js. Эти элементы реализованы как JS скрипты, загружаемые в браузер.

В новом релизе добавлена возможность делать серверные острова. То есть это как серверные компоненты, но для островной архитектуры.

⭐Why is spawning a new process in Node so slow?
Хорошая статья обозревающая проблему перформанса при Запуске под-процессов в Node.js. Оказывается, Node.js очень плох в Запуске под-процессов.

Если делать наивное решение, то Node.js окажется в 3 раза медленнее чем bun и deno и в 8 раз медленнее чем Go и Rust.

——————————————

Спасибо что читаете, ставите реакции и отмечаетесь в комментариях. Если вы хотите помочь каналу - расскажите о нем своим коллегам или друзьям. Также оставляйте фидбек по формату, материалу и чему-угодно еще 🙂

Benchmarking AWS Lambda Cold Starts Across JavaScript Runtimes

Команда Deno провела замеры скорости холодного старта различных JavaScript-рантаймов в AWS Lambda. Холодный старт - это когда приложение запускается впервые и ему приходится тратить время на свою инициализацию

В сравнении участвовалии: deno, bun, nodejs, aws nodejs (оптимизированная поставка nodejs для запуска в aws). Запускались при этом веб-сервера на express, fastify, hono.

Что можно сказать о результатах: в AWS deno оказался почти везде быстрее всех. Исключение составил запуск fastify - там победил nodejs от aws.

В виртуалке deno победил всех.

За счет чего такие результаты? Команда Deno говорит, что это за счет кеширования модулей, графа модулей, кэша v8. При сборке докер-образа Deno предзапускает код, прогревая кэши приложения.

Не уверен, что это корректный бенчмарк, но тем не менее он достаточно интересный



https://deno.com/blog/aws-lambda-coldstart-benchmarks

#development #javascript #nodejs #bun #deno #performance #recommended

Garbage collection and closures

Статья от Джейка Арчибальда про утечку памяти в JS (относится ко всем популярным браузерным движкам).

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

Вот этот код не течёт

function demo() { 
  const bigArrayBuffer = new ArrayBuffer(100_000_000); 
  const id = setTimeout(() => { 
    console.log('hello');
   }, 1000); 
  return () => clearTimeout(id);
 } 
globalThis.cancelDemo = demo();

А вот этот течёт

function demo() { 
  const bigArrayBuffer = new ArrayBuffer(100_000_000);     
  const id = setTimeout(() => {
    console.log(bigArrayBuffer.byteLength); 
  }, 1000); 
  return () => clearTimeout(id);
 }
 
globalThis.cancelDemo = demo();

Память утекает, потому что:
- Движок видит, что bigArrayBuffer ссылается на внутренние функции, поэтому объект остается в памяти, ассоциируясь с областью видимости, созданной при вызове demo().
- Через секунду функция, ссылающаяся на bigArrayBuffer, больше не вызывается.
- Однако область видимости остается, так как функция "cancel" все еще доступна для вызова.
- bigArrayBuffer ассоциируется с этой областью видимости, поэтому остается в памяти.

Если удалить ссылку на функцию cancel, то объект будет удален из памяти

globalThis.cancelDemo = null;

https://jakearchibald.com/2024/garbage-collection-and-closures/

#development #javascript #performance #memoryLeak #recommended

How Google handles JavaScript throughout the indexing process

Интересная статья от Vercel про то, как работает краулер сайтов гугла. Эта тема окружена кучей мифов разной степени зрелости. Когда то говорили, что краулер не умеет запускать JS, затем говорили что научился, но не дольше 5 секунд и на старой версии хрома. Ребята из Vercel решили поэкспериментировать с отдачей контента и выяснили интересные особенности работы гугл краулера

Самое важное, что можно выделить: краулер умеет работать с современным синтаксисом JS, а также отлично индексирует сайты, сделанные с применением серверных компонентов (и соответственно стриминга хтмл контента).

В целом в исследовании также много других интересных пунктов (как например тот факт, что индексируются только страницы с 3хх и 2хх кодами. Т.е. если вам необходимо отрендерить экран с ошибкой - лучше его отрендерить на отдельном урле или с помощью 4хх или 5хх кода хттп).

Рекомендую к прочтению, если вы работаете с SEO



https://vercel.com/blog/how-google-handles-javascript-throughout-the-indexing-process

#development #javascript #SEO

Дайджест за 2024-08-05 - 2024-08-07

——————————————

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

——————————————

⭐Benchmarking AWS Lambda Cold Starts Across JavaScript Runtimes
Команда Deno провела замеры скорости холодного старта различных JavaScript-рантаймов в AWS Lambda. Холодный старт - это когда приложение запускается впервые и ему приходится тратить время на свою инициализацию

В сравнении участвовалии: deno, bun, nodejs, aws nodejs (оптимизированная поставка nodejs для запуска в aws). Запускались при этом веб-сервера на express, fastify, hono.

⭐Garbage collection and closures
Статья от Джейка Арчибальда про утечку памяти в JS (относится ко всем популярным браузерным движкам).

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

How Google handles JavaScript throughout the indexing process
Интересная статья от Vercel про то, как работает краулер сайтов гугла. Эта тема окружена кучей мифов разной степени зрелости. Когда то говорили, что краулер не умеет запускать JS, затем говорили что научился, но не дольше 5 секунд и на старой версии хрома. Ребята из Vercel решили поэкспериментировать с отдачей контента и выяснили интересные особенности работы гугл краулера

Самое важное, что можно выделить: краулер умеет работать с современным синтаксисом JS, а также отлично индексирует сайты, сделанные с применением серверных компонентов (и соответственно стриминга хтмл контента).

——————————————

Спасибо что читаете, ставите реакции и отмечаетесь в комментариях. Если вы хотите помочь каналу - расскажите о нем своим коллегам или друзьям. Также оставляйте фидбек по формату, материалу и чему-угодно еще 🙂

Вышел выпуск подкаста от несравненного Андрея Смирнова с моим участием. Рассказываю немножко про карьеру, канал и Новосибирск .
У Андрея в подкасте frontend weekend постоянно выходят выпуски, рекомендую подписаться на подкаст/телегу, если вам нравится такой формат

How we deleted 4195 code files in 9 hours

Вы наверное уже не раз слышали, как компании проводят внутри себя хакатон по какой-то теме, когда команды в короткий промежуток сфокусированной работы стараются создать какую-то крутую ценность. Есть даже багатоны - это когда команды собираются исправлять баги в продукте. И вот в статье описывается новый вид хакатона - клинатон (cleanathon). Это когда цель хакатона - вычистить систему от всякого старья - легаси кода, документов, джоб в пайплайне

Задумка достаточно интересная. В статье описывается, как запускать клинатон в компании, что можно чистить и как считать очки (чтобы был соревновательный дух) и как клинатон прошел в компании автора статьи

Итоги клинатона в компании у автора:
- Сэкономили тысячи долларов месячных оплат (за счет удаление чего-то, что требует оплаты)
- Удалили 4195 файлов с кодом и дополнительно 4747 строчек кода
- Закрыли 120 PR и удалили 2851 неиспользуемые гит-ветки
- Удалили 22 фиче-флага и 46 пакетов из зависимостей
- Удалили 42 джобы и 58 пайплайнов
- Архивировали 50 репозиториев
- Удалили 63 таблицы
- Удалили 47804 файла в гугл диске
- Удалили 159 документов в конфлюенсе и архивировали 200 тикетов в jira
- Удалили 6 фигма файлов и 40 правил автоматизации в jira

В общем, формат интересный. Мне кажется, что после такого клинатона надо также задумываться о том, как автоматизировать подобные чистки. Если вам показалось интересным - рекомендую прочесть статью, там подробно написано про скоринг, ачивки и дух клинатона!


https://zaidesanton.substack.com/p/organizing-the-best-cleanathon-your

#development #hackathon #refactoring

Reactile

Reactile - инструмент для организации UI приложения в виду рабочих столов с виджетами. От вас - виджеты в виде React-компонентов, от Reactile - удобный интерфейс для управления виджетами.

Выглядит весьма интересно, особенно гифки с возможностями ресайза, перетягивания и созданием рабочих столов


https://www.reactile.net/

#development #javascript #react #dragndrop

Common Sense Refactoring of a Messy React Component

Статья про рефакторинг запутанного реакт-компонента. В статье приводится огромный реакт-компонент, в котором очень много логики и она действительно запутанная. Автор по шагам показывает, как можно сделать рефакторинг такого компонента.

Прежде чем приступить к рефакторингу, крайне важно написать тесты. Без тестов рефакторинг может быть небезопасным, поскольку сложно гарантировать, что изменения не внесут новых ошибок в код.

Далее следует поставить себе целью выделить такой код, который плох не только в текущем контексте, но который не хочется видеть в проекте вообще. На такой код необходимо написать автоматические проверки (например, правила eslint)

Далее начинается практика. Первым делом автор делает достаточно простой рефакторинг: удаляет мертвый код.

После этого необходимо бороться с тем, что в компоненте слишком много логики. Это решается несколькими шагами: разделением ветвления вёрстки на независимые под-компоненты, вынос утилитарных функций, констант и хелперов вне компонента, создание кастомных хуков, следование SRP - явное разделение потоков обработки разных вариаций логики.

Из интересных и субъективных рефакторингов - замена fetch на useQuery и замена ручной валидации объекта на библиотеку. В рамках переезда на useQuery также была отброшена отмена запроса т.к. нет смысла отменять запрос в рамках компонента. Оба изменения очень субъективны, но они точно упрощают код, который был в компоненте.

В целом хорошая статья про рефакторинг react-компонентов. Не без субъективных вещей, как и любой нетривиальный рефакторинг


https://alexkondov.com/refactoring-a-messy-react-component/

#development #javascript #react #refactoring

Vitale - Live notebooks in VS Code for JavaScript or TypeScript, web development, and AI experimentation

Vitale - удобный notebook, работающий в VSCode с использованием JS и TS. Я не особо в курсе как корректно перевести notebook в контексте инструмента. Notebook - это категория инструментов, позволяющих вам блочно описывать какой-то код, исполнять его, визуализировать результаты или передавать результат исполнения одного блока в другие блоки. Такие инструменты популярны в академической среде и в продуктовой аналитике. Хотя, лично я думаю, что средней руки тимлид или ведущий разработчик тоже смог бы извлечь много пользы из такого инструмента

Ну так вот, Vitale - это новый notebook, который позволяет писать блоки кода на JS и при этом дает полный DX от VSCode. Звучит и выглядит очень круто и я обязательно поставлю себе эту вундервафлю по выходу из отпуска. Я как раз недавно искал что-то похожее, но не смог найти хорошего решения, а тут вот Vitale вышел.

Что показано на лендосе с Vitale:
- Возможности работы с кодом в режиме REPL
- Возможности визуализации через React
- Хождение в API
- Работа с AI моделями от Github

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


https://githubnext.com/projects/vitale/

#development #javascript #react #notebook #repl

Дайджест за 2024-08-13 - 2024-08-16

How we deleted 4195 code files in 9 hours
Вы наверное уже не раз слышали, как компании проводят внутри себя хакатон по какой-то теме, когда команды в короткий промежуток сфокусированной работы стараются создать какую-то крутую ценность. Есть даже багатоны - это когда команды собираются исправлять баги в продукте. И вот в статье описывается новый вид хакатона - клинатон (cleanathon). Это когда цель хакатона - вычистить систему от всякого старья - легаси кода, документов, джоб в пайплайне

Задумка достаточно интересная. В статье описывается, как запускать клинатон в компании, что можно чистить и как считать очки (чтобы был соревновательный дух) и как клинатон прошел в компании автора статьи

Reactile
Reactile - инструмент для организации UI приложения в виду рабочих столов с виджетами. От вас - виджеты в виде React-компонентов, от Reactile - удобный интерфейс для управления виджетами.

Выглядит весьма интересно, особенно гифки с возможностями ресайза, перетягивания и созданием рабочих столов

Common Sense Refactoring of a Messy React Component
Статья про рефакторинг запутанного реакт-компонента. В статье приводится огромный реакт-компонент, в котором очень много логики и она действительно запутанная. Автор по шагам показывает, как можно сделать рефакторинг такого компонента.

Прежде чем приступить к рефакторингу, крайне важно написать тесты. Без тестов рефакторинг может быть небезопасным, поскольку сложно гарантировать, что изменения не внесут новых ошибок в код.

Vitale - Live notebooks in VS Code for JavaScript or TypeScript, web development, and AI experimentation
Vitale - удобный notebook, работающий в VSCode с использованием JS и TS. Я не особо в курсе как корректно перевести notebook в контексте инструмента. Notebook - это категория инструментов, позволяющих вам блочно описывать какой-то код, исполнять его, визуализировать результаты или передавать результат исполнения одного блока в другие блоки. Такие инструменты популярны в академической среде и в продуктовой аналитике. Хотя, лично я думаю, что средней руки тимлид или ведущий разработчик тоже смог бы извлечь много пользы из такого инструмента

Ну так вот, Vitale - это новый notebook, который позволяет писать блоки кода на JS и при этом дает полный DX от VSCode. Звучит и выглядит очень круто и я обязательно поставлю себе эту вундервафлю по выходу из отпуска. Я как раз недавно искал что-то похожее, но не смог найти хорошего решения, а тут вот Vitale вышел.

——————————————

Спасибо что читаете, ставите реакции и отмечаетесь в комментариях. Если вы хотите помочь каналу - расскажите о нем своим коллегам или друзьям. Также оставляйте фидбек по формату, материалу и чему-угодно еще 🙂

Frontend Security Checklist

Небольшая статья-чеклист про безопасность в вебе.

Разобраны следующие области: XSS, CSP, CSRF, IDOR, Environment Variables. Для каждой из них приводится что это такое, как с этим работать и примеры корректной реализации на JS.


https://www.trevorlasn.com/blog/frontend-security-checklist/

#development #javascript #security #xss #csp

Node.js Best Practices - 2024

Вышло обновление лучших практик Node.js для 2024 года. Обновлены многие пункты, добавлены новые, а также обновлены рекомендуемые библиотеки и решения

https://github.com/goldbergyoni/nodebestpractices/

#development #javascript #nodejs #bestPractices

Процесс, который продолжал умирать

Статья про поиск причины регулярного падения node.js приложения. Написано в нуарном детективном стиле, поэтому читается достаточно интересно. А т.к. это перевод, то некоторые фразы заставляют улыбнуться (об этом дополнительно напишу в конце)

В чем проблема: была компания, у которой раз в 3-4 часа умирал node.js процесс. Статья рассказывает, как автор искал причину такого поведения

Для управления приложениями в компании используется pm2 (тут даже я удивился). PM2 забирает на себя весь менеджмент управления приложениями, но также он известен своими приколами (например, в моей личной практике - отправлял запросы в умерший процесс). В данном случае анализ логов pm2 показал, что приложение рестартует из-за слишком большого потребления памяти. Получается, причина падения - утечка памяти

Далее автор наглядно показывает, как найти утечку памяти в приложении. Запускаем приложением => снимаем снапшот памяти => даем нагрузку => снимаем новый снапшот памяти => сравниваем и находим утечку

В данном случае, в проекте давно не обновляли moment.js, в котором была утечка памяти, пофикшенная в 2020 году.

Ну и, как обещал, жемчужина перевода нуар детектива про разработку с английского на русский - "Это Moment.js. Он истекает памятью, как резаная свинья"

https://habr.com/ru/companies/ruvds/articles/832752/

#development #javascript #nodejs #memoryLeak #performance #pm2