Size: a a a

Angular - русскоговорящее сообщество

2020 January 07

DT

Dmitry Teplov in Angular - русскоговорящее сообщество
Alexander Iworb
Привет всем! Ищу решения для кеша данных в приложении для ускорения загрузки приложения. Идея такова, что данные приложения при работе с ним сохраняются в кеше, а при его перезагрузке сначала берутся из кеша, а затем выполняется актуальный запрос, который подтягивает реальные данные, но вот интересуют следующие проблемы:
- хранение кеша. В данный момент в localStorage, но планируется IndexedDB - это оптималный вариант, но работа с ним не самая удобная, особенно если что-то нужно получить синхронно;
- место внедрения кеша. Можно реализовать отдельным сервисом, как HttpClient, что усложнит внедрение, если проект большой. Можно же сделать через Interceptor, что требует более детальной настройки;
- запросы с параметрами. Не все данные есть в кеше, да и запросы могут идти с разными опциями,  нужно по-хорошему их все сортировать, получать хеш и хранить, но тогда проблема со страничными данными, которые могут друг друга частично или полностью перекрывать (например получить первых 30 пользователей, а другим запросом первых 15 пользователей - вторые данные содержатся в первых, но опции запросов разные);
- когда использовать кеш, а когда нет. Например, при запуске приложения нужно точно пользоваться кешем, в то время как во время работы в него нужно только сохранять.

Буду благодарен за хорошие статьи и идеи по данному вопросу.
Хм, а сервис воркер здесь не подойдёт разве?
источник

D

Dolgovec in Angular - русскоговорящее сообщество
Александр Духновский
Попробуйте джест, возможно окажется быстрее. Создаётся тестовое ложе ака билдится весь проект, отсюда и задержка
Попробую, спасибо
источник

AI

Alexander Iworb in Angular - русскоговорящее сообщество
Dmitry Teplov
Хм, а сервис воркер здесь не подойдёт разве?
Находил только решение для PWA, для файлов. Если есть возможность такое-же проделать с запросами, то подходит
источник

AS

Anton Shvets in Angular - русскоговорящее сообщество
Dolgovec
Возможно да, иногда имеет место быть в небольших проектах. Но я бы не рекомендовал в больших проектах, если не используется БЭМ, т.к. именования могут повторяться и будут конфликты
Да хоть в каком проекте, и не обязательно с бэмом, можно и каскад. Выключение энкапсуляции - рекомендованый метод стилизации вложенных компонентов, не посыпать же все deep-ами.
И в ассетсы тащить стили действительные только для этого компонента не нужно.
источник

АД

Александр Духновский in Angular - русскоговорящее сообщество
Dmitry Teplov
Хм, а сервис воркер здесь не подойдёт разве?
Не. Там время прогрева приложения не сильно изменится ж
источник

АД

Александр Духновский in Angular - русскоговорящее сообщество
Alexander Iworb
Находил только решение для PWA, для файлов. Если есть возможность такое-же проделать с запросами, то подходит
С запросами - конечно есть. Но не средствами фронта. Плюс нужно будет как-то инвалидировать кеши на сервере, что не очень просто
источник

AI

Alexander Iworb in Angular - русскоговорящее сообщество
Вот да, это одна из проблем, особенно при долгой загрузке. Я еще не знаю что сделать в случае, когда данные из кеша, новые еще загружаются, но пользователь начинает менять что-то и отправляет запрос на сохранение до того как до него дойдут актуальные данные, либо данные дошли, но должны изменить что-то, что пользователь начал редактировать.
Делая кеш столкнулся со столькими нюансами, сколько не было при обычной разработке приложений даже.
источник

D

Dolgovec in Angular - русскоговорящее сообщество
Anton Shvets
Да хоть в каком проекте, и не обязательно с бэмом, можно и каскад. Выключение энкапсуляции - рекомендованый метод стилизации вложенных компонентов, не посыпать же все deep-ами.
И в ассетсы тащить стили действительные только для этого компонента не нужно.
Нуууу, может имеет место быть. Но я не сторонник разбросанных в разных местах стилей, которые отвечают глобально. Когда в ассетах хранятся общие стили/рестилизация компонента, я обычно ожидаю, что там же будут в модулях и стили (основные) для остальных компонентов. Ну или накрайняк в ассетах только рестилизация вендоров, а тогда уже все остальное глобально в компонентах, но это не всегда удобно
источник

AS

Anton Shvets in Angular - русскоговорящее сообщество
Dolgovec
Нуууу, может имеет место быть. Но я не сторонник разбросанных в разных местах стилей, которые отвечают глобально. Когда в ассетах хранятся общие стили/рестилизация компонента, я обычно ожидаю, что там же будут в модулях и стили (основные) для остальных компонентов. Ну или накрайняк в ассетах только рестилизация вендоров, а тогда уже все остальное глобально в компонентах, но это не всегда удобно
Если в ассеты, то придется в ассетах повторять структуру приложения, плоский список для большого проекта не ок.
источник

D

Dolgovec in Angular - русскоговорящее сообщество
@iworb а почему бек долго отвечает? много данных в ответе и они грузятся долго, или долго считает что-то?
источник

AI

Alexander Iworb in Angular - русскоговорящее сообщество
Dolgovec
@iworb а почему бек долго отвечает? много данных в ответе и они грузятся долго, или долго считает что-то?
В разных вариантах по разному. Рассматривается вариант с медленным интернетом со стороны клиента и второй вариант с огромным количеством данных, где сам объект много занимает и в силу особенностей модели не может быть урезан
источник

D

Dolgovec in Angular - русскоговорящее сообщество
@xuxicheta да, это тоже не гуд. Поэтому обычно я выношу общие стили в ассеты, а уникальную/ мелкую стилизацию оставляю в компонентах
источник

КВ

Кирилл Валиков in Angular - русскоговорящее сообщество
Alexander Iworb
Привет всем! Ищу решения для кеша данных в приложении для ускорения загрузки приложения. Идея такова, что данные приложения при работе с ним сохраняются в кеше, а при его перезагрузке сначала берутся из кеша, а затем выполняется актуальный запрос, который подтягивает реальные данные, но вот интересуют следующие проблемы:
- хранение кеша. В данный момент в localStorage, но планируется IndexedDB - это оптималный вариант, но работа с ним не самая удобная, особенно если что-то нужно получить синхронно;
- место внедрения кеша. Можно реализовать отдельным сервисом, как HttpClient, что усложнит внедрение, если проект большой. Можно же сделать через Interceptor, что требует более детальной настройки;
- запросы с параметрами. Не все данные есть в кеше, да и запросы могут идти с разными опциями,  нужно по-хорошему их все сортировать, получать хеш и хранить, но тогда проблема со страничными данными, которые могут друг друга частично или полностью перекрывать (например получить первых 30 пользователей, а другим запросом первых 15 пользователей - вторые данные содержатся в первых, но опции запросов разные);
- когда использовать кеш, а когда нет. Например, при запуске приложения нужно точно пользоваться кешем, в то время как во время работы в него нужно только сохранять.

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

AI

Alexander Iworb in Angular - русскоговорящее сообщество
Кирилл Валиков
Не совсем понимаю проблему асинхронного Кеша, если запросы все асинхронные) оборачиваем все в один обсервабл, вызываем его через асинк, а обсервабл будет сначала отдавать кеш, и по готовности - актуальные данные
Это не проблема :) я просто уточнил, что работа с IndexedDB не самая удобная. Проблема в том, какие действия могут быть совершены между моментом показа кешированных и актуальных данных
источник

КВ

Кирилл Валиков in Angular - русскоговорящее сообщество
Alexander Iworb
Это не проблема :) я просто уточнил, что работа с IndexedDB не самая удобная. Проблема в том, какие действия могут быть совершены между моментом показа кешированных и актуальных данных
Это бизнес проблема :)  либо скрывать под лоадером, либо оповещать о результатах где-либо
источник

D

Dolgovec in Angular - русскоговорящее сообщество
Alexander Iworb
В разных вариантах по разному. Рассматривается вариант с медленным интернетом со стороны клиента и второй вариант с огромным количеством данных, где сам объект много занимает и в силу особенностей модели не может быть урезан
Если данных много, то IndexedDB плохой вариант. Возможно, там какую-то часть хранить самую важную, на остальное ставить заглушки. Во время ожидания прогрузки реальных данных дисейблить все вводимые поля или не обрабатывать первый ответ от сервака, а дожидаться уже второго
источник

AI

Alexander Iworb in Angular - русскоговорящее сообщество
Кирилл Валиков
Это бизнес проблема :)  либо скрывать под лоадером, либо оповещать о результатах где-либо
Если скрывать под лоадером, то смысл кеша теряется :) но да, это скорее краеугольный вопрос, чем реальная проблема
источник

D

Dolgovec in Angular - русскоговорящее сообщество
Мы на одном большом проекте с такой же пробелмой (где было несколько миллионов связанных записей, по которым считались на беке данные для фронта) декомпозировали максимально запросы и по частям показывали их, в то время как юзер что-то менял - дисейблили все остальное, пока ответ от сервака не придет
источник

AI

Alexander Iworb in Angular - русскоговорящее сообщество
Благо, мне желательно только ускорить первоначальную загрузку, количество записей не такое большое, но сама запись ощутимо большая, в моем случае должно хватить IndexedDB
источник

ДЛ

Дмитий Левченко in Angular - русскоговорящее сообщество
Всем привет, подскажите, пожалуйста, может кто-то сталкивался. Пробую писать unit тест для компонента, в котором используются формы.

Получаю такую ошибку:
       Failed: Unexpected value 'FormGroup' imported by the module 'DynamicTestModule'. Please add a @NgModule annotation.
       error properties: Object({ ngSyntaxError: true })
Я импортировал ReactiveFormsModule, FormsModule, FormGroup но ошибка остается
Скрин  https://pastenow.ru/7OTJ3
источник