Добрый день! Производительность Tree.js-приложений больше зависит от видеокарты, основные вычисления производятся именно там. Это нормально, что кулер начинает шуметь — нагрузка немного возрастает, поэтому веб-страница при открытии напоминает видеоигру. В идеале необходимо тестировать WebGL-страницы на производительность — ее можно оптимизировать настройками. Для слабых компьютеров можно отключить совсем. Статистика использования Three.js растет с каждым годом. Также предлагаю посмотреть другие сайты, использующие Three.js.
Статистика загрузок насчитывает порядка миллиона в неделю. И это только Three.js, но существует множество других библиотек. Для сравнения у Vue 3-4 миллиона загрузок в неделю, React — 15-17 миллионов, но эти два фреймворка общего назначения. На мой взгляд, использование WebGl в веб-разработке будет расти с каждым годом по мере подготовки специалистов и роста производительности компьютеров.
Данный способ очень подробно описан в документации. Можно там посмотреть, как это правильно делается. На наш взгляд, способ слишком «костыльный», чтобы применять его на практике. Человек, который не знает этот нюанс или забыл, может не понять, что там происходит. WatchEffect позволяет сделать это более аккуратно, понятно и с меньшим количеством кода.
У watchEffect есть свои плюсы, например, он позволяет отслеживать сразу несколько переменных. Кроме того, благодаря свойствам flush, onTrack, onTrigger можно оптимизировать некоторые процессы вычислений, а также watchEffect предоставляет удобный метод для отмены асинхронных операций.
Вопрос 1: под shared-модели создается папка models (можно даже алиас создать @models в тсконфиге). Модели shared-компонентов хранятся в папке с компонентом
Вопрос 2: каждый shared-компонент лежит в отдельном минимодуле, которые импортирует себе такие же минимодули, если оные нужны. Переиспользование кода возможно, главное не скидывать все в один глобальный Shared-модуль. Чтобы построить правильно зависимости между модулями, можно посмотреть упомянутый в статье материал про DI & IoC
В этом материале мы как React-разработчики обращаемся к опыту работы с конкретным языком, не затрагивая другие фреймворки и языки. Да, мы согласны с тем, что некоторые советы являются универсальными и относятся в целом к теме программирования.
Да, действительно, если нужен только debounce, то его можно импортнуть отдельно из «lodash». Но в статье больше отмечается тот факт, что некоторые разработчики ради одной маленькой функции устанавливают целую библиотеку (debounce же упоминается из-за яркого примера).
Подход встроен в шаблон. Vue использует весь паттерн MVVM, но фокусируются в большей степени именно на слое ViewModel, в котором и происходит "магия" объединения между слоями View и Model средствами двух сторонней привязки данных. Автор об этом здесь хотел сказать.
Да, вы правы, v-for имеет более высокий приоритет, чем v-if, поэтому их не рекомендуется использовать вместе и ESLint будет выдавать ошибку. Но в данном случае мы говорим только о порядке атрибутов в секции template. Этот порядок определен, в статье об этом написано в самом первом пункте правила для секции <template>, там же приводится ссылка на документацию, где этот порядок задан. В примере приводятся все возможные варианты атрибутов и их порядок. Этот пример следует рассматривать как наглядное представление только этого правила, а не всех правил в совокупности.
Добрый день! Правило использования одинарных или двойных кавычек в ESLint:
quotes: [ERROR, 'single' ]
требует использования одинарных кавычек везде, где это возможно. Чтобы правило проверяло кавычки только в импортах, такого нет в ESLint, но можно использовать сторонний пакет npmjs, github.
Спасибо за комментарий. CRA не дает такой гибкости в вопросе оптимизации сборки приложения, как кастомная настройка webpack. В нашей статье мы подчеркивали, что такая конфигурация нацелена на оптимизацию крупных сложных приложений.
Redux в данном кейсе был обязательным требованием заказчика в силу его большей популярности. Сравнить его с mobx можно здесь.
Как верно подметил @DmOsinkin, выбор библиотек - не ключевая мысль данной статьи. Здесь речь идет о гибкой настройке сборки приложения и её оптимизации.
На самом деле, https не гарантирует вам "чистый" JSON - сертификаты также можно подделать различными способами, но это тема для отдельной статьи.
Вариантов навредить действительно не один и не два. Их количество ограничивается исключительно фантазией хакера.
XSS действительно в большинстве случаев происходит из-за того, что пользователь сам, как вы сказали, "просит" прислать ему что-то сомнительное. В статье как раз об этом и говорится: хакер не будет "в лоб" атаковать жертву. Он использует методы социальной инженерии и человеческий фактор, чтобы пользователь сам попался в его ловушку.
Предложенное решение подходит ко многим ситуациям, но все же не ко всем, поскольку в условиях высокой нагрузки нужно приспосабливаться к особенностям конкретного проекта. В нашем примере в скелетной анимации не было необходимости, это тема для отдельной статьи.
Добрый день. Если у объектов одинаковые геометрия и материал, то InstancedMesh позводяет повысить производительность. Тестировали на примере 50000 квадратов. При таком количестве удалось добиться анимации 60 кадров в секунду.
Добрый день. Хотя эта технология не влияет на ранжирование напрямую, она способствует скорости загрузки, что косвенно позволяет сократить показатель отказов и улучшить ранжирование. Кроме того, реализация AMP-страниц входила в число обязательных требований владельца продукта.
Добрый день! Подобный формат мы, конечно, тоже пробовали. Однако, при этом возникают проблемы с производительностью, когда при больших объёмах данных начинают конфликтовать нативный рендеринг js и рендеринг внутри React. По этой причине рендеринг получается совсем не плавным.
Действительно, привлекательный плагин, выводящий работу со сложными и взаимосвязанными данными на новый уровень. Но проблему запутанности кода при большом количестве бизнес-логики не решает. Все равно желательно будет создавать сервисы или альтернативы для структуризации кода.
Добрый день! Производительность Tree.js-приложений больше зависит от видеокарты, основные вычисления производятся именно там. Это нормально, что кулер начинает шуметь — нагрузка немного возрастает, поэтому веб-страница при открытии напоминает видеоигру. В идеале необходимо тестировать WebGL-страницы на производительность — ее можно оптимизировать настройками. Для слабых компьютеров можно отключить совсем. Статистика использования Three.js растет с каждым годом. Также предлагаю посмотреть другие сайты, использующие Three.js.
Статистика загрузок насчитывает порядка миллиона в неделю. И это только Three.js, но существует множество других библиотек. Для сравнения у Vue 3-4 миллиона загрузок в неделю, React — 15-17 миллионов, но эти два фреймворка общего назначения. На мой взгляд, использование WebGl в веб-разработке будет расти с каждым годом по мере подготовки специалистов и роста производительности компьютеров.
Данный способ очень подробно описан в документации. Можно там посмотреть, как это правильно делается. На наш взгляд, способ слишком «костыльный», чтобы применять его на практике. Человек, который не знает этот нюанс или забыл, может не понять, что там происходит. WatchEffect позволяет сделать это более аккуратно, понятно и с меньшим количеством кода.
У watchEffect есть свои плюсы, например, он позволяет отслеживать сразу несколько переменных. Кроме того, благодаря свойствам flush, onTrack, onTrigger можно оптимизировать некоторые процессы вычислений, а также watchEffect предоставляет удобный метод для отмены асинхронных операций.
Рады, что зашло)
Вопрос 1: под shared-модели создается папка models (можно даже алиас создать @models в тсконфиге). Модели shared-компонентов хранятся в папке с компонентом
Вопрос 2: каждый shared-компонент лежит в отдельном минимодуле, которые импортирует себе такие же минимодули, если оные нужны. Переиспользование кода возможно, главное не скидывать все в один глобальный Shared-модуль. Чтобы построить правильно зависимости между модулями, можно посмотреть упомянутый в статье материал про DI & IoC
Спасибо за уточнение. Действительно, была опечатка, поправили на app-routing.module.ts
В этом материале мы как React-разработчики обращаемся к опыту работы с конкретным языком, не затрагивая другие фреймворки и языки. Да, мы согласны с тем, что некоторые советы являются универсальными и относятся в целом к теме программирования.
Да, действительно, если нужен только debounce, то его можно импортнуть отдельно из «lodash». Но в статье больше отмечается тот факт, что некоторые разработчики ради одной маленькой функции устанавливают целую библиотеку (debounce же упоминается из-за яркого примера).
Если посмотреть на примеры кода из документации Vue или style-guide, то запятая после последнего элемента не ставится.
Подход встроен в шаблон. Vue использует весь паттерн MVVM, но фокусируются в большей степени именно на слое ViewModel, в котором и происходит "магия" объединения между слоями View и Model средствами двух сторонней привязки данных. Автор об этом здесь хотел сказать.
Да, вы правы, v-for имеет более высокий приоритет, чем v-if, поэтому их не рекомендуется использовать вместе и ESLint будет выдавать ошибку. Но в данном случае мы говорим только о порядке атрибутов в секции template. Этот порядок определен, в статье об этом написано в самом первом пункте правила для секции <template>, там же приводится ссылка на документацию, где этот порядок задан. В примере приводятся все возможные варианты атрибутов и их порядок. Этот пример следует рассматривать как наглядное представление только этого правила, а не всех правил в совокупности.
Добрый день! Правило использования одинарных или двойных кавычек в ESLint:
quotes: [ERROR, 'single' ]требует использования одинарных кавычек везде, где это возможно. Чтобы правило проверяло кавычки только в импортах, такого нет в ESLint, но можно использовать сторонний пакет npmjs, github.
Спасибо за комментарий. CRA не дает такой гибкости в вопросе оптимизации сборки приложения, как кастомная настройка webpack. В нашей статье мы подчеркивали, что такая конфигурация нацелена на оптимизацию крупных сложных приложений.
Redux в данном кейсе был обязательным требованием заказчика в силу его большей популярности. Сравнить его с mobx можно здесь.
Как верно подметил @DmOsinkin, выбор библиотек - не ключевая мысль данной статьи. Здесь речь идет о гибкой настройке сборки приложения и её оптимизации.
Добрый день.
На самом деле, https не гарантирует вам "чистый" JSON - сертификаты также можно подделать различными способами, но это тема для отдельной статьи.
Вариантов навредить действительно не один и не два. Их количество ограничивается исключительно фантазией хакера.
XSS действительно в большинстве случаев происходит из-за того, что пользователь сам, как вы сказали, "просит" прислать ему что-то сомнительное. В статье как раз об этом и говорится: хакер не будет "в лоб" атаковать жертву. Он использует методы социальной инженерии и человеческий фактор, чтобы пользователь сам попался в его ловушку.
Предложенное решение подходит ко многим ситуациям, но все же не ко всем, поскольку в условиях высокой нагрузки нужно приспосабливаться к особенностям конкретного проекта. В нашем примере в скелетной анимации не было необходимости, это тема для отдельной статьи.
Добрый день. Если у объектов одинаковые геометрия и материал, то InstancedMesh позводяет повысить производительность. Тестировали на примере 50000 квадратов. При таком количестве удалось добиться анимации 60 кадров в секунду.
Добрый день. Рассматривали библиотеку react-three-fiber, так как с ней удобнее работать в том случае, если у нас React приложение.
Добрый день. Хотя эта технология не влияет на ранжирование напрямую, она способствует скорости загрузки, что косвенно позволяет сократить показатель отказов и улучшить ранжирование. Кроме того, реализация AMP-страниц входила в число обязательных требований владельца продукта.