Understanding Yew Part 1

Hello! I am learning Yew for writing SPA's in Rust! I found some of the concepts difficult to understand at first and decided to take notes (simplifying the concepts for my stupid brain)..

I am planning on making this a series with the following.

1. Yew component and lifecycle overview
2. Yew router overview
3. Yew fetch service overview
4. Yew agents overview
5. Debugging (maybe)

Without further ado, lets get into part 1!

Overview

Components

Are semi-arbitrary Rust structures that~

Represent pecies of reusable HTML
Utilized by name in HTML
Have a defined lifecycle
Contain their own state
Recieve props from parent component

Components can contain many child components, but logically speaking have only one parent.

<!-- Parent Component -->
<div>
    <div>Main Component Text</div>
    <!-- Child Component with 2 properties -->
    <ChildComponent1 cc1prop1=1 cc1prop2=2 />
    <!-- Another Child Component with 1 property -->
    <ChildComponent2 cc2prop1=3 />
<div>

Data relationships between parent and child are as follows:

Parents may pass data as Props to Child Components
Parents may pass callbacks as Props
Child may update parent state using callback

With the above said, as an example if you have many child components that need to manage a common state, that state should be stored in a parent element.

Common Component Structure Properties

The struct created to define your component tends to have a couple of important and common parameters. For example~

struct MyComponent {
    // This is another arbitrary struct containing data
    // that YOU require for your application's state. 
    // You need to create this State struct, or whatever
    // you want to call it.
    state: State,
    // You will need to add this property if you intend
    // to interact with the Component API, i.e. adding 
    // callbacks to modify this component's state, or
    // sending update messages to call update() actions
    // on the component.
    link: ComponentLink<Self>,
    // Used in relation to calling external API's
    // I will follow up on this in a new article.
    task: None,
    // This is yet another arbitrary struct that you will
    // need to create in order to define properties sent
    // by a parent component.
    props: Props,
}

Component Implemetation

A components are implemented suprisingly enough by impl yew::Component for YOUR_COMPONENT {} required methods and types to implement are as follows:

Kind	Name	Description
Type	Properties	Properties to the component during lifecycle events. If none are to be passed this should be `()`. Otherwise you will need to define your `Props` struct.
Type	Message	An `enum` containing actions to process during a component lifecycle `update()`. `enum` members may contain parameters.
Method	create()	Initializes state and stores props from the parent
Method	update()	Called for whenever an update message is sent. `update()` should take appropriate action depending on the message sent.
Method	change()	This method conditionally re-renders the child component if props have changed during re-rendering of the parent.
Method	rendered()	This method is called after `view()` and performs functions that require the component to already be rendered. I.E. shift screen focus to element. (NOT REQUIRED)
Method	destroy()	Performs cleanup operations for a component (NOT REQUIRED)
Method	veiw()	Creates the HTML to render for the component.

Component Lifecycle

A components life begins when it its create() method is called. This typically happens in an html!() macro.

TODO: I feel I should give an example of this

Next its view() method is called and the component is rendered as HTML.

A component will be re-rendered on the following conditions.

A re-render is requested by the change() method.
A re-render is requested by the update() method.

A component will be destroyed when simply enough, its destroy() method is called.

Conclusion

I will revisit this for to update any errors or missing information, but for now I feel I have summed up yew components to my satisfaction. If anyone has any questions or notices any mistakes please let me know in the comments!

Blog