-
-
Notifications
You must be signed in to change notification settings - Fork 2k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
The road to Preact 11 #2621
Comments
I think that it is better that Preact 11 stops support IE11 and Edge which is not based Chromium. |
Good idea! We should definitely drop the requirement to work out of the box with IE11. This would allow us to use |
It may be unimportant thing, there is #2331. |
2kb 2kb 2kb |
@developit mentioned plans for better supporting server-side-rendered HTML that stays at least partially functional even without JS (I found HEY inspiring here). Any details on those plans yet? |
@rauschma The main things we have explored related to that are actually implemented using Preact X as it exists today, so I'd put them on an independent timeline from a Preact 11. The reason for this is that anything related to HTML ends up requiring that folks use (more) specific server-side techniques, versus the current simplified renderToString() approach. I'll try to prioritize at least publishing some of the exploratory work and demos we have. It's less impactful than providing an off-the-shelf fullstack framework, but that's probably fine given the highly variable nature of Preact usage. |
Some very interesting ideas here Marvin, thank you for airing them and thanks to the preact team generally for all their hard work on 10.x. I have committed this year to building preact apps almost exclusively and it has been a pleasure; the tools, the community, everything is like a breath of fresh air. One thing I am wondering about the future of preact however, is, will it always try adhere to the react API? Being ~ its namesake and given all the effort that went into increasing ecosystem compatibility in X, I assume the answer to this is yes. But I am curious, if you happened to stumbled across a potentially useful new primitive or feature outside of the react API.. would it be considered? I've been inspired recently by the likes of hyperapp and svelte with their effect and subscriptions APIs respectively. Do you see any promise in these kind of interfaces specifically, or are the team content that these kind of behaviours can be encapsulated by hooks? |
Thank you so much for the kind words! It's comments like these that keep us motiviated! ❤️
We will keep compatibility with the React API for the foreseeable future, but it's very likely that we'll put our own spin on thinks more in the future. Keeping
Personally, I fully agree that a simple subscription primitive is very appealing and something I've played a lot in the past and shipped a few projects with. We see a lot of code in the wild where re-renders are triggered for the sole sake of triggering effects. Not saying that this bad code, but rather that hooks tend to lend itself to that usage and I'd love to welcome different ideas to Preact. So far reactivity is a leading contender to do that in my opinion. That said we'll always try to keep that part pluggable like now as there never is a silver bullet approach and different applications require different trade-offs. One neat library that uses RxJS as a first class option to manager state for Preact components is bassdrum. There is also #1923 which adds a vue-like composition API on top of Preact as another alternative to hooks. So yeah I see a lot of value in these concepts and we do want to make it easier for those systems to directly plug into Preact in the future. Hooks are a great approach for local state but they're by far not the only one. Our devtools extension barely uses hooks or classes for that matter for example. |
@developit Having something lightweight in that space would be very welcome! |
I see that the new size calculation standard is to calculate the size of Hello world project. After tree-shaking, it seems that there is no need to pay for the class API. In addition, does the diff algorithm, which is detached from DOM, mean that it is completely detached from DOM, and vdom does not contain DOM information? If so, it would be great. I'm looking forward to it~ |
The way vdom works is that it always needs a reference to the underlying element. There is nothing that says that this has to be a DOM node though and that can be leveraged for different renders. There is more work to it than that on the road to support custom renderers, so it may be that we lay down the groundwork in v11 and add offical support for it in v12. |
There is a way that no need underlying element, such as https://github.com/Matt-Esch/virtual-dom, |
Good point, I stand corrected! Creating "patch" objects and push them in an effect queue is something we thought about too. It's something where we will likely experiment more with it after Preact 11 or when we rewrite our reconciler. |
Thanks for your response above @marvinhagemeister 🙇
This sounds sensible and I can't wait to see what our own spin ends up looking like! I had never heard of bassdrum so will have to check it out, also #1923 looks very interesting. Keeping things pluggable seems like a good idea too. Very much looking forward to v11 now! Keep up the good work and thanks again for your insight and explanation. |
@marvinhagemeister I have never worked with Preact, But i happen to pass by this repo. And you can already see what I'm doing! This is fresh, This is oxygen. I know React is mainstream, but only because it came up with the idea of components i guess. You guys are doing awesome work. I found React very FB sided, instead of being a true OS project. They work on what FB wants(i mean that's ok) but still, thats not how OS should work. I love React by all means, but that direction ain't fair. You guys will rock soon. Mark my words. Keep at it. ❤️ |
@sauravkhdoolia Thanks for the kind words ❤️ We share your enthusiasm and can't wait to see what's next 👍 |
I think preact needs a reverse complement of preact/compat, either at runtime or as a codemod. Right now, there's little incentive to use the preact namespace instead of react. As evidence of this, i think the stars to dependent projects ratio is a good indicator, maybe think of it as an adopt-ability ratio. Lower is better. If developers could use preact without fear of not being able to switch to react, i think adoption rates would be much higher, which will allow preact to not only compete for a larger chunk of the open-source mindshare , but also to allow people to actually use deviations from the react api. |
Since most browsers support Brotli, I think it may be better to focus size compressed by Brotli, not gzip at Preact 11. |
For me the top priority is performance, I don't care about React compatibility at all. Most used mode is drop in bundle with HTM as I am doing embedded apps on really small devices with just about 4 MB storage. Preact 10 is already good but if it can be better with 11 then I'm all in. |
My two bits here: I for one appreciate the ie11 support, if you remove it, you'll have to do some heavy lifting to assure that simple polyfilling makes preact ie11 compatible with end-2-end test suites and how-to's that work. |
could we move to htm and have it compiled out on build instead of vhtml by default (and save a few kb on the post build size) ? |
About IE11, dropping it will allow the codebase to evolve, ship less and better code for modern browsers. Maybe it could be possible to create a IE11 compat layer? I think Vue was heading in that direction. |
Now that Microsoft has dropped IE11 support officially, I'm very much in favor of doing so too 👍 |
To be precise, Microsoft also drops Edge (legacy). |
wish: const [ getter, setter ] = useState({DeepObject}, {deepEval:true}). |
I mean I wouldn't be arguing which one is better haha.. I used to use the classes, and it seemed very inuative, and quite simple to understand. I started up on classes, but then I looked into hooks, and yes its more complicated sometimes, but honestly, I like it more now that I'm used to it. I don't know why the only example you found was using |
You are right they work. I did not try that. Works better than it looks in a real world example I saw before. Still no dependency inversion, so it is a nogo for me (I use class property decorators) ;-) I can see some benefits but none of them work for my applications. The problem in my usecase is that the main component I really need is the renderer and its diffing (+ Component). I whish I would not be too lazy to make my own view renderer without the need to be compatible with the React universe :-D Btw I only said that it is sad that the main functionality is excluded from the main package. I have no benefit of that. No one has. It only results in touching all tsx files to correct the import path. If someone doesn't use Component then it would be striped out by the tree shaking of the bundler AFAIK. IMO the hooks are a new kind to make a application. It should be it's own framework. Now we have two in one and the way I like feels like it is getting obsolete. |
Is 11 ever going to happen? |
very much working on it @ettoredn still an open-source project and we have a job outside of this as well https://github.com/preactjs/preact/tree/main |
Is maintaining React compatibility a goal for Preact 11? The release of React 18 29 Mar 2022 puts the latest version of React a fair way ahead of (or diverged from) Preact X, including several new hooks (e.g. It doesn't look like much of the React 18 new capability is considered as part of the Preact 11 roadmap (at least not from what I could tell in this ticket, or anywhere else obvious), and compatability issues are already showing up in libraries moving to support React 18 features. |
There have been a few PRs working on this, see #3402, #3498, and #3510. That last PR in particular was a fair handful of those hooks.
Those last two were aimed at a Preact X release, not 11 ( |
@rschristian it's very promising we may get react 18 support before preact 11, but all the PRs you mention are now closed. Do you know why? there doesn't seem to be any alternative PR that supersede |
Is there any information on Preact 11? Features planned, release date, etc.? |
It has come to my attention that there exists a thing called React. |
Is this a troll comment?
Not sure if related to Preact 11, but take a look at Jason's Twitter: https://twitter.com/_developit/status/1549001036802625536?t=dKVS_S-_8fDUS-x8qO7Ymw |
Let me write a bit of an update on this topic as we have been hard at work, currently we have a branch in parallel to As you might have noticed we are still very actively releasing on Preact X because we have been finding a lot of things we can improve. Among these releases have been several fixes to event-handling, repeating renders, consistency of hooks, .... I personally think there is a few more low hanging fruits we can tackle in X. These changes are then copied over to 11 because we want to make stuff great and usable for all of you. Current changes in 11:
These are the externally facing changes that most of you will notice from the start, however internally we have changed a lot. We have moved to a backing VNode structure. This means that rather than seeing a lot of We have introduced a new way of diffing arrays of children based on a skew indicator, this looks like a superficial algo fix but it solves some consistency problems that are currently present in X in relation to focus loss or remounting children that shouldn't be. We have reduced the possible code-paths that are traversed during hydration/initial mount to guarantee that when your server-side HTML hydrates or when your client-side app renders for the first time that we follow the most optimal path, noone likes waiting for their application 😄 I hope this short summary is at least sufficient for all of you, we have a first experimental tag released on npm which we have used to update preact-devtools and prefresh already for when we feel ready to release to the general public. The tweet from Jason there can also be used with Preact X |
@JoviDeCroock Thank you so much for the update. I guess I can speak for many people, when I say: thank you for your hard work and the amount of thinking + experimentation you all put into moving the framework/ library (don't pin me on that :D) forward. |
I've read briefly about this update recently and your post is the most detailed I've read so far so thanks for this info. I have a few questions (hopefully quick):
Great job to you and everyone who worked on the new version. I'm excited to try it out as I'm aware it can have significant performance improvements for some apps! |
Typically through CDN's (or at least how they currently work) you won't benefit from tree-shaking so class-components won't be shaken out but that improvement could be offset by just the download being very fast from your CDN 😄 Currently we have 1 experimental publish (https://cdn.skypack.dev/-/[email protected]/dist=es2019,mode=imports/optimized/preact.js) but that is a bit outdated compared to the current main so feel free to wait for our alpha's to start appearing. I will try and make a set of open-tasks with the team but can't promise anything atm 😅 personally it's a very busy time |
Great information. Thank you! |
I want to write a few thoughts about Suspense\Lazy. I'm not a pro, so I apologize right away, these are just the ideas of a preact user ...
|
as
|
Suspense will be in the core, and as I show next, this entity is not needed at all if Component are allowed to return Promise.. (not sure about Component , maybe it's better
Ok. If I want a behavior of Promise.any?, another constraint that removes the use
Nope. If I use logic on classes I expect it to work everywhere. I will even say more, it can be used now, but it looks weird...
It does not matter. Names can be anything... |
most likely it'd just be implemented as part of compat, we could probably do it now actually the
there's some stuff not covered like caching the result of a promise but that can be easily added there's one part of the use proposal that I'm not sure if Preact should implement properly though, and it's the part involving monkeypatching fetch API |
Any plans on a React Server Components implementation in Preact for v11? Would be great to get async function components that run server-only, DX is 🔥 https://twitter.com/karlhorky/status/1633104690907947008 I saw this but it seems like there's not much going on there: |
If this does move forward, please don't kill use of the useContext API like React did. |
In another section i've read the reply of a Preact main contributor saying that with |
I din't see any mentions of performance on 11. Are there any performance improvements ? I saw that there are some v11- prefixed branches and judging by the names I assume some performance improvements were tried and/or considered. PS: I would really like to see the new goodies improving perf |
I don't see this May 24 blog post linked here so it makes sense to share it for those of you wondering when Preact 11 might be coming. Tl;dr: it's still coming but a lot of the things they thought would be breaking changes have been or will be released in X, so 11 will be less of a major set of changes whenever it arrives:
|
Is React Compiler support on the roadmap for Preact? |
@9Morello I don't believe anyone's looked too closely into it yet, but as the compiler gets closer to full release we'll definitely be seeing if we can support it. No guarantees of course, but from what I've seen so far, it seems fairly likely. Doesn't seem like it'll need to go in v11 either, v10 might be able to support it. |
With Preact X being a great success there The 10.x release line was all about increasing ecosystem compatibility and the initiative was a complete success. Compared to Preact 8.x there are many more third party libraries that work out of the box with Preact, we saw the addition of Fragments, hooks, a revamped devtools extension, prefresh for native HMR support and much more.
In summary, we learned a ton the past year whilst maintaining Preact X and we want to push Preact even further. So the next question for us is: Where do we go from here? What should a successor look like?
This is a collection of some of our thoughts, but is in no means a concrete feature list for Preact 11. Please keep that in mind.
Size reductions
Our small (smol?) size has always been one of our strong points and the thing I'm personally the most proud of. With an ever growing feature-set we're currently very close to the 4kB mark and would like to bring that number down again. Whilst we may be able to shave of a couple bytes here and there, I think we won't have substantial changes on that front without thinking critical of each feature.
Only include what's actually used
The most common talking point is that many projects (including preact-devtools) don't use a single class component. The natural question that arises here is why we need to still pay for the cost the class API regardless. Ideally only the features that are actually used should be shipped to users.
The same is true for
preact/compat
which will always include side-effects even though a user may only needs to import to thePortal
component for example. There have been some attempts to do that in the past, but to me it seems like some changes in core could make that easier.The overall motto should be: Only include what's used.
Move
IS_NON_DIMENSIONAL
to compatWhilst it sounded cute on paper it has turned into a growing list of properties (see #2608 ) which is something we never wanted to have in core. The reason we kept it over from the 8.x line in core, was that it allowed us to keep old codepen demos working. This was especially useful at a time where we weren't officially committing to Preact X and we were more just playing around with various approaches.
I'd even go so far as to consider it harmful as I've seen it confuse new developers first-hand when switching between writing CSS and declaring inline styles. It's a feature we cannot remove entirely because of React, but moving over to compat should be fine.
Reconciler performance
Whilst the original plan for X was to break from using the DOM for traversal and only use the
vnode
tree for that, we ended up in the a little bit awkward middle ground. Most operations walk thevnode
tree, but there are some remaining ones that still rely on the DOM itself. This is made more difficult by the existence ofFragments
.For our next generation we should cut ties with our past and completely base it on the
vnode
tree instead. The newly added statistic metrics reveal some great places to look for improvements. Some of the ideas that are currently floating around:The effect queue idea is in particular interesting as it would the browser to batch all paint jobs and process them at once instead of having those intertwined with running JS. Heck we could make a lot of the DOM pointer code easier by applying those changes right-to-left instead of left-to-right.
What's more is that having an effect queue would open up the possibility for custom renderers. It's a long shot and not something we'll focus on in the near term, but we would at least have the possibility to do so nonetheless.
Boosting hydration
We're already in a good position when it comes to hydration performance but we have a lot of ideas what we can do to make it even faster. Any optimizations we'll do on our reconciler will directly benefit hydration, so there is a very close connection between the two.
Besides reconciler performance, there is a need to re-evaluate how we can best boot up from SSR'ed content. Due to us not joining adjacent text nodes anymore we have a mismatch during hydration. SSR'ed HTML will always create a single text node, even if it was created from multiple ones.
An alternative to joining adjacent text nodes is to insert HTML comments as markers in-between them. Not sure which approach is ultimately easier, although my gut tells me that the latter can easily become complex.
Remove the need for
forwardRef
The introduction of the
forwardRef
component is mostly a workaround for not keepingref
inprops
. If we keep it in there we can make allforwardRef
components redundant:There is a downside to that though in that there may be custom runtime checks in third-party libraries that explicitly check for additional properties in the
props
object. We ran into some of those in the past if my memory serves me well, and I'm secretly hoping that the increasing adoption of TypeScript has improved the situation compared to a few years ago.Mark root nodes as roots
Both the devtools and
Portal
component would benefit from having a way to place sub-trees into existing ones. Currently no tree knows about the others which leads to some weird edge cases withPortals
. There has been fantastic work during the 10.x release line to get it stable and I feel like we can make that code easier by having a special branch for root nodes as sub-trees in our reconciler.If we follow that thought further we could theoretically even look into switching renderes on the fly if there is any attached to the root node. A use case for that would be to switch to rendering into a canvas element somewhere in the middle of the tree.
What else can we do?
The above list is already a lot of work and will keep us busy for months but there may be stuff I've missed. Again, the points mentioned here is a collection of ideas and not a definitive feature set for Preact 11.
The text was updated successfully, but these errors were encountered: