Comments (9)
@savelichalex I didn't meant to imply it would necessarily be worse, just that the gains of using a root listener would be minimal when you already have references to nodes. I'm always up for performance tweaks, but I try to only make adjustments based on facts - data from profiling, benchmarks, etc.
I do somewhat understand your point about touch events, but I don't think this is something that belongs in Preact's Core unless it could be done with incredibly little code/overhead. Allowing Preact to expand constantly over time would render the project meaningless when the overarching goals include being efficient and lightweight. I've been using Preact for both desktop and mobile app development for around half a year now, and have shipped a number of production apps without needing to work around event normalization issues.
Additionally, Preact already has points of extension that would make building a "tap plugin" trivially easy. You could simply inject a vnode
hook that transforms events, or even proxies their handlers to normalize event coordinates, names, etc:
import { hooks } from 'preact';
function normalizeTouchEvents({ attributes }) {
// mutate attributes.onTouchStart or whatever here
}
let compose = (...fns) => r => fns.reduce( (r, f) => f(r), r);
hooks.vnode = compose(hooks.vnode, normalizeTouchEvents);
Lastly, I think you may be attributing far more value and complexity to React's Event System than it actually warrants: all it does is normalize some inconsistencies in older browsers. It does not make touch events work in non-touch browsers, or emulate mouse events in touch environments - it doesn't even account for Pointer Events. In modern browsers, it is very literally a thin abstraction on top of a nearly identical API.
It just wouldn't make sense to bundle this into Preact when the browser support target for the library does not even include the browsers React's own implementation is intended to fix.
I'm going to close this issue for now, but I would be happy to continue discussion on Gitter, opening issues for more specific concerns if they arise.
from preact.
Preact does provide a cross-browser API, in that it abstracts event handler registration and removal. It proxies events, perhaps mildly similar to React, but does not implement a custom propagation scheme like React does. Are you sure Preact doesn't already meet your needs?
I would need to see some convincing metrics showing root node event observation to be faster than standard addEventListener before venturing down that path.
More importantly, Preact specifically does not attempt to support IE 8 and prior without shims - that means every supported browser for Preact already has addEventListener
. For a project where simplicity and size is paramount, I see little reason to cater to less than 1% of browsers at the expense of the other 99%.
Perhaps it would help if we framed the discussion more: what are you doing with events that is not currently supported in Preact?
from preact.
We've renamed this to options
Resources:
from preact.
Thank you so much @JoviDeCroock !
from preact.
Hi @savelichalex - Preact intentionally eschews a synthetic event implementation in order to avoid overhead, both in terms of performance and maintenance. One of the primary goals of the project is to provide a little API surface area as possible, which means relying directly on browser events. If you have a use-case that isn't met by this, please let me know, otherwise I've added this to the "differences" wiki page and we can close the issue.
from preact.
But this is why i move from virtual-dom to react. This is feature in my opinion has strong influence for performans, at first this is one listener, at second events are taken from pool. And (it maybe more important) SynteticEvents provide crossbrowser API
from preact.
For example touch events are different in almost browsers, React provide universal api for all events. In additiion most browsers like to add specific fields to events. There are frameworks do universal events, beginning from jQuery, because this is really helphul for developers.
This is question not about my specific action with events, this is about universal api for developers. I think that if you choose library to work with dom, you want to get comfortable and usefull api and not thinking about crossbrowser support. This is should do library for you.
from preact.
And why think that one root listener isn't better for performance?
from preact.
Sorry to ask in this old issue... However, I need now to normalize the touch events in my project. The problem is that an external library uses the touch events and with Preact is not working in Iphone / Ipad. I'm using Preact 10.3.4. I tried this:
import { hooks } from 'preact';
function normalizeTouchEvents({ attributes }) {
// mutate attributes.onTouchStart or whatever here
}
let compose = (...fns) => r => fns.reduce( (r, f) => f(r), r);
hooks.vnode = compose(hooks.vnode, normalizeTouchEvents);
But looks that nowadays hooks
doesn't exist. How can I do it now @developit ? Is there an alternative? Thank you so much!!
from preact.
Related Issues (20)
- Make render-function curried HOT 5
- Component don't rerender if prop changes in short period of time HOT 3
- 10.18 regression: setState triggers DOMException: Node.insertBefore: Child to insert before is not a child of this node HOT 12
- Radix UI / Select component in preact HOT 1
- `useId` generates duplicate identifiers in some cases when calling `render` from `@preact/compat` multiple times HOT 3
- Request: setProperty() Export HOT 2
- Add `x_google_ignoreList` (Ignore-listing code) support to sourcemaps HOT 11
- Incorporate preact to NEXTJS. HOT 3
- Focus lost when moving child with `key` HOT 3
- [preact/compat] onTouchMoveCapture not processed
- TS errors for contentEditable attribute
- Aliasing React to Preact in Deno HOT 9
- "Cannot read properties of null (reading '__H')" when hydrating a component in the browser HOT 1
- (question)Is there any practical example of purely using CDN? HOT 5
- TypeError: undefined is not an object (evaluating 'this.l[e.type+!1]') HOT 1
- preact+react-modal,Uncaught TypeError: Cannot read properties of null (reading '__H') HOT 9
- Island architecture with partial hydration HOT 3
- preact renders only one iframe if more than one iframe provided to dangerouslySetInnerHTML HOT 2
- When the value of setState remains unchanged, the state-driven controlled component, such as <input/>, seems to no longer be under the influence of the state. HOT 1
- There is no `context` in `preact/compat/PureComponent` and it breaks other libraries like `react-recurly`
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from preact.