Comments (8)
@deniskolodin would this be a 0.2.0 feature too? I'd love to help with this one as it's the one abstraction I think would be nicest. 😄
from yew.
I've been playing around with this implementation. I don't think I should be the implementer, based on the amount of trouble I've been having even coming up with an API, but I have some thoughts.
I think each component should have its own lifecycle almost identical to a full yew program. That is to say, each component should have a view, an update, and a model with an internal message type. Each component should also have a public Props
struct (could be empty but actually must be named Props
), and yew could implement a custom derive
for the Props
object using procedural macros, thus abstracting away the need for the component's user to ever actually use
the Props
"export" (JS terms because JS developer).
I ran into issues when trying to create a VComponent
, and I also tried to make VTag
compatible with components. Neither methodology "worked" for me and my Rust skills.
I implemented a potential example in this commit, so this was the example I was trying to get to compile and run.
Would love to hear thoughts on this.
I think we should really consider what the "modularity", "reusability", and "scaling" stories are for yew before coming up with the exact API for components. That said, I've been very happy with how React handles components, and I think a similar story might work very well for yew if we can work it in with Rust's type system. Callbacks and closures might also not work quite as well as they do in JS for passing up data to parent components, so we might want to have some sort of hook to pass a message up to the parent or global message handler. This is really where I started running into design issues.
I also read up on Elm's scaling story and was unimpressed due to the fact that (I believe) it relies on one global message type and model. I think we need a more rigid, opinionated component structure.
from yew.
@rivertam @deniskolodin I guess it's a matter of what feels best and where we're taking influence from? I agree that components should have their own lifecycles but I was thinking something more alike to React. I'm also not the strongest in Rust though. Maybe if we could enumerate the things we would want abstracted away we could figure out what that looks like in Rust.
from yew.
The good thing about modeling after React is that it encourages "strict" typing very strongly with PropTypes
. I wouldn't be mad at a 1-to-1 translation, if possible. The hardest part is probably going to be the macro if we go that route. For that reason, it might be better to avoid the JSX-style and stick with a direct component interpolation. Just a thought.
from yew.
@rivertam Agreed. It doesn't need to look too much like React. I was most interested in taking the ideas around its state management. The abstraction around setState
, Props
, State
, etc is really well built and lets users encapsulate stuff well.
from yew.
I disagree about state management for two reasons.
- The way state management works in React is different than how yew does it. In React, state management is done through transformations. It is highly encouraged to not change the state directly, but rather return a new state based on the old state. This doesn't work so well in Rust, as it would require state-model subsets. E.g. If your state-model looks like
{ counter: u64, name: String }
, and you just want to changecounter
, you'll have to create an entirely new state-model instance, where in React you just have to return{ counter: counter + 1 }
. This is also noted in the highest levelupdate
function, which treats the state as mutable rather than returning a new state. - The way
setState
works is/would be quite inefficient. If we're not making massive ergonomic improvements by implementing it as React does, I don't think it's worth the tradeoff.
Another approach I've been thinking of is more Redux/Elm-like, which would be that we'd have "reducers" (update), "models", and "actions" (messages) which would be specified in the same file as the view and would only affect a certain part of the global model and only receive those messages. I have no idea how we'd implement it, but I feel this might be another reasonable approach.
from yew.
Basically copying the API in reason-react should work well. There each component has a message type and reducer to update the state: https://reasonml.github.io/reason-react/docs/en/state-actions-reducer.html
ReasonML is in many ways more similar to rust than Elm or JS anyway :)
from yew.
Components was implemented with #91 🎉
from yew.
Related Issues (20)
- Neovim editor setup
- yew-router example does not compile HOT 5
- Yew 0.21 and Prokio 0.1.0 use different versions of Gloo
- Can't use `Self` in generic when deriving `Properties`
- Tutorial proxy-backend returning `index.html` not json? HOT 5
- use_effect lacks documentation HOT 2
- Tutorial uses String not AttrValue
- File based Routing HOT 1
- Caution about navigator callbacks in functional components is confusing
- Yew Agent documentation
- When passing `Classes` in `html!`, component props don't need `.clone()`, but element props do HOT 1
- [Feature]: Provide a `Default` trait implementation for the `UseStateHandle` struct HOT 2
- Japanese documents are out of date
- Context with Rc<Refcell<T>> reducer type has unexpected behavior HOT 1
- Why not provide some Form components? HOT 1
- SSR + hydration results in a stalled request
- I am unable to build even the simplest Yew applications using Rust 1.76 and running under macOS 14.3 HOT 1
- Blob download encoding
- `VRaw` namespace support for `svg` contents.
- Issue with change detection? HOT 4
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 yew.