diff --git a/.github/FUNDING.yml b/.github/FUNDING.yml
index 24f946b1d83..f7180013e61 100644
--- a/.github/FUNDING.yml
+++ b/.github/FUNDING.yml
@@ -2,7 +2,7 @@
 
 github: # Replace with up to 4 GitHub Sponsors-enabled usernames e.g., [user1, user2]
 patreon: deniskolodin
-open_collective: # Replace with a single Open Collective username
+open_collective: yew
 ko_fi: # Replace with a single Ko-fi username
 tidelift: # Replace with a single Tidelift platform-name/package-name e.g., npm/babel
 community_bridge: # Replace with a single Community Bridge project-name e.g., cloud-foundry
diff --git a/.github/ISSUE_TEMPLATE/bug_report.md b/.github/ISSUE_TEMPLATE/bug_report.md
new file mode 100644
index 00000000000..0b9ab3afb68
--- /dev/null
+++ b/.github/ISSUE_TEMPLATE/bug_report.md
@@ -0,0 +1,40 @@
+---
+name: Bug report
+about: Create a report to help us improve Yew
+title: ''
+labels: bug
+assignees: ''
+
+---
+
+**Problem**
+<!-- A clear and concise description of what the bug is. -->
+
+**Steps To Reproduce**
+Steps to reproduce the behavior:
+1. Go to '...'
+2. Click on '....'
+3. Scroll down to '....'
+4. See error
+
+**Expected behavior**
+A clear and concise description of what you expected to happen.
+
+**Screenshots**
+If applicable, add screenshots to help explain your problem.
+
+**Environment:**
+ - Yew version [e.g. v0.10, `master`]
+ - Rust version [e.g. 1.40.0]
+ - Target if relevant [e.g. `wasm32-unknown-emscripten`]
+ - `stdweb` / `web-sys` version [e.g. web-sys v0.3.33]
+ - OS: [e.g. macos]
+ - Browser [e.g. chrome, safari]
+ - Browser version [e.g. 22]
+
+**Questionnaire**
+<!-- Developing Yew is a community effort! -->
+<!-- If you feel up to the challenge, please check one of the boxes below: -->
+- [ ] I'm interested in fixing this myself but don't know where to start
+- [ ] I would like to fix and I have a solution
+- [ ] I don't have time to fix this right now, but maybe later
diff --git a/.github/ISSUE_TEMPLATE/feature_request.md b/.github/ISSUE_TEMPLATE/feature_request.md
new file mode 100644
index 00000000000..b4ebf2a4b2d
--- /dev/null
+++ b/.github/ISSUE_TEMPLATE/feature_request.md
@@ -0,0 +1,22 @@
+---
+name: Feature request
+about: Suggest an idea for this project
+title: ''
+labels: feature
+assignees: ''
+
+---
+
+<!-- Please only include one feature request per issue, thank you! -->
+
+**Is your feature request related to a problem? Please describe.**
+A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]
+
+**Describe the solution you'd like**
+A clear and concise description of what you want to happen.
+
+**Describe alternatives you've considered**
+A clear and concise description of any alternative solutions or features you've considered.
+
+**Additional context**
+Add any other context or screenshots about the feature request here.
diff --git a/.travis.yml b/.travis.yml
index 7f0db07a1b0..96124adf0ad 100644
--- a/.travis.yml
+++ b/.travis.yml
@@ -4,40 +4,40 @@ branches:
     - trying
     - master
 
-language: rust
-
 dist: trusty
+language: rust
 sudo: false
 addons:
   chrome: stable
 
-cache:
-  timeout: 1000
-  directories:
-    - $HOME/.cargo
-    - $HOME/.rustup
-    - $HOME/.local/share/cargo-web/emscripten
+cache: cargo
+before_cache:
+  - ./ci/clear_cache.sh
 
 rust:
-  - 1.35.0 # min supported
+  - 1.39.0 # min supported
   - stable
   - beta
-  - nightly
 
 matrix:
   allow_failures:
-    - rust: nightly
+    - rust: beta
   fast_finish: true
 
 install:
   - nvm install 9
   - rustup component add rustfmt
+  - rustup component add clippy
   - rustup target add wasm32-unknown-unknown
-  - cargo install --force --version 0.2.42 -- wasm-bindgen-cli
-  - curl --retry 5 -LO https://chromedriver.storage.googleapis.com/2.41/chromedriver_linux64.zip
+  - cargo install cargo-update || true
+  - cargo install-update-config --version =0.2.58 wasm-bindgen-cli
+  - cargo install-update wasm-bindgen-cli
+  - LATEST_CHROMEDRIVER_VERSION=`curl -s "https://chromedriver.storage.googleapis.com/LATEST_RELEASE"`
+  - curl --retry 5 -LO "https://chromedriver.storage.googleapis.com/${LATEST_CHROMEDRIVER_VERSION}/chromedriver_linux64.zip"
   - unzip chromedriver_linux64.zip
   - ./ci/install_cargo_web.sh
 
 script:
-  - cargo fmt --all -- --check
+  - ./ci/run_checks.sh
   - CHROMEDRIVER=$(pwd)/chromedriver ./ci/run_tests.sh
+  - CHROMEDRIVER=$(pwd)/chromedriver ./ci/check_examples.sh
diff --git a/CHANGELOG.md b/CHANGELOG.md
index 988d7181e82..4e35085604d 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,16 +1,506 @@
 # Changelog
 
-## ✨ **0.9** *(TBD)*
+## ✨ **0.11** *(2020-01-06)*
+
+This release aims to lay the groundwork for Yew component libraries and clean up the API for the ever elusive 1.0 release.
+
+### Transition Guide
+
+This release comes with a lot of breaking changes. We understand it's a hassle to update projects but the Yew team felt it was necessary to rip a few bandaids off now as we approach a 1.0 release in the (hopefully) near future. To ease the transition, here's a guide which outlines the main refactoring you will need to do for your project. (Note: all of the changes are reflected in the many example projects if you would like a proper reference example)
+
+#### 1. Callback syntax
+
+This is the main painful breaking change. It applies to both element listeners as well as `Component` callback properties. A good rule of thumb is that your components will now have to retain a `ComponentLink` to create callbacks on demand or initialize callbacks in your component's `create()` method.
+
+Before:
+```rust
+struct Model;
+
+enum Msg {
+    Click,
+}
+
+impl Component for Model {
+    type Message = Msg;
+    type Properties = ();
+
+    fn create(_: Self::Properties, _: ComponentLink<Self>) -> Self {
+        Model
+    }
+
+    fn update(&mut self, msg: Self::Message) -> ShouldRender {
+        match msg {
+            Msg::Click => true,
+        }
+    }
+
+    fn view(&self) -> Html<Self> {
+        // BEFORE: Callbacks were created implicitly from this closure syntax
+        html! {
+            <button onclick=|_| Msg::Click>{ "Click me!" }</button>
+        }
+    }
+}
+```
+
+After:
+```rust
+struct Model {
+  link: ComponentLink<Self>,
+}
+
+enum Msg {
+    Click,
+}
+
+impl Component for Model {
+    type Message = Msg;
+    type Properties = ();
+
+    fn create(_: Self::Properties, link: ComponentLink<Self>) -> Self {
+        Model { link }
+    }
+
+    fn update(&mut self, msg: Self::Message) -> ShouldRender {
+        match msg {
+            Msg::Click => true,
+        }
+    }
+
+    fn view(&self) -> Html {
+        // AFTER: Callbacks need to be explicitly created now
+        let onclick = self.link.callback(|_| Msg::Click);
+        html! {
+            <button onclick=onclick>{ "Click me!" }</button>
+        }
+    }
+}
+```
+
+If a closure has a parameter you will now need to specify the parameter's type.  A tip for finding the appropriate type is to search Yew's repo for the HTML attribute the closure is assigned to.
+
+For example, `onkeydown` of `<button>`:
+
+```
+let onkeydown = self.link.callback(|e: KeyDownEvent| {
+    // ...
+});
+```
+
+and
+
+```
+html! {
+    <button onkeydown=onkeydown type="button">
+        { "button" }
+    </button>
+}
+```
+
+#### 2. Method Renames
+
+It should be safe to do a project-wide find/replace for the following:
+
+- `send_self(` -> `send_message(`
+- `send_back(` -> `callback(`
+- `response(` -> `respond(`
+- `AgentUpdate` -> `AgentLifecycleEvent`
+
+These renames will probably require some more care:
+
+- `fn handle(` -> `fn handle_input(` *(for Agent trait implementations)*
+
+#### 3. Drop Generic Types for `Html<Self>` -> `Html`
+
+:tada: We are pretty excited about this change! The generic type parameter
+was confusing and restrictive and is now a thing of the past!
+
+Before:
+```rust
+impl Component for Model {
+    // ...
+
+    fn view(&self) -> Html<Self> {
+        html! { /* ... */ }
+    }
+}
+```
+
+After:
+```rust
+impl Component for Model {
+    // ...
+
+    fn view(&self) -> Html {
+        html! { /* ... */ }
+    }
+}
+```
+
+#### 4. Properties must implement `Clone`
+
+In yew v0.8 we removed the requirement that component properties implement `Clone`
+and in this release we are adding the requirement again. This change is needed
+to improve the ergonomics of nested components. The only time properties will be
+cloned is when a wrapper component re-renders nested children components.
+
+- #### ⚡️ Features
+
+  - Added `html_nested!` macro to support nested iterable children access. [[@trivigy], [#843](https://github.com/yewstack/yew/pull/843)]
+  - Added `bincode` to the list of supported formats. [[@serzhiio], [#806](https://github.com/yewstack/yew/pull/806)]
+  - Added a `noop()` convenience method to `Callback` which creates a no-op callback. [[@mdtusz], [#793](https://github.com/yewstack/yew/pull/793)]
+  - The `html!` macro now accepts a `Callback` for element listeners. [[@jstarry], [#777](https://github.com/yewstack/yew/pull/777)]
+
+  ```rust
+  struct Model {
+      onclick: Callback<ClickEvent>,
+  }
+
+  enum Msg {
+      Click,
+  }
+
+  impl Component for Model {
+      type Message = Msg;
+      type Properties = ();
+
+      fn create(_: Self::Properties, link: ComponentLink<Self>) -> Self {
+          Model {
+              onclick: link.callback(|_| Msg::Click),
+          }
+      }
+
+      fn update(&mut self, msg: Self::Message) -> ShouldRender {
+          match msg {
+              Msg::Click => true,
+          }
+      }
+
+      fn view(&self) -> Html {
+          html! {
+              <button onclick=&self.onclick>{ "Click me!" }</button>
+          }
+      }
+  }
+  ```
+
+  - Add `send_message_batch` method to `ComponentLink`. [[@hgzimmerman], [#748](https://github.com/yewstack/yew/pull/748)]
+  - Allow compilation to `wasi` target without `wasm_bindgen`. [[@dunnock], [#746](https://github.com/yewstack/yew/pull/746)]
+  - `AgentLink` now implements `Clone` which enables `Future` usage without explicit Yew framework support. [[@izissise], [#802](https://github.com/yewstack/yew/pull/802)]
+  - `ComponentLink` now implements `Clone` which enables `Future` usage without explicit Yew framework support. [[@hgzimmerman], [#749](https://github.com/yewstack/yew/pull/749)]
+
+  ```rust
+  use wasm_bindgen::JsValue;
+  use wasm_bindgen_futures::future_to_promise;
+
+  // future must implement `Future<Output = Component::Message> + 'static`
+  let link = self.link.clone();
+  let js_future = async move {
+      link.send_message(future.await);
+      Ok(JsValue::NULL)
+  };
+
+  future_to_promise(js_future);
+  ```
+
+- #### 🛠 Fixes
+
+  - Fixed handling of boolean tag attributes. [[@mrh0057], [#840](https://github.com/yewstack/yew/pull/840)]
+  - Improved nested component ergonomics. [[@jstarry], [#780](https://github.com/yewstack/yew/pull/780)]
+
+  ```rust
+  fn view(&self) -> Html {
+      html! {
+          <Wrapper>
+              // This is now valid. (before #780, this would cause a lifetime
+              // compile error because children nodes were moved into a closure)
+              <Nested on_click=&self.nested_on_click />
+          </Wrapper>
+      }
+  }
+  ```
+
+  - Creating a `Callback` with `ComponentLink` is no longer restricted to mutable references, improving ergonomics. [[@jstarry], [#780](https://github.com/yewstack/yew/pull/780)]
+  - The `Callback` `reform` method no longer consumes self making it easier to "reverse map" a `Callback`. [[@jstarry], [#779](https://github.com/yewstack/yew/pull/779)]
+
+  ```rust
+  pub struct ListHeader {
+      props: Props,
+  }
+
+  #[derive(Properties, Clone)]
+  pub struct Props {
+      #[props(required)]
+      pub on_hover: Callback<Hovered>,
+      #[props(required)]
+      pub text: String,
+  }
+
+  impl Component for ListHeader {
+      type Message = ();
+      type Properties = Props;
+
+      fn create(props: Self::Properties, _: ComponentLink<Self>) -> Self {
+          ListHeader { props }
+      }
+
+      fn update(&mut self, _: Self::Message) -> ShouldRender {
+          false
+      }
+
+      fn view(&self) -> Html {
+          let onmouseover = self.props.on_hover.reform(|_| Hovered::Header);
+          html! {
+              <div class="list-header" onmouseover=onmouseover>
+                  { &self.props.text }
+              </div>
+          }
+      }
+  }
+  ```
+
+  - Reduced allocations in the `Classes` `to_string` method. [[@hgzimmerman], [#772](https://github.com/yewstack/yew/pull/772)]
+  - Empty string class names are now filtered out to prevent panics. [[@jstarry], [#770](https://github.com/yewstack/yew/pull/770)]
+
+- #### 🚨 Breaking changes
+
+  - Components with generic args now need to be closed with the full type path. (e.g. `html! { <Wrapper<String>></Wrapper<String>>}`) [[@jstarry], [#837](https://github.com/yewstack/yew/pull/837)]
+  - Changed `VTag` listener type from `Box<dyn Listener>` to `Rc<dyn Listener>`. [[@jstarry], [#786](https://github.com/yewstack/yew/pull/786)]
+  - `Properties` need to implement `Clone` again in order to improve nested component ergonomics. [[@jstarry], [#786](https://github.com/yewstack/yew/pull/786)]
+  - Removed `send_future` method from `ComponentLink` since it is no longer necessary for using Futures with Yew. [[@hgzimmerman], [#799](https://github.com/yewstack/yew/pull/799)]
+  - Removed generic type parameter from `Html` and all virtual node types: `VNode`, `VComp`, `VTag`, `VList`, `VText`, etc. [[@jstarry], [#783](https://github.com/yewstack/yew/pull/783)]
+  - Removed support for macro magic closure syntax for element listeners. (See transition guide for how to pass a `Callback` explicitly instead). [[@jstarry], [#782](https://github.com/yewstack/yew/pull/782)]
+  - Renamed `Agent` methods and event type for clarity. `handle` -> `handle_input`, `AgentUpdate` -> `AgentLifecycleEvent`, `response` -> `respond`. [[@philip-peterson], [#751](https://github.com/yewstack/yew/pull/751)]
+  - The `ComponentLink` `send_back` method has been renamed to `callback` for clarity. [[@jstarry], [#780](https://github.com/yewstack/yew/pull/780)]
+  - The `ComponentLink` `send_self` and `send_self_batch` methods have been renamed to `send_message` and `send_message_batch` for clarity. [[@jstarry], [#780](https://github.com/yewstack/yew/pull/780)]
+  - The `Agent` `send_back` method has been renamed to `callback` for clarity. [[@jstarry], [#780](https://github.com/yewstack/yew/pull/780)]
+  - The `VTag` `children` value type has changed from `Vec<VNode>` to `VList`. [[@jstarry], [#754](https://github.com/yewstack/yew/pull/754)]
+
+
+## ✨ **0.10** *(2019-11-11)*
 
 - #### ⚡️ Features
 
+  - `Future` support :tada: A `Component` can update following the completion of a `Future`. Check out [this example](https://github.com/yewstack/yew/tree/master/examples/futures) to see how it works. This approach was borrowed from a fork of Yew called [`plaster`](https://github.com/carlosdp/plaster) created by [@carlosdp]. [[@hgzimmerman], [#717](https://github.com/yewstack/yew/pull/717)]
+  - Added the `agent` and `services` features so that this functionality can be disabled (useful if you are switching to using `Future`s). [[@hgzimmerman], [#684](https://github.com/yewstack/yew/pull/684)]
+  - Add `ref` keyword for allowing a `Component` to have a direct reference to its rendered elements. For example, you can now easily focus an `<input>` element after mounting. [[@jstarry], [#715](https://github.com/yewstack/yew/pull/715)]
+
+  ```rust
+  use stdweb::web::html_element::InputElement;
+  use stdweb::web::IHtmlElement;
+  use yew::*;
+
+  pub struct Input {
+      node_ref: NodeRef,
+  }
+
+  impl Component for Input {
+      type Message = ();
+      type Properties = ();
+
+      fn create(_: Self::Properties, _: ComponentLink<Self>) -> Self {
+          Input {
+              node_ref: NodeRef::default(),
+          }
+      }
+
+      fn mounted(&mut self) -> ShouldRender {
+          if let Some(input) = self.node_ref.try_into::<InputElement>() {
+              input.focus();
+          }
+          false
+      }
+
+      fn update(&mut self, _: Self::Message) -> ShouldRender {
+          false
+      }
+
+      fn view(&self) -> Html<Self> {
+          html! {
+              <input ref=self.node_ref.clone() type="text" />
+          }
+      }
+  }
+  ```
+
+  - Make `Agent` related types `public` to allow other crates to create custom agents. [[@dunnock], [#721](https://github.com/yewstack/yew/pull/721)]
+  - `Component::change` will now return `false` for components that have `Component::Properties == ()`. [[@kellytk], [#690](https://github.com/yewstack/yew/pull/690)]]
+  - Updated `wasm-bindgen` dependency to `0.2.54`. Please update your `wasm-bindgen-cli` tool by running `cargo install --force --version 0.2.54 -- wasm-bindgen-cli`. [[@jstarry], [#730](https://github.com/yewstack/yew/pull/730)], [[@ctaggart], [#681](https://github.com/yewstack/yew/pull/681)]
+
+- #### 🛠 Fixes
+
+  - Fixed the mount order of components. The root component will be mounted after all descendants have been mounted. [[@jstarry], [#725](https://github.com/yewstack/yew/pull/725)]
+  - All public items now implement `Debug`. [[@hgzimmerman], [#673](https://github.com/yewstack/yew/pull/673)]
+
+- #### 🚨 Breaking changes
+
+  - Minimum rustc version has been bumped to `1.39.0` for `Future` support. [[@jstarry], [#730](https://github.com/yewstack/yew/pull/730)]
+  - `Component` now has a required `view` method and automatically implements the `Renderable` trait. The `view` method in the `Renderable` trait has been renamed to `render`. [[@jstarry], [#563](https://github.com/yewstack/yew/pull/563)]
+
+    Before:
+    ```rust
+    impl Component for Model {
+        type Message = Msg;
+        type Properties = ();
+
+        fn create(_: Self::Properties, _: ComponentLink<Self>) -> Self {
+            Model {}
+        }
+
+        fn update(&mut self, msg: Self::Message) -> ShouldRender {
+            true
+        }
+    }
+
+    impl Renderable<Model> for Model {
+        fn view(&self) -> Html<Self> {
+            html! { "hello" }
+        }
+    }
+    ```
+
+    After:
+    ```rust
+    impl Component for Model {
+        type Message = Msg;
+        type Properties = ();
+
+        fn create(_: Self::Properties, _: ComponentLink<Self>) -> Self {
+            Model {}
+        }
+
+        fn update(&mut self, msg: Self::Message) -> ShouldRender {
+            true
+        }
+
+        fn view(&self) -> Html<Self> {
+            html! { "hello" }
+        }
+    }
+    ```
+
+  - Removed the `Transferable` trait since it did no more than extend the serde `Serialize` and `Deserialize` traits. [[@hgzimmerman], [#319](https://github.com/yewstack/yew/pull/319)]
+
+    Before:
+    ```rust
+    impl Transferable for Input {}
+    #[derive(Serialize, Deserialize)]
+    pub enum Input {
+      Connect,
+    }
+    ```
+
+    After:
+    ```rust
+    #[derive(Serialize, Deserialize)]
+    pub enum Input {
+      Connect,
+    }
+    ```
+  - `WebSocketService::connect` will now return a `Result` in order to stop panicking on malformed urls. [[@lizhaoxian], [#727](https://github.com/yewstack/yew/pull/727)]
+  - `VTag` now is boxed within `VNode` to shrink the size of its enum representation. [[@hgzimmerman], [#675](https://github.com/yewstack/yew/pull/675)]
+
+## ✨ **0.9.2** *(2019-10-12)*
+
+- #### 🛠 Fixes
+
+  - Fix `yew-macro` dependency version
+
+## ✨ **0.9.1** *(2019-10-12)*
+
+Happy Canadian Thanksgiving! 🦃
+
+- #### ⚡️ Features
+
+  - Implemented `Default` trait for `VNode` so that `unwrap_or_default` can be called on `Option<Html<Self>>`. [[@hgzimmerman], [#672](https://github.com/yewstack/yew/pull/672)]
+  - Implemented `PartialEq` trait for `Classes` so that is more ergonomic to use `Classes` type in component props. [[@hgzimmerman], [#680](https://github.com/yewstack/yew/pull/680)]
+  - Updated `wasm-bindgen` dependency to `0.2.50`. Please update your `wasm-bindgen-cli` tool by running `cargo install --force --version 0.2.50 -- wasm-bindgen-cli`. [[@jstarry], [#695](https://github.com/yewstack/yew/pull/695)]
+
+- #### 🛠 Fixes
+
+  - Fixed issue where text nodes were sometimes rendered out of order. [[@jstarry], [#697](https://github.com/yewstack/yew/pull/697)]
+  - Fixed regression introduced in 0.9.0 that prevented tag attributes from updating properly. [[@jstarry], [#698](https://github.com/yewstack/yew/pull/698)]
+  - Fixed emscripten builds by pinning the version for the `ryu` downstream dependency. [[@jstarry], [#703](https://github.com/yewstack/yew/pull/703)]
+  - Updated `stdweb` to `0.4.20` which fixed emscripten builds and unblocked updating `wasm-bindgen` to `0.2.50`. [[@ctaggart], [@jstarry], [#683](https://github.com/yewstack/yew/pull/683), [#694](https://github.com/yewstack/yew/pull/694)]
+  - Cleaned up build warnings for missing `dyn` keywords. [[@benreyn], [#687](https://github.com/yewstack/yew/pull/687)]
+
+## ✨ **0.9** *(2019-09-27)*
+
+- #### ⚡️ Features
+
+  - New `KeyboardService` for setting up key listeners on browsers which support the feature. [[@hgzimmerman], [#647](https://github.com/yewstack/yew/pull/647)]
+  - `ComponentLink` can now create a `Callback` with more than one `Message`. The `Message`'s will be batched together so that the `Component` will not be re-rendered more than necessary. [[@stkevintan], [#660](https://github.com/yewstack/yew/pull/660)]
+  - `Message`'s to `Public` `Agent`'s will now be queued if the `Agent` hasn't finished setting up yet. [[@serzhiio], [#596](https://github.com/yewstack/yew/pull/596)]
+  - `Agent`'s can now be connected to without a `Callback`. Instead of creating a bridge to the agent, create a dispatcher like so: `MyAgent::dispatcher()`. [[@hgzimmerman], [#639](https://github.com/yewstack/yew/pull/639)]
+  - `Component`'s can now accept children in the `html!` macro. [[@jstarry], [#589](https://github.com/yewstack/yew/pull/589)]
+
+    ```rust
+    // app.rs
+
+    html! {
+      <MyList name="Grocery List">
+        <MyListItem text="Apples" />
+      </MyList>
+    }
+    ```
+
+    ```rust
+    // my_list.rs
+
+    use yew::prelude::*;
+
+    pub struct MyList(Props);
+
+    #[derive(Properties)]
+    pub struct Props {
+        #[props(required)]
+        pub name: String,
+        pub children: Children<MyListItem>,
+    }
+
+    impl Renderable<MyList> for MyList {
+      fn view(&self) -> Html<Self> {
+        html! {{
+          self.props.children.iter().collect::<Html<Self>>()
+        }}
+      }
+    }
+    ```
+
+  - `Iterator`s can now be rendered in the `html!` macro without using the `for` keyword. [[@hgzimmerman], [#622](https://github.com/yewstack/yew/pull/622)]
+
+    Before:
+    ```rust
+    html! {{
+      for self.props.items.iter().map(renderItem)
+    }}
+    ```
+
+    After:
+    ```rust
+    html! {{
+      self.props.items.iter().map(renderItem).collect::<Html<Self>>()
+    }}
+    ```
+
+  - Closures are now able to be transformed into optional `Callback` properties. [[@Wodann], [#612](https://github.com/yewstack/yew/pull/612)]
+  - Improved CSS class ergonomics with new `Classes` type. [[@DenisKolodin], [#585](https://github.com/yewstack/yew/pull/585)], [[@hgzimmerman], [#626](https://github.com/yewstack/yew/pull/626)]
+  - Touch events are now supported `<div ontouchstart=|_| Msg::TouchStart>` [[@boydjohnson], [#584](https://github.com/yewstack/yew/pull/584)], [[@jstarry], [#656](https://github.com/yewstack/yew/pull/656)]
+  - The `Component` trait now has an `mounted` method which can be implemented to react to when your components have been mounted to the DOM. [[@hgzimmerman], [#583](https://github.com/yewstack/yew/pull/583)]
+  - Additional Fetch options `mode`, `cache`, and `redirect` are now supported [[@davidkna], [#579](https://github.com/yewstack/yew/pull/579)]
   - The derive props macro now supports Properties with lifetimes [[@jstarry], [#580](https://github.com/yewstack/yew/pull/580)]
   - New `ResizeService` for registering for `window` size updates [[@hgzimmerman], [#577](https://github.com/yewstack/yew/pull/577)]
 
 - #### 🛠 Fixes
 
+  - Fixed JS typo in RenderService. This was causing animation frames to not be dropped correctly. [[@jstarry], [#658](https://github.com/yewstack/yew/pull/658)]
+  - Fixed `VNode` orphaning bug when destroying `VTag` elements. This caused some `Component`s to not be properly destroyed when they should have been. [[@hgzimmerman], [#651](https://github.com/yewstack/yew/pull/651)]
+  - Fix mishandling of Properties `where` clause in derive_props macro [[@astraw], [#640](https://github.com/yewstack/yew/pull/640)]
+
 - #### 🚨 Breaking changes
 
+  None
+
 ## ✨ **0.8** *(2019-08-10)*
 
 ***Props! Props! Props!***
@@ -148,11 +638,26 @@ This release introduces the concept of an `Agent`. Agents are separate activitie
 ## ✨ **0.1** *(2017-12-31)*
 
 [Web Workers API]: https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API
+[@astraw]: https://github.com/astraw
+[@boydjohnson]: https://github.com/boydjohnson
+[@carlosdp]: https://github.com/carlosdp
 [@charvp]: https://github.com/charvp
+[@ctaggart]: https://github.com/ctaggart
+[@davidkna]: https://github.com/davidkna
 [@DenisKolodin]: https://github.com/DenisKolodin
 [@dermetfan]: https://github.com/dermetfan
+[@dunnock]: https://github.com/dunnock
 [@hgzimmerman]: https://github.com/hgzimmerman
+[@izissise]: https://github.com/izissise
 [@jstarry]: https://github.com/jstarry
 [@kellytk]: https://github.com/kellytk
+[@lizhaoxian]: https://github.com/lizhaoxian
+[@mdtusz]: https://github.com/mdtusz
+[@mrh0057]: https://github.com/mrh0057
+[@philip-peterson]: https://github.com/philip-peterson
+[@serzhiio]: https://github.com/serzhiio
+[@stkevintan]: https://github.com/stkevintan
 [@tiziano88]: https://github.com/tiziano88
+[@trivigy]: https://github.com/trivigy
 [@totorigolo]: https://github.com/totorigolo
+[@Wodann]: https://github.com/Wodann
diff --git a/Cargo.toml b/Cargo.toml
index 98c4418619f..6398428894f 100644
--- a/Cargo.toml
+++ b/Cargo.toml
@@ -1,13 +1,13 @@
 [package]
 name = "yew"
-version = "0.9.0"
+version = "0.11.1"
 edition = "2018"
 authors = [
     "Denis Kolodin <deniskolodin@gmail.com>",
-    "Justin Starry <justin.starry@icloud.com>",
+    "Justin Starry <justin@yew.rs>",
 ]
-repository = "https://github.com/DenisKolodin/yew"
-homepage = "https://github.com/DenisKolodin/yew"
+repository = "https://github.com/yewstack/yew"
+homepage = "https://github.com/yewstack/yew"
 documentation = "https://docs.rs/yew/"
 license = "MIT/Apache-2.0"
 readme = "README.md"
@@ -16,42 +16,51 @@ categories = ["gui", "web-programming"]
 description = "A framework for making client-side single-page apps"
 
 [badges]
-travis-ci = { repository = "DenisKolodin/yew" }
+travis-ci = { repository = "yewstack/yew" }
 
 [dependencies]
+anyhow = "1"
 anymap = "0.12"
-bincode = "=1.0.1"
-failure = "0.1"
-http = "0.1"
+bincode = { version = "~1.2.1", optional = true }
+http = "0.2"
 indexmap = "1.0.2"
 log = "0.4"
 proc-macro-hack = "0.5"
 proc-macro-nested = "0.1"
-rmp-serde = { version = "0.13.7", optional = true }
+rmp-serde = { version = "0.14.0", optional = true }
 serde = { version = "1.0", features = ["derive"] }
-serde_cbor = { version = "0.9.0", optional = true }
+serde_cbor = { version = "0.11.1", optional = true }
 serde_json = "1.0"
 serde_yaml = { version = "0.8.3", optional = true }
 slab = "0.4"
-stdweb = "^0.4.16"
-toml = { version = "0.4", optional = true }
-yew-macro = { version = "0.9.0", path = "crates/macro" }
+stdweb = "0.4.20"
+thiserror = "1"
+toml = { version = "0.5", optional = true }
+yew-macro = { version = "0.11.1", path = "crates/macro" }
 
-[target.'cfg(all(target_arch = "wasm32", not(cargo_web)))'.dependencies]
-wasm-bindgen = "=0.2.42"
+[target.'cfg(all(target_arch = "wasm32", not(target_os="wasi"), not(cargo_web)))'.dependencies]
+wasm-bindgen = "0.2.58"
+
+[target.'cfg(all(target_arch = "wasm32", not(target_os="wasi"), not(cargo_web)))'.dev-dependencies]
+wasm-bindgen-test = "0.3.4"
+
+[target.'cfg(target_os = "emscripten")'.dependencies]
+ryu = "1.0.2" # 1.0.1 breaks emscripten
 
 [dev-dependencies]
 serde_derive = "1"
 trybuild = "1.0"
-rustversion = "0.1"
-
-[target.'cfg(all(target_arch = "wasm32", not(cargo_web)))'.dev-dependencies]
-wasm-bindgen-test = "0.2"
+rustversion = "1.0"
+rmp-serde = "0.14.0"
+bincode = "~1.2.1"
 
 [features]
-default = []
+default = ["services", "agent"]
+doc_test = []
 web_test = []
 wasm_test = []
+services = []
+agent = ["bincode"]
 yaml = ["serde_yaml"]
 msgpack = ["rmp-serde"]
 cbor = ["serde_cbor"]
@@ -59,25 +68,4 @@ cbor = ["serde_cbor"]
 [workspace]
 members = [
   "crates/macro",
-  "examples/counter",
-  "examples/crm",
-  "examples/custom_components",
-  "examples/dashboard",
-  "examples/file_upload",
-  "examples/fragments",
-  "examples/game_of_life",
-  "examples/inner_html",
-  "examples/js_callback",
-  "examples/large_table",
-  "examples/minimal",
-  "examples/mount_point",
-  "examples/multi_thread",
-  "examples/npm_and_rest",
-  "examples/routing",
-  "examples/server",
-  "examples/showcase",
-  "examples/textarea",
-  "examples/timer",
-  "examples/todomvc",
-  "examples/two_apps",
 ]
diff --git a/README.md b/README.md
index e009a0f69fd..8b3cb0afbbf 100644
--- a/README.md
+++ b/README.md
@@ -8,20 +8,26 @@
   </h1>
 
   <p>
-    <strong>Rust / Wasm UI framework</strong>
+    <strong>Rust / Wasm client web app framework</strong>
   </p>
 
   <p>
     <a href="https://travis-ci.com/yewstack/yew"><img alt="Build Status" src="https://travis-ci.com/yewstack/yew.svg?branch=master"/></a>
     <a href="https://gitter.im/yewframework/Lobby"><img alt="Gitter Chat" src="https://badges.gitter.im/yewframework.svg"/></a>
-    <a href="https://blog.rust-lang.org/2019/05/23/Rust-1.35.0.html"><img alt="Rustc Version 1.35+" src="https://img.shields.io/badge/rustc-1.35+-lightgray.svg"/></a>
+    <a href="https://blog.rust-lang.org/2019/11/07/Rust-1.39.0.html"><img alt="Rustc Version 1.39+" src="https://img.shields.io/badge/rustc-1.39+-lightgray.svg"/></a>
   </p>
 
   <h4>
+    <a href="https://yew.rs">Website</a>
+    <span> | </span>
+    <a href="https://docs.rs/yew">API Docs</a>
+    <span> | </span>
     <a href="#running-the-examples">Examples</a>
     <span> | </span>
     <a href="https://github.com/yewstack/yew/blob/master/CHANGELOG.md">Changelog</a>
     <span> | </span>
+    <a href="https://yew.rs/docs/roadmap">Roadmap</a>
+    <span> | </span>
     <a href="https://github.com/yewstack/yew/blob/master/CODE_OF_CONDUCT.md">Code of Conduct</a>
   </h4>
 </div>
@@ -47,18 +53,18 @@ and uses a local scheduler attached to a thread for concurrent tasks.
 
 This framework is designed to be compiled into modern browsers' runtimes: wasm, asm.js, emscripten.
 
-To prepare the development environment use the installation instruction here: [wasm-and-rust](https://github.com/raphamorim/wasm-and-rust).
-
-### Clean MVC approach inspired by Elm and Redux
+### Architecture inspired by Elm and Redux
 
 Yew implements strict application state management based on message passing and updates:
 
 `src/main.rs`
 
 ```rust
-use yew::{html, Component, ComponentLink, Html, Renderable, ShouldRender};
+use yew::{html, Component, ComponentLink, Html, ShouldRender};
 
-struct Model { }
+struct Model {
+    link: ComponentLink<Self>,
+}
 
 enum Msg {
     DoIt,
@@ -70,8 +76,8 @@ impl Component for Model {
     type Message = Msg;
     type Properties = ();
 
-    fn create(_: Self::Properties, _: ComponentLink<Self>) -> Self {
-        Model { }
+    fn create(_: Self::Properties, link: ComponentLink<Self>) -> Self {
+        Model { link }
     }
 
     fn update(&mut self, msg: Self::Message) -> ShouldRender {
@@ -82,13 +88,12 @@ impl Component for Model {
             }
         }
     }
-}
 
-impl Renderable<Model> for Model {
-    fn view(&self) -> Html<Self> {
+    fn view(&self) -> Html {
+        let onclick = self.link.callback(|_| Msg::DoIt);
         html! {
             // Render your model here
-            <button onclick=|_| Msg::DoIt>{ "Click me!" }</button>
+            <button onclick=onclick>{ "Click me!" }</button>
         }
     }
 }
@@ -123,12 +128,11 @@ html! {
 }
 ```
 
-### Agents - actors model inspired by Erlang and Actix
+### Agents - actor model inspired by Erlang and Actix
 
 Every `Component` can spawn an agent and attach to it.
-Agents are separate tasks that work concurrently.
-
-Create your worker/agent (in `context.rs` for example):
+Agents can coordinate global state, spawn long-running tasks, and offload tasks to a web worker.
+They run independently of components, but hook nicely into their update mechanism.
 
 ```rust
 use yew::worker::*;
@@ -149,27 +153,28 @@ pub enum Response {
 
 impl Agent for Worker {
     // Available:
-    // - `Job` (one per bridge)
-    // - `Context` (shared in the same thread)
-    // - `Public` (separate thread).
-    type Reach = Context; // Spawn only one instance per thread (all components could reach this)
+    // - `Job` (one per bridge on the main thread)
+    // - `Context` (shared in the main thread)
+    // - `Private` (one per bridge in a separate thread)
+    // - `Public` (shared in a separate thread)
+    type Reach = Context; // Spawn only one instance on the main thread (all components can share this agent)
     type Message = Msg;
     type Input = Request;
     type Output = Response;
 
-    // Create an instance with a link to agent's environment.
+    // Create an instance with a link to the agent.
     fn create(link: AgentLink<Self>) -> Self {
         Worker { link }
     }
 
-    // Handle inner messages (of services of `send_back` callbacks)
+    // Handle inner messages (from callbacks)
     fn update(&mut self, msg: Self::Message) { /* ... */ }
 
     // Handle incoming messages from components of other agents.
-    fn handle(&mut self, msg: Self::Input, who: HandlerId) {
+    fn handle_input(&mut self, msg: Self::Input, who: HandlerId) {
         match msg {
             Request::Question(_) => {
-                self.link.response(who, Response::Answer("That's cool!".into()));
+                self.link.respond(who, Response::Answer("That's cool!".into()));
             },
         }
     }
@@ -193,7 +198,7 @@ impl Component for Model {
     type Properties = ();
 
     fn create(_: Self::Properties, link: ComponentLink<Self>) -> Self {
-        let callback = link.send_back(|_| Msg::ContextMsg);
+        let callback = link.callback(|_| Msg::ContextMsg);
         // `Worker::bridge` spawns an instance if no one is available
         let context = context::Worker::bridge(callback); // Connected! :tada:
         Model { context }
@@ -205,7 +210,7 @@ You can use as many agents as you want. For example you could separate all inter
 with a server to a separate thread (a real OS thread because Web Workers map to the native threads).
 
 > **REMEMBER!** Not every API is available for every environment. For example you can't use
-`StorageService` from a separate thread. It won't work with `Public` agents,
+`StorageService` from a separate thread. It won't work with `Public` or `Private` agents,
 only with `Job` and `Context` ones.
 
 ### Components
@@ -218,6 +223,9 @@ html! {
     <nav class="menu">
         <MyButton title="First Button" />
         <MyButton title="Second Button "/>
+        <MyList name="Grocery List">
+          <MyListItem text="Apples" />
+        </MyList>
     </nav>
 }
 ```
@@ -232,7 +240,7 @@ Properties are also pure Rust types with strict type-checking during the compila
 ```rust
 // my_button.rs
 
-#[derive(Properties, PartialEq)]
+#[derive(Clone, Properties, PartialEq)]
 pub struct Properties {
     pub hidden: bool,
     #[props(required)]
@@ -256,7 +264,7 @@ html! {
 
 ### Fragments
 
-Yew supports fragments: elements without a parent which could be attached somewhere later.
+Yew supports fragments: elements without a parent which can be attached to one somewhere else.
 
 ```rust
 html! {
@@ -268,12 +276,9 @@ html! {
 }
 ```
 
-### Virtual DOM, independent loops, fine updates
+### Virtual DOM
 
-Yew uses its own **virtual-dom** implementation. It updates the browser's DOM
-with tiny patches when properties of elements have changed. Every component lives
-in its own independent loop interacting with the environment (`Scope`) through message passing
-and supports a fine control of rendering.
+Yew uses its own **virtual-dom** implementation. It updates the browser's DOM with tiny patches when properties of elements have changed. Every component can be interacted with using its (`Scope`) to pass messages and trigger updates.
 
 The `ShouldRender` returns the value which informs the loop when the component should be re-rendered:
 
@@ -291,9 +296,8 @@ fn update(&mut self, msg: Self::Message) -> ShouldRender {
 }
 ```
 
-Using `ShouldRender` is more effective than comparing the model after every update because not every model
-change leads to a view update. It allows the framework to skip the model comparison checks entirely.
-This also allows you to control updates as precisely as possible.
+Using `ShouldRender` is more effective than comparing the model after every update because not every change to the model
+causes an update to the view. It allows the framework to only compare parts of the model essential to rendering the view.
 
 ### Rust/JS/C-style comments in templates
 
@@ -319,8 +323,8 @@ Use external crates and put values from them into the template:
 extern crate chrono;
 use chrono::prelude::*;
 
-impl Renderable<Model> for Model {
-    fn view(&self) -> Html<Self> {
+impl Renderable for Model {
+    fn render(&self) -> Html {
         html! {
             <p>{ Local::now() }</p>
         }
@@ -328,7 +332,7 @@ impl Renderable<Model> for Model {
 }
 ```
 
-> Some crates don't support the true wasm target (`wasm32-unknown-unknown`) yet.
+> Some crates don't support the `wasm32-unknown-unknown` target yet.
 
 ### Services
 
@@ -339,11 +343,14 @@ It's a handy alternative to subscriptions.
 Implemented:
 * `IntervalService`
 * `RenderService`
+* `ResizeService`
 * `TimeoutService`
 * `StorageService`
 * `DialogService`
+* `ConsoleService`
 * `FetchService`
 * `WebSocketService`
+* `KeyboardService`
 
 ```rust
 use yew::services::{ConsoleService, TimeoutService};
@@ -358,8 +365,8 @@ impl Component for Model {
     fn update(&mut self, msg: Self::Message) -> ShouldRender {
         match msg {
             Msg::Fire => {
-                let send_msg = self.link.send_back(|_| Msg::Timeout);
-                self.timeout.spawn(Duration::from_secs(5), send_msg);
+                let timeout = self.link.callback(|_| Msg::Timeout);
+                self.timeout.spawn(Duration::from_secs(5), timeout);
             }
             Msg::Timeout => {
                 self.console.log("Timeout!");
@@ -370,7 +377,7 @@ impl Component for Model {
 ```
 
 Can't find an essential service? Want to use a library from `npm`?
-You can reuse `JavaScript` libraries with `stdweb` capabilities and create
+You can wrap `JavaScript` libraries using `stdweb` and create
 your own service implementation. Here's an example below of how to wrap the
 [ccxt](https://www.npmjs.com/package/ccxt) library:
 
@@ -443,7 +450,7 @@ your project's `Cargo.toml`:
 
 ```toml
 [dependencies]
-yew = { git = "https://github.com/DenisKolodin/yew", features = ["toml", "yaml", "msgpack", "cbor"] }
+yew = { git = "https://github.com/yewstack/yew", features = ["toml", "yaml", "msgpack", "cbor"] }
 ```
 
 ## Development setup
@@ -470,6 +477,16 @@ cargo build --target wasm32-unknown-unknown
 ```
 
 ### Running Tests
+For the tests to work one have to ensure that `wasm-bindgen-cli` is installed. 
+[Instructions](https://rustwasm.github.io/docs/wasm-bindgen/wasm-bindgen-test/usage.html#install-the-test-runner)
+
+Additionally a webdriver must be installed locally and configured to be on the 
+`PATH`. Currently supports `geckodriver`, `chromedriver`, and `safaridriver`,
+although more driver support may be added! You can download these at:
+
+* geckodriver - https://github.com/mozilla/geckodriver/releases
+* chromedriver - http://chromedriver.chromium.org/downloads
+* safaridriver - should be preinstalled on OSX
 
 ```bash
 ./ci/run_tests.sh
@@ -509,3 +526,39 @@ if you tell the `cargo-web` to build for them using the `--target` parameter.
 [todomvc]: examples/todomvc
 [two_apps]: examples/two_apps
 [cargo-web]: https://github.com/koute/cargo-web
+
+
+## Project templates
+
+* [`yew-wasm-pack-template`](https://github.com/yewstack/yew-wasm-pack-template)
+* [`yew-wasm-pack-minimal`](https://github.com/yewstack/yew-wasm-pack-minimal)
+
+## Contributors
+
+### Code Contributors
+
+This project exists thanks to all the people who contribute. [[Contribute](CONTRIBUTING.md)].
+<a href="https://github.com/yewstack/yew/graphs/contributors"><img src="https://opencollective.com/yew/contributors.svg?width=890&button=false" /></a>
+
+### Financial Contributors
+
+Become a financial contributor and help us sustain our community. [[Contribute](https://opencollective.com/yew/contribute)]
+
+#### Individuals
+
+<a href="https://opencollective.com/yew"><img src="https://opencollective.com/yew/individuals.svg?width=890"></a>
+
+#### Organizations
+
+Support this project with your organization. Your logo will show up here with a link to your website. [[Contribute](https://opencollective.com/yew/contribute)]
+
+<a href="https://opencollective.com/yew/organization/0/website"><img src="https://opencollective.com/yew/organization/0/avatar.svg"></a>
+<a href="https://opencollective.com/yew/organization/1/website"><img src="https://opencollective.com/yew/organization/1/avatar.svg"></a>
+<a href="https://opencollective.com/yew/organization/2/website"><img src="https://opencollective.com/yew/organization/2/avatar.svg"></a>
+<a href="https://opencollective.com/yew/organization/3/website"><img src="https://opencollective.com/yew/organization/3/avatar.svg"></a>
+<a href="https://opencollective.com/yew/organization/4/website"><img src="https://opencollective.com/yew/organization/4/avatar.svg"></a>
+<a href="https://opencollective.com/yew/organization/5/website"><img src="https://opencollective.com/yew/organization/5/avatar.svg"></a>
+<a href="https://opencollective.com/yew/organization/6/website"><img src="https://opencollective.com/yew/organization/6/avatar.svg"></a>
+<a href="https://opencollective.com/yew/organization/7/website"><img src="https://opencollective.com/yew/organization/7/avatar.svg"></a>
+<a href="https://opencollective.com/yew/organization/8/website"><img src="https://opencollective.com/yew/organization/8/avatar.svg"></a>
+<a href="https://opencollective.com/yew/organization/9/website"><img src="https://opencollective.com/yew/organization/9/avatar.svg"></a>
diff --git a/ci/check_examples.sh b/ci/check_examples.sh
new file mode 100755
index 00000000000..7b46284a6c1
--- /dev/null
+++ b/ci/check_examples.sh
@@ -0,0 +1,21 @@
+#!/usr/bin/env bash
+echo "$(rustup default)" | grep -q "1.39.0"
+emscripten_supported=$?
+set -euxo pipefail # https://vaneyckt.io/posts/safer_bash_scripts_with_set_euxo_pipefail/
+
+# Showcase includes all other examples
+cd examples/showcase
+
+# TODO Can't build some demos with release, need fix
+
+if [ "$emscripten_supported" == "0" ]; then
+  # TODO - Emscripten builds are broken on rustc > 1.39.0
+  cargo web build --target asmjs-unknown-emscripten
+  cargo web build --target wasm32-unknown-emscripten
+fi
+
+# TODO showcase doesn't support wasm-bindgen yet
+cargo web build --target wasm32-unknown-unknown
+
+# Reset cwd
+cd ../..
diff --git a/ci/clear_cache.sh b/ci/clear_cache.sh
new file mode 100755
index 00000000000..f5227d7be2d
--- /dev/null
+++ b/ci/clear_cache.sh
@@ -0,0 +1,23 @@
+#!/usr/bin/env bash
+set -x
+
+# inspired by https://github.com/rust-analyzer/rust-analyzer/blob/master/.travis.yml
+find ./target/debug -maxdepth 1 -type f -delete
+find ./target/tests/target/debug -maxdepth 1 -type f -delete
+find ./target/asmjs-unknown-emscripten/debug -maxdepth 1 -type f -delete
+find ./target/wasm32-unknown-emscripten/debug -maxdepth 1 -type f -delete
+find ./target/wasm32-unknown-unknown/debug -maxdepth 1 -type f -delete
+rm -fr ./target/debug/{deps,.fingerprint}/{*yew*,*\.was,*\.js*,*test*}
+rm -fr ./target/tests/target/debug/{deps,.fingerprint}/{*yew*,*\.was,*\.js*,*test*}
+rm -fr ./target/asmjs-unknown-emscripten/debug/{deps,.fingerprint}/{*yew*,*\.was,*\.js*,*test*}
+rm -fr ./target/wasm32-unknown-emscripten/debug/{deps,.fingerprint}/{*yew*,*\.was*,*\.js*,*test*}
+rm -fr ./target/wasm32-unknown-unknown/debug/{deps,.fingerprint}/{*yew*,*\.was*,*\.js*,*test*}
+rm -fr ./target/debug/incremental
+rm -fr ./target/tests/target/debug/incremental
+rm -fr ./target/asmjs-unknown-emscripten/debug/incremental
+rm -fr ./target/wasm32-unknown-emscripten/debug/incremental
+rm -fr ./target/wasm32-unknown-unknown/debug/incremental
+rm -f  ./target/.rustc_info.json
+rm -f  ./target/tests/target/.rustc_info.json
+rm -fr ./target/wasm32-unknown-unknown/wbg-tmp
+rm -fr /home/travis/.cargo/registry/index/github.com-*
diff --git a/ci/run_checks.sh b/ci/run_checks.sh
new file mode 100755
index 00000000000..65e7ce91cd6
--- /dev/null
+++ b/ci/run_checks.sh
@@ -0,0 +1,11 @@
+#!/usr/bin/env bash
+
+echo "$(rustup default)" | grep -q "stable"
+if [ "$?" != "0" ]; then
+  # only run checks on stable
+  exit 0
+fi
+
+set -euxo pipefail
+cargo fmt --all -- --check
+cargo clippy -- --deny=warnings
diff --git a/ci/run_tests.sh b/ci/run_tests.sh
index 6bba2d2f655..6f80d409d2c 100755
--- a/ci/run_tests.sh
+++ b/ci/run_tests.sh
@@ -1,62 +1,16 @@
 #!/usr/bin/env bash
-
-# Originally this ci script borrowed from https://github.com/koute/stdweb
-# because both use `cargo-web` tool to check the compilation.
-
-set -euo pipefail
-IFS=$'\n\t'
-
-set +e
-echo "$(rustc --version)" | grep -q "nightly"
-if [ "$?" = "0" ]; then
-    export IS_NIGHTLY=1
-else
-    export IS_NIGHTLY=0
+echo "$(rustup default)" | grep -q "1.39.0"
+emscripten_supported=$?
+set -euxo pipefail # https://vaneyckt.io/posts/safer_bash_scripts_with_set_euxo_pipefail/
+
+if [ "$emscripten_supported" == "0" ]; then
+  # TODO - Emscripten builds are broken on rustc > 1.39.0
+  cargo web test --features web_test --target asmjs-unknown-emscripten
+  cargo web test --features web_test --target wasm32-unknown-emscripten
 fi
-set -e
-
-echo "Is Rust from nightly: $IS_NIGHTLY"
-
-echo "Testing for asmjs-unknown-emscripten..."
-cargo web test --features web_test --target=asmjs-unknown-emscripten
-
-echo "Testing for wasm32-unknown-emscripten..."
-cargo web test --features web_test --target=wasm32-unknown-emscripten
-
-echo "Testing for wasm32-unknown-unknown..."
-cargo test --features wasm_test --target=wasm32-unknown-unknown
 
-echo "Testing html macro..."
+cargo test --features wasm_test --target wasm32-unknown-unknown
 cargo test --test macro_test
-
-echo "Testing derive props macro..."
 cargo test --test derive_props_test
-
-echo "Testing macro docs..."
-(cd crates/macro && cargo test)
-
-check_example() {
-    echo "Checking example [$2]"
-    pushd $2 > /dev/null
-    cargo web build --target=$1
-    popd > /dev/null
-
-    # TODO Can't build some demos with release, need fix
-    # cargo web build --release $CARGO_WEB_ARGS
-}
-
-check_all_examples() {
-    echo "Checking examples on $1..."
-    for EXAMPLE in $(pwd)/examples/showcase/sub/*; do
-        if [ -d "$EXAMPLE" ]; then
-            check_example $1 $EXAMPLE
-        fi
-    done
-}
-
-# Check showcase only to speed up a building with CI
-# Showcase includes all other examples
-SHOWCASE=$(pwd)/examples/showcase
-check_example asmjs-unknown-emscripten $SHOWCASE
-check_example wasm32-unknown-emscripten $SHOWCASE
-check_example wasm32-unknown-unknown $SHOWCASE
+cargo test --doc --all-features
+(cd crates/macro && cargo test --doc)
diff --git a/crates/macro/Cargo.toml b/crates/macro/Cargo.toml
index a53d70e3bd6..573dbb95b2e 100644
--- a/crates/macro/Cargo.toml
+++ b/crates/macro/Cargo.toml
@@ -1,10 +1,10 @@
 [package]
 name = "yew-macro"
-version = "0.9.0"
+version = "0.11.1"
 edition = "2018"
-authors = ["Justin Starry <justin.starry@icloud.com>"]
-repository = "https://github.com/DenisKolodin/yew"
-homepage = "https://github.com/DenisKolodin/yew"
+authors = ["Justin Starry <justin@yew.rs>"]
+repository = "https://github.com/yewstack/yew"
+homepage = "https://github.com/yewstack/yew"
 documentation = "https://docs.rs/yew-macro/"
 license = "MIT/Apache-2.0"
 keywords = ["web", "wasm", "frontend", "webasm", "webassembly"]
@@ -12,7 +12,7 @@ categories = ["gui", "web-programming", "wasm"]
 description = "A framework for making client-side single-page apps"
 
 [badges]
-travis-ci = { repository = "DenisKolodin/yew" }
+travis-ci = { repository = "yewstack/yew" }
 
 [lib]
 proc-macro = true
@@ -21,12 +21,15 @@ proc-macro = true
 boolinator = "2.4.0"
 lazy_static = "1.3.0"
 proc-macro-hack = "0.5"
-proc-macro2 = "0.4"
-quote = "0.6"
-syn = { version = "^0.15.34", features = ["full", "extra-traits"] }
+proc-macro2 = "1.0"
+quote = "1.0"
+syn = { version = "1.0", features = ["full", "extra-traits"] }
 
 [dev-dependencies]
 yew = { path = "../.." }
 
 [build-dependencies]
-autocfg = "0.1.3"
+autocfg = "1.0.0"
+
+[features]
+doc_test = []
diff --git a/crates/macro/src/derive_props/builder.rs b/crates/macro/src/derive_props/builder.rs
index e374e3a7158..d17ae1ca343 100644
--- a/crates/macro/src/derive_props/builder.rs
+++ b/crates/macro/src/derive_props/builder.rs
@@ -9,7 +9,6 @@ use super::generics::{to_arguments, with_param_bounds, GenericArguments};
 use super::{DerivePropsInput, PropField};
 use proc_macro2::{Ident, Span};
 use quote::{quote, ToTokens};
-use std::iter;
 
 pub struct PropsBuilder<'a> {
     builder_name: &'a Ident,
@@ -36,9 +35,6 @@ impl ToTokens for PropsBuilder<'_> {
             ..
         } = props;
 
-        let step_trait_repeat = iter::repeat(step_trait);
-        let vis_repeat = iter::repeat(&vis);
-
         let build_step = self.build_step();
         let impl_steps = self.impl_steps();
         let set_fields = self.set_fields();
@@ -59,21 +55,23 @@ impl ToTokens for PropsBuilder<'_> {
         let builder = quote! {
             #(
                 #[doc(hidden)]
-                #vis_repeat struct #step_names;
+                #vis struct #step_names;
             )*
 
             #[doc(hidden)]
             #vis trait #step_trait {}
 
-            #(impl #step_trait_repeat for #step_names {})*
+            #(impl #step_trait for #step_names {})*
 
             #[doc(hidden)]
-            #vis struct #builder_name#step_generics {
+            #vis struct #builder_name#step_generics
+                #where_clause
+            {
                 wrapped: ::std::boxed::Box<#wrapper_name#ty_generics>,
                 _marker: ::std::marker::PhantomData<#step_generic_param>,
             }
 
-            #(#impl_steps)*
+            #impl_steps
 
             impl#impl_generics #builder_name<#generic_args> #where_clause {
                 #[doc(hidden)]
diff --git a/crates/macro/src/derive_props/field.rs b/crates/macro/src/derive_props/field.rs
index b216b66db0e..a1a393850ad 100644
--- a/crates/macro/src/derive_props/field.rs
+++ b/crates/macro/src/derive_props/field.rs
@@ -1,24 +1,35 @@
 use super::generics::GenericArguments;
 use proc_macro2::{Ident, Span};
-use quote::quote;
+use quote::{quote, quote_spanned};
 use std::cmp::{Ord, Ordering, PartialEq, PartialOrd};
 use std::convert::TryFrom;
 use syn::parse::Result;
-use syn::punctuated;
 use syn::spanned::Spanned;
-use syn::{Error, Field, Meta, MetaList, NestedMeta, Type, Visibility};
+use syn::{
+    Error, ExprPath, Field, Lit, Meta, MetaList, MetaNameValue, NestedMeta, Type, Visibility,
+};
+
+#[derive(PartialEq, Eq)]
+enum PropAttr {
+    Required { wrapped_name: Ident },
+    Default { default: ExprPath },
+    None,
+}
 
 #[derive(Eq)]
 pub struct PropField {
     ty: Type,
     name: Ident,
-    wrapped_name: Option<Ident>,
+    attr: PropAttr,
 }
 
 impl PropField {
     /// All required property fields are wrapped in an `Option`
     pub fn is_required(&self) -> bool {
-        self.wrapped_name.is_some()
+        match self.attr {
+            PropAttr::Required { .. } => true,
+            _ => false,
+        }
     }
 
     /// This step name is descriptive to help a developer realize they missed a required prop
@@ -32,13 +43,16 @@ impl PropField {
     /// Used to transform the `PropWrapper` struct into `Properties`
     pub fn to_field_setter(&self) -> proc_macro2::TokenStream {
         let name = &self.name;
-        if let Some(wrapped_name) = &self.wrapped_name {
-            quote! {
-                #name: self.wrapped.#wrapped_name.unwrap(),
+        match &self.attr {
+            PropAttr::Required { wrapped_name } => {
+                quote! {
+                    #name: self.wrapped.#wrapped_name.unwrap(),
+                }
             }
-        } else {
-            quote! {
-                #name: self.wrapped.#name,
+            _ => {
+                quote! {
+                    #name: self.wrapped.#name,
+                }
             }
         }
     }
@@ -46,28 +60,52 @@ impl PropField {
     /// Wrap all required props in `Option`
     pub fn to_field_def(&self) -> proc_macro2::TokenStream {
         let ty = &self.ty;
-        if let Some(wrapped_name) = &self.wrapped_name {
-            quote! {
-                #wrapped_name: ::std::option::Option<#ty>,
+        match &self.attr {
+            PropAttr::Required { wrapped_name } => {
+                quote! {
+                    #wrapped_name: ::std::option::Option<#ty>,
+                }
             }
-        } else {
-            let name = &self.name;
-            quote! {
-                #name: #ty,
+            _ => {
+                let name = &self.name;
+                quote! {
+                    #name: #ty,
+                }
             }
         }
     }
 
     /// All optional props must implement the `Default` trait
     pub fn to_default_setter(&self) -> proc_macro2::TokenStream {
-        if let Some(wrapped_name) = &self.wrapped_name {
-            quote! {
-                #wrapped_name: ::std::default::Default::default(),
+        match &self.attr {
+            PropAttr::Required { wrapped_name } => {
+                quote! {
+                    #wrapped_name: ::std::option::Option::None,
+                }
             }
-        } else {
-            let name = &self.name;
-            quote! {
-                #name: ::std::default::Default::default(),
+            PropAttr::Default { default } => {
+                let name = &self.name;
+                let ty = &self.ty;
+                let span = default.span();
+                // Hacks to avoid misleading error message.
+                quote_spanned! {span=>
+                    #name: {
+                        match true {
+                            #[allow(unreachable_code)]
+                            false => {
+                                let __unreachable: #ty = ::std::unreachable!();
+                                __unreachable
+                            },
+                            true => #default()
+                        }
+                    },
+                }
+            }
+            PropAttr::None => {
+                let name = &self.name;
+                quote! {
+                    #name: ::std::default::Default::default(),
+                }
             }
         }
     }
@@ -79,64 +117,77 @@ impl PropField {
         generic_arguments: &GenericArguments,
         vis: &Visibility,
     ) -> proc_macro2::TokenStream {
-        let Self {
-            name,
-            ty,
-            wrapped_name,
-        } = self;
-        if let Some(wrapped_name) = wrapped_name {
-            quote! {
-                #[doc(hidden)]
-                #vis fn #name(mut self, #name: #ty) -> #builder_name<#generic_arguments> {
-                    self.wrapped.#wrapped_name = ::std::option::Option::Some(#name);
-                    #builder_name {
-                        wrapped: self.wrapped,
-                        _marker: ::std::marker::PhantomData,
+        let Self { name, ty, attr } = self;
+        match attr {
+            PropAttr::Required { wrapped_name } => {
+                quote! {
+                    #[doc(hidden)]
+                    #vis fn #name(mut self, #name: #ty) -> #builder_name<#generic_arguments> {
+                        self.wrapped.#wrapped_name = ::std::option::Option::Some(#name);
+                        #builder_name {
+                            wrapped: self.wrapped,
+                            _marker: ::std::marker::PhantomData,
+                        }
                     }
                 }
             }
-        } else {
-            quote! {
-                #[doc(hidden)]
-                #vis fn #name(mut self, #name: #ty) -> #builder_name<#generic_arguments> {
-                    self.wrapped.#name = #name;
-                    self
+            _ => {
+                quote! {
+                    #[doc(hidden)]
+                    #vis fn #name(mut self, #name: #ty) -> #builder_name<#generic_arguments> {
+                        self.wrapped.#name = #name;
+                        self
+                    }
                 }
             }
         }
     }
 
-    // Detect the `#[props(required)]` attribute which denotes required fields
-    fn required_wrapper(named_field: &syn::Field) -> Result<Option<Ident>> {
+    // Detect `#[props(required)]` or `#[props(default="...")]` attribute
+    fn attribute(named_field: &syn::Field) -> Result<PropAttr> {
         let meta_list = if let Some(meta_list) = Self::find_props_meta_list(named_field) {
             meta_list
         } else {
-            return Ok(None);
+            return Ok(PropAttr::None);
         };
 
-        let expected_required = syn::Error::new(meta_list.span(), "expected `props(required)`");
+        let expected_attr = syn::Error::new(
+            meta_list.span(),
+            "expected `props(required)` or `#[props(default=\"...\")]`",
+        );
         let first_nested = if let Some(first_nested) = meta_list.nested.first() {
             first_nested
         } else {
-            return Err(expected_required);
+            return Err(expected_attr);
         };
+        match first_nested {
+            NestedMeta::Meta(Meta::Path(word_path)) => {
+                if !word_path.is_ident("required") {
+                    return Err(expected_attr);
+                }
 
-        let word_ident = match first_nested {
-            punctuated::Pair::End(NestedMeta::Meta(Meta::Word(ident))) => ident,
-            _ => return Err(expected_required),
-        };
+                if let Some(ident) = &named_field.ident {
+                    let wrapped_name = Ident::new(&format!("{}_wrapper", ident), Span::call_site());
+                    Ok(PropAttr::Required { wrapped_name })
+                } else {
+                    unreachable!()
+                }
+            }
+            NestedMeta::Meta(Meta::NameValue(name_value)) => {
+                let MetaNameValue { path, lit, .. } = name_value;
 
-        if word_ident != "required" {
-            return Err(expected_required);
-        }
+                if !path.is_ident("default") {
+                    return Err(expected_attr);
+                }
 
-        if let Some(ident) = &named_field.ident {
-            Ok(Some(Ident::new(
-                &format!("{}_wrapper", ident),
-                Span::call_site(),
-            )))
-        } else {
-            unreachable!()
+                if let Lit::Str(lit_str) = lit {
+                    let default = lit_str.parse()?;
+                    Ok(PropAttr::Default { default })
+                } else {
+                    Err(expected_attr)
+                }
+            }
+            _ => Err(expected_attr),
         }
     }
 
@@ -149,7 +200,7 @@ impl PropField {
                 _ => None,
             })?;
 
-        if meta_list.ident == "props" {
+        if meta_list.path.is_ident("props") {
             Some(meta_list)
         } else {
             None
@@ -162,7 +213,7 @@ impl TryFrom<Field> for PropField {
 
     fn try_from(field: Field) -> Result<Self> {
         Ok(PropField {
-            wrapped_name: Self::required_wrapper(&field)?,
+            attr: Self::attribute(&field)?,
             ty: field.ty,
             name: field.ident.unwrap(),
         })
@@ -171,13 +222,29 @@ impl TryFrom<Field> for PropField {
 
 impl PartialOrd for PropField {
     fn partial_cmp(&self, other: &PropField) -> Option<Ordering> {
-        self.name.partial_cmp(&other.name)
+        if self.name == other.name {
+            Some(Ordering::Equal)
+        } else if self.name == "children" {
+            Some(Ordering::Greater)
+        } else if other.name == "children" {
+            Some(Ordering::Less)
+        } else {
+            self.name.partial_cmp(&other.name)
+        }
     }
 }
 
 impl Ord for PropField {
     fn cmp(&self, other: &PropField) -> Ordering {
-        self.name.cmp(&other.name)
+        if self.name == other.name {
+            Ordering::Equal
+        } else if self.name == "children" {
+            Ordering::Greater
+        } else if other.name == "children" {
+            Ordering::Less
+        } else {
+            self.name.cmp(&other.name)
+        }
     }
 }
 
diff --git a/crates/macro/src/derive_props/wrapper.rs b/crates/macro/src/derive_props/wrapper.rs
index 82cb3aab903..d9b85cd3b12 100644
--- a/crates/macro/src/derive_props/wrapper.rs
+++ b/crates/macro/src/derive_props/wrapper.rs
@@ -24,7 +24,9 @@ impl ToTokens for PropsWrapper<'_> {
         let wrapper_default_setters = self.default_setters();
 
         let wrapper = quote! {
-            struct #wrapper_name#generics {
+            struct #wrapper_name#generics
+                #where_clause
+            {
                 #(#wrapper_field_defs)*
             }
 
diff --git a/crates/macro/src/html_tree/html_component.rs b/crates/macro/src/html_tree/html_component.rs
index 725b939502d..ff4f53b1cce 100644
--- a/crates/macro/src/html_tree/html_component.rs
+++ b/crates/macro/src/html_tree/html_component.rs
@@ -1,125 +1,187 @@
 use super::HtmlProp;
 use super::HtmlPropSuffix;
+use super::HtmlTreeNested;
 use crate::PeekValue;
 use boolinator::Boolinator;
 use proc_macro2::Span;
 use quote::{quote, quote_spanned, ToTokens};
+use std::cmp::Ordering;
 use syn::buffer::Cursor;
 use syn::parse;
 use syn::parse::{Parse, ParseStream, Result as ParseResult};
+use syn::punctuated::Punctuated;
 use syn::spanned::Spanned;
-use syn::{Ident, Token, Type};
+use syn::{
+    AngleBracketedGenericArguments, Expr, GenericArgument, Ident, Path, PathArguments, PathSegment,
+    Token, Type, TypePath,
+};
 
-pub struct HtmlComponent(HtmlComponentInner);
+pub struct HtmlComponent {
+    ty: Type,
+    props: Props,
+    children: Vec<HtmlTreeNested>,
+}
 
 impl PeekValue<()> for HtmlComponent {
     fn peek(cursor: Cursor) -> Option<()> {
-        let (punct, cursor) = cursor.punct()?;
-        (punct.as_char() == '<').as_option()?;
-
-        HtmlComponent::peek_type(cursor)
+        HtmlComponentOpen::peek(cursor)
+            .or_else(|| HtmlComponentClose::peek(cursor))
+            .map(|_| ())
     }
 }
 
 impl Parse for HtmlComponent {
     fn parse(input: ParseStream) -> ParseResult<Self> {
-        let lt = input.parse::<Token![<]>()?;
-        let HtmlPropSuffix { stream, div, gt } = input.parse()?;
-        if div.is_none() {
-            return Err(syn::Error::new_spanned(
-                HtmlComponentTag { lt, gt },
-                "expected component tag be of form `< .. />`",
-            ));
+        if HtmlComponentClose::peek(input.cursor()).is_some() {
+            return match input.parse::<HtmlComponentClose>() {
+                Ok(close) => Err(syn::Error::new_spanned(
+                    close,
+                    "this close tag has no corresponding open tag",
+                )),
+                Err(err) => Err(err),
+            };
         }
 
-        match parse(stream) {
-            Ok(comp) => Ok(HtmlComponent(comp)),
-            Err(err) => {
-                if err.to_string().starts_with("unexpected end of input") {
-                    Err(syn::Error::new_spanned(div, err.to_string()))
-                } else {
-                    Err(err)
+        let open = input.parse::<HtmlComponentOpen>()?;
+        // Return early if it's a self-closing tag
+        if open.div.is_some() {
+            return Ok(HtmlComponent {
+                ty: open.ty,
+                props: open.props,
+                children: Vec::new(),
+            });
+        }
+
+        let mut children: Vec<HtmlTreeNested> = vec![];
+        loop {
+            if input.is_empty() {
+                return Err(syn::Error::new_spanned(
+                    open,
+                    "this open tag has no corresponding close tag",
+                ));
+            }
+            if let Some(ty) = HtmlComponentClose::peek(input.cursor()) {
+                if open.ty == ty {
+                    break;
                 }
             }
+
+            children.push(input.parse()?);
         }
+
+        input.parse::<HtmlComponentClose>()?;
+
+        Ok(HtmlComponent {
+            ty: open.ty,
+            props: open.props,
+            children,
+        })
     }
 }
 
 impl ToTokens for HtmlComponent {
     fn to_tokens(&self, tokens: &mut proc_macro2::TokenStream) {
-        let HtmlComponentInner { ty, props } = &self.0;
-        let vcomp_scope = Ident::new("__yew_vcomp_scope", Span::call_site());
+        let Self {
+            ty,
+            props,
+            children,
+        } = self;
 
-        let validate_props = if let Some(Props::List(ListProps(vec_props))) = props {
+        let validate_props = if let Props::List(ListProps { props, .. }) = props {
             let prop_ref = Ident::new("__yew_prop_ref", Span::call_site());
-            let check_props = vec_props.iter().map(|HtmlProp { label, .. }| {
+            let check_props = props.iter().map(|HtmlProp { label, .. }| {
                 quote! { #prop_ref.#label; }
             });
 
+            let check_children = if !children.is_empty() {
+                quote! { #prop_ref.children; }
+            } else {
+                quote! {}
+            };
+
             // This is a hack to avoid allocating memory but still have a reference to a props
             // struct so that attributes can be checked against it
 
             #[cfg(has_maybe_uninit)]
             let unallocated_prop_ref = quote! {
-                let #prop_ref: <#ty as ::yew::html::Component>::Properties = unsafe { ::std::mem::MaybeUninit::uninit().assume_init() };
+                let #prop_ref: <#ty as ::yew::html::Component>::Properties = unsafe {
+                    ::std::mem::MaybeUninit::uninit().assume_init()
+                };
             };
 
             #[cfg(not(has_maybe_uninit))]
             let unallocated_prop_ref = quote! {
-                let #prop_ref: <#ty as ::yew::html::Component>::Properties = unsafe { ::std::mem::uninitialized() };
+                let #prop_ref: <#ty as ::yew::html::Component>::Properties = unsafe {
+                    ::std::mem::uninitialized()
+                };
             };
 
             quote! {
                 #unallocated_prop_ref
+                #check_children
                 #(#check_props)*
             }
         } else {
             quote! {}
         };
 
-        let init_props = if let Some(props) = props {
-            match props {
-                Props::List(ListProps(vec_props)) => {
-                    let set_props = vec_props.iter().map(|HtmlProp { label, value }| {
-                        quote_spanned! { value.span()=>
-                            .#label(<::yew::virtual_dom::vcomp::VComp<_> as ::yew::virtual_dom::vcomp::Transformer<_, _, _>>::transform(#vcomp_scope.clone(), #value))
-                        }
-                    });
-
-                    quote! {
-                        <<#ty as ::yew::html::Component>::Properties as ::yew::html::Properties>::builder()
-                            #(#set_props)*
-                            .build()
-                    }
-                }
-                Props::With(WithProps(props)) => quote! { #props },
+        let set_children = if !children.is_empty() {
+            quote! {
+                .children(::yew::html::ChildrenRenderer::new({
+                    let mut v = ::std::vec::Vec::new();
+                    #(v.extend(::yew::utils::NodeSeq::from(#children));)*
+                    v
+                }))
             }
         } else {
-            quote! {
-                <<#ty as ::yew::html::Component>::Properties as ::yew::html::Properties>::builder().build()
+            quote! {}
+        };
+
+        let init_props = match props {
+            Props::List(ListProps { props, .. }) => {
+                let set_props = props.iter().map(|HtmlProp { label, value }| {
+                    quote_spanned! { value.span()=> .#label(
+                        <::yew::virtual_dom::vcomp::VComp as ::yew::virtual_dom::Transformer<_, _>>::transform(
+                            #value
+                        )
+                    )}
+                });
+
+                quote! {
+                    <<#ty as ::yew::html::Component>::Properties as ::yew::html::Properties>::builder()
+                        #(#set_props)*
+                        #set_children
+                        .build()
+                }
             }
+            Props::With(WithProps { props, .. }) => quote! { #props },
+            Props::None => quote! {
+                <<#ty as ::yew::html::Component>::Properties as ::yew::html::Properties>::builder()
+                    #set_children
+                    .build()
+            },
         };
 
         let validate_comp = quote_spanned! { ty.span()=>
-            trait __yew_validate_comp {
-                type C: ::yew::html::Component;
-            }
-            impl __yew_validate_comp for () {
-                type C = #ty;
-            }
+            trait __yew_validate_comp: ::yew::html::Component {}
+            impl __yew_validate_comp for #ty {}
+        };
+
+        let node_ref = if let Some(node_ref) = props.node_ref() {
+            quote_spanned! { node_ref.span()=> #node_ref }
+        } else {
+            quote! { ::yew::html::NodeRef::default() }
         };
 
         tokens.extend(quote! {{
-            // Validation nevers executes at runtime
+            // These validation checks show a nice error message to the user.
+            // They do not execute at runtime
             if false {
                 #validate_comp
                 #validate_props
             }
 
-            let #vcomp_scope: ::yew::virtual_dom::vcomp::ScopeHolder<_> = ::std::default::Default::default();
-            ::yew::virtual_dom::VNode::VComp(
-                ::yew::virtual_dom::VComp::new::<#ty>(#init_props, #vcomp_scope)
-            )
+            ::yew::virtual_dom::VChild::<#ty>::new(#init_props, #node_ref)
         }});
     }
 }
@@ -135,13 +197,38 @@ impl HtmlComponent {
         Some(cursor)
     }
 
-    fn peek_type(mut cursor: Cursor) -> Option<()> {
+    fn path_arguments(cursor: Cursor) -> Option<(PathArguments, Cursor)> {
+        let (punct, cursor) = cursor.punct()?;
+        (punct.as_char() == '<').as_option()?;
+
+        let (ty, cursor) = Self::peek_type(cursor)?;
+
+        let (punct, cursor) = cursor.punct()?;
+        (punct.as_char() == '>').as_option()?;
+
+        Some((
+            PathArguments::AngleBracketed(AngleBracketedGenericArguments {
+                colon2_token: None,
+                lt_token: Token![<](Span::call_site()),
+                args: vec![GenericArgument::Type(ty)].into_iter().collect(),
+                gt_token: Token![>](Span::call_site()),
+            }),
+            cursor,
+        ))
+    }
+
+    fn peek_type(mut cursor: Cursor) -> Option<(Type, Cursor)> {
         let mut colons_optional = true;
         let mut last_ident = None;
+        let mut leading_colon = None;
+        let mut segments = Punctuated::new();
 
         loop {
             let mut post_colons_cursor = cursor;
             if let Some(c) = Self::double_colon(post_colons_cursor) {
+                if colons_optional {
+                    leading_colon = Some(Token![::](Span::call_site()));
+                }
                 post_colons_cursor = c;
             } else if !colons_optional {
                 break;
@@ -149,7 +236,15 @@ impl HtmlComponent {
 
             if let Some((ident, c)) = post_colons_cursor.ident() {
                 cursor = c;
-                last_ident = Some(ident);
+                last_ident = Some(ident.clone());
+                let arguments = if let Some((args, c)) = Self::path_arguments(cursor) {
+                    cursor = c;
+                    args
+                } else {
+                    PathArguments::None
+                };
+
+                segments.push(PathSegment { ident, arguments });
             } else {
                 break;
             }
@@ -160,43 +255,102 @@ impl HtmlComponent {
 
         let type_str = last_ident?.to_string();
         type_str.is_ascii().as_option()?;
-        type_str.bytes().next()?.is_ascii_uppercase().as_option()
+        type_str.bytes().next()?.is_ascii_uppercase().as_option()?;
+
+        Some((
+            Type::Path(TypePath {
+                qself: None,
+                path: Path {
+                    leading_colon,
+                    segments,
+                },
+            }),
+            cursor,
+        ))
     }
 }
 
-pub struct HtmlComponentInner {
+struct HtmlComponentOpen {
+    lt: Token![<],
     ty: Type,
-    props: Option<Props>,
+    props: Props,
+    div: Option<Token![/]>,
+    gt: Token![>],
 }
 
-impl Parse for HtmlComponentInner {
+impl PeekValue<Type> for HtmlComponentOpen {
+    fn peek(cursor: Cursor) -> Option<Type> {
+        let (punct, cursor) = cursor.punct()?;
+        (punct.as_char() == '<').as_option()?;
+        let (typ, _) = HtmlComponent::peek_type(cursor)?;
+        return Some(typ);
+    }
+}
+
+impl Parse for HtmlComponentOpen {
     fn parse(input: ParseStream) -> ParseResult<Self> {
+        let lt = input.parse::<Token![<]>()?;
         let ty = input.parse()?;
         // backwards compat
         let _ = input.parse::<Token![:]>();
+        let HtmlPropSuffix { stream, div, gt } = input.parse()?;
+        let props = parse(stream)?;
+
+        Ok(HtmlComponentOpen {
+            lt,
+            ty,
+            props,
+            div,
+            gt,
+        })
+    }
+}
 
-        let props = if let Some(prop_type) = Props::peek(input.cursor()) {
-            match prop_type {
-                PropType::List => input.parse().map(Props::List).map(Some)?,
-                PropType::With => input.parse().map(Props::With).map(Some)?,
-            }
-        } else {
-            None
-        };
-
-        Ok(HtmlComponentInner { ty, props })
+impl ToTokens for HtmlComponentOpen {
+    fn to_tokens(&self, tokens: &mut proc_macro2::TokenStream) {
+        let HtmlComponentOpen { lt, gt, .. } = self;
+        tokens.extend(quote! {#lt#gt});
     }
 }
 
-struct HtmlComponentTag {
+struct HtmlComponentClose {
     lt: Token![<],
+    div: Token![/],
+    ty: Type,
     gt: Token![>],
 }
 
-impl ToTokens for HtmlComponentTag {
+impl PeekValue<Type> for HtmlComponentClose {
+    fn peek(cursor: Cursor) -> Option<Type> {
+        let (punct, cursor) = cursor.punct()?;
+        (punct.as_char() == '<').as_option()?;
+
+        let (punct, cursor) = cursor.punct()?;
+        (punct.as_char() == '/').as_option()?;
+
+        let (typ, cursor) = HtmlComponent::peek_type(cursor)?;
+
+        let (punct, _) = cursor.punct()?;
+        (punct.as_char() == '>').as_option()?;
+
+        return Some(typ);
+    }
+}
+impl Parse for HtmlComponentClose {
+    fn parse(input: ParseStream) -> ParseResult<Self> {
+        Ok(HtmlComponentClose {
+            lt: input.parse()?,
+            div: input.parse()?,
+            ty: input.parse()?,
+            gt: input.parse()?,
+        })
+    }
+}
+
+impl ToTokens for HtmlComponentClose {
     fn to_tokens(&self, tokens: &mut proc_macro2::TokenStream) {
-        let HtmlComponentTag { lt, gt } = self;
-        tokens.extend(quote! {#lt#gt});
+        let HtmlComponentClose { lt, div, ty, gt } = self;
+        tokens.extend(quote! {#lt#div#ty#gt});
     }
 }
 
@@ -208,6 +362,17 @@ enum PropType {
 enum Props {
     List(ListProps),
     With(WithProps),
+    None,
+}
+
+impl Props {
+    fn node_ref(&self) -> Option<&Expr> {
+        match self {
+            Props::List(ListProps { node_ref, .. }) => node_ref.as_ref(),
+            Props::With(WithProps { node_ref, .. }) => node_ref.as_ref(),
+            Props::None => None,
+        }
+    }
 }
 
 impl PeekValue<PropType> for Props {
@@ -223,7 +388,21 @@ impl PeekValue<PropType> for Props {
     }
 }
 
-struct ListProps(Vec<HtmlProp>);
+impl Parse for Props {
+    fn parse(input: ParseStream) -> ParseResult<Self> {
+        match Props::peek(input.cursor()) {
+            Some(PropType::List) => input.parse().map(Props::List),
+            Some(PropType::With) => input.parse().map(Props::With),
+            None => Ok(Props::None),
+        }
+    }
+}
+
+struct ListProps {
+    props: Vec<HtmlProp>,
+    node_ref: Option<Expr>,
+}
+
 impl Parse for ListProps {
     fn parse(input: ParseStream) -> ParseResult<Self> {
         let mut props: Vec<HtmlProp> = Vec::new();
@@ -231,7 +410,12 @@ impl Parse for ListProps {
             props.push(input.parse::<HtmlProp>()?);
         }
 
+        let ref_position = props.iter().position(|p| p.label.to_string() == "ref");
+        let node_ref = ref_position.and_then(|i| Some(props.remove(i).value));
         for prop in &props {
+            if prop.label.to_string() == "ref" {
+                return Err(syn::Error::new_spanned(&prop.label, "too many refs set"));
+            }
             if prop.label.to_string() == "type" {
                 return Err(syn::Error::new_spanned(&prop.label, "expected identifier"));
             }
@@ -242,17 +426,29 @@ impl Parse for ListProps {
 
         // alphabetize
         props.sort_by(|a, b| {
-            a.label
-                .to_string()
-                .partial_cmp(&b.label.to_string())
-                .unwrap()
+            if a.label == b.label {
+                Ordering::Equal
+            } else if a.label.to_string() == "children" {
+                Ordering::Greater
+            } else if b.label.to_string() == "children" {
+                Ordering::Less
+            } else {
+                a.label
+                    .to_string()
+                    .partial_cmp(&b.label.to_string())
+                    .unwrap()
+            }
         });
 
-        Ok(ListProps(props))
+        Ok(ListProps { props, node_ref })
     }
 }
 
-struct WithProps(Ident);
+struct WithProps {
+    props: Ident,
+    node_ref: Option<Expr>,
+}
+
 impl Parse for WithProps {
     fn parse(input: ParseStream) -> ParseResult<Self> {
         let with = input.parse::<Ident>()?;
@@ -261,6 +457,18 @@ impl Parse for WithProps {
         }
         let props = input.parse::<Ident>()?;
         let _ = input.parse::<Token![,]>();
-        Ok(WithProps(props))
+
+        // Check for the ref tag after `with`
+        let mut node_ref = None;
+        if let Some(ident) = input.cursor().ident() {
+            let prop = input.parse::<HtmlProp>()?;
+            if ident.0 == "ref" {
+                node_ref = Some(prop.value);
+            } else {
+                return Err(syn::Error::new_spanned(&prop.label, "unexpected token"));
+            }
+        }
+
+        Ok(WithProps { props, node_ref })
     }
 }
diff --git a/crates/macro/src/html_tree/html_iterable.rs b/crates/macro/src/html_tree/html_iterable.rs
index 47fac43a8ad..ba80943d2b5 100644
--- a/crates/macro/src/html_tree/html_iterable.rs
+++ b/crates/macro/src/html_tree/html_iterable.rs
@@ -40,9 +40,8 @@ impl ToTokens for HtmlIterable {
     fn to_tokens(&self, tokens: &mut TokenStream) {
         let expr = &self.0;
         let new_tokens = quote_spanned! {expr.span()=> {
-            let mut __yew_vlist = ::yew::virtual_dom::VList::new();
-            let __yew_nodes: &mut ::std::iter::Iterator<Item = _> = &mut(#expr);
-            for __yew_node in __yew_nodes.into_iter() {
+            let mut __yew_vlist = ::yew::virtual_dom::VList::default();
+            for __yew_node in #expr {
                 __yew_vlist.add_child(__yew_node.into());
             }
             ::yew::virtual_dom::VNode::from(__yew_vlist)
diff --git a/crates/macro/src/html_tree/html_list.rs b/crates/macro/src/html_tree/html_list.rs
index 5da411c0333..a8cffcad49e 100644
--- a/crates/macro/src/html_tree/html_list.rs
+++ b/crates/macro/src/html_tree/html_list.rs
@@ -49,12 +49,14 @@ impl Parse for HtmlList {
 
 impl ToTokens for HtmlList {
     fn to_tokens(&self, tokens: &mut proc_macro2::TokenStream) {
-        let html_trees = &self.0;
+        let children = &self.0;
         tokens.extend(quote! {
             ::yew::virtual_dom::VNode::VList(
-                ::yew::virtual_dom::vlist::VList {
-                    childs: vec![#(#html_trees,)*],
-                }
+                ::yew::virtual_dom::vlist::VList::new_with_children({
+                    let mut v = ::std::vec::Vec::new();
+                    #(v.extend(::yew::utils::NodeSeq::from(#children));)*
+                    v
+                })
             )
         });
     }
diff --git a/crates/macro/src/html_tree/html_node.rs b/crates/macro/src/html_tree/html_node.rs
index 41fce73ea89..f469092034b 100644
--- a/crates/macro/src/html_tree/html_node.rs
+++ b/crates/macro/src/html_tree/html_node.rs
@@ -4,6 +4,7 @@ use quote::{quote, quote_spanned, ToTokens};
 use syn::buffer::Cursor;
 use syn::parse::{Parse, ParseStream, Result};
 use syn::spanned::Spanned;
+use syn::Expr;
 use syn::Lit;
 
 pub struct HtmlNode(Node);
@@ -18,7 +19,7 @@ impl Parse for HtmlNode {
             }
             Node::Literal(lit)
         } else {
-            Node::Raw(input.parse()?)
+            Node::Expression(input.parse()?)
         };
 
         Ok(HtmlNode(node))
@@ -46,12 +47,8 @@ impl ToTokens for HtmlNode {
 impl ToTokens for Node {
     fn to_tokens(&self, tokens: &mut TokenStream) {
         let node_token = match &self {
-            Node::Literal(lit) => quote! {
-                ::yew::virtual_dom::VNode::from(#lit)
-            },
-            Node::Raw(stream) => quote_spanned! {stream.span()=>
-                ::yew::virtual_dom::VNode::from({#stream})
-            },
+            Node::Literal(lit) => quote! {#lit},
+            Node::Expression(expr) => quote_spanned! {expr.span()=> {#expr} },
         };
 
         tokens.extend(node_token);
@@ -60,5 +57,5 @@ impl ToTokens for Node {
 
 enum Node {
     Literal(Lit),
-    Raw(TokenStream),
+    Expression(Expr),
 }
diff --git a/crates/macro/src/html_tree/html_prop.rs b/crates/macro/src/html_tree/html_prop.rs
index 07cb906678d..8a47abdd0f7 100644
--- a/crates/macro/src/html_tree/html_prop.rs
+++ b/crates/macro/src/html_tree/html_prop.rs
@@ -49,18 +49,12 @@ impl Parse for HtmlPropSuffix {
             if let TokenTree::Punct(punct) = &next {
                 match punct.as_char() {
                     '>' => {
-                        let possible_tag_end = input.peek(Token![<])
-                            || input.peek(syn::token::Brace)
-                            || input.is_empty();
-
-                        if angle_count > 1 || possible_tag_end {
-                            angle_count -= 1;
-                            if angle_count == 0 {
-                                gt = Some(syn::token::Gt {
-                                    spans: [punct.span()],
-                                });
-                                break;
-                            }
+                        angle_count -= 1;
+                        if angle_count == 0 {
+                            gt = Some(syn::token::Gt {
+                                spans: [punct.span()],
+                            });
+                            break;
                         }
                     }
                     '<' => angle_count += 1,
@@ -73,14 +67,6 @@ impl Parse for HtmlPropSuffix {
                             break;
                         }
                     }
-                    '-' => {
-                        if input.peek(Token![>]) {
-                            // Handle explicit return types in callbacks (#560)
-                            // We increase angle_count here in order to ignore
-                            // the following >.
-                            angle_count += 1;
-                        }
-                    }
                     _ => {}
                 };
             }
diff --git a/crates/macro/src/html_tree/html_tag/mod.rs b/crates/macro/src/html_tree/html_tag/mod.rs
index f1e020813a3..a92ebe216cd 100644
--- a/crates/macro/src/html_tree/html_tag/mod.rs
+++ b/crates/macro/src/html_tree/html_tag/mod.rs
@@ -91,18 +91,28 @@ impl ToTokens for HtmlTag {
         let TagAttributes {
             classes,
             attributes,
+            booleans,
             kind,
             value,
             checked,
-            disabled,
-            selected,
+            node_ref,
             href,
             listeners,
         } = &attributes;
 
         let vtag = Ident::new("__yew_vtag", tag_name.span());
-        let attr_labels = attributes.iter().map(|attr| attr.label.to_string());
-        let attr_values = attributes.iter().map(|attr| &attr.value);
+        let attr_pairs = attributes.iter().map(|TagAttribute { label, value }| {
+            let label_str = label.to_string();
+            quote_spanned! {value.span() => (#label_str.to_owned(), (#value).to_string()) }
+        });
+        let set_booleans = booleans.iter().map(|TagAttribute { label, value }| {
+            let label_str = label.to_string();
+            quote_spanned! {value.span() =>
+                if #value {
+                    #vtag.add_attribute(&#label_str, &#label_str);
+                }
+            }
+        });
         let set_kind = kind.iter().map(|kind| {
             quote_spanned! {kind.span()=> #vtag.set_kind(&(#kind)); }
         });
@@ -118,20 +128,6 @@ impl ToTokens for HtmlTag {
         let set_checked = checked.iter().map(|checked| {
             quote_spanned! {checked.span()=> #vtag.set_checked(#checked); }
         });
-        let add_disabled = disabled.iter().map(|disabled| {
-            quote_spanned! {disabled.span()=>
-                if #disabled {
-                    #vtag.add_attribute("disabled", &"true");
-                }
-            }
-        });
-        let add_selected = selected.iter().map(|selected| {
-            quote_spanned! {selected.span()=>
-                if #selected {
-                    #vtag.add_attribute("selected", &"selected");
-                }
-            }
-        });
         let set_classes = classes.iter().map(|classes_form| match classes_form {
             ClassesForm::Tuple(classes) => quote! {
                 #vtag.add_classes(vec![#(&(#classes)),*]);
@@ -140,6 +136,23 @@ impl ToTokens for HtmlTag {
                 #vtag.set_classes(#classes);
             },
         });
+        let set_node_ref = node_ref.iter().map(|node_ref| {
+            quote! {
+                #vtag.node_ref = #node_ref;
+            }
+        });
+        let listeners = listeners.iter().map(|listener| {
+            let name = &listener.label.name;
+            let callback = &listener.value;
+
+            quote_spanned! {name.span()=> {
+                ::yew::html::#name::Wrapper::new(
+                    <::yew::virtual_dom::vtag::VTag as ::yew::virtual_dom::Transformer<_, _>>::transform(
+                        #callback
+                    )
+                )
+            }}
+        });
 
         tokens.extend(quote! {{
             let mut #vtag = ::yew::virtual_dom::vtag::VTag::new(#name);
@@ -147,13 +160,13 @@ impl ToTokens for HtmlTag {
             #(#set_value)*
             #(#add_href)*
             #(#set_checked)*
-            #(#add_disabled)*
-            #(#add_selected)*
+            #(#set_booleans)*
             #(#set_classes)*
-            #vtag.add_attributes(vec![#((#attr_labels.to_owned(), (#attr_values).to_string())),*]);
-            #vtag.add_listeners(vec![#(::std::boxed::Box::new(#listeners)),*]);
+            #(#set_node_ref)*
+            #vtag.add_attributes(vec![#(#attr_pairs),*]);
+            #vtag.add_listeners(vec![#(::std::rc::Rc::new(#listeners)),*]);
             #vtag.add_children(vec![#(#children),*]);
-            ::yew::virtual_dom::VNode::VTag(#vtag)
+            ::yew::virtual_dom::VNode::from(#vtag)
         }});
     }
 }
diff --git a/crates/macro/src/html_tree/html_tag/tag_attributes.rs b/crates/macro/src/html_tree/html_tag/tag_attributes.rs
index efce0733899..61ae5581e17 100644
--- a/crates/macro/src/html_tree/html_tag/tag_attributes.rs
+++ b/crates/macro/src/html_tree/html_tag/tag_attributes.rs
@@ -1,21 +1,20 @@
 use crate::html_tree::HtmlProp as TagAttribute;
 use crate::PeekValue;
 use lazy_static::lazy_static;
-use proc_macro2::TokenStream;
-use quote::{quote, quote_spanned};
-use std::collections::HashMap;
+use std::collections::HashSet;
+use std::iter::FromIterator;
 use syn::parse::{Parse, ParseStream, Result as ParseResult};
-use syn::{Expr, ExprClosure, ExprTuple, Ident};
+use syn::{Expr, ExprTuple};
 
 pub struct TagAttributes {
     pub attributes: Vec<TagAttribute>,
-    pub listeners: Vec<TokenStream>,
+    pub listeners: Vec<TagAttribute>,
     pub classes: Option<ClassesForm>,
+    pub booleans: Vec<TagAttribute>,
     pub value: Option<Expr>,
     pub kind: Option<Expr>,
     pub checked: Option<Expr>,
-    pub disabled: Option<Expr>,
-    pub selected: Option<Expr>,
+    pub node_ref: Option<Expr>,
     pub href: Option<Expr>,
 }
 
@@ -24,75 +23,107 @@ pub enum ClassesForm {
     Single(Expr),
 }
 
-pub struct TagListener {
-    name: Ident,
-    handler: Expr,
-    event_name: String,
+lazy_static! {
+    static ref BOOLEAN_SET: HashSet<&'static str> = {
+        HashSet::from_iter(
+            vec![
+                "async",
+                "autofocus",
+                "controls",
+                "default",
+                "defer",
+                "disabled",
+                "hidden",
+                "ismap",
+                "loop",
+                "multiple",
+                "muted",
+                "novalidate",
+                "open",
+                "readonly",
+                "required",
+                "selected",
+            ]
+            .into_iter(),
+        )
+    };
 }
 
 lazy_static! {
-    static ref LISTENER_MAP: HashMap<&'static str, &'static str> = {
-        let mut m = HashMap::new();
-        m.insert("onclick", "ClickEvent");
-        m.insert("ondoubleclick", "DoubleClickEvent");
-        m.insert("onkeypress", "KeyPressEvent");
-        m.insert("onkeydown", "KeyDownEvent");
-        m.insert("onkeyup", "KeyUpEvent");
-        m.insert("onmousedown", "MouseDownEvent");
-        m.insert("onmousemove", "MouseMoveEvent");
-        m.insert("onmouseout", "MouseOutEvent");
-        m.insert("onmouseenter", "MouseEnterEvent");
-        m.insert("onmouseleave", "MouseLeaveEvent");
-        m.insert("onmousewheel", "MouseWheelEvent");
-        m.insert("onmouseover", "MouseOverEvent");
-        m.insert("onmouseup", "MouseUpEvent");
-        m.insert("touchcancel", "TouchCancel");
-        m.insert("touchend", "TouchEnd");
-        m.insert("touchenter", "TouchEnter");
-        m.insert("touchmove", "TouchMove");
-        m.insert("touchstart", "TouchStart");
-        m.insert("ongotpointercapture", "GotPointerCaptureEvent");
-        m.insert("onlostpointercapture", "LostPointerCaptureEvent");
-        m.insert("onpointercancel", "PointerCancelEvent");
-        m.insert("onpointerdown", "PointerDownEvent");
-        m.insert("onpointerenter", "PointerEnterEvent");
-        m.insert("onpointerleave", "PointerLeaveEvent");
-        m.insert("onpointermove", "PointerMoveEvent");
-        m.insert("onpointerout", "PointerOutEvent");
-        m.insert("onpointerover", "PointerOverEvent");
-        m.insert("onpointerup", "PointerUpEvent");
-        m.insert("onscroll", "ScrollEvent");
-        m.insert("onblur", "BlurEvent");
-        m.insert("onfocus", "FocusEvent");
-        m.insert("onsubmit", "SubmitEvent");
-        m.insert("oninput", "InputData");
-        m.insert("onchange", "ChangeData");
-        m.insert("ondrag", "DragEvent");
-        m.insert("ondragstart", "DragStartEvent");
-        m.insert("ondragend", "DragEndEvent");
-        m.insert("ondragenter", "DragEnterEvent");
-        m.insert("ondragleave", "DragLeaveEvent");
-        m.insert("ondragover", "DragOverEvent");
-        m.insert("ondragexit", "DragExitEvent");
-        m.insert("ondrop", "DragDropEvent");
-        m.insert("oncontextmenu", "ContextMenuEvent");
-        m
+    static ref LISTENER_SET: HashSet<&'static str> = {
+        HashSet::from_iter(
+            vec![
+                "onclick",
+                "ondoubleclick",
+                "onkeypress",
+                "onkeydown",
+                "onkeyup",
+                "onmousedown",
+                "onmousemove",
+                "onmouseout",
+                "onmouseenter",
+                "onmouseleave",
+                "onmousewheel",
+                "onmouseover",
+                "onmouseup",
+                "ontouchcancel",
+                "ontouchend",
+                "ontouchenter",
+                "ontouchmove",
+                "ontouchstart",
+                "ongotpointercapture",
+                "onlostpointercapture",
+                "onpointercancel",
+                "onpointerdown",
+                "onpointerenter",
+                "onpointerleave",
+                "onpointermove",
+                "onpointerout",
+                "onpointerover",
+                "onpointerup",
+                "onscroll",
+                "onblur",
+                "onfocus",
+                "onsubmit",
+                "oninput",
+                "onchange",
+                "ondrag",
+                "ondragstart",
+                "ondragend",
+                "ondragenter",
+                "ondragleave",
+                "ondragover",
+                "ondragexit",
+                "ondrop",
+                "oncontextmenu",
+            ]
+            .into_iter(),
+        )
     };
 }
 
 impl TagAttributes {
-    fn drain_listeners(attrs: &mut Vec<TagAttribute>) -> Vec<TagListener> {
+    fn drain_listeners(attrs: &mut Vec<TagAttribute>) -> Vec<TagAttribute> {
         let mut i = 0;
         let mut drained = Vec::new();
         while i < attrs.len() {
             let name_str = attrs[i].label.to_string();
-            if let Some(event_type) = LISTENER_MAP.get(&name_str.as_str()) {
-                let TagAttribute { label, value } = attrs.remove(i);
-                drained.push(TagListener {
-                    name: label.name,
-                    handler: value,
-                    event_name: event_type.to_owned().to_string(),
-                });
+            if LISTENER_SET.contains(&name_str.as_str()) {
+                drained.push(attrs.remove(i));
+            } else {
+                i += 1;
+            }
+        }
+        drained
+    }
+
+    fn drain_boolean(attrs: &mut Vec<TagAttribute>) -> Vec<TagAttribute> {
+        let mut i = 0;
+        let mut drained = Vec::new();
+        while i < attrs.len() {
+            let name_str = attrs[i].label.to_string();
+            if BOOLEAN_SET.contains(&name_str.as_str()) {
+                drained.push(attrs.remove(i));
             } else {
                 i += 1;
             }
@@ -118,60 +149,6 @@ impl TagAttributes {
             expr => ClassesForm::Single(expr),
         }
     }
-
-    fn map_listener(listener: TagListener) -> ParseResult<TokenStream> {
-        let TagListener {
-            name,
-            event_name,
-            handler,
-        } = listener;
-
-        match handler {
-            Expr::Closure(closure) => {
-                let ExprClosure {
-                    inputs,
-                    body,
-                    or1_token,
-                    or2_token,
-                    ..
-                } = closure;
-
-                let or_span = quote! {#or1_token#or2_token};
-                if inputs.len() != 1 {
-                    return Err(syn::Error::new_spanned(
-                        or_span,
-                        "there must be one closure argument",
-                    ));
-                }
-
-                let var = match inputs.first().unwrap().into_value() {
-                    syn::FnArg::Inferred(pat) => pat,
-                    _ => return Err(syn::Error::new_spanned(or_span, "invalid closure argument")),
-                };
-                let handler =
-                    Ident::new(&format!("__yew_{}_handler", name.to_string()), name.span());
-                let listener =
-                    Ident::new(&format!("__yew_{}_listener", name.to_string()), name.span());
-                let segment = syn::PathSegment {
-                    ident: Ident::new(&event_name, name.span()),
-                    arguments: syn::PathArguments::None,
-                };
-                let var_type = quote! { ::yew::events::#segment };
-                let wrapper_type = quote! { ::yew::html::#name::Wrapper };
-                let listener_stream = quote_spanned! {name.span()=> {
-                    let #handler = move | #var: #var_type | #body;
-                    let #listener = #wrapper_type::from(#handler);
-                    #listener
-                }};
-
-                Ok(listener_stream)
-            }
-            _ => Err(syn::Error::new_spanned(
-                &name,
-                format!("`{}` attribute value should be a closure", name),
-            )),
-        }
-    }
 }
 
 impl Parse for TagAttributes {
@@ -183,7 +160,7 @@ impl Parse for TagAttributes {
 
         let mut listeners = Vec::new();
         for listener in TagAttributes::drain_listeners(&mut attributes) {
-            listeners.push(TagAttributes::map_listener(listener)?);
+            listeners.push(listener);
         }
 
         // Multiple listener attributes are allowed, but no others
@@ -204,25 +181,25 @@ impl Parse for TagAttributes {
             }
             i += 1;
         }
+        let booleans = TagAttributes::drain_boolean(&mut attributes);
 
         let classes =
             TagAttributes::remove_attr(&mut attributes, "class").map(TagAttributes::map_classes);
         let value = TagAttributes::remove_attr(&mut attributes, "value");
         let kind = TagAttributes::remove_attr(&mut attributes, "type");
         let checked = TagAttributes::remove_attr(&mut attributes, "checked");
-        let disabled = TagAttributes::remove_attr(&mut attributes, "disabled");
-        let selected = TagAttributes::remove_attr(&mut attributes, "selected");
+        let node_ref = TagAttributes::remove_attr(&mut attributes, "ref");
         let href = TagAttributes::remove_attr(&mut attributes, "href");
 
         Ok(TagAttributes {
             attributes,
             classes,
             listeners,
+            checked,
+            booleans,
             value,
             kind,
-            checked,
-            disabled,
-            selected,
+            node_ref,
             href,
         })
     }
diff --git a/crates/macro/src/html_tree/mod.rs b/crates/macro/src/html_tree/mod.rs
index ebf5e0ed2f4..20102dd53a1 100644
--- a/crates/macro/src/html_tree/mod.rs
+++ b/crates/macro/src/html_tree/mod.rs
@@ -18,7 +18,7 @@ use html_prop::HtmlProp;
 use html_prop::HtmlPropSuffix;
 use html_tag::HtmlTag;
 use proc_macro2::TokenStream;
-use quote::ToTokens;
+use quote::{quote, ToTokens};
 use syn::buffer::Cursor;
 use syn::parse::{Parse, ParseStream, Result};
 
@@ -105,17 +105,49 @@ impl PeekValue<HtmlType> for HtmlTree {
 
 impl ToTokens for HtmlTree {
     fn to_tokens(&self, tokens: &mut proc_macro2::TokenStream) {
-        let empty_html_el = HtmlList(Vec::new());
-        let html_tree_el: &dyn ToTokens = match self {
-            HtmlTree::Empty => &empty_html_el,
-            HtmlTree::Component(comp) => comp,
-            HtmlTree::Tag(tag) => tag,
-            HtmlTree::List(list) => list,
-            HtmlTree::Node(node) => node,
-            HtmlTree::Iterable(iterable) => iterable,
-            HtmlTree::Block(block) => block,
-        };
+        let node = self.token_stream();
+        tokens.extend(quote! {
+            ::yew::virtual_dom::VNode::from(#node)
+        });
+    }
+}
+
+impl HtmlTree {
+    fn token_stream(&self) -> proc_macro2::TokenStream {
+        match self {
+            HtmlTree::Empty => HtmlList(Vec::new()).into_token_stream(),
+            HtmlTree::Component(comp) => comp.into_token_stream(),
+            HtmlTree::Tag(tag) => tag.into_token_stream(),
+            HtmlTree::List(list) => list.into_token_stream(),
+            HtmlTree::Node(node) => node.into_token_stream(),
+            HtmlTree::Iterable(iterable) => iterable.into_token_stream(),
+            HtmlTree::Block(block) => block.into_token_stream(),
+        }
+    }
+}
+
+pub struct HtmlRootNested(HtmlTreeNested);
+impl Parse for HtmlRootNested {
+    fn parse(input: ParseStream) -> Result<Self> {
+        Ok(HtmlRootNested(HtmlTreeNested::parse(input)?))
+    }
+}
+
+impl ToTokens for HtmlRootNested {
+    fn to_tokens(&self, tokens: &mut proc_macro2::TokenStream) {
+        self.0.to_tokens(tokens);
+    }
+}
 
-        html_tree_el.to_tokens(tokens);
+pub struct HtmlTreeNested(HtmlTree);
+impl Parse for HtmlTreeNested {
+    fn parse(input: ParseStream) -> Result<Self> {
+        Ok(HtmlTreeNested(HtmlTree::parse(input)?))
+    }
+}
+
+impl ToTokens for HtmlTreeNested {
+    fn to_tokens(&self, tokens: &mut proc_macro2::TokenStream) {
+        tokens.extend(self.0.token_stream());
     }
 }
diff --git a/crates/macro/src/lib.rs b/crates/macro/src/lib.rs
index 012f53c5763..19aaaf61032 100644
--- a/crates/macro/src/lib.rs
+++ b/crates/macro/src/lib.rs
@@ -9,8 +9,11 @@
 //! # #[macro_use] extern crate yew;
 //! use yew::prelude::*;
 //!
-//! # struct Component;
-//! #[derive(Properties)]
+//! struct Component {
+//!   link: ComponentLink<Self>,
+//! }
+//!
+//! #[derive(Clone, Properties)]
 //! struct Props {
 //!   #[props(required)]
 //!   prop: String,
@@ -28,16 +31,16 @@
 //! #     fn update(&mut self, msg: Self::Message) -> ShouldRender {
 //! #         unimplemented!()
 //! #     }
-//! # }
 //! #
-//! # impl Renderable<Component> for Component {
-//! #     fn view(&self) -> Html<Self> {
+//! #     fn view(&self) -> Html {
 //! #
 //! // ...
 //!
 //! html! {
 //!   <div>
-//!     <button onclick=|_| Msg::Submit>{ "Submit" }</button>
+//!     <button onclick=self.link.callback(|_| Msg::Submit)>
+//!       { "Submit" }
+//!     </button>
 //!     <>
 //!       <Component prop="first" />
 //!       <Component prop="second" />
@@ -51,7 +54,7 @@
 //! # fn main() {}
 //! ```
 //!
-//! Please refer to [https://github.com/DenisKolodin/yew](https://github.com/DenisKolodin/yew) for how to set this up.
+//! Please refer to [https://github.com/yewstack/yew](https://github.com/yewstack/yew) for how to set this up.
 
 #![recursion_limit = "128"]
 extern crate proc_macro;
@@ -60,7 +63,7 @@ mod derive_props;
 mod html_tree;
 
 use derive_props::DerivePropsInput;
-use html_tree::HtmlRoot;
+use html_tree::{HtmlRoot, HtmlRootNested};
 use proc_macro::TokenStream;
 use proc_macro_hack::proc_macro_hack;
 use quote::{quote, ToTokens};
@@ -91,6 +94,12 @@ pub fn derive_props(input: TokenStream) -> TokenStream {
     TokenStream::from(input.into_token_stream())
 }
 
+#[proc_macro_hack]
+pub fn html_nested(input: TokenStream) -> TokenStream {
+    let root = parse_macro_input!(input as HtmlRootNested);
+    TokenStream::from(quote! {#root})
+}
+
 #[proc_macro_hack]
 pub fn html(input: TokenStream) -> TokenStream {
     let root = parse_macro_input!(input as HtmlRoot);
diff --git a/examples/Cargo.toml b/examples/Cargo.toml
new file mode 100644
index 00000000000..2492b0e90b8
--- /dev/null
+++ b/examples/Cargo.toml
@@ -0,0 +1,26 @@
+[workspace]
+members = [
+  "counter",
+  "crm",
+  "custom_components",
+  "dashboard",
+  "node_refs",
+  "file_upload",
+  "fragments",
+  "futures",
+  "game_of_life",
+  "inner_html",
+  "js_callback",
+  "large_table",
+  "minimal",
+  "mount_point",
+  "multi_thread",
+  "nested_list",
+  "npm_and_rest",
+  "server",
+  "showcase",
+  "textarea",
+  "timer",
+  "todomvc",
+  "two_apps",
+]
diff --git a/examples/counter/Cargo.toml b/examples/counter/Cargo.toml
index 1ad06a5cb88..22272744d51 100644
--- a/examples/counter/Cargo.toml
+++ b/examples/counter/Cargo.toml
@@ -5,5 +5,5 @@ authors = ["Denis Kolodin <deniskolodin@gmail.com>"]
 edition = "2018"
 
 [dependencies]
-stdweb = "0.4.2"
+stdweb = "0.4.20"
 yew = { path = "../.." }
diff --git a/examples/counter/src/lib.rs b/examples/counter/src/lib.rs
index 4710546cdaf..fa9d33de841 100644
--- a/examples/counter/src/lib.rs
+++ b/examples/counter/src/lib.rs
@@ -2,9 +2,10 @@
 
 use stdweb::web::Date;
 use yew::services::ConsoleService;
-use yew::{html, Component, ComponentLink, Html, Renderable, ShouldRender};
+use yew::{html, Component, ComponentLink, Html, ShouldRender};
 
 pub struct Model {
+    link: ComponentLink<Self>,
     console: ConsoleService,
     value: i64,
 }
@@ -19,8 +20,9 @@ impl Component for Model {
     type Message = Msg;
     type Properties = ();
 
-    fn create(_: Self::Properties, _: ComponentLink<Self>) -> Self {
+    fn create(_: Self::Properties, link: ComponentLink<Self>) -> Self {
         Model {
+            link,
             console: ConsoleService::new(),
             value: 0,
         }
@@ -45,16 +47,20 @@ impl Component for Model {
         }
         true
     }
-}
 
-impl Renderable<Model> for Model {
-    fn view(&self) -> Html<Self> {
+    fn view(&self) -> Html {
         html! {
             <div>
                 <nav class="menu">
-                    <button onclick=|_| Msg::Increment>{ "Increment" }</button>
-                    <button onclick=|_| Msg::Decrement>{ "Decrement" }</button>
-                    <button onclick=|_| Msg::Bulk(vec![Msg::Increment, Msg::Increment])>{ "Increment Twice" }</button>
+                    <button onclick=self.link.callback(|_| Msg::Increment)>
+                        { "Increment" }
+                    </button>
+                    <button onclick=self.link.callback(|_| Msg::Decrement)>
+                        { "Decrement" }
+                    </button>
+                    <button onclick=self.link.batch_callback(|_| vec![Msg::Increment, Msg::Increment])>
+                        { "Increment Twice" }
+                    </button>
                 </nav>
                 <p>{ self.value }</p>
                 <p>{ Date::new().to_string() }</p>
diff --git a/examples/crm/README.md b/examples/crm/README.md
index 41cc08a1486..4be7a113408 100644
--- a/examples/crm/README.md
+++ b/examples/crm/README.md
@@ -4,3 +4,4 @@ The main goals of this demo example to show you how to:
 
 * Add multiple screens with Yew (scenes)
 * Use storage service
+* Generate VNodes without the html! macro
diff --git a/examples/crm/src/lib.rs b/examples/crm/src/lib.rs
index 4010fd66f70..227feef5bbe 100644
--- a/examples/crm/src/lib.rs
+++ b/examples/crm/src/lib.rs
@@ -8,7 +8,7 @@ mod markdown;
 use yew::format::Json;
 use yew::services::storage::Area;
 use yew::services::{DialogService, StorageService};
-use yew::{html, Component, ComponentLink, Html, Renderable, ShouldRender};
+use yew::{html, Component, ComponentLink, Html, InputData, Renderable, ShouldRender};
 
 const KEY: &'static str = "yew.crm.database";
 
@@ -42,6 +42,7 @@ pub enum Scene {
 }
 
 pub struct Model {
+    link: ComponentLink<Self>,
     storage: StorageService,
     dialog: DialogService,
     database: Database,
@@ -62,13 +63,14 @@ impl Component for Model {
     type Message = Msg;
     type Properties = ();
 
-    fn create(_: Self::Properties, _: ComponentLink<Self>) -> Self {
+    fn create(_: Self::Properties, link: ComponentLink<Self>) -> Self {
         let storage = StorageService::new(Area::Local);
         let Json(database) = storage.restore(KEY);
         let database = database.unwrap_or_else(|_| Database {
             clients: Vec::new(),
         });
         Model {
+            link,
             storage,
             dialog: DialogService::new(),
             database,
@@ -143,44 +145,42 @@ impl Component for Model {
         }
         true
     }
-}
 
-impl Renderable<Model> for Model {
-    fn view(&self) -> Html<Self> {
+    fn view(&self) -> Html {
         match self.scene {
             Scene::ClientsList => html! {
                 <div class="crm">
                     <div class="clients">
-                        { for self.database.clients.iter().map(Renderable::view) }
+                        { for self.database.clients.iter().map(Renderable::render) }
                     </div>
-                    <button onclick=|_| Msg::SwitchTo(Scene::NewClientForm(Client::empty()))>{ "Add New" }</button>
-                    <button onclick=|_| Msg::SwitchTo(Scene::Settings)>{ "Settings" }</button>
+                    <button onclick=self.link.callback(|_| Msg::SwitchTo(Scene::NewClientForm(Client::empty())))>{ "Add New" }</button>
+                    <button onclick=self.link.callback(|_| Msg::SwitchTo(Scene::Settings))>{ "Settings" }</button>
                 </div>
             },
             Scene::NewClientForm(ref client) => html! {
                 <div class="crm">
                     <div class="names">
-                        { client.view_first_name_input() }
-                        { client.view_last_name_input() }
-                        { client.view_description_textarea() }
+                        { client.view_first_name_input(&self.link) }
+                        { client.view_last_name_input(&self.link) }
+                        { client.view_description_textarea(&self.link) }
                     </div>
                     <button disabled=client.first_name.is_empty() || client.last_name.is_empty()
-                            onclick=|_| Msg::AddNew>{ "Add New" }</button>
-                    <button onclick=|_| Msg::SwitchTo(Scene::ClientsList)>{ "Go Back" }</button>
+                            onclick=self.link.callback(|_| Msg::AddNew)>{ "Add New" }</button>
+                    <button onclick=self.link.callback(|_| Msg::SwitchTo(Scene::ClientsList))>{ "Go Back" }</button>
                 </div>
             },
             Scene::Settings => html! {
                 <div>
-                    <button onclick=|_| Msg::Clear>{ "Clear Database" }</button>
-                    <button onclick=|_| Msg::SwitchTo(Scene::ClientsList)>{ "Go Back" }</button>
+                    <button onclick=self.link.callback(|_| Msg::Clear)>{ "Clear Database" }</button>
+                    <button onclick=self.link.callback(|_| Msg::SwitchTo(Scene::ClientsList))>{ "Go Back" }</button>
                 </div>
             },
         }
     }
 }
 
-impl Renderable<Model> for Client {
-    fn view(&self) -> Html<Model> {
+impl Renderable for Client {
+    fn render(&self) -> Html {
         html! {
             <div class="client">
                 <p>{ format!("First Name: {}", self.first_name) }</p>
@@ -193,29 +193,29 @@ impl Renderable<Model> for Client {
 }
 
 impl Client {
-    fn view_first_name_input(&self) -> Html<Model> {
+    fn view_first_name_input(&self, link: &ComponentLink<Model>) -> Html {
         html! {
             <input class="new-client firstname"
                    placeholder="First name"
                    value=&self.first_name
-                   oninput=|e| Msg::UpdateFirstName(e.value) />
+                   oninput=link.callback(|e: InputData| Msg::UpdateFirstName(e.value)) />
         }
     }
 
-    fn view_last_name_input(&self) -> Html<Model> {
+    fn view_last_name_input(&self, link: &ComponentLink<Model>) -> Html {
         html! {
             <input class="new-client lastname"
                    placeholder="Last name"
                    value=&self.last_name
-                   oninput=|e| Msg::UpdateLastName(e.value) />
+                   oninput=link.callback(|e: InputData| Msg::UpdateLastName(e.value)) />
         }
     }
-    fn view_description_textarea(&self) -> Html<Model> {
+    fn view_description_textarea(&self, link: &ComponentLink<Model>) -> Html {
         html! {
             <textarea class=("new-client", "description")
                placeholder="Description"
                value=&self.description
-               oninput=|e| Msg::UpdateDescription(e.value) />
+               oninput=link.callback(|e: InputData| Msg::UpdateDescription(e.value)) />
         }
     }
 }
diff --git a/examples/crm/src/markdown.rs b/examples/crm/src/markdown.rs
index eff84717922..9509303cb07 100644
--- a/examples/crm/src/markdown.rs
+++ b/examples/crm/src/markdown.rs
@@ -2,14 +2,11 @@
 /// Source: https://github.com/acmumn/mentoring/blob/master/web-client/src/view/markdown.rs
 use pulldown_cmark::{Alignment, Event, Parser, Tag, OPTION_ENABLE_TABLES};
 use yew::virtual_dom::{VNode, VTag, VText};
-use yew::{html, Component, Html};
+use yew::{html, Html};
 
 /// Renders a string of Markdown to HTML with the default options (footnotes
 /// disabled, tables enabled).
-pub fn render_markdown<COMP>(src: &str) -> Html<COMP>
-where
-    COMP: Component,
-{
+pub fn render_markdown(src: &str) -> Html {
     let mut elems = vec![];
     let mut spine = vec![];
 
@@ -36,9 +33,9 @@ where
                     pre.add_child(top.into());
                     top = pre;
                 } else if let Tag::Table(aligns) = tag {
-                    for r in top.childs.iter_mut() {
+                    for r in top.children.iter_mut() {
                         if let &mut VNode::VTag(ref mut vtag) = r {
-                            for (i, c) in vtag.childs.iter_mut().enumerate() {
+                            for (i, c) in vtag.children.iter_mut().enumerate() {
                                 if let &mut VNode::VTag(ref mut vtag) = c {
                                     match aligns[i] {
                                         Alignment::None => {}
@@ -51,7 +48,7 @@ where
                         }
                     }
                 } else if let Tag::TableHead = tag {
-                    for c in top.childs.iter_mut() {
+                    for c in top.children.iter_mut() {
                         if let &mut VNode::VTag(ref mut vtag) = c {
                             // TODO
                             //                            vtag.tag = "th".into();
@@ -73,7 +70,7 @@ where
     }
 
     if elems.len() == 1 {
-        VNode::VTag(elems.pop().unwrap())
+        VNode::VTag(Box::new(elems.pop().unwrap()))
     } else {
         html! {
             <div>{ for elems.into_iter() }</div>
@@ -81,10 +78,7 @@ where
     }
 }
 
-fn make_tag<COMP>(t: Tag) -> VTag<COMP>
-where
-    COMP: Component,
-{
+fn make_tag(t: Tag) -> VTag {
     match t {
         Tag::Paragraph => VTag::new("p"),
         Tag::Rule => VTag::new("hr"),
@@ -126,7 +120,7 @@ where
             el.add_class("table");
             el
         }
-        Tag::TableHead => VTag::new("tr"),
+        Tag::TableHead => VTag::new("th"),
         Tag::TableRow => VTag::new("tr"),
         Tag::TableCell => VTag::new("td"),
         Tag::Emphasis => {
diff --git a/examples/custom_components/src/barrier.rs b/examples/custom_components/src/barrier.rs
index dcc606427ad..bd85c923c1f 100644
--- a/examples/custom_components/src/barrier.rs
+++ b/examples/custom_components/src/barrier.rs
@@ -2,6 +2,7 @@ use crate::button::Button;
 use yew::prelude::*;
 
 pub struct Barrier {
+    link: ComponentLink<Self>,
     limit: u32,
     counter: u32,
     onsignal: Callback<()>,
@@ -11,7 +12,7 @@ pub enum Msg {
     ChildClicked,
 }
 
-#[derive(PartialEq, Properties)]
+#[derive(Clone, PartialEq, Properties)]
 pub struct Props {
     pub limit: u32,
     #[props(required)]
@@ -22,8 +23,9 @@ impl Component for Barrier {
     type Message = Msg;
     type Properties = Props;
 
-    fn create(props: Self::Properties, _: ComponentLink<Self>) -> Self {
+    fn create(props: Self::Properties, link: ComponentLink<Self>) -> Self {
         Barrier {
+            link,
             limit: props.limit,
             counter: 0,
             onsignal: props.onsignal,
@@ -48,18 +50,17 @@ impl Component for Barrier {
         self.onsignal = props.onsignal;
         true
     }
-}
 
-impl Renderable<Barrier> for Barrier {
-    fn view(&self) -> Html<Self> {
+    fn view(&self) -> Html {
+        let onsignal = &self.link.callback(|_| Msg::ChildClicked);
         html! {
             <div class="barrier">
                 <p>{ format!("{} on {} clicked", self.counter, self.limit) }</p>
-                <Button onsignal=|_| Msg::ChildClicked />
-                <Button onsignal=|_| Msg::ChildClicked />
-                <Button onsignal=|_| Msg::ChildClicked title="Middle" />
-                <Button onsignal=|_| Msg::ChildClicked />
-                <Button onsignal=|_| Msg::ChildClicked />
+                <Button onsignal=onsignal />
+                <Button onsignal=onsignal />
+                <Button onsignal=onsignal title="Middle" />
+                <Button onsignal=onsignal />
+                <Button onsignal=onsignal />
             </div>
         }
     }
diff --git a/examples/custom_components/src/button.rs b/examples/custom_components/src/button.rs
index 4d5ab7de4db..39047d04876 100644
--- a/examples/custom_components/src/button.rs
+++ b/examples/custom_components/src/button.rs
@@ -1,6 +1,7 @@
 use yew::prelude::*;
 
 pub struct Button {
+    link: ComponentLink<Self>,
     title: String,
     onsignal: Callback<()>,
 }
@@ -9,7 +10,7 @@ pub enum Msg {
     Clicked,
 }
 
-#[derive(PartialEq, Properties)]
+#[derive(Clone, PartialEq, Properties)]
 pub struct Props {
     pub title: String,
     #[props(required)]
@@ -20,8 +21,9 @@ impl Component for Button {
     type Message = Msg;
     type Properties = Props;
 
-    fn create(props: Self::Properties, _: ComponentLink<Self>) -> Self {
+    fn create(props: Self::Properties, link: ComponentLink<Self>) -> Self {
         Button {
+            link,
             title: props.title,
             onsignal: props.onsignal,
         }
@@ -41,12 +43,12 @@ impl Component for Button {
         self.onsignal = props.onsignal;
         true
     }
-}
 
-impl Renderable<Button> for Button {
-    fn view(&self) -> Html<Self> {
+    fn view(&self) -> Html {
         html! {
-            <button onclick=|_| Msg::Clicked>{ &self.title }</button>
+            <button onclick=self.link.callback(|_| Msg::Clicked)>
+                { &self.title }
+            </button>
         }
     }
 }
diff --git a/examples/custom_components/src/counter.rs b/examples/custom_components/src/counter.rs
index ae621edc19e..610e56abf80 100644
--- a/examples/custom_components/src/counter.rs
+++ b/examples/custom_components/src/counter.rs
@@ -14,6 +14,7 @@ impl Default for Color {
 }
 
 pub struct Counter {
+    link: ComponentLink<Self>,
     value: u32,
     color: Color,
     onclick: Callback<u32>,
@@ -23,7 +24,7 @@ pub enum Msg {
     Increase,
 }
 
-#[derive(PartialEq, Properties)]
+#[derive(Clone, PartialEq, Properties)]
 pub struct Props {
     pub initial: u32,
     pub color: Color,
@@ -35,8 +36,9 @@ impl Component for Counter {
     type Message = Msg;
     type Properties = Props;
 
-    fn create(props: Self::Properties, _: ComponentLink<Self>) -> Self {
+    fn create(props: Self::Properties, link: ComponentLink<Self>) -> Self {
         Counter {
+            link,
             value: props.initial,
             color: props.color,
             onclick: props.onclick,
@@ -58,10 +60,8 @@ impl Component for Counter {
         self.onclick = props.onclick;
         true
     }
-}
 
-impl Renderable<Counter> for Counter {
-    fn view(&self) -> Html<Self> {
+    fn view(&self) -> Html {
         let colorize = {
             match self.color {
                 Color::Red => "background: red;",
@@ -72,7 +72,9 @@ impl Renderable<Counter> for Counter {
         html! {
             <div class="counter">
                 <p>{ self.value }</p>
-                <button style=colorize onclick=|_| Msg::Increase>{ "Increase internal counter" }</button>
+                <button style=colorize onclick=self.link.callback(|_| Msg::Increase)>
+                    { "Increase internal counter" }
+                </button>
             </div>
         }
     }
diff --git a/examples/custom_components/src/lib.rs b/examples/custom_components/src/lib.rs
index 7557d23a466..13525102910 100644
--- a/examples/custom_components/src/lib.rs
+++ b/examples/custom_components/src/lib.rs
@@ -9,6 +9,7 @@ use counter::{Color, Counter};
 use yew::prelude::*;
 
 pub struct Model {
+    link: ComponentLink<Self>,
     with_barrier: bool,
     color: Color,
 }
@@ -23,8 +24,9 @@ impl Component for Model {
     type Message = Msg;
     type Properties = ();
 
-    fn create(_: Self::Properties, _: ComponentLink<Self>) -> Self {
+    fn create(_: Self::Properties, link: ComponentLink<Self>) -> Self {
         Model {
+            link,
             with_barrier: false,
             color: Color::Red,
         }
@@ -43,18 +45,17 @@ impl Component for Model {
             Msg::ChildClicked(_value) => false,
         }
     }
-}
 
-impl Renderable<Model> for Model {
-    fn view(&self) -> Html<Self> {
+    fn view(&self) -> Html {
         let counter = |x| {
             html! {
-                <Counter initial=x color=&self.color onclick=Msg::ChildClicked />
+                <Counter initial=x color=&self.color
+                    onclick=self.link.callback(Msg::ChildClicked) />
             }
         };
         html! {
             <div class="custom-components-example">
-                <button onclick=|_| Msg::Toggle>{ "Toggle" }</button>
+                <button onclick=self.link.callback(|_| Msg::Toggle)>{ "Toggle" }</button>
                 { self.view_barrier() }
                 { for (1..1001).map(counter) }
             </div>
@@ -63,10 +64,10 @@ impl Renderable<Model> for Model {
 }
 
 impl Model {
-    fn view_barrier(&self) -> Html<Self> {
+    fn view_barrier(&self) -> Html {
         if self.with_barrier {
             html! {
-                <Barrier limit=10 onsignal=|_| Msg::Repaint />
+                <Barrier limit=10 onsignal=self.link.callback(|_| Msg::Repaint) />
             }
         } else {
             html! {
diff --git a/examples/dashboard/Cargo.toml b/examples/dashboard/Cargo.toml
index 8efe5b56501..f4e0ddb55fd 100644
--- a/examples/dashboard/Cargo.toml
+++ b/examples/dashboard/Cargo.toml
@@ -5,7 +5,7 @@ authors = ["Denis Kolodin <deniskolodin@gmail.com>"]
 edition = "2018"
 
 [dependencies]
-failure = "0.1"
+anyhow = "1"
 serde = "1"
 serde_derive = "1"
 yew = { path = "../..", features = ["toml"] }
diff --git a/examples/dashboard/src/lib.rs b/examples/dashboard/src/lib.rs
index 1b2ca53059f..971903e4eb6 100644
--- a/examples/dashboard/src/lib.rs
+++ b/examples/dashboard/src/lib.rs
@@ -1,12 +1,12 @@
 #![recursion_limit = "256"]
 
-use failure::Error;
+use anyhow::Error;
 use serde_derive::{Deserialize, Serialize};
 use yew::format::{Json, Nothing, Toml};
 use yew::services::fetch::{FetchService, FetchTask, Request, Response};
 use yew::services::websocket::{WebSocketService, WebSocketStatus, WebSocketTask};
 use yew::services::Task;
-use yew::{html, Component, ComponentLink, Html, Renderable, ShouldRender};
+use yew::{html, Component, ComponentLink, Html, ShouldRender};
 
 type AsBinary = bool;
 
@@ -15,16 +15,6 @@ pub enum Format {
     Toml,
 }
 
-pub struct Model {
-    fetch_service: FetchService,
-    ws_service: WebSocketService,
-    link: ComponentLink<Model>,
-    fetching: bool,
-    data: Option<u32>,
-    ft: Option<FetchTask>,
-    ws: Option<WebSocketTask>,
-}
-
 pub enum WsAction {
     Connect,
     SendData(AsBinary),
@@ -65,6 +55,70 @@ pub struct WsResponse {
     value: u32,
 }
 
+pub struct Model {
+    fetch_service: FetchService,
+    ws_service: WebSocketService,
+    link: ComponentLink<Model>,
+    fetching: bool,
+    data: Option<u32>,
+    ft: Option<FetchTask>,
+    ws: Option<WebSocketTask>,
+}
+
+impl Model {
+    fn view_data(&self) -> Html {
+        if let Some(value) = self.data {
+            html! {
+                <p>{ value }</p>
+            }
+        } else {
+            html! {
+                <p>{ "Data hasn't fetched yet." }</p>
+            }
+        }
+    }
+
+    fn fetch_json(&mut self, binary: AsBinary) -> yew::services::fetch::FetchTask {
+        let callback = self.link.callback(
+            move |response: Response<Json<Result<DataFromFile, Error>>>| {
+                let (meta, Json(data)) = response.into_parts();
+                println!("META: {:?}, {:?}", meta, data);
+                if meta.status.is_success() {
+                    Msg::FetchReady(data)
+                } else {
+                    Msg::Ignore // FIXME: Handle this error accordingly.
+                }
+            },
+        );
+        let request = Request::get("/data.json").body(Nothing).unwrap();
+        if binary {
+            self.fetch_service.fetch_binary(request, callback)
+        } else {
+            self.fetch_service.fetch(request, callback)
+        }
+    }
+
+    pub fn fetch_toml(&mut self, binary: AsBinary) -> yew::services::fetch::FetchTask {
+        let callback = self.link.callback(
+            move |response: Response<Toml<Result<DataFromFile, Error>>>| {
+                let (meta, Toml(data)) = response.into_parts();
+                println!("META: {:?}, {:?}", meta, data);
+                if meta.status.is_success() {
+                    Msg::FetchReady(data)
+                } else {
+                    Msg::Ignore // FIXME: Handle this error accordingly.
+                }
+            },
+        );
+        let request = Request::get("/data.toml").body(Nothing).unwrap();
+        if binary {
+            self.fetch_service.fetch_binary(request, callback)
+        } else {
+            self.fetch_service.fetch(request, callback)
+        }
+    }
+}
+
 impl Component for Model {
     type Message = Msg;
     type Properties = ();
@@ -86,57 +140,22 @@ impl Component for Model {
             Msg::FetchData(format, binary) => {
                 self.fetching = true;
                 let task = match format {
-                    Format::Json => {
-                        let callback = self.link.send_back(
-                            move |response: Response<Json<Result<DataFromFile, Error>>>| {
-                                let (meta, Json(data)) = response.into_parts();
-                                println!("META: {:?}, {:?}", meta, data);
-                                if meta.status.is_success() {
-                                    Msg::FetchReady(data)
-                                } else {
-                                    Msg::Ignore // FIXME: Handle this error accordingly.
-                                }
-                            },
-                        );
-                        let request = Request::get("/data.json").body(Nothing).unwrap();
-                        if binary {
-                            self.fetch_service.fetch_binary(request, callback)
-                        } else {
-                            self.fetch_service.fetch(request, callback)
-                        }
-                    }
-                    Format::Toml => {
-                        let callback = self.link.send_back(
-                            move |response: Response<Toml<Result<DataFromFile, Error>>>| {
-                                let (meta, Toml(data)) = response.into_parts();
-                                println!("META: {:?}, {:?}", meta, data);
-                                if meta.status.is_success() {
-                                    Msg::FetchReady(data)
-                                } else {
-                                    Msg::Ignore // FIXME: Handle this error accordingly.
-                                }
-                            },
-                        );
-                        let request = Request::get("/data.toml").body(Nothing).unwrap();
-                        if binary {
-                            self.fetch_service.fetch_binary(request, callback)
-                        } else {
-                            self.fetch_service.fetch(request, callback)
-                        }
-                    }
+                    Format::Json => self.fetch_json(binary),
+                    Format::Toml => self.fetch_toml(binary),
                 };
                 self.ft = Some(task);
             }
             Msg::WsAction(action) => match action {
                 WsAction::Connect => {
-                    let callback = self.link.send_back(|Json(data)| Msg::WsReady(data));
-                    let notification = self.link.send_back(|status| match status {
+                    let callback = self.link.callback(|Json(data)| Msg::WsReady(data));
+                    let notification = self.link.callback(|status| match status {
                         WebSocketStatus::Opened => Msg::Ignore,
                         WebSocketStatus::Closed | WebSocketStatus::Error => WsAction::Lost.into(),
                     });
-                    let task =
-                        self.ws_service
-                            .connect("ws://localhost:9001/", callback, notification);
+                    let task = self
+                        .ws_service
+                        .connect("ws://localhost:9001/", callback, notification)
+                        .unwrap();
                     self.ws = Some(task);
                 }
                 WsAction::SendData(binary) => {
@@ -167,41 +186,39 @@ impl Component for Model {
         }
         true
     }
-}
 
-impl Renderable<Model> for Model {
-    fn view(&self) -> Html<Self> {
+    fn view(&self) -> Html {
         html! {
             <div>
                 <nav class="menu">
-                    <button onclick=|_| Msg::FetchData(Format::Json, false)>{ "Fetch Data" }</button>
-                    <button onclick=|_| Msg::FetchData(Format::Json, true)>{ "Fetch Data [binary]" }</button>
-                    <button onclick=|_| Msg::FetchData(Format::Toml, false)>{ "Fetch Data [toml]" }</button>
+                    <button onclick=self.link.callback(|_| Msg::FetchData(Format::Json, false))>
+                        { "Fetch Data" }
+                    </button>
+                    <button onclick=self.link.callback(|_| Msg::FetchData(Format::Json, true))>
+                        { "Fetch Data [binary]" }
+                    </button>
+                    <button onclick=self.link.callback(|_| Msg::FetchData(Format::Toml, false))>
+                        { "Fetch Data [toml]" }
+                    </button>
                     { self.view_data() }
                     <button disabled=self.ws.is_some()
-                            onclick=|_| WsAction::Connect.into()>{ "Connect To WebSocket" }</button>
+                            onclick=self.link.callback(|_| WsAction::Connect.into())>
+                        { "Connect To WebSocket" }
+                    </button>
                     <button disabled=self.ws.is_none()
-                            onclick=|_| WsAction::SendData(false).into()>{ "Send To WebSocket" }</button>
+                            onclick=self.link.callback(|_| WsAction::SendData(false).into())>
+                        { "Send To WebSocket" }
+                    </button>
                     <button disabled=self.ws.is_none()
-                            onclick=|_| WsAction::SendData(true).into()>{ "Send To WebSocket [binary]" }</button>
+                            onclick=self.link.callback(|_| WsAction::SendData(true).into())>
+                        { "Send To WebSocket [binary]" }
+                    </button>
                     <button disabled=self.ws.is_none()
-                            onclick=|_| WsAction::Disconnect.into()>{ "Close WebSocket connection" }</button>
+                            onclick=self.link.callback(|_| WsAction::Disconnect.into())>
+                        { "Close WebSocket connection" }
+                    </button>
                 </nav>
             </div>
         }
     }
 }
-
-impl Model {
-    fn view_data(&self) -> Html<Model> {
-        if let Some(value) = self.data {
-            html! {
-                <p>{ value }</p>
-            }
-        } else {
-            html! {
-                <p>{ "Data hasn't fetched yet." }</p>
-            }
-        }
-    }
-}
diff --git a/examples/file_upload/src/lib.rs b/examples/file_upload/src/lib.rs
index 4d4ea002e55..9f909331434 100644
--- a/examples/file_upload/src/lib.rs
+++ b/examples/file_upload/src/lib.rs
@@ -1,7 +1,7 @@
 #![recursion_limit = "256"]
 
 use yew::services::reader::{File, FileChunk, FileData, ReaderService, ReaderTask};
-use yew::{html, ChangeData, Component, ComponentLink, Html, Renderable, ShouldRender};
+use yew::{html, ChangeData, Component, ComponentLink, Html, ShouldRender};
 
 pub struct Model {
     link: ComponentLink<Model>,
@@ -48,10 +48,10 @@ impl Component for Model {
                 for file in files.into_iter() {
                     let task = {
                         if chunks {
-                            let callback = self.link.send_back(Msg::Chunk);
+                            let callback = self.link.callback(Msg::Chunk);
                             self.reader.read_file_by_chunks(file, callback, 10)
                         } else {
-                            let callback = self.link.send_back(Msg::Loaded);
+                            let callback = self.link.callback(Msg::Loaded);
                             self.reader.read_file(file, callback)
                         }
                     };
@@ -64,25 +64,23 @@ impl Component for Model {
         }
         true
     }
-}
 
-impl Renderable<Model> for Model {
-    fn view(&self) -> Html<Self> {
+    fn view(&self) -> Html {
         let flag = self.by_chunks;
         html! {
             <div>
                 <div>
-                    <input type="file" multiple=true onchange=|value| {
+                    <input type="file" multiple=true onchange=self.link.callback(move |value| {
                             let mut result = Vec::new();
                             if let ChangeData::Files(files) = value {
                                 result.extend(files);
                             }
                             Msg::Files(result, flag)
-                        }/>
+                        })/>
                 </div>
                 <div>
                     <label>{ "By chunks" }</label>
-                    <input type="checkbox" checked=flag onclick=|_| Msg::ToggleByChunks />
+                    <input type="checkbox" checked=flag onclick=self.link.callback(|_| Msg::ToggleByChunks) />
                 </div>
                 <ul>
                     { for self.files.iter().map(|f| self.view_file(f)) }
@@ -93,7 +91,7 @@ impl Renderable<Model> for Model {
 }
 
 impl Model {
-    fn view_file(&self, data: &str) -> Html<Self> {
+    fn view_file(&self, data: &str) -> Html {
         html! {
             <li>{ data }</li>
         }
diff --git a/examples/fragments/src/lib.rs b/examples/fragments/src/lib.rs
index c22f59d541b..4475fdea540 100644
--- a/examples/fragments/src/lib.rs
+++ b/examples/fragments/src/lib.rs
@@ -1,8 +1,9 @@
 #![recursion_limit = "128"]
 
-use yew::{html, Component, ComponentLink, Html, Renderable, ShouldRender};
+use yew::{html, Component, ComponentLink, Html, ShouldRender};
 
 pub struct Model {
+    link: ComponentLink<Self>,
     counter: usize,
 }
 
@@ -15,8 +16,8 @@ impl Component for Model {
     type Message = Msg;
     type Properties = ();
 
-    fn create(_: Self::Properties, _: ComponentLink<Self>) -> Self {
-        Model { counter: 0 }
+    fn create(_: Self::Properties, link: ComponentLink<Self>) -> Self {
+        Model { link, counter: 0 }
     }
 
     fn update(&mut self, msg: Self::Message) -> ShouldRender {
@@ -32,10 +33,8 @@ impl Component for Model {
         }
         true
     }
-}
 
-impl Renderable<Model> for Model {
-    fn view(&self) -> Html<Self> {
+    fn view(&self) -> Html {
         html! {
             <>
                 <nav class="menu">{ self.view_menu() }</nav>
@@ -55,7 +54,7 @@ impl Renderable<Model> for Model {
 }
 
 impl Model {
-    fn view_cols(&self) -> Html<Self> {
+    fn view_cols(&self) -> Html {
         let render = |idx| {
             html! {
                 <td>{ idx }</td>
@@ -66,11 +65,11 @@ impl Model {
         }
     }
 
-    fn view_menu(&self) -> Html<Self> {
+    fn view_menu(&self) -> Html {
         html! {
             <>
-                <button onclick=|_| Msg::More>{ "More" }</button>
-                <button onclick=|_| Msg::Less>{ "Less" }</button>
+                <button onclick=self.link.callback(|_| Msg::More)>{ "More" }</button>
+                <button onclick=self.link.callback(|_| Msg::Less)>{ "Less" }</button>
             </>
         }
     }
diff --git a/examples/futures/Cargo.toml b/examples/futures/Cargo.toml
new file mode 100644
index 00000000000..71279cf3483
--- /dev/null
+++ b/examples/futures/Cargo.toml
@@ -0,0 +1,29 @@
+[package]
+name = "futures"
+version = "0.1.0"
+authors = ["Henry Zimmerman <zimhen7@gmail.com>"]
+edition = "2018"
+description = "web_sys fetching and futures demonstration"
+license = "MIT/Apache"
+repository = "https://github.com/yewstack/yew"
+
+[lib]
+crate-type = ["cdylib", "rlib"]
+
+[dependencies]
+yew = { path = "../.." }
+wasm-bindgen-futures = "0.4.3"
+
+[dependencies.web-sys]
+version = "0.3.30"
+features = [
+  'Headers',
+  'Request',
+  'RequestInit',
+  'RequestMode',
+  'Response',
+  'Window',
+]
+
+[target.'cfg(all(target_arch = "wasm32", not(cargo_web)))'.dependencies]
+wasm-bindgen = "0.2.58"
diff --git a/examples/futures/README.md b/examples/futures/README.md
new file mode 100644
index 00000000000..9ef8e682c1e
--- /dev/null
+++ b/examples/futures/README.md
@@ -0,0 +1,14 @@
+# Futures Example
+This example shows off how to make a asynchronous fetch request using web_sys and Yew's futures support.
+
+Because this example uses features not allowed by cargo web, it cannot be included in the showcase, and must be built with a different toolchain instead.
+
+### How to run:
+This example requires rustc v1.39.0 or above to compile due to its use of async/.await syntax.
+
+```sh
+wasm-pack build --target web && rollup ./main.js --format iife --file ./pkg/bundle.js && python -m SimpleHTTPServer 8080
+```
+This will compile the project, bundle up the compiler output and static assets, and start a http server on port 8080 so you can access the example at localhost:8080.
+
+It is expected that you have a setup with wasm-pack, rollup, and python installed.
diff --git a/examples/futures/index.html b/examples/futures/index.html
new file mode 100644
index 00000000000..61a5d46b81f
--- /dev/null
+++ b/examples/futures/index.html
@@ -0,0 +1,10 @@
+<!doctype html>
+<html lang="en">
+<head>
+    <meta charset="utf-8" />
+    <title>Yew • Futures</title>
+</head>
+<body>
+<script src="/pkg/bundle.js"></script>
+</body>
+</html>
\ No newline at end of file
diff --git a/examples/futures/main.js b/examples/futures/main.js
new file mode 100644
index 00000000000..cce343c6215
--- /dev/null
+++ b/examples/futures/main.js
@@ -0,0 +1,6 @@
+import init, { run_app } from './pkg/futures.js';
+async function main() {
+   await init('./pkg/futures_bg.wasm');
+   run_app();
+}
+main()
\ No newline at end of file
diff --git a/examples/futures/src/lib.rs b/examples/futures/src/lib.rs
new file mode 100644
index 00000000000..fc6ed10ed58
--- /dev/null
+++ b/examples/futures/src/lib.rs
@@ -0,0 +1,142 @@
+use crate::Msg::SetMarkdownFetchState;
+use std::fmt::{Error, Formatter};
+use std::future::Future;
+use wasm_bindgen::prelude::*;
+use wasm_bindgen::JsCast;
+use wasm_bindgen_futures::JsFuture;
+use web_sys::{Request, RequestInit, RequestMode, Response, Window};
+use yew::{html, Component, ComponentLink, Html, ShouldRender};
+
+#[cfg(all(target_arch = "wasm32", not(target_os = "wasi"), not(cargo_web)))]
+/// This method processes a Future that returns a message and sends it back to the component's
+/// loop.
+///
+/// # Panics
+/// If the future panics, then the promise will not resolve, and will leak.
+pub fn send_future<COMP: Component, F>(link: &ComponentLink<COMP>, future: F)
+where
+    F: Future<Output = COMP::Message> + 'static,
+{
+    use wasm_bindgen_futures::future_to_promise;
+
+    let mut link = link.clone();
+    let js_future = async move {
+        link.send_message(future.await);
+        Ok(JsValue::NULL)
+    };
+
+    future_to_promise(js_future);
+}
+
+/// Something wrong has occurred while fetching an external resource.
+#[derive(Debug, Clone, PartialEq)]
+pub struct FetchError {
+    err: JsValue,
+}
+impl std::fmt::Display for FetchError {
+    fn fmt(&self, f: &mut Formatter<'_>) -> Result<(), Error> {
+        std::fmt::Debug::fmt(&self.err, f)
+    }
+}
+impl std::error::Error for FetchError {}
+
+impl From<JsValue> for FetchError {
+    fn from(value: JsValue) -> Self {
+        FetchError { err: value }
+    }
+}
+
+/// The possible states a fetch request can be in.
+pub enum FetchState<T> {
+    NotFetching,
+    Fetching,
+    Success(T),
+    Failed(FetchError),
+}
+
+/// Fetches markdown from Yew's README.md.
+///
+/// Consult the following for an example of the fetch api by the team behind web_sys:
+/// https://rustwasm.github.io/wasm-bindgen/examples/fetch.html
+async fn fetch_markdown() -> Result<String, FetchError> {
+    let mut opts = RequestInit::new();
+    opts.method("GET");
+    opts.mode(RequestMode::Cors);
+
+    let request = Request::new_with_str_and_init(
+        "https://raw.githubusercontent.com/yewstack/yew/master/README.md",
+        &opts,
+    )?;
+
+    let window: Window = web_sys::window().unwrap();
+    let resp_value = JsFuture::from(window.fetch_with_request(&request)).await?;
+    assert!(resp_value.is_instance_of::<Response>());
+
+    let resp: Response = resp_value.dyn_into().unwrap();
+
+    let text = JsFuture::from(resp.text()?).await?;
+    Ok(text.as_string().unwrap())
+}
+
+struct Model {
+    markdown: FetchState<String>,
+    link: ComponentLink<Self>,
+}
+
+enum Msg {
+    SetMarkdownFetchState(FetchState<String>),
+    GetMarkdown,
+}
+
+impl Component for Model {
+    // Some details omitted. Explore the examples to see more.
+
+    type Message = Msg;
+    type Properties = ();
+
+    fn create(_: Self::Properties, link: ComponentLink<Self>) -> Self {
+        Model {
+            markdown: FetchState::NotFetching,
+            link,
+        }
+    }
+
+    fn update(&mut self, msg: Self::Message) -> ShouldRender {
+        match msg {
+            Msg::SetMarkdownFetchState(fetch_state) => {
+                self.markdown = fetch_state;
+                true
+            }
+            Msg::GetMarkdown => {
+                let future = async {
+                    match fetch_markdown().await {
+                        Ok(md) => Msg::SetMarkdownFetchState(FetchState::Success(md)),
+                        Err(err) => Msg::SetMarkdownFetchState(FetchState::Failed(err)),
+                    }
+                };
+                send_future(&self.link, future);
+                self.link
+                    .send_message(SetMarkdownFetchState(FetchState::Fetching));
+                false
+            }
+        }
+    }
+
+    fn view(&self) -> Html {
+        match &self.markdown {
+            FetchState::NotFetching => html! {
+                <button onclick=self.link.callback(|_| Msg::GetMarkdown)>
+                    {"Get Markdown"}
+                </button>
+            },
+            FetchState::Fetching => html! {"Fetching"},
+            FetchState::Success(data) => html! {&data},
+            FetchState::Failed(err) => html! {&err},
+        }
+    }
+}
+
+#[wasm_bindgen]
+pub fn run_app() {
+    yew::start_app::<Model>();
+}
diff --git a/examples/game_of_life/src/lib.rs b/examples/game_of_life/src/lib.rs
index 085962706d4..65fe3be809c 100644
--- a/examples/game_of_life/src/lib.rs
+++ b/examples/game_of_life/src/lib.rs
@@ -4,7 +4,7 @@ use log::info;
 use rand::Rng;
 use std::time::Duration;
 use yew::services::{IntervalService, Task};
-use yew::{html, Component, ComponentLink, Html, Renderable, ShouldRender};
+use yew::{html, Component, ComponentLink, Html, ShouldRender};
 
 #[derive(Clone, Copy, PartialEq)]
 enum LifeState {
@@ -18,12 +18,13 @@ struct Cellule {
 }
 
 pub struct Model {
+    link: ComponentLink<Self>,
     active: bool,
     cellules: Vec<Cellule>,
     cellules_width: usize,
     cellules_height: usize,
     #[allow(unused)]
-    job: Box<Task>,
+    job: Box<dyn Task>,
 }
 
 impl Cellule {
@@ -155,11 +156,12 @@ impl Component for Model {
     type Message = Msg;
     type Properties = ();
 
-    fn create(_: Self::Properties, mut link: ComponentLink<Self>) -> Self {
-        let callback = link.send_back(|_| Msg::Tick);
+    fn create(_: Self::Properties, link: ComponentLink<Self>) -> Self {
+        let callback = link.callback(|_| Msg::Tick);
         let mut interval = IntervalService::new();
         let handle = interval.spawn(Duration::from_millis(200), callback);
         Model {
+            link,
             active: false,
             cellules: vec![
                 Cellule {
@@ -205,10 +207,8 @@ impl Component for Model {
         }
         true
     }
-}
 
-impl Renderable<Model> for Model {
-    fn view(&self) -> Html<Self> {
+    fn view(&self) -> Html {
         html! {
             <div>
                 <section class="game-container">
@@ -218,14 +218,14 @@ impl Renderable<Model> for Model {
                     </header>
                     <section class="game-area">
                         <div class="game-of-life">
-                            { for self.cellules.iter().enumerate().map(view_cellule) }
+                            { for self.cellules.iter().enumerate().map(|c| self.view_cellule(c)) }
                         </div>
                         <div class="game-buttons">
-                            <button class="game-button" onclick=|_| Msg::Random>{ "Random" }</button>
-                            <button class="game-button" onclick=|_| Msg::Step>{ "Step" }</button>
-                            <button class="game-button" onclick=|_| Msg::Start>{ "Start" }</button>
-                            <button class="game-button" onclick=|_| Msg::Stop>{ "Stop" }</button>
-                            <button class="game-button" onclick=|_| Msg::Reset>{ "Reset" }</button>
+                            <button class="game-button" onclick=self.link.callback(|_| Msg::Random)>{ "Random" }</button>
+                            <button class="game-button" onclick=self.link.callback(|_| Msg::Step)>{ "Step" }</button>
+                            <button class="game-button" onclick=self.link.callback(|_| Msg::Start)>{ "Start" }</button>
+                            <button class="game-button" onclick=self.link.callback(|_| Msg::Stop)>{ "Stop" }</button>
+                            <button class="game-button" onclick=self.link.callback(|_| Msg::Reset)>{ "Reset" }</button>
                         </div>
                     </section>
                 </section>
@@ -233,23 +233,26 @@ impl Renderable<Model> for Model {
                     <strong class="footer-text">
                       { "Game of Life - a yew experiment " }
                     </strong>
-                    <a href="https://github.com/DenisKolodin/yew" target="_blank">{ "source" }</a>
+                    <a href="https://github.com/yewstack/yew" target="_blank">{ "source" }</a>
                 </footer>
             </div>
         }
     }
 }
 
-fn view_cellule((idx, cellule): (usize, &Cellule)) -> Html<Model> {
-    let cellule_status = {
-        if cellule.life_state == LifeState::Alive {
-            "cellule-live"
-        } else {
-            "cellule-dead"
+impl Model {
+    fn view_cellule(&self, (idx, cellule): (usize, &Cellule)) -> Html {
+        let cellule_status = {
+            if cellule.life_state == LifeState::Alive {
+                "cellule-live"
+            } else {
+                "cellule-dead"
+            }
+        };
+        html! {
+            <div class=("game-cellule", cellule_status)
+                onclick=self.link.callback(move |_| Msg::ToggleCellule(idx))>
+            </div>
         }
-    };
-    html! {
-        <div class=("game-cellule", cellule_status) onclick=|_| Msg::ToggleCellule(idx)>
-        </div>
     }
 }
diff --git a/examples/inner_html/Cargo.toml b/examples/inner_html/Cargo.toml
index ca381ecbfd5..37c92c05b64 100644
--- a/examples/inner_html/Cargo.toml
+++ b/examples/inner_html/Cargo.toml
@@ -5,5 +5,5 @@ authors = ["Garrett Berg <vitiral@gmail.com>"]
 edition = "2018"
 
 [dependencies]
-stdweb = "0.4.2"
+stdweb = "0.4.20"
 yew = { path = "../.." }
diff --git a/examples/inner_html/src/lib.rs b/examples/inner_html/src/lib.rs
index 78a2f1d7048..1427fc88fde 100644
--- a/examples/inner_html/src/lib.rs
+++ b/examples/inner_html/src/lib.rs
@@ -5,7 +5,15 @@ extern crate stdweb;
 use stdweb::unstable::TryFrom;
 use stdweb::web::Node;
 use yew::virtual_dom::VNode;
-use yew::{Component, ComponentLink, Html, Renderable, ShouldRender};
+use yew::{Component, ComponentLink, Html, ShouldRender};
+
+const SVG: &str = r#"
+<h2>Inline SVG or <i>any</i> HTML:</h2>
+<svg height="250" width="500">
+  <polygon points="220,10 300,210 170,250 123,234" style="fill:lime;stroke:purple;stroke-width:1" />
+    Sorry, your browser does not support inline SVG.
+</svg>
+"#;
 
 pub struct Model {
     pub value: i64,
@@ -24,18 +32,8 @@ impl Component for Model {
     fn update(&mut self, _: Self::Message) -> ShouldRender {
         true
     }
-}
-
-const SVG: &str = r#"
-<h2>Inline SVG or <i>any</i> HTML:</h2>
-<svg height="250" width="500">
-  <polygon points="220,10 300,210 170,250 123,234" style="fill:lime;stroke:purple;stroke-width:1" />
-    Sorry, your browser does not support inline SVG.
-</svg>
-"#;
 
-impl Renderable<Model> for Model {
-    fn view(&self) -> Html<Self> {
+    fn view(&self) -> Html {
         let js_svg = js! {
             var div = document.createElement("div");
             div.innerHTML = @{SVG.to_string()};
diff --git a/examples/js_callback/Cargo.toml b/examples/js_callback/Cargo.toml
index 1b4550e5ee1..242701f9958 100644
--- a/examples/js_callback/Cargo.toml
+++ b/examples/js_callback/Cargo.toml
@@ -6,7 +6,7 @@ edition = "2018"
 
 [dependencies]
 yew = { path = "../.." }
-stdweb = "^0.4.16"
+stdweb = "^0.4.20"
 
 [target.'cfg(all(target_arch = "wasm32", not(cargo_web)))'.dependencies]
-wasm-bindgen = "=0.2.42"
+wasm-bindgen = "0.2.58"
diff --git a/examples/js_callback/README.md b/examples/js_callback/README.md
index e722ab5a4de..027f020adec 100644
--- a/examples/js_callback/README.md
+++ b/examples/js_callback/README.md
@@ -4,5 +4,5 @@
 The purpose of this example is to demonstrate a simple case of asynchronously
 sending a message back into the component update loop.
 
-See https://github.com/DenisKolodin/yew/issues/316 for discussion on what
+See https://github.com/yewstack/yew/issues/316 for discussion on what
 motivated this example.
diff --git a/examples/js_callback/src/lib.rs b/examples/js_callback/src/lib.rs
index 8950f80d554..c30d31eb9d2 100644
--- a/examples/js_callback/src/lib.rs
+++ b/examples/js_callback/src/lib.rs
@@ -1,6 +1,7 @@
 #![recursion_limit = "128"]
 #![deny(warnings)]
 
+#[allow(unused_imports)]
 use stdweb::{_js_impl, js};
 use yew::prelude::*;
 
@@ -43,7 +44,7 @@ impl Component for Model {
                 }
             }
             AsyncPayload => {
-                get_payload_later(self.link.send_back(Msg::Payload));
+                get_payload_later(self.link.callback(Msg::Payload));
                 false
             }
         }
@@ -52,20 +53,18 @@ impl Component for Model {
     fn change(&mut self, _: Self::Properties) -> ShouldRender {
         false
     }
-}
 
-impl Renderable<Model> for Model {
-    fn view(&self) -> Html<Self> {
+    fn view(&self) -> Html {
         html! {
             <div>
-                <textarea oninput=|input| Msg::Payload(input.value)
+                <textarea oninput=self.link.callback(move |input: InputData| Msg::Payload(input.value))
                     style="font-family: 'Monaco' monospace;"
                     value={ &self.payload }>
                 </textarea>
-                <button onclick=|_| Msg::Payload(get_payload())>
+                <button onclick=self.link.callback(|_| Msg::Payload(get_payload()))>
                     { "Get the payload!" }
                 </button>
-                <button onclick=|_| Msg::AsyncPayload >
+                <button onclick=self.link.callback(|_| Msg::AsyncPayload) >
                     { "Get the payload later!" }
                 </button>
                 <p style="font-family: 'Monaco', monospace;">
diff --git a/examples/large_table/src/lib.rs b/examples/large_table/src/lib.rs
index 7c4766413a5..828c8acebae 100644
--- a/examples/large_table/src/lib.rs
+++ b/examples/large_table/src/lib.rs
@@ -1,9 +1,10 @@
 //! This demo originally created by https://github.com/qthree
 //! Source: https://github.com/qthree/yew_table100x100_test
 
-use yew::{html, Component, ComponentLink, Html, Renderable, ShouldRender};
+use yew::{html, Component, ComponentLink, Html, ShouldRender};
 
 pub struct Model {
+    link: ComponentLink<Self>,
     selected: Option<(u32, u32)>,
 }
 
@@ -15,8 +16,11 @@ impl Component for Model {
     type Message = Msg;
     type Properties = ();
 
-    fn create(_: (), _: ComponentLink<Self>) -> Self {
-        Model { selected: None }
+    fn create(_: (), link: ComponentLink<Self>) -> Self {
+        Model {
+            link,
+            selected: None,
+        }
     }
 
     // Some details omitted. Explore the examples to get more.
@@ -28,41 +32,39 @@ impl Component for Model {
         }
         true
     }
-}
 
-fn square_class(this: (u32, u32), selected: Option<(u32, u32)>) -> &'static str {
-    match selected {
-        Some(xy) if xy == this => "square_green",
-        _ => "square_red",
-    }
-}
-
-fn view_square(selected: Option<(u32, u32)>, row: u32, column: u32) -> Html<Model> {
-    html! {
-        <td class=square_class((column, row), selected)
-            onclick=|_| Msg::Select(column, row)>
-        </td>
+    fn view(&self) -> Html {
+        html! {
+            <table>
+                { (0..99).map(|row| self.view_row(row)).collect::<Html>() }
+            </table>
+        }
     }
 }
 
-fn view_row(selected: Option<(u32, u32)>, row: u32) -> Html<Model> {
-    html! {
-        <tr>
-            {for (0..99).map(|column| {
-                view_square(selected, row, column)
-            })}
-        </tr>
+impl Model {
+    fn view_square(&self, row: u32, column: u32) -> Html {
+        html! {
+            <td class=square_class((column, row), self.selected)
+                onclick=self.link.callback(move |_| Msg::Select(column, row))>
+            </td>
+        }
     }
-}
 
-impl Renderable<Model> for Model {
-    fn view(&self) -> Html<Self> {
+    fn view_row(&self, row: u32) -> Html {
         html! {
-            <table>
-                {for (0..99).map(|row| {
-                    view_row(self.selected, row)
+            <tr>
+                {for (0..99).map(|column| {
+                    self.view_square(row, column)
                 })}
-            </table>
+            </tr>
         }
     }
 }
+
+fn square_class(this: (u32, u32), selected: Option<(u32, u32)>) -> &'static str {
+    match selected {
+        Some(xy) if xy == this => "square_green",
+        _ => "square_red",
+    }
+}
diff --git a/examples/large_table/static/index.html b/examples/large_table/static/index.html
index 648c78a8c18..f8b3189590a 100644
--- a/examples/large_table/static/index.html
+++ b/examples/large_table/static/index.html
@@ -6,6 +6,6 @@
         <link rel="stylesheet" href="styles.css">
     </head>
     <body>
-        <script src="js/app.js"></script>
+        <script src="/large_table.js"></script>
     </body>
 </html>
diff --git a/examples/minimal/src/lib.rs b/examples/minimal/src/lib.rs
index 00420682847..535fa75cf52 100644
--- a/examples/minimal/src/lib.rs
+++ b/examples/minimal/src/lib.rs
@@ -1,6 +1,8 @@
-use yew::{html, Component, ComponentLink, Html, Renderable, ShouldRender};
+use yew::{html, Component, ComponentLink, Html, ShouldRender};
 
-pub struct Model {}
+pub struct Model {
+    link: ComponentLink<Self>,
+}
 
 pub enum Msg {
     Click,
@@ -10,8 +12,8 @@ impl Component for Model {
     type Message = Msg;
     type Properties = ();
 
-    fn create(_: Self::Properties, _: ComponentLink<Self>) -> Self {
-        Model {}
+    fn create(_: Self::Properties, link: ComponentLink<Self>) -> Self {
+        Model { link }
     }
 
     fn update(&mut self, msg: Self::Message) -> ShouldRender {
@@ -20,13 +22,11 @@ impl Component for Model {
         }
         true
     }
-}
 
-impl Renderable<Model> for Model {
-    fn view(&self) -> Html<Self> {
+    fn view(&self) -> Html {
         html! {
             <div>
-                <button onclick=|_| Msg::Click>{ "Click" }</button>
+                <button onclick=self.link.callback(|_| Msg::Click)>{ "Click" }</button>
             </div>
         }
     }
diff --git a/examples/mount_point/Cargo.toml b/examples/mount_point/Cargo.toml
index 7fdf92c19db..675b6281a5b 100644
--- a/examples/mount_point/Cargo.toml
+++ b/examples/mount_point/Cargo.toml
@@ -5,5 +5,5 @@ authors = ["Ben Berman <ben@standardbots.com>"]
 edition = "2018"
 
 [dependencies]
-stdweb = "0.4"
+stdweb = "0.4.20"
 yew = { path = "../.." }
diff --git a/examples/mount_point/src/lib.rs b/examples/mount_point/src/lib.rs
index c8a6d6e6a4f..29c728b1ba3 100644
--- a/examples/mount_point/src/lib.rs
+++ b/examples/mount_point/src/lib.rs
@@ -1,6 +1,7 @@
-use yew::{html, Component, ComponentLink, Html, Renderable, ShouldRender};
+use yew::{html, Component, ComponentLink, Html, InputData, ShouldRender};
 
 pub struct Model {
+    link: ComponentLink<Self>,
     name: String,
 }
 
@@ -12,8 +13,9 @@ impl Component for Model {
     type Message = Msg;
     type Properties = ();
 
-    fn create(_: Self::Properties, _: ComponentLink<Self>) -> Self {
+    fn create(_: Self::Properties, link: ComponentLink<Self>) -> Self {
         Model {
+            link,
             name: "Reversed".to_owned(),
         }
     }
@@ -26,13 +28,13 @@ impl Component for Model {
         }
         true
     }
-}
 
-impl Renderable<Model> for Model {
-    fn view(&self) -> Html<Self> {
+    fn view(&self) -> Html {
         html! {
             <div>
-                <input value=&self.name oninput=|e| Msg::UpdateName(e.value) />
+                <input
+                    value=&self.name
+                    oninput=self.link.callback(|e: InputData| Msg::UpdateName(e.value)) />
                 <p>{ self.name.chars().rev().collect::<String>() }</p>
             </div>
         }
diff --git a/examples/multi_thread/Cargo.toml b/examples/multi_thread/Cargo.toml
index 50c8ba4d187..1841175d9b6 100644
--- a/examples/multi_thread/Cargo.toml
+++ b/examples/multi_thread/Cargo.toml
@@ -4,6 +4,14 @@ version = "0.1.0"
 authors = ["Denis Kolodin <deniskolodin@gmail.com>"]
 edition = "2018"
 
+[[bin]]
+name = "main"
+path = "src/bin/main.rs"
+
+[[bin]]
+name = "native_worker"
+path = "src/bin/native_worker.rs"
+
 [dependencies]
 log = "0.4"
 web_logger = "0.1"
diff --git a/examples/multi_thread/README.md b/examples/multi_thread/README.md
index f64c7475e6b..32da696e6c6 100644
--- a/examples/multi_thread/README.md
+++ b/examples/multi_thread/README.md
@@ -3,5 +3,5 @@
 You should compile a worker which have to be spawned in a separate thread:
 
 ```sh
-cargo web build --bin native_worker --target wasm32-unknown-unknown
+cargo web build --bin native_worker --release
 ```
diff --git a/examples/multi_thread/Web.toml b/examples/multi_thread/Web.toml
new file mode 100644
index 00000000000..813e27393a9
--- /dev/null
+++ b/examples/multi_thread/Web.toml
@@ -0,0 +1 @@
+default-target = "wasm32-unknown-unknown"
diff --git a/examples/multi_thread/src/context.rs b/examples/multi_thread/src/context.rs
index 532333f6ad9..c93a9461cb8 100644
--- a/examples/multi_thread/src/context.rs
+++ b/examples/multi_thread/src/context.rs
@@ -12,15 +12,11 @@ pub enum Request {
     GetDataFromServer,
 }
 
-impl Transferable for Request {}
-
 #[derive(Serialize, Deserialize, Debug)]
 pub enum Response {
     DataFetched,
 }
 
-impl Transferable for Response {}
-
 pub enum Msg {
     Updating,
 }
@@ -28,7 +24,7 @@ pub enum Msg {
 pub struct Worker {
     link: AgentLink<Worker>,
     interval: IntervalService,
-    task: Box<Task>,
+    task: Box<dyn Task>,
     fetch: FetchService,
 }
 
@@ -41,7 +37,7 @@ impl Agent for Worker {
     fn create(link: AgentLink<Self>) -> Self {
         let mut interval = IntervalService::new();
         let duration = Duration::from_secs(3);
-        let callback = link.send_back(|_| Msg::Updating);
+        let callback = link.callback(|_| Msg::Updating);
         let task = interval.spawn(duration, callback);
         Worker {
             link,
@@ -59,11 +55,11 @@ impl Agent for Worker {
         }
     }
 
-    fn handle(&mut self, msg: Self::Input, who: HandlerId) {
+    fn handle_input(&mut self, msg: Self::Input, who: HandlerId) {
         info!("Request: {:?}", msg);
         match msg {
             Request::GetDataFromServer => {
-                self.link.response(who, Response::DataFetched);
+                self.link.respond(who, Response::DataFetched);
             }
         }
     }
diff --git a/examples/multi_thread/src/job.rs b/examples/multi_thread/src/job.rs
index 97abefba7e8..a9d21aa4144 100644
--- a/examples/multi_thread/src/job.rs
+++ b/examples/multi_thread/src/job.rs
@@ -12,15 +12,11 @@ pub enum Request {
     GetDataFromServer,
 }
 
-impl Transferable for Request {}
-
 #[derive(Serialize, Deserialize, Debug)]
 pub enum Response {
     DataFetched,
 }
 
-impl Transferable for Response {}
-
 pub enum Msg {
     Updating,
 }
@@ -28,7 +24,7 @@ pub enum Msg {
 pub struct Worker {
     link: AgentLink<Worker>,
     interval: IntervalService,
-    task: Box<Task>,
+    task: Box<dyn Task>,
     fetch: FetchService,
 }
 
@@ -41,7 +37,7 @@ impl Agent for Worker {
     fn create(link: AgentLink<Self>) -> Self {
         let mut interval = IntervalService::new();
         let duration = Duration::from_secs(3);
-        let callback = link.send_back(|_| Msg::Updating);
+        let callback = link.callback(|_| Msg::Updating);
         let task = interval.spawn(duration, callback);
         Worker {
             link,
@@ -59,11 +55,11 @@ impl Agent for Worker {
         }
     }
 
-    fn handle(&mut self, msg: Self::Input, who: HandlerId) {
+    fn handle_input(&mut self, msg: Self::Input, who: HandlerId) {
         info!("Request: {:?}", msg);
         match msg {
             Request::GetDataFromServer => {
-                self.link.response(who, Response::DataFetched);
+                self.link.respond(who, Response::DataFetched);
             }
         }
     }
diff --git a/examples/multi_thread/src/lib.rs b/examples/multi_thread/src/lib.rs
index 1652d9c9d8e..e86645d0332 100644
--- a/examples/multi_thread/src/lib.rs
+++ b/examples/multi_thread/src/lib.rs
@@ -6,13 +6,14 @@ pub mod native_worker;
 
 use log::info;
 use yew::worker::*;
-use yew::{html, Component, ComponentLink, Html, Renderable, ShouldRender};
+use yew::{html, Component, ComponentLink, Html, ShouldRender};
 
 pub struct Model {
-    worker: Box<Bridge<native_worker::Worker>>,
-    job: Box<Bridge<job::Worker>>,
-    context: Box<Bridge<context::Worker>>,
-    context_2: Box<Bridge<context::Worker>>,
+    link: ComponentLink<Self>,
+    worker: Box<dyn Bridge<native_worker::Worker>>,
+    job: Box<dyn Bridge<job::Worker>>,
+    context: Box<dyn Bridge<context::Worker>>,
+    context_2: Box<dyn Bridge<context::Worker>>,
 }
 
 pub enum Msg {
@@ -26,20 +27,21 @@ impl Component for Model {
     type Message = Msg;
     type Properties = ();
 
-    fn create(_: Self::Properties, mut link: ComponentLink<Self>) -> Self {
-        let callback = link.send_back(|_| Msg::DataReceived);
+    fn create(_: Self::Properties, link: ComponentLink<Self>) -> Self {
+        let callback = link.callback(|_| Msg::DataReceived);
         let worker = native_worker::Worker::bridge(callback);
 
-        let callback = link.send_back(|_| Msg::DataReceived);
+        let callback = link.callback(|_| Msg::DataReceived);
         let job = job::Worker::bridge(callback);
 
-        let callback = link.send_back(|_| Msg::DataReceived);
+        let callback = link.callback(|_| Msg::DataReceived);
         let context = context::Worker::bridge(callback);
 
-        let callback = link.send_back(|_| Msg::DataReceived);
+        let callback = link.callback(|_| Msg::DataReceived);
         let context_2 = context::Worker::bridge(callback);
 
         Model {
+            link,
             worker,
             job,
             context,
@@ -65,16 +67,14 @@ impl Component for Model {
         }
         true
     }
-}
 
-impl Renderable<Model> for Model {
-    fn view(&self) -> Html<Self> {
+    fn view(&self) -> Html {
         html! {
             <div>
                 <nav class="menu">
-                    <button onclick=|_| Msg::SendToWorker>{ "Send to Thread" }</button>
-                    <button onclick=|_| Msg::SendToJob>{ "Send to Job" }</button>
-                    <button onclick=|_| Msg::SendToContext>{ "Send to Context" }</button>
+                    <button onclick=self.link.callback(|_| Msg::SendToWorker)>{ "Send to Thread" }</button>
+                    <button onclick=self.link.callback(|_| Msg::SendToJob)>{ "Send to Job" }</button>
+                    <button onclick=self.link.callback(|_| Msg::SendToContext)>{ "Send to Context" }</button>
                 </nav>
             </div>
         }
diff --git a/examples/multi_thread/src/native_worker.rs b/examples/multi_thread/src/native_worker.rs
index c9e2f1b7661..723d54cec46 100644
--- a/examples/multi_thread/src/native_worker.rs
+++ b/examples/multi_thread/src/native_worker.rs
@@ -12,15 +12,11 @@ pub enum Request {
     GetDataFromServer,
 }
 
-impl Transferable for Request {}
-
 #[derive(Serialize, Deserialize, Debug)]
 pub enum Response {
     DataFetched,
 }
 
-impl Transferable for Response {}
-
 pub enum Msg {
     Updating,
 }
@@ -28,7 +24,7 @@ pub enum Msg {
 pub struct Worker {
     link: AgentLink<Worker>,
     interval: IntervalService,
-    task: Box<Task>,
+    task: Box<dyn Task>,
     fetch: FetchService,
 }
 
@@ -41,7 +37,7 @@ impl Agent for Worker {
     fn create(link: AgentLink<Self>) -> Self {
         let mut interval = IntervalService::new();
         let duration = Duration::from_secs(3);
-        let callback = link.send_back(|_| Msg::Updating);
+        let callback = link.callback(|_| Msg::Updating);
         let task = interval.spawn(duration, callback);
         Worker {
             link,
@@ -59,11 +55,11 @@ impl Agent for Worker {
         }
     }
 
-    fn handle(&mut self, msg: Self::Input, who: HandlerId) {
+    fn handle_input(&mut self, msg: Self::Input, who: HandlerId) {
         info!("Request: {:?}", msg);
         match msg {
             Request::GetDataFromServer => {
-                self.link.response(who, Response::DataFetched);
+                self.link.respond(who, Response::DataFetched);
             }
         }
     }
diff --git a/examples/multi_thread/static/bin b/examples/multi_thread/static/bin
index 3750e73937b..4a2105e009b 120000
--- a/examples/multi_thread/static/bin
+++ b/examples/multi_thread/static/bin
@@ -1 +1 @@
-../target/wasm32-unknown-unknown/release/
\ No newline at end of file
+../../../target/wasm32-unknown-unknown/release
\ No newline at end of file
diff --git a/examples/nested_list/Cargo.toml b/examples/nested_list/Cargo.toml
new file mode 100644
index 00000000000..744148fd54b
--- /dev/null
+++ b/examples/nested_list/Cargo.toml
@@ -0,0 +1,10 @@
+[package]
+name = "nested_list"
+version = "0.1.0"
+authors = ["Justin Starry <justin.starry@icloud.com>"]
+edition = "2018"
+
+[dependencies]
+log = "0.4"
+web_logger = "0.2"
+yew = { path = "../.." }
diff --git a/examples/nested_list/src/app.rs b/examples/nested_list/src/app.rs
new file mode 100644
index 00000000000..8e1d022a39c
--- /dev/null
+++ b/examples/nested_list/src/app.rs
@@ -0,0 +1,77 @@
+use super::header::ListHeader;
+use super::item::ListItem;
+use super::list::List;
+use super::{Hovered, WeakComponentLink};
+use yew::prelude::*;
+
+pub struct App {
+    link: ComponentLink<Self>,
+    hovered: Hovered,
+}
+
+pub enum Msg {
+    Hover(Hovered),
+}
+
+impl Component for App {
+    type Message = Msg;
+    type Properties = ();
+
+    fn create(_: Self::Properties, link: ComponentLink<Self>) -> Self {
+        App {
+            link,
+            hovered: Hovered::None,
+        }
+    }
+
+    fn update(&mut self, msg: Self::Message) -> ShouldRender {
+        match msg {
+            Msg::Hover(hovered) => self.hovered = hovered,
+        }
+        true
+    }
+
+    fn view(&self) -> Html {
+        let on_hover = &self.link.callback(Msg::Hover);
+        let onmouseenter = &self.link.callback(|_| Msg::Hover(Hovered::None));
+        let list_link = &WeakComponentLink::<List>::default();
+        let sub_list_link = &WeakComponentLink::<List>::default();
+        html! {
+            <div class="main" onmouseenter=onmouseenter>
+                <h1>{ "Nested List Demo" }</h1>
+                <List on_hover=on_hover weak_link=list_link>
+                    <ListHeader text="Calling all Rusties!" on_hover=on_hover list_link=list_link />
+                    <ListItem name="Rustin" on_hover=on_hover />
+                    <ListItem hide={true} name="Rustaroo" on_hover=on_hover />
+                    <ListItem name="Rustifer" on_hover=on_hover>
+                        <div class="sublist">{"Sublist!"}</div>
+                        {
+                            html! {
+                                <List on_hover=on_hover weak_link=sub_list_link>
+                                    <ListHeader text="Sub Rusties!" on_hover=on_hover list_link=sub_list_link/>
+                                    <ListItem name="Sub Rustin" on_hover=on_hover />
+                                    <ListItem hide={true} name="Sub Rustaroo" on_hover=on_hover />
+                                    <ListItem name="Sub Rustifer" on_hover=on_hover />
+                                </List>
+                            }
+                        }
+                    </ListItem>
+                </List>
+                {self.view_last_hovered()}
+            </div>
+        }
+    }
+}
+
+impl App {
+    fn view_last_hovered(&self) -> Html {
+        html! {
+            <div class="last-hovered">
+                { "Last hovered:"}
+                <span class="last-hovered-text">
+                    { &self.hovered }
+                </span>
+            </div>
+        }
+    }
+}
diff --git a/examples/nested_list/src/header.rs b/examples/nested_list/src/header.rs
new file mode 100644
index 00000000000..995d235f22c
--- /dev/null
+++ b/examples/nested_list/src/header.rs
@@ -0,0 +1,41 @@
+use super::list::{List, Msg as ListMsg};
+use super::{Hovered, WeakComponentLink};
+use yew::prelude::*;
+
+pub struct ListHeader {
+    props: Props,
+}
+
+#[derive(Clone, Properties)]
+pub struct Props {
+    #[props(required)]
+    pub on_hover: Callback<Hovered>,
+    #[props(required)]
+    pub text: String,
+    #[props(required)]
+    pub list_link: WeakComponentLink<List>,
+}
+
+impl Component for ListHeader {
+    type Message = ();
+    type Properties = Props;
+
+    fn create(props: Self::Properties, _: ComponentLink<Self>) -> Self {
+        ListHeader { props }
+    }
+
+    fn update(&mut self, _: Self::Message) -> ShouldRender {
+        false
+    }
+
+    fn view(&self) -> Html {
+        let list_link = self.props.list_link.borrow().clone().unwrap();
+        let onclick = list_link.callback(|_| ListMsg::HeaderClick);
+        let onmouseover = self.props.on_hover.reform(|_| Hovered::Header);
+        html! {
+            <div class="list-header" onmouseover=onmouseover onclick=onclick>
+                { &self.props.text }
+            </div>
+        }
+    }
+}
diff --git a/examples/nested_list/src/item.rs b/examples/nested_list/src/item.rs
new file mode 100644
index 00000000000..e8299474671
--- /dev/null
+++ b/examples/nested_list/src/item.rs
@@ -0,0 +1,58 @@
+use crate::Hovered;
+use yew::html::Children;
+use yew::prelude::*;
+
+pub struct ListItem {
+    props: Props,
+}
+
+#[derive(Clone, Properties)]
+pub struct Props {
+    pub hide: bool,
+    #[props(required)]
+    pub on_hover: Callback<Hovered>,
+    #[props(required)]
+    pub name: String,
+    pub children: Children,
+}
+
+impl Component for ListItem {
+    type Message = ();
+    type Properties = Props;
+
+    fn create(props: Self::Properties, _: ComponentLink<Self>) -> Self {
+        ListItem { props }
+    }
+
+    fn update(&mut self, _msg: Self::Message) -> ShouldRender {
+        false
+    }
+
+    fn view(&self) -> Html {
+        let name = self.props.name.clone();
+        let onmouseover = self
+            .props
+            .on_hover
+            .reform(move |_| Hovered::Item(name.clone()));
+        html! {
+            <div class="list-item" onmouseover=onmouseover>
+                { &self.props.name }
+                { self.view_details() }
+            </div>
+        }
+    }
+}
+
+impl ListItem {
+    fn view_details(&self) -> Html {
+        if self.props.children.is_empty() {
+            return html! {};
+        }
+
+        html! {
+            <div class="list-item-details">
+                { self.props.children.render() }
+            </div>
+        }
+    }
+}
diff --git a/examples/nested_list/src/lib.rs b/examples/nested_list/src/lib.rs
new file mode 100644
index 00000000000..71c48682393
--- /dev/null
+++ b/examples/nested_list/src/lib.rs
@@ -0,0 +1,36 @@
+#![recursion_limit = "512"]
+
+mod app;
+mod header;
+mod item;
+mod list;
+
+pub use app::App;
+use std::cell::RefCell;
+use std::fmt;
+use std::rc::Rc;
+use yew::html::ComponentLink;
+pub type WeakComponentLink<COMP> = Rc<RefCell<Option<ComponentLink<COMP>>>>;
+
+#[derive(Debug)]
+pub enum Hovered {
+    Header,
+    Item(String),
+    List,
+    None,
+}
+
+impl fmt::Display for Hovered {
+    fn fmt(&self, f: &mut fmt::Formatter<'_>) -> fmt::Result {
+        write!(
+            f,
+            "{}",
+            match self {
+                Hovered::Header => "Header",
+                Hovered::Item(name) => name,
+                Hovered::List => "List container",
+                Hovered::None => "Nothing",
+            }
+        )
+    }
+}
diff --git a/examples/nested_list/src/list.rs b/examples/nested_list/src/list.rs
new file mode 100644
index 00000000000..1b0faa3ef3a
--- /dev/null
+++ b/examples/nested_list/src/list.rs
@@ -0,0 +1,132 @@
+use super::{Hovered, WeakComponentLink};
+use crate::{header::ListHeader, header::Props as HeaderProps};
+use crate::{item::ListItem, item::Props as ItemProps};
+use yew::html::{ChildrenRenderer, NodeRef};
+use yew::prelude::*;
+use yew::virtual_dom::{VChild, VComp, VNode};
+
+#[derive(Clone)]
+pub enum Variants {
+    Item(<ListItem as Component>::Properties),
+    Header(<ListHeader as Component>::Properties),
+}
+
+impl From<ItemProps> for Variants {
+    fn from(props: ItemProps) -> Self {
+        Variants::Item(props)
+    }
+}
+
+impl From<HeaderProps> for Variants {
+    fn from(props: HeaderProps) -> Self {
+        Variants::Header(props)
+    }
+}
+
+#[derive(Clone)]
+pub struct ListVariant {
+    props: Variants,
+}
+
+#[derive(Clone, Properties)]
+pub struct Props {
+    #[props(required)]
+    pub children: ChildrenRenderer<ListVariant>,
+    #[props(required)]
+    pub on_hover: Callback<Hovered>,
+    #[props(required)]
+    pub weak_link: WeakComponentLink<List>,
+}
+
+pub struct List {
+    props: Props,
+    inactive: bool,
+}
+
+pub enum Msg {
+    HeaderClick,
+}
+
+impl Component for List {
+    type Message = Msg;
+    type Properties = Props;
+
+    fn create(props: Self::Properties, link: ComponentLink<Self>) -> Self {
+        *props.weak_link.borrow_mut() = Some(link);
+        List {
+            props,
+            inactive: false,
+        }
+    }
+
+    fn update(&mut self, msg: Self::Message) -> ShouldRender {
+        match msg {
+            Msg::HeaderClick => {
+                self.inactive = !self.inactive;
+                true
+            }
+        }
+    }
+
+    fn view(&self) -> Html {
+        let inactive = if self.inactive { "inactive" } else { "" };
+        let onmouseover = self.props.on_hover.reform(|_| Hovered::List);
+        let onmouseout = self.props.on_hover.reform(|_| Hovered::None);
+        html! {
+            <div class="list-container" onmouseout=onmouseout onmouseover=onmouseover>
+                <div class=vec!["list", inactive]>
+                    {self.view_header()}
+                    <div class="items">
+                        {self.view_items()}
+                    </div>
+                </div>
+            </div>
+        }
+    }
+}
+
+impl List {
+    fn view_header(&self) -> Html {
+        html! {{
+            for self.props.children.iter().filter(|c| match c.props {
+                Variants::Header(_) => true,
+                _ => false
+            })
+        }}
+    }
+
+    fn view_items(&self) -> Html {
+        html! {{
+            for self.props.children.iter().filter(|c| match &c.props {
+                Variants::Item(props) => !props.hide,
+                _ => false,
+            }).enumerate().map(|(i, mut c)| {
+                if let Variants::Item(ref mut props) = c.props {
+                    props.name = format!("#{} - {}", i + 1, props.name);
+                }
+                c
+            })
+        }}
+    }
+}
+
+impl<CHILD> From<VChild<CHILD>> for ListVariant
+where
+    CHILD: Component,
+    CHILD::Properties: Into<Variants>,
+{
+    fn from(vchild: VChild<CHILD>) -> Self {
+        ListVariant {
+            props: vchild.props.into(),
+        }
+    }
+}
+
+impl Into<VNode> for ListVariant {
+    fn into(self) -> VNode {
+        match self.props {
+            Variants::Header(props) => VComp::new::<ListHeader>(props, NodeRef::default()).into(),
+            Variants::Item(props) => VComp::new::<ListItem>(props, NodeRef::default()).into(),
+        }
+    }
+}
diff --git a/examples/nested_list/src/main.rs b/examples/nested_list/src/main.rs
new file mode 100644
index 00000000000..130defbc4cb
--- /dev/null
+++ b/examples/nested_list/src/main.rs
@@ -0,0 +1,4 @@
+fn main() {
+    web_logger::init();
+    yew::start_app::<nested_list::App>();
+}
diff --git a/examples/nested_list/static/index.html b/examples/nested_list/static/index.html
new file mode 100644
index 00000000000..0d34f497c81
--- /dev/null
+++ b/examples/nested_list/static/index.html
@@ -0,0 +1,11 @@
+<!doctype html>
+<html lang="en">
+    <head>
+        <meta charset="utf-8">
+        <title>Yew • Nested List</title>
+        <link rel="stylesheet" href="styles.css">
+    </head>
+    <body>
+        <script src="/nested_list.js"></script>
+    </body>
+</html>
diff --git a/examples/nested_list/static/styles.css b/examples/nested_list/static/styles.css
new file mode 100644
index 00000000000..79b3ca90544
--- /dev/null
+++ b/examples/nested_list/static/styles.css
@@ -0,0 +1,97 @@
+html, body {
+  width: 100%;
+  background: #FAFAFA;
+  font-family: monospace;
+}
+
+.main {
+  display: flex;
+  flex-direction: column;
+  margin-top: 40px;
+  width: 100%;
+  align-items: center;
+}
+
+.list-container {
+  margin-top: 20px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 30px;
+  border-radius: 4px;
+  background: #EEE;
+}
+
+.list-container:hover {
+  background: #EAEAEA;
+}
+
+.list {
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  border-radius: 3px;
+  border: 1px solid #666;
+  min-width: 30vw;
+}
+
+.list.inactive {
+  opacity: 0.5;
+}
+
+.list-header {
+  background: #FEECAA;
+  border-bottom: 1px solid #666;
+  padding: 10px;
+  cursor: pointer;
+}
+
+.list-header:hover {
+  background: #FEE3A0;
+}
+
+.list-item {
+  background: white;
+  border-bottom: 1px solid #666;
+  padding: 10px;
+}
+
+.list-item:hover {
+  background: #FAFAFA;
+}
+
+.list-item:last-child {
+  border-bottom: 0px;
+}
+
+.list-item-details {
+  background: #EEE;
+  border: 1px solid #666;
+  border-radius: 3px;
+  margin-top: 10px;
+  padding: 10px;
+  text-align: center;
+}
+
+.last-hovered {
+  margin-top: 20px;
+}
+
+.last-hovered-text {
+  color: #666;
+  margin-left: 5px;
+}
+
+.list-item-details .list-container {
+  margin-top: 0px;
+  padding: 15px;
+}
+
+.sublist {
+  display: inline-block;
+  background: #FFF;
+  border: 1px solid #666;
+  border-radius: 3px;
+  margin: 5px;
+  padding: 5px 20px;
+}
diff --git a/examples/node_refs/Cargo.toml b/examples/node_refs/Cargo.toml
new file mode 100644
index 00000000000..2cb0ce4acfd
--- /dev/null
+++ b/examples/node_refs/Cargo.toml
@@ -0,0 +1,9 @@
+[package]
+name = "node_refs"
+version = "0.1.0"
+authors = ["Justin Starry <justin.starry@icloud.com>"]
+edition = "2018"
+
+[dependencies]
+yew = { path = "../.." }
+stdweb = "0.4.20"
diff --git a/examples/node_refs/src/input.rs b/examples/node_refs/src/input.rs
new file mode 100644
index 00000000000..e26f27c4ad4
--- /dev/null
+++ b/examples/node_refs/src/input.rs
@@ -0,0 +1,43 @@
+use yew::prelude::*;
+
+pub struct InputComponent {
+    props: Props,
+    link: ComponentLink<Self>,
+}
+
+#[derive(Clone, Properties)]
+pub struct Props {
+    #[props(required)]
+    pub on_hover: Callback<()>,
+}
+
+pub enum Msg {
+    Hover,
+}
+
+impl Component for InputComponent {
+    type Message = Msg;
+    type Properties = Props;
+
+    fn create(props: Self::Properties, link: ComponentLink<Self>) -> Self {
+        InputComponent { props, link }
+    }
+
+    fn update(&mut self, msg: Self::Message) -> ShouldRender {
+        match msg {
+            Msg::Hover => {
+                self.props.on_hover.emit(());
+            }
+        }
+        false
+    }
+
+    fn view(&self) -> Html {
+        html! {
+            <input
+                type="text"
+                class="input-component"
+                onmouseover=self.link.callback(|_| Msg::Hover) />
+        }
+    }
+}
diff --git a/examples/node_refs/src/lib.rs b/examples/node_refs/src/lib.rs
new file mode 100644
index 00000000000..a40b5e09a65
--- /dev/null
+++ b/examples/node_refs/src/lib.rs
@@ -0,0 +1,75 @@
+#![recursion_limit = "256"]
+
+mod input;
+
+use input::InputComponent;
+use stdweb::web::html_element::InputElement;
+use stdweb::web::IHtmlElement;
+use yew::prelude::*;
+
+pub struct Model {
+    link: ComponentLink<Self>,
+    refs: Vec<NodeRef>,
+    focus_index: usize,
+}
+
+pub enum Msg {
+    HoverIndex(usize),
+}
+
+impl Component for Model {
+    type Message = Msg;
+    type Properties = ();
+
+    fn create(_: Self::Properties, link: ComponentLink<Self>) -> Self {
+        Model {
+            link,
+            focus_index: 0,
+            refs: vec![NodeRef::default(), NodeRef::default()],
+        }
+    }
+
+    fn mounted(&mut self) -> ShouldRender {
+        if let Some(input) = self.refs[self.focus_index].try_into::<InputElement>() {
+            input.focus();
+        }
+        false
+    }
+
+    fn update(&mut self, msg: Self::Message) -> ShouldRender {
+        match msg {
+            Msg::HoverIndex(index) => self.focus_index = index,
+        }
+        if let Some(input) = self.refs[self.focus_index].try_into::<InputElement>() {
+            input.focus();
+        }
+        true
+    }
+
+    fn view(&self) -> Html {
+        html! {
+            <div class="main">
+                <h1>{ "Node Refs Demo" }</h1>
+                <p>{ "Refs can be used to access and manipulate DOM elements directly" }</p>
+                <ul>
+                    <li>{ "First input will focus on mount" }</li>
+                    <li>{ "Each input will focus on hover" }</li>
+                </ul>
+                <div>
+                    <label>{ "Using tag ref: " }</label>
+                    <input
+                        type="text"
+                        ref=self.refs[0].clone()
+                        class="input-element"
+                        onmouseover=self.link.callback(|_| Msg::HoverIndex(0)) />
+                </div>
+                <div>
+                    <label>{ "Using component ref: " }</label>
+                    <InputComponent
+                        ref=self.refs[1].clone()
+                        on_hover=self.link.callback(|_| Msg::HoverIndex(1)) />
+                </div>
+            </div>
+        }
+    }
+}
diff --git a/examples/node_refs/src/main.rs b/examples/node_refs/src/main.rs
new file mode 100644
index 00000000000..63360e2c5d9
--- /dev/null
+++ b/examples/node_refs/src/main.rs
@@ -0,0 +1,3 @@
+fn main() {
+    yew::start_app::<node_refs::Model>();
+}
diff --git a/examples/npm_and_rest/Cargo.toml b/examples/npm_and_rest/Cargo.toml
index 71aa4b911f0..146b3b7a753 100644
--- a/examples/npm_and_rest/Cargo.toml
+++ b/examples/npm_and_rest/Cargo.toml
@@ -5,8 +5,8 @@ authors = ["Denis Kolodin <deniskolodin@gmail.com>"]
 edition = "2018"
 
 [dependencies]
-failure = "0.1"
+anyhow = "1"
 serde = "1"
 serde_derive = "1"
-stdweb = "0.4"
+stdweb = "0.4.20"
 yew = { path = "../.." }
diff --git a/examples/npm_and_rest/src/gravatar.rs b/examples/npm_and_rest/src/gravatar.rs
index 6b8b0401b78..2dafae95aa6 100644
--- a/examples/npm_and_rest/src/gravatar.rs
+++ b/examples/npm_and_rest/src/gravatar.rs
@@ -1,4 +1,4 @@
-use failure::{format_err, Error};
+use anyhow::{anyhow, Error};
 use serde_derive::Deserialize;
 use yew::callback::Callback;
 use yew::format::{Json, Nothing};
@@ -38,8 +38,7 @@ impl GravatarService {
             if meta.status.is_success() {
                 callback.emit(data)
             } else {
-                // format_err! is a macro in crate `failure`
-                callback.emit(Err(format_err!(
+                callback.emit(Err(anyhow!(
                     "{}: error getting profile https://gravatar.com/",
                     meta.status
                 )))
diff --git a/examples/npm_and_rest/src/lib.rs b/examples/npm_and_rest/src/lib.rs
index 5ff89a8a370..27d646ae315 100644
--- a/examples/npm_and_rest/src/lib.rs
+++ b/examples/npm_and_rest/src/lib.rs
@@ -7,14 +7,15 @@ extern crate stdweb;
 pub mod ccxt;
 pub mod gravatar;
 
-use failure::Error;
+use anyhow::Error;
 use yew::services::fetch::FetchTask;
-use yew::{html, Callback, Component, ComponentLink, Html, Renderable, ShouldRender};
+use yew::{html, Callback, Component, ComponentLink, Html, ShouldRender};
 
 use ccxt::CcxtService;
 use gravatar::{GravatarService, Profile};
 
 pub struct Model {
+    link: ComponentLink<Self>,
     gravatar: GravatarService,
     ccxt: CcxtService,
     callback: Callback<Result<Profile, Error>>,
@@ -33,11 +34,12 @@ impl Component for Model {
     type Message = Msg;
     type Properties = ();
 
-    fn create(_: Self::Properties, mut link: ComponentLink<Self>) -> Self {
+    fn create(_: Self::Properties, link: ComponentLink<Self>) -> Self {
         Model {
+            link: link.clone(),
             gravatar: GravatarService::new(),
             ccxt: CcxtService::new(),
-            callback: link.send_back(Msg::GravatarReady),
+            callback: link.callback(Msg::GravatarReady),
             profile: None,
             exchanges: Vec::new(),
             task: None,
@@ -64,10 +66,8 @@ impl Component for Model {
         }
         true
     }
-}
 
-impl Renderable<Model> for Model {
-    fn view(&self) -> Html<Self> {
+    fn view(&self) -> Html {
         let view_exchange = |exchange| {
             html! {
                 <li>{ exchange }</li>
@@ -75,8 +75,8 @@ impl Renderable<Model> for Model {
         };
         html! {
             <div>
-                <button onclick=|_| Msg::Exchanges>{ "Get Exchanges" }</button>
-                <button onclick=|_| Msg::Gravatar>{ "Get Gravatar" }</button>
+                <button onclick=self.link.callback(|_| Msg::Exchanges)>{ "Get Exchanges" }</button>
+                <button onclick=self.link.callback(|_| Msg::Gravatar)>{ "Get Gravatar" }</button>
                 <ul>
                     { for self.exchanges.iter().map(view_exchange) }
                 </ul>
diff --git a/examples/routing/Cargo.toml b/examples/routing/Cargo.toml
deleted file mode 100644
index 02962ac583c..00000000000
--- a/examples/routing/Cargo.toml
+++ /dev/null
@@ -1,12 +0,0 @@
-[package]
-name = "routing"
-version = "0.1.0"
-authors = ["Henry Zimmerman <zimhen7@gmail.com>"]
-edition = "2018"
-
-[dependencies]
-log = "0.4"
-web_logger = "0.1"
-serde = { version = "1.0", features = ["derive"] }
-yew = { path = "../.." }
-stdweb = "0.4"
diff --git a/examples/routing/src/b_component.rs b/examples/routing/src/b_component.rs
deleted file mode 100644
index 7a429f2f1fb..00000000000
--- a/examples/routing/src/b_component.rs
+++ /dev/null
@@ -1,142 +0,0 @@
-use crate::router::{Request, Route, Router};
-use log::info;
-use yew::agent::Bridged;
-use yew::{html, Bridge, Component, ComponentLink, Html, Renderable, ShouldRender};
-
-pub struct BModel {
-    number: Option<usize>,
-    sub_path: Option<String>,
-    router: Box<Bridge<Router<()>>>,
-}
-
-pub enum Msg {
-    Navigate(Vec<Msg>), // Navigate after performing other actions
-    Increment,
-    Decrement,
-    UpdateSubpath(String),
-    HandleRoute(Route<()>),
-}
-
-impl Component for BModel {
-    type Message = Msg;
-    type Properties = ();
-
-    fn create(_: Self::Properties, mut link: ComponentLink<Self>) -> Self {
-        let callback = link.send_back(|route: Route<()>| Msg::HandleRoute(route));
-        let mut router = Router::bridge(callback);
-
-        router.send(Request::GetCurrentRoute);
-
-        BModel {
-            number: None,
-            sub_path: None,
-            router,
-        }
-    }
-
-    fn update(&mut self, msg: Self::Message) -> ShouldRender {
-        match msg {
-            Msg::Navigate(msgs) => {
-                // Perform the wrapped action first
-                for msg in msgs {
-                    self.update(msg);
-                }
-
-                // The path dictating that this component be instantiated must be provided
-                let mut path_segments = vec!["b".into()];
-                if let Some(ref sub_path) = self.sub_path {
-                    path_segments.push(sub_path.clone())
-                }
-
-                let fragment: Option<String> = self.number.map(|x: usize| x.to_string());
-
-                let route = Route {
-                    path_segments,
-                    query: None,
-                    fragment,
-                    state: (),
-                };
-
-                self.router.send(Request::ChangeRoute(route));
-                false
-            }
-            Msg::HandleRoute(route) => {
-                info!("Routing: {}", route.to_route_string());
-                // Instead of each component selecting which parts of the path are important to it,
-                // it is also possible to match on the `route.to_route_string().as_str()` once
-                // and create enum variants representing the different children and pass them as props.
-                self.sub_path = route.path_segments.get(1).map(String::clone);
-                self.number = route
-                    .fragment
-                    .and_then(|x| usize::from_str_radix(&x, 10).ok());
-
-                true
-            }
-            Msg::Increment => {
-                let n = if let Some(number) = self.number {
-                    number + 1
-                } else {
-                    1
-                };
-                self.number = Some(n);
-                true
-            }
-            Msg::Decrement => {
-                let n: usize = if let Some(number) = self.number {
-                    if number > 0 {
-                        number - 1
-                    } else {
-                        number
-                    }
-                } else {
-                    0
-                };
-                self.number = Some(n);
-                true
-            }
-            Msg::UpdateSubpath(path) => {
-                self.sub_path = Some(path);
-                true
-            }
-        }
-    }
-
-    fn change(&mut self, _props: Self::Properties) -> ShouldRender {
-        // Apparently change MUST be implemented in this case, even though no props were changed
-        true
-    }
-}
-impl Renderable<BModel> for BModel {
-    fn view(&self) -> Html<Self> {
-        html! {
-            <div>
-                <div>
-                    { self.display_number() }
-                    <button onclick=|_| Msg::Navigate(vec![Msg::Increment])>{ "Increment" }</button>
-                    <button onclick=|_| Msg::Navigate(vec![Msg::Decrement])>{ "Decrement" }</button>
-                </div>
-
-                { self.display_subpath_input() }
-
-            </div>
-        }
-    }
-}
-
-impl BModel {
-    fn display_number(&self) -> String {
-        if let Some(number) = self.number {
-            format!("Number: {}", number)
-        } else {
-            format!("Number: None")
-        }
-    }
-    fn display_subpath_input(&self) -> Html<BModel> {
-        let sub_path = self.sub_path.clone();
-        html! {
-            <input placeholder="subpath"
-                value=sub_path.unwrap_or("".into())
-                oninput=|e| Msg::Navigate(vec![Msg::UpdateSubpath(e.value)]) />
-        }
-    }
-}
diff --git a/examples/routing/src/lib.rs b/examples/routing/src/lib.rs
deleted file mode 100644
index 67a13e38d35..00000000000
--- a/examples/routing/src/lib.rs
+++ /dev/null
@@ -1,127 +0,0 @@
-#![recursion_limit = "128"]
-
-mod b_component;
-mod router;
-mod routing;
-use b_component::BModel;
-
-use log::info;
-use router::Route;
-use yew::agent::Bridged;
-use yew::{html, Bridge, Component, ComponentLink, Html, Renderable, ShouldRender};
-
-pub enum Child {
-    A,
-    B,
-    PathNotFound(String),
-}
-
-pub struct Model {
-    child: Child,
-    router: Box<Bridge<router::Router<()>>>,
-}
-
-pub enum Msg {
-    NavigateTo(Child),
-    HandleRoute(Route<()>),
-}
-
-impl Component for Model {
-    type Message = Msg;
-    type Properties = ();
-
-    fn create(_: Self::Properties, mut link: ComponentLink<Self>) -> Self {
-        let callback = link.send_back(|route: Route<()>| Msg::HandleRoute(route));
-        let mut router = router::Router::bridge(callback);
-
-        // TODO Not sure if this is technically correct. This should be sent _after_ the component has been created.
-        // I think the `Component` trait should have a hook called `on_mount()`
-        // that is called after the component has been attached to the vdom.
-        // It seems like this only works because the JS engine decides to activate the
-        // router worker logic after the mounting has finished.
-        router.send(router::Request::GetCurrentRoute);
-
-        Model {
-            child: Child::A, // This should be quickly overwritten by the actual route.
-            router,
-        }
-    }
-
-    fn update(&mut self, msg: Self::Message) -> ShouldRender {
-        match msg {
-            Msg::NavigateTo(child) => {
-                let path_segments = match child {
-                    Child::A => vec!["a".into()],
-                    Child::B => vec!["b".into()],
-                    Child::PathNotFound(_) => vec!["path_not_found".into()],
-                };
-
-                let route = router::Route {
-                    path_segments,
-                    query: None,
-                    fragment: None,
-                    state: (),
-                };
-
-                self.router.send(router::Request::ChangeRoute(route));
-                false
-            }
-            Msg::HandleRoute(route) => {
-                info!("Routing: {}", route.to_route_string());
-                // Instead of each component selecting which parts of the path are important to it,
-                // it is also possible to match on the `route.to_route_string().as_str()` once
-                // and create enum variants representing the different children and pass them as props.
-                self.child = if let Some(first_segment) = route.path_segments.get(0) {
-                    match first_segment.as_str() {
-                        "a" => Child::A,
-                        "b" => Child::B,
-                        other => Child::PathNotFound(other.into()),
-                    }
-                } else {
-                    Child::PathNotFound("path_not_found".into())
-                };
-
-                true
-            }
-        }
-    }
-}
-
-impl Renderable<Model> for Model {
-    fn view(&self) -> Html<Self> {
-        html! {
-            <div>
-                <nav class="menu">
-                    <button onclick=|_| Msg::NavigateTo(Child::A)>{ "Go to A" }</button>
-                    <button onclick=|_| Msg::NavigateTo(Child::B)>{ "Go to B" }</button>
-                </nav>
-                <div>
-                    {self.child.view()}
-                </div>
-            </div>
-        }
-    }
-}
-
-impl Renderable<Model> for Child {
-    fn view(&self) -> Html<Model> {
-        match *self {
-            Child::A => html! {
-                <>
-                    {"This corresponds to route 'a'"}
-                </>
-            },
-            Child::B => html! {
-                <>
-                    {"This corresponds to route 'b'"}
-                    <BModel />
-                </>
-            },
-            Child::PathNotFound(ref path) => html! {
-                <>
-                    {format!("Invalid path: '{}'", path)}
-                </>
-            },
-        }
-    }
-}
diff --git a/examples/routing/src/main.rs b/examples/routing/src/main.rs
deleted file mode 100644
index 4f1fec842b4..00000000000
--- a/examples/routing/src/main.rs
+++ /dev/null
@@ -1,3 +0,0 @@
-fn main() {
-    yew::start_app::<routing::Model>();
-}
diff --git a/examples/routing/src/router.rs b/examples/routing/src/router.rs
deleted file mode 100644
index 8df891c372e..00000000000
--- a/examples/routing/src/router.rs
+++ /dev/null
@@ -1,181 +0,0 @@
-//! Agent that exposes a usable routing interface to components.
-
-use crate::routing::RouteService;
-use log::info;
-use serde::{Deserialize, Serialize};
-use std::collections::HashSet;
-use std::fmt::Debug;
-use stdweb::unstable::TryFrom;
-use stdweb::JsSerialize;
-use stdweb::Value;
-use yew::worker::*;
-
-#[derive(Clone, Debug, PartialEq, Serialize, Deserialize)]
-pub struct Route<T> {
-    pub path_segments: Vec<String>,
-    pub query: Option<String>,
-    pub fragment: Option<String>,
-    pub state: T,
-}
-
-impl<T> Route<T>
-where
-    T: JsSerialize + Clone + TryFrom<Value> + Default + 'static,
-{
-    pub fn to_route_string(&self) -> String {
-        let path = self.path_segments.join("/");
-        let mut path = format!("/{}", path); // add the leading '/'
-        if let Some(ref query) = self.query {
-            path = format!("{}?{}", path, query);
-        }
-        if let Some(ref fragment) = self.fragment {
-            path = format!("{}#{}", path, fragment)
-        }
-        path
-    }
-
-    pub fn current_route(route_service: &RouteService<T>) -> Self {
-        let path = route_service.get_path(); // guaranteed to always start with a '/'
-        let mut path_segments: Vec<String> = path.split("/").map(String::from).collect();
-        path_segments.remove(0); // remove empty string that is split from the first '/'
-
-        let mut query: String = route_service.get_query(); // The first character will be a '?'
-        let query: Option<String> = if query.len() > 1 {
-            query.remove(0);
-            Some(query)
-        } else {
-            None
-        };
-
-        let mut fragment: String = route_service.get_fragment(); // The first character will be a '#'
-        let fragment: Option<String> = if fragment.len() > 1 {
-            fragment.remove(0);
-            Some(fragment)
-        } else {
-            None
-        };
-
-        Route {
-            path_segments,
-            query,
-            fragment,
-            state: T::default(),
-        }
-    }
-}
-
-pub enum Msg<T>
-where
-    T: JsSerialize + Clone + Debug + TryFrom<Value> + 'static,
-{
-    BrowserNavigationRouteChanged((String, T)),
-}
-
-impl<T> Transferable for Route<T> where for<'de> T: Serialize + Deserialize<'de> {}
-
-#[derive(Serialize, Deserialize, Debug)]
-pub enum Request<T> {
-    /// Changes the route using a RouteInfo struct and alerts connected components to the route change.
-    ChangeRoute(Route<T>),
-    /// Changes the route using a RouteInfo struct, but does not alert connected components to the route change.
-    ChangeRouteNoBroadcast(Route<T>),
-    GetCurrentRoute,
-}
-
-impl<T> Transferable for Request<T> where for<'de> T: Serialize + Deserialize<'de> {}
-
-/// The Router worker holds on to the RouteService singleton and mediates access to it.
-pub struct Router<T>
-where
-    for<'de> T: JsSerialize
-        + Clone
-        + Debug
-        + TryFrom<Value>
-        + Default
-        + Serialize
-        + Deserialize<'de>
-        + 'static,
-{
-    link: AgentLink<Router<T>>,
-    route_service: RouteService<T>,
-    /// A list of all entities connected to the router.
-    /// When a route changes, either initiated by the browser or by the app,
-    /// the route change will be broadcast to all listening entities.
-    subscribers: HashSet<HandlerId>,
-}
-
-impl<T> Agent for Router<T>
-where
-    for<'de> T: JsSerialize
-        + Clone
-        + Debug
-        + TryFrom<Value>
-        + Default
-        + Serialize
-        + Deserialize<'de>
-        + 'static,
-{
-    type Reach = Context;
-    type Message = Msg<T>;
-    type Input = Request<T>;
-    type Output = Route<T>;
-
-    fn create(link: AgentLink<Self>) -> Self {
-        let callback = link.send_back(|route_changed: (String, T)| {
-            Msg::BrowserNavigationRouteChanged(route_changed)
-        });
-        let mut route_service = RouteService::new();
-        route_service.register_callback(callback);
-
-        Router {
-            link,
-            route_service,
-            subscribers: HashSet::new(),
-        }
-    }
-
-    fn update(&mut self, msg: Self::Message) {
-        match msg {
-            Msg::BrowserNavigationRouteChanged((_route_string, state)) => {
-                info!("Browser navigated");
-                let mut route = Route::current_route(&self.route_service);
-                route.state = state;
-                for sub in self.subscribers.iter() {
-                    self.link.response(*sub, route.clone());
-                }
-            }
-        }
-    }
-
-    fn handle(&mut self, msg: Self::Input, who: HandlerId) {
-        info!("Request: {:?}", msg);
-        match msg {
-            Request::ChangeRoute(route) => {
-                let route_string: String = route.to_route_string();
-                // set the route
-                self.route_service.set_route(&route_string, route.state);
-                // get the new route. This will contain a default state object
-                let route = Route::current_route(&self.route_service);
-                // broadcast it to all listening components
-                for sub in self.subscribers.iter() {
-                    self.link.response(*sub, route.clone());
-                }
-            }
-            Request::ChangeRouteNoBroadcast(route) => {
-                let route_string: String = route.to_route_string();
-                self.route_service.set_route(&route_string, route.state);
-            }
-            Request::GetCurrentRoute => {
-                let route = Route::current_route(&self.route_service);
-                self.link.response(who, route.clone());
-            }
-        }
-    }
-
-    fn connected(&mut self, id: HandlerId) {
-        self.subscribers.insert(id);
-    }
-    fn disconnected(&mut self, id: HandlerId) {
-        self.subscribers.remove(&id);
-    }
-}
diff --git a/examples/routing/src/routing.rs b/examples/routing/src/routing.rs
deleted file mode 100644
index b4bf75b58a4..00000000000
--- a/examples/routing/src/routing.rs
+++ /dev/null
@@ -1,101 +0,0 @@
-//! Service to handle routing.
-
-use stdweb::unstable::TryFrom;
-use stdweb::web::event::PopStateEvent;
-use stdweb::web::window;
-use stdweb::web::EventListenerHandle;
-use stdweb::web::History;
-use stdweb::web::IEventTarget;
-use stdweb::web::Location;
-use stdweb::JsSerialize;
-use stdweb::Value;
-use yew::callback::Callback;
-
-use std::marker::PhantomData;
-
-/// A service that facilitates manipulation of the browser's URL bar and responding to browser
-/// 'forward' and 'back' events.
-///
-/// The `T` determines what route state can be stored in the route service.
-pub struct RouteService<T> {
-    history: History,
-    location: Location,
-    event_listener: Option<EventListenerHandle>,
-    phantom_data: PhantomData<T>,
-}
-
-impl<T> RouteService<T>
-where
-    T: JsSerialize + Clone + TryFrom<Value> + 'static,
-{
-    /// Creates the route service.
-    pub fn new() -> RouteService<T> {
-        let location = window()
-            .location()
-            .expect("browser does not support location API");
-        RouteService {
-            history: window().history(),
-            location,
-            event_listener: None,
-            phantom_data: PhantomData,
-        }
-    }
-
-    /// Registers a callback to the route service.
-    /// Callbacks will be called when the History API experiences a change such as
-    /// popping a state off of its stack when the forward or back buttons are pressed.
-    pub fn register_callback(&mut self, callback: Callback<(String, T)>) {
-        self.event_listener = Some(window().add_event_listener(move |event: PopStateEvent| {
-            let state_value: Value = event.state();
-
-            if let Ok(state) = T::try_from(state_value) {
-                let location: Location = window().location().unwrap();
-                let route: String = Self::get_route_from_location(&location);
-
-                callback.emit((route.clone(), state.clone()))
-            } else {
-                eprintln!("Nothing farther back in history, not calling routing callback.");
-            }
-        }));
-    }
-
-    /// Sets the browser's url bar to contain the provided route,
-    /// and creates a history entry that can be navigated via the forward and back buttons.
-    /// The route should be a relative path that starts with a '/'.
-    /// A state object be stored with the url.
-    pub fn set_route(&mut self, route: &str, state: T) {
-        self.history.push_state(state, "", Some(route));
-    }
-
-    fn get_route_from_location(location: &Location) -> String {
-        let path = location.pathname().unwrap();
-        let query = location.search().unwrap();
-        let fragment = location.hash().unwrap();
-        format!(
-            "{path}{query}{fragment}",
-            path = path,
-            query = query,
-            fragment = fragment
-        )
-    }
-
-    /// Gets the concatenated path, query, and fragment strings
-    pub fn get_route(&self) -> String {
-        Self::get_route_from_location(&self.location)
-    }
-
-    /// Gets the path name of the current url.
-    pub fn get_path(&self) -> String {
-        self.location.pathname().unwrap()
-    }
-
-    /// Gets the query string of the current url.
-    pub fn get_query(&self) -> String {
-        self.location.search().unwrap()
-    }
-
-    /// Gets the fragment of the current url.
-    pub fn get_fragment(&self) -> String {
-        self.location.hash().unwrap()
-    }
-}
diff --git a/examples/showcase/Cargo.toml b/examples/showcase/Cargo.toml
index a309cc0e6a8..b9acad62070 100644
--- a/examples/showcase/Cargo.toml
+++ b/examples/showcase/Cargo.toml
@@ -14,13 +14,13 @@ counter = { path = "../counter" }
 crm = { path = "../crm" }
 custom_components = { path = "../custom_components" }
 dashboard = { path = "../dashboard" }
+node_refs = { path = "../node_refs" }
 fragments = { path = "../fragments" }
 game_of_life = { path = "../game_of_life" }
 inner_html = { path = "../inner_html" }
 large_table = { path = "../large_table" }
 mount_point = { path = "../mount_point" }
 npm_and_rest = { path = "../npm_and_rest" }
-routing = { path = "../routing" }
 textarea = { path = "../textarea" }
 timer = { path = "../timer" }
 todomvc = { path = "../todomvc" }
diff --git a/examples/showcase/src/main.rs b/examples/showcase/src/main.rs
index 55d6ab9f6b1..d2b0329fd7b 100644
--- a/examples/showcase/src/main.rs
+++ b/examples/showcase/src/main.rs
@@ -10,8 +10,8 @@ use inner_html::Model as InnerHtml;
 use large_table::Model as LargeTable;
 use log::trace;
 use mount_point::Model as MountPoint;
+use node_refs::Model as NodeRefs;
 use npm_and_rest::Model as NpmAndRest;
-use routing::Model as Routing;
 use strum::IntoEnumIterator;
 use strum_macros::{Display, EnumIter, EnumString};
 use textarea::Model as Textarea;
@@ -19,7 +19,7 @@ use timer::Model as Timer;
 use todomvc::Model as Todomvc;
 use two_apps::Model as TwoApps;
 use yew::components::Select;
-use yew::{html, App, Component, ComponentLink, Html, Renderable, ShouldRender};
+use yew::{html, App, Component, ComponentLink, Html, ShouldRender};
 
 #[derive(Clone, Debug, Display, EnumString, EnumIter, PartialEq)]
 enum Scene {
@@ -27,13 +27,13 @@ enum Scene {
     Crm,
     CustomComponents,
     Dashboard,
+    NodeRefs,
     Fragments,
     GameOfLife,
     InnerHtml,
     LargeTable,
     MountPoint,
     NpmAndRest,
-    Routing,
     Textarea,
     Timer,
     Todomvc,
@@ -42,6 +42,7 @@ enum Scene {
 
 struct Model {
     scene: Option<Scene>,
+    link: ComponentLink<Self>,
 }
 
 enum Msg {
@@ -52,8 +53,8 @@ impl Component for Model {
     type Message = Msg;
     type Properties = ();
 
-    fn create(_: Self::Properties, _: ComponentLink<Self>) -> Self {
-        Self { scene: None }
+    fn create(_: Self::Properties, link: ComponentLink<Self>) -> Self {
+        Self { scene: None, link }
     }
 
     fn update(&mut self, msg: Self::Message) -> ShouldRender {
@@ -64,10 +65,8 @@ impl Component for Model {
             }
         }
     }
-}
 
-impl Renderable<Model> for Model {
-    fn view(&self) -> Html<Self> {
+    fn view(&self) -> Html {
         html! {
             <div id="fullscreen">
                 <div id="left_pane">
@@ -75,7 +74,7 @@ impl Renderable<Model> for Model {
                     <Select<Scene>
                         selected=self.scene.clone()
                         options=Scene::iter().collect::<Vec<_>>()
-                        onchange=Msg::SwitchTo />
+                        onchange=self.link.callback(Msg::SwitchTo) />
                 </div>
                 <div id="right_pane">
                     { self.view_scene() }
@@ -86,20 +85,20 @@ impl Renderable<Model> for Model {
 }
 
 impl Model {
-    fn view_scene(&self) -> Html<Self> {
+    fn view_scene(&self) -> Html {
         if let Some(scene) = self.scene.as_ref() {
             match scene {
                 Scene::Counter => html! { <Counter /> },
                 Scene::Crm => html! { <Crm /> },
                 Scene::CustomComponents => html! { <CustomComponents /> },
                 Scene::Dashboard => html! { <Dashboard /> },
+                Scene::NodeRefs => html! { <NodeRefs /> },
                 Scene::Fragments => html! { <Fragments /> },
                 Scene::GameOfLife => html! { <GameOfLife /> },
                 Scene::InnerHtml => html! { <InnerHtml /> },
                 Scene::LargeTable => html! { <LargeTable /> },
                 Scene::MountPoint => html! { <MountPoint /> },
                 Scene::NpmAndRest => html! { <NpmAndRest /> },
-                Scene::Routing => html! { <Routing /> },
                 Scene::Textarea => html! { <Textarea /> },
                 Scene::Timer => html! { <Timer /> },
                 Scene::Todomvc => html! { <Todomvc /> },
diff --git a/examples/textarea/src/lib.rs b/examples/textarea/src/lib.rs
index 280ee1345d6..60a330c6a2c 100644
--- a/examples/textarea/src/lib.rs
+++ b/examples/textarea/src/lib.rs
@@ -1,8 +1,9 @@
 #![recursion_limit = "128"]
 
-use yew::{html, Component, ComponentLink, Html, Renderable, ShouldRender};
+use yew::{html, Component, ComponentLink, Html, InputData, ShouldRender};
 
 pub struct Model {
+    link: ComponentLink<Self>,
     value: String,
 }
 
@@ -15,8 +16,11 @@ impl Component for Model {
     type Message = Msg;
     type Properties = ();
 
-    fn create(_: Self::Properties, _: ComponentLink<Self>) -> Self {
-        Model { value: "".into() }
+    fn create(_: Self::Properties, link: ComponentLink<Self>) -> Self {
+        Model {
+            link,
+            value: "".into(),
+        }
     }
 
     fn update(&mut self, msg: Self::Message) -> ShouldRender {
@@ -30,19 +34,17 @@ impl Component for Model {
         }
         true
     }
-}
 
-impl Renderable<Model> for Model {
-    fn view(&self) -> Html<Self> {
+    fn view(&self) -> Html {
         html! {
             <div>
                 <div>
                     <textarea rows=5
                         value=&self.value
-                        oninput=|e| Msg::GotInput(e.value)
+                        oninput=self.link.callback(|e: InputData| Msg::GotInput(e.value))
                         placeholder="placeholder">
                     </textarea>
-                    <button onclick=|_| Msg::Clicked>{ "change value" }</button>
+                    <button onclick=self.link.callback(|_| Msg::Clicked)>{ "change value" }</button>
                 </div>
                 <div>
                     {&self.value}
diff --git a/examples/timer/src/lib.rs b/examples/timer/src/lib.rs
index 623c76453de..8a6f23c8379 100644
--- a/examples/timer/src/lib.rs
+++ b/examples/timer/src/lib.rs
@@ -2,17 +2,18 @@
 
 use std::time::Duration;
 use yew::services::{ConsoleService, IntervalService, Task, TimeoutService};
-use yew::{html, Callback, Component, ComponentLink, Html, Renderable, ShouldRender};
+use yew::{html, Callback, Component, ComponentLink, Html, ShouldRender};
 
 pub struct Model {
+    link: ComponentLink<Self>,
     timeout: TimeoutService,
     interval: IntervalService,
     console: ConsoleService,
     callback_tick: Callback<()>,
     callback_done: Callback<()>,
-    job: Option<Box<Task>>,
+    job: Option<Box<dyn Task>>,
     messages: Vec<&'static str>,
-    _standalone: Box<Task>,
+    _standalone: Box<dyn Task>,
 }
 
 pub enum Msg {
@@ -27,7 +28,7 @@ impl Component for Model {
     type Message = Msg;
     type Properties = ();
 
-    fn create(_: Self::Properties, mut link: ComponentLink<Self>) -> Self {
+    fn create(_: Self::Properties, link: ComponentLink<Self>) -> Self {
         // This callback doesn't send any message to a scope
         let callback = |_| {
             println!("Example of a standalone callback.");
@@ -36,11 +37,12 @@ impl Component for Model {
         let handle = interval.spawn(Duration::from_secs(10), callback.into());
 
         Model {
+            link: link.clone(),
             timeout: TimeoutService::new(),
             interval,
             console: ConsoleService::new(),
-            callback_tick: link.send_back(|_| Msg::Tick),
-            callback_done: link.send_back(|_| Msg::Done),
+            callback_tick: link.callback(|_| Msg::Tick),
+            callback_done: link.callback(|_| Msg::Done),
             job: None,
             messages: Vec::new(),
             _standalone: Box::new(handle),
@@ -96,19 +98,20 @@ impl Component for Model {
         }
         true
     }
-}
 
-impl Renderable<Model> for Model {
-    fn view(&self) -> Html<Self> {
+    fn view(&self) -> Html {
         let view_message = |message| {
             html! { <p>{ message }</p> }
         };
         let has_job = self.job.is_some();
         html! {
             <div>
-                <button disabled=has_job onclick=|_| Msg::StartTimeout>{ "Start Timeout" }</button>
-                <button disabled=has_job onclick=|_| Msg::StartInterval>{ "Start Interval" }</button>
-                <button disabled=!has_job onclick=|_| Msg::Cancel>{ "Cancel!" }</button>
+                <button disabled=has_job
+                        onclick=self.link.callback(|_| Msg::StartTimeout)>{ "Start Timeout" }</button>
+                <button disabled=has_job
+                        onclick=self.link.callback(|_| Msg::StartInterval)>{ "Start Interval" }</button>
+                <button disabled=!has_job
+                        onclick=self.link.callback(|_| Msg::Cancel)>{ "Cancel!" }</button>
                 <div>
                     { for self.messages.iter().map(view_message) }
                 </div>
diff --git a/examples/todomvc/src/lib.rs b/examples/todomvc/src/lib.rs
index 0b80dad47b8..71113feef31 100644
--- a/examples/todomvc/src/lib.rs
+++ b/examples/todomvc/src/lib.rs
@@ -6,11 +6,12 @@ use strum_macros::{EnumIter, ToString};
 use yew::events::IKeyboardEvent;
 use yew::format::Json;
 use yew::services::storage::{Area, StorageService};
-use yew::{html, Component, ComponentLink, Href, Html, Renderable, ShouldRender};
+use yew::{html, Component, ComponentLink, Href, Html, InputData, KeyPressEvent, ShouldRender};
 
 const KEY: &'static str = "yew.todomvc.self";
 
 pub struct Model {
+    link: ComponentLink<Self>,
     storage: StorageService,
     state: State,
 }
@@ -48,7 +49,7 @@ impl Component for Model {
     type Message = Msg;
     type Properties = ();
 
-    fn create(_: Self::Properties, _: ComponentLink<Self>) -> Self {
+    fn create(_: Self::Properties, link: ComponentLink<Self>) -> Self {
         let storage = StorageService::new(Area::Local);
         let entries = {
             if let Json(Ok(restored_model)) = storage.restore(KEY) {
@@ -63,7 +64,11 @@ impl Component for Model {
             value: "".into(),
             edit_value: "".into(),
         };
-        Model { storage, state }
+        Model {
+            link,
+            storage,
+            state,
+        }
     }
 
     fn update(&mut self, msg: Self::Message) -> ShouldRender {
@@ -115,10 +120,8 @@ impl Component for Model {
         self.storage.store(KEY, Json(&self.state.entries));
         true
     }
-}
 
-impl Renderable<Model> for Model {
-    fn view(&self) -> Html<Self> {
+    fn view(&self) -> Html {
         html! {
             <div class="todomvc-wrapper">
                 <section class="todoapp">
@@ -127,9 +130,13 @@ impl Renderable<Model> for Model {
                         { self.view_input() }
                     </header>
                     <section class="main">
-                        <input class="toggle-all" type="checkbox" checked=self.state.is_all_completed() onclick=|_| Msg::ToggleAll />
+                        <input
+                            type="checkbox"
+                            class="toggle-all"
+                            checked=self.state.is_all_completed()
+                            onclick=self.link.callback(|_| Msg::ToggleAll) />
                         <ul class="todo-list">
-                            { for self.state.entries.iter().filter(|e| self.state.filter.fit(e)).enumerate().map(view_entry) }
+                            { for self.state.entries.iter().filter(|e| self.state.filter.fit(e)).enumerate().map(|e| self.view_entry(e)) }
                         </ul>
                     </section>
                     <footer class="footer">
@@ -140,7 +147,7 @@ impl Renderable<Model> for Model {
                         <ul class="filters">
                             { for Filter::iter().map(|flt| self.view_filter(flt)) }
                         </ul>
-                        <button class="clear-completed" onclick=|_| Msg::ClearCompleted>
+                        <button class="clear-completed" onclick=self.link.callback(|_| Msg::ClearCompleted)>
                             { format!("Clear completed ({})", self.state.total_completed()) }
                         </button>
                     </footer>
@@ -156,30 +163,30 @@ impl Renderable<Model> for Model {
 }
 
 impl Model {
-    fn view_filter(&self, filter: Filter) -> Html<Model> {
+    fn view_filter(&self, filter: Filter) -> Html {
         let flt = filter.clone();
         html! {
             <li>
                 <a class=if self.state.filter == flt { "selected" } else { "not-selected" }
                    href=&flt
-                   onclick=|_| Msg::SetFilter(flt.clone())>
+                   onclick=self.link.callback(move |_| Msg::SetFilter(flt.clone()))>
                     { filter }
                 </a>
             </li>
         }
     }
 
-    fn view_input(&self) -> Html<Model> {
+    fn view_input(&self) -> Html {
         html! {
             // You can use standard Rust comments. One line:
             // <li></li>
             <input class="new-todo"
                    placeholder="What needs to be done?"
                    value=&self.state.value
-                   oninput=|e| Msg::Update(e.value)
-                   onkeypress=|e| {
+                   oninput=self.link.callback(|e: InputData| Msg::Update(e.value))
+                   onkeypress=self.link.callback(|e: KeyPressEvent| {
                        if e.key() == "Enter" { Msg::Add } else { Msg::Nope }
-                   } />
+                   }) />
             /* Or multiline:
             <ul>
                 <li></li>
@@ -187,42 +194,46 @@ impl Model {
             */
         }
     }
-}
 
-fn view_entry((idx, entry): (usize, &Entry)) -> Html<Model> {
-    let mut class = "todo".to_string();
-    if entry.editing {
-        class.push_str(" editing");
-    }
-    if entry.completed {
-        class.push_str(" completed");
-    }
-    html! {
-        <li class=class>
-            <div class="view">
-                <input class="toggle" type="checkbox" checked=entry.completed onclick=|_| Msg::Toggle(idx) />
-                <label ondoubleclick=|_| Msg::ToggleEdit(idx)>{ &entry.description }</label>
-                <button class="destroy" onclick=|_| Msg::Remove(idx) />
-            </div>
-            { view_entry_edit_input((idx, &entry)) }
-        </li>
+    fn view_entry(&self, (idx, entry): (usize, &Entry)) -> Html {
+        let mut class = "todo".to_string();
+        if entry.editing {
+            class.push_str(" editing");
+        }
+        if entry.completed {
+            class.push_str(" completed");
+        }
+        html! {
+            <li class=class>
+                <div class="view">
+                    <input
+                        type="checkbox"
+                        class="toggle"
+                        checked=entry.completed
+                        onclick=self.link.callback(move |_| Msg::Toggle(idx)) />
+                    <label ondoubleclick=self.link.callback(move |_| Msg::ToggleEdit(idx))>{ &entry.description }</label>
+                    <button class="destroy" onclick=self.link.callback(move |_| Msg::Remove(idx)) />
+                </div>
+                { self.view_entry_edit_input((idx, &entry)) }
+            </li>
+        }
     }
-}
 
-fn view_entry_edit_input((idx, entry): (usize, &Entry)) -> Html<Model> {
-    if entry.editing == true {
-        html! {
-            <input class="edit"
-                   type="text"
-                   value=&entry.description
-                   oninput=|e| Msg::UpdateEdit(e.value)
-                   onblur=|_| Msg::Edit(idx)
-                   onkeypress=|e| {
-                      if e.key() == "Enter" { Msg::Edit(idx) } else { Msg::Nope }
-                   } />
+    fn view_entry_edit_input(&self, (idx, entry): (usize, &Entry)) -> Html {
+        if entry.editing {
+            html! {
+                <input class="edit"
+                       type="text"
+                       value=&entry.description
+                       oninput=self.link.callback(|e: InputData| Msg::UpdateEdit(e.value))
+                       onblur=self.link.callback(move |_| Msg::Edit(idx))
+                       onkeypress=self.link.callback(move |e: KeyPressEvent| {
+                          if e.key() == "Enter" { Msg::Edit(idx) } else { Msg::Nope }
+                       }) />
+            }
+        } else {
+            html! { <input type="hidden" /> }
         }
-    } else {
-        html! { <input type="hidden" /> }
     }
 }
 
diff --git a/examples/two_apps/Cargo.toml b/examples/two_apps/Cargo.toml
index 08c7b871fe6..d080b683938 100644
--- a/examples/two_apps/Cargo.toml
+++ b/examples/two_apps/Cargo.toml
@@ -5,5 +5,5 @@ authors = ["Denis Kolodin <deniskolodin@gmail.com>"]
 edition = "2018"
 
 [dependencies]
-stdweb = "0.4"
+stdweb = "0.4.20"
 yew = { path = "../.." }
diff --git a/examples/two_apps/src/lib.rs b/examples/two_apps/src/lib.rs
index b57285511d1..232ad785fd4 100644
--- a/examples/two_apps/src/lib.rs
+++ b/examples/two_apps/src/lib.rs
@@ -1,10 +1,11 @@
-#![recursion_limit = "128"]
+#![recursion_limit = "256"]
 
 use yew::html::Scope;
 /// This example demonstrates low-level usage of scopes.
-use yew::{html, Component, ComponentLink, Html, Renderable, ShouldRender};
+use yew::{html, Component, ComponentLink, Html, ShouldRender};
 
 pub struct Model {
+    link: ComponentLink<Self>,
     scope: Option<Scope<Model>>,
     selector: &'static str,
     title: String,
@@ -20,8 +21,9 @@ impl Component for Model {
     type Message = Msg;
     type Properties = ();
 
-    fn create(_: Self::Properties, _: ComponentLink<Self>) -> Self {
+    fn create(_: Self::Properties, link: ComponentLink<Self>) -> Self {
         Model {
+            link,
             scope: None,
             selector: "",
             title: "Nothing".into(),
@@ -66,17 +68,15 @@ impl Component for Model {
         }
         true
     }
-}
 
-impl Renderable<Model> for Model {
-    fn view(&self) -> Html<Self> {
+    fn view(&self) -> Html {
         html! {
             <div>
                 <h3>{ format!("{} received <{}>", self.selector, self.title) }</h3>
-                <button onclick=|_| Msg::SendToOpposite("One".into())>{ "One" }</button>
-                <button onclick=|_| Msg::SendToOpposite("Two".into())>{ "Two" }</button>
-                <button onclick=|_| Msg::SendToOpposite("Three".into())>{ "Three" }</button>
-                <button onclick=|_| Msg::SendToOpposite("Ping".into())>{ "Ping" }</button>
+                <button onclick=self.link.callback(|_| Msg::SendToOpposite("One".into()))>{ "One" }</button>
+                <button onclick=self.link.callback(|_| Msg::SendToOpposite("Two".into()))>{ "Two" }</button>
+                <button onclick=self.link.callback(|_| Msg::SendToOpposite("Three".into()))>{ "Three" }</button>
+                <button onclick=self.link.callback(|_| Msg::SendToOpposite("Ping".into()))>{ "Ping" }</button>
             </div>
         }
     }
diff --git a/src/agent.rs b/src/agent.rs
index 409efb99033..289174a0c1c 100644
--- a/src/agent.rs
+++ b/src/agent.rs
@@ -2,81 +2,131 @@
 
 use crate::callback::Callback;
 use crate::scheduler::{scheduler, Runnable, Shared};
-use anymap::{AnyMap, Entry};
+use anymap::{self, AnyMap};
 use bincode;
 use log::warn;
 use serde::{Deserialize, Serialize};
 use slab::Slab;
+use std::any::TypeId;
 use std::cell::RefCell;
+use std::collections::{hash_map, HashMap, HashSet};
+use std::fmt;
 use std::marker::PhantomData;
+use std::ops::{Deref, DerefMut};
 use std::rc::Rc;
 use stdweb::Value;
 #[allow(unused_imports)]
 use stdweb::{_js_impl, js};
 
-#[derive(Serialize, Deserialize)]
-enum ToWorker<T> {
+/// Serializable messages to worker
+#[derive(Serialize, Deserialize, Debug)]
+pub enum ToWorker<T> {
+    /// Client is connected
     Connected(HandlerId),
+    /// Incoming message to Worker
     ProcessInput(HandlerId, T),
+    /// Client is disconnected
     Disconnected(HandlerId),
+    /// Worker should be terminated
     Destroy,
 }
 
-impl<T> Transferable for ToWorker<T> where T: Serialize + for<'de> Deserialize<'de> {}
-
-#[derive(Serialize, Deserialize)]
-enum FromWorker<T> {
+/// Serializable messages sent by worker to consumer
+#[derive(Serialize, Deserialize, Debug)]
+pub enum FromWorker<T> {
     /// Worker sends this message when `wasm` bundle has loaded.
     WorkerLoaded,
+    /// Outgoing message to consumer
     ProcessOutput(HandlerId, T),
 }
 
-impl<T> Transferable for FromWorker<T> where T: Serialize + for<'de> Deserialize<'de> {}
-
-/// Represents a message which you could send to an agent.
-pub trait Transferable
-where
-    Self: Serialize + for<'de> Deserialize<'de>,
-{
-}
-
-trait Packed {
+/// Message packager, based on serde::Serialize/Deserialize
+pub trait Packed {
+    /// Pack serializable message into Vec<u8>
     fn pack(&self) -> Vec<u8>;
+    /// Unpack deserializable message of byte slice
     fn unpack(data: &[u8]) -> Self;
 }
 
-impl<T: Transferable> Packed for T {
+impl<T: Serialize + for<'de> Deserialize<'de>> Packed for T {
     fn pack(&self) -> Vec<u8> {
-        bincode::serialize(&self).expect("can't serialize a transferable object")
+        bincode::serialize(&self).expect("can't serialize an agent message")
     }
 
     fn unpack(data: &[u8]) -> Self {
-        bincode::deserialize(&data).expect("can't deserialize a transferable object")
+        bincode::deserialize(&data).expect("can't deserialize an agent message")
     }
 }
 
-/// Id of responses handler.
-#[derive(Serialize, Deserialize, Eq, PartialEq, Hash, Clone, Copy)]
-pub struct HandlerId(usize);
+/// Type alias to a sharable Slab that owns optional callbacks that emit messages of the type of the specified Agent.
+type SharedOutputSlab<AGN> = Shared<Slab<Option<Callback<<AGN as Agent>::Output>>>>;
 
-impl From<usize> for HandlerId {
-    fn from(id: usize) -> Self {
-        HandlerId(id)
-    }
-}
+/// Id of responses handler.
+#[derive(Debug, Serialize, Deserialize, Eq, PartialEq, Hash, Clone, Copy)]
+pub struct HandlerId(usize, bool);
 
 impl HandlerId {
+    fn new(id: usize, respondable: bool) -> Self {
+        HandlerId(id, respondable)
+    }
     fn raw_id(self) -> usize {
         self.0
     }
+    /// Indicates if a handler id corresponds to callback in the Agent runtime.
+    pub fn is_respondable(self) -> bool {
+        self.1
+    }
 }
 
-/// This traits allow to get addres or register worker.
+/// This trait allows registering or getting the address of a worker.
 pub trait Bridged: Agent + Sized + 'static {
     /// Creates a messaging bridge between a worker and the component.
     fn bridge(callback: Callback<Self::Output>) -> Box<dyn Bridge<Self>>;
 }
 
+/// This trait allows the creation of a dispatcher to an existing agent that will not send replies when messages are sent.
+pub trait Dispatched: Agent + Sized + 'static {
+    /// Creates a dispatcher to the agent that will not send messages back.
+    ///
+    /// # Note
+    /// Dispatchers don't have `HandlerId`s and therefore `Agent::handle` will be supplied `None`
+    /// for the `id` parameter, and `connected` and `disconnected` will not be called.
+    ///
+    /// # Important
+    /// Because the Agents using Context or Public reaches use the number of existing bridges to
+    /// keep track of if the agent itself should exist, creating dispatchers will not guarantee that
+    /// an Agent will exist to service requests sent from Dispatchers. You **must** keep at least one
+    /// bridge around if you wish to use a dispatcher. If you are using agents in a write-only manner,
+    /// then it is suggested that you create a bridge that handles no-op responses as high up in the
+    /// component hierarchy as possible - oftentimes the root component for simplicity's sake.
+    fn dispatcher() -> Dispatcher<Self>;
+}
+
+/// A newtype around a bridge to indicate that it is distinct from a normal bridge
+pub struct Dispatcher<T>(Box<dyn Bridge<T>>);
+
+impl<T> fmt::Debug for Dispatcher<T> {
+    fn fmt(&self, f: &mut fmt::Formatter<'_>) -> fmt::Result {
+        f.write_str("Dispatcher<_>")
+    }
+}
+
+impl<T> Deref for Dispatcher<T> {
+    type Target = dyn Bridge<T>;
+
+    fn deref(&self) -> &Self::Target {
+        self.0.deref()
+    }
+}
+impl<T> DerefMut for Dispatcher<T> {
+    fn deref_mut(&mut self) -> &mut Self::Target {
+        self.0.deref_mut()
+    }
+}
+
+/// Marker trait to indicate which Discoverers are able to be used with dispatchers.
+pub trait Dispatchable: Discoverer {}
+
 /// Implements rules to register a worker in a separate thread.
 pub trait Threaded {
     /// Executes an agent in the current environment.
@@ -92,25 +142,25 @@ where
         let scope = AgentScope::<T>::new();
         let responder = WorkerResponder {};
         let link = AgentLink::connect(&scope, responder);
-        let upd = AgentUpdate::Create(link);
+        let upd = AgentLifecycleEvent::Create(link);
         scope.send(upd);
         let handler = move |data: Vec<u8>| {
             let msg = ToWorker::<T::Input>::unpack(&data);
             match msg {
                 ToWorker::Connected(id) => {
-                    let upd = AgentUpdate::Connected(id);
+                    let upd = AgentLifecycleEvent::Connected(id);
                     scope.send(upd);
                 }
                 ToWorker::ProcessInput(id, value) => {
-                    let upd = AgentUpdate::Input(value, id);
+                    let upd = AgentLifecycleEvent::Input(value, id);
                     scope.send(upd);
                 }
                 ToWorker::Disconnected(id) => {
-                    let upd = AgentUpdate::Disconnected(id);
+                    let upd = AgentLifecycleEvent::Disconnected(id);
                     scope.send(upd);
                 }
                 ToWorker::Destroy => {
-                    let upd = AgentUpdate::Destroy;
+                    let upd = AgentLifecycleEvent::Destroy;
                     scope.send(upd);
                     js! {
                         // Terminates web worker
@@ -136,7 +186,17 @@ where
     T: Agent,
 {
     fn bridge(callback: Callback<Self::Output>) -> Box<dyn Bridge<Self>> {
-        Self::Reach::spawn_or_join(callback)
+        Self::Reach::spawn_or_join(Some(callback))
+    }
+}
+
+impl<T> Dispatched for T
+where
+    T: Agent,
+    <T as Agent>::Reach: Dispatchable,
+{
+    fn dispatcher() -> Dispatcher<T> {
+        Dispatcher(Self::Reach::spawn_or_join::<T>(None))
     }
 }
 
@@ -144,8 +204,12 @@ where
 #[doc(hidden)]
 pub trait Discoverer {
     /// Spawns an agent and returns `Bridge` implementation.
-    fn spawn_or_join<AGN: Agent>(_callback: Callback<AGN::Output>) -> Box<dyn Bridge<AGN>> {
-        unimplemented!();
+    fn spawn_or_join<AGN: Agent>(_callback: Option<Callback<AGN::Output>>) -> Box<dyn Bridge<AGN>> {
+        unimplemented!(
+            "The Reach type that you tried to use with this Agent does not have
+Discoverer properly implemented for it yet. Please see
+https://docs.rs/yew/latest/yew/agent/ for other Reach options."
+        );
     }
 }
 
@@ -159,7 +223,7 @@ pub trait Bridge<AGN: Agent> {
 
 struct LocalAgent<AGN: Agent> {
     scope: AgentScope<AGN>,
-    slab: Shared<Slab<Callback<AGN::Output>>>,
+    slab: SharedOutputSlab<AGN>,
 }
 
 type Last = bool;
@@ -173,15 +237,17 @@ impl<AGN: Agent> LocalAgent<AGN> {
         }
     }
 
-    fn slab(&self) -> Shared<Slab<Callback<AGN::Output>>> {
+    fn slab(&self) -> SharedOutputSlab<AGN> {
         self.slab.clone()
     }
 
-    fn create_bridge(&mut self, callback: Callback<AGN::Output>) -> ContextBridge<AGN> {
-        let id = self.slab.borrow_mut().insert(callback);
+    fn create_bridge(&mut self, callback: Option<Callback<AGN::Output>>) -> ContextBridge<AGN> {
+        let respondable = callback.is_some();
+        let id: usize = self.slab.borrow_mut().insert(callback);
+        let id = HandlerId::new(id, respondable);
         ContextBridge {
             scope: self.scope.clone(),
-            id: id.into(),
+            id,
         }
     }
 
@@ -197,51 +263,63 @@ thread_local! {
 }
 
 /// Create a single instance in the current thread.
+#[allow(missing_debug_implementations)]
 pub struct Context;
 
 impl Discoverer for Context {
-    fn spawn_or_join<AGN: Agent>(callback: Callback<AGN::Output>) -> Box<dyn Bridge<AGN>> {
+    fn spawn_or_join<AGN: Agent>(callback: Option<Callback<AGN::Output>>) -> Box<dyn Bridge<AGN>> {
         let mut scope_to_init = None;
         let bridge = LOCAL_AGENTS_POOL.with(|pool| {
             match pool.borrow_mut().entry::<LocalAgent<AGN>>() {
-                Entry::Occupied(mut entry) => {
+                anymap::Entry::Occupied(mut entry) => {
                     // TODO Insert callback!
                     entry.get_mut().create_bridge(callback)
                 }
-                Entry::Vacant(entry) => {
+                anymap::Entry::Vacant(entry) => {
                     let scope = AgentScope::<AGN>::new();
                     let launched = LocalAgent::new(&scope);
                     let responder = SlabResponder {
                         slab: launched.slab(),
                     };
-                    scope_to_init = Some((scope.clone(), responder));
+                    scope_to_init = Some((scope, responder));
                     entry.insert(launched).create_bridge(callback)
                 }
             }
         });
         if let Some((scope, responder)) = scope_to_init {
             let agent_link = AgentLink::connect(&scope, responder);
-            let upd = AgentUpdate::Create(agent_link);
+            let upd = AgentLifecycleEvent::Create(agent_link);
             scope.send(upd);
         }
-        let upd = AgentUpdate::Connected(bridge.id);
+        let upd = AgentLifecycleEvent::Connected(bridge.id);
         bridge.scope.send(upd);
         Box::new(bridge)
     }
 }
 
+impl Dispatchable for Context {}
+
 struct SlabResponder<AGN: Agent> {
-    slab: Shared<Slab<Callback<AGN::Output>>>,
+    slab: Shared<Slab<Option<Callback<AGN::Output>>>>,
 }
 
 impl<AGN: Agent> Responder<AGN> for SlabResponder<AGN> {
-    fn response(&self, id: HandlerId, output: AGN::Output) {
-        let callback = self.slab.borrow().get(id.raw_id()).cloned();
-        if let Some(callback) = callback {
-            callback.emit(output);
-        } else {
-            warn!("Id of handler not exists <slab>: {}", id.raw_id());
-        }
+    fn respond(&self, id: HandlerId, output: AGN::Output) {
+        locate_callback_and_respond::<AGN>(&self.slab, id, output);
+    }
+}
+
+/// The slab contains the callback, the id is used to look up the callback,
+/// and the output is the message that will be sent via the callback.
+fn locate_callback_and_respond<AGN: Agent>(
+    slab: &SharedOutputSlab<AGN>,
+    id: HandlerId,
+    output: AGN::Output,
+) {
+    match slab.borrow().get(id.raw_id()).cloned() {
+        Some(Some(callback)) => callback.emit(output),
+        Some(None) => warn!("The Id of the handler: {}, while present in the slab, is not associated with a callback.", id.raw_id()),
+        None => warn!("Id of handler does not exist in the slab: {}.", id.raw_id()),
     }
 }
 
@@ -252,7 +330,7 @@ struct ContextBridge<AGN: Agent> {
 
 impl<AGN: Agent> Bridge<AGN> for ContextBridge<AGN> {
     fn send(&mut self, msg: AGN::Input) {
-        let upd = AgentUpdate::Input(msg, self.id);
+        let upd = AgentLifecycleEvent::Input(msg, self.id);
         self.scope.send(upd);
     }
 }
@@ -267,10 +345,12 @@ impl<AGN: Agent> Drop for ContextBridge<AGN> {
                     false
                 }
             };
-            let upd = AgentUpdate::Disconnected(self.id);
+
+            let upd = AgentLifecycleEvent::Disconnected(self.id);
             self.scope.send(upd);
+
             if terminate_worker {
-                let upd = AgentUpdate::Destroy;
+                let upd = AgentLifecycleEvent::Destroy;
                 self.scope.send(upd);
                 pool.borrow_mut().remove::<LocalAgent<AGN>>();
             }
@@ -279,30 +359,32 @@ impl<AGN: Agent> Drop for ContextBridge<AGN> {
 }
 
 /// Create an instance in the current thread.
+#[allow(missing_debug_implementations)]
 pub struct Job;
 
 impl Discoverer for Job {
-    fn spawn_or_join<AGN: Agent>(callback: Callback<AGN::Output>) -> Box<dyn Bridge<AGN>> {
+    fn spawn_or_join<AGN: Agent>(callback: Option<Callback<AGN::Output>>) -> Box<dyn Bridge<AGN>> {
+        let callback = callback.expect("Callback required for Job");
         let scope = AgentScope::<AGN>::new();
         let responder = CallbackResponder { callback };
         let agent_link = AgentLink::connect(&scope, responder);
-        let upd = AgentUpdate::Create(agent_link);
+        let upd = AgentLifecycleEvent::Create(agent_link);
         scope.send(upd);
-        let upd = AgentUpdate::Connected(SINGLETON_ID);
+        let upd = AgentLifecycleEvent::Connected(SINGLETON_ID);
         scope.send(upd);
         let bridge = JobBridge { scope };
         Box::new(bridge)
     }
 }
 
-const SINGLETON_ID: HandlerId = HandlerId(0);
+const SINGLETON_ID: HandlerId = HandlerId(0, true);
 
 struct CallbackResponder<AGN: Agent> {
     callback: Callback<AGN::Output>,
 }
 
 impl<AGN: Agent> Responder<AGN> for CallbackResponder<AGN> {
-    fn response(&self, id: HandlerId, output: AGN::Output) {
+    fn respond(&self, id: HandlerId, output: AGN::Output) {
         assert_eq!(id.raw_id(), SINGLETON_ID.raw_id());
         self.callback.emit(output);
     }
@@ -314,16 +396,16 @@ struct JobBridge<AGN: Agent> {
 
 impl<AGN: Agent> Bridge<AGN> for JobBridge<AGN> {
     fn send(&mut self, msg: AGN::Input) {
-        let upd = AgentUpdate::Input(msg, SINGLETON_ID);
+        let upd = AgentLifecycleEvent::Input(msg, SINGLETON_ID);
         self.scope.send(upd);
     }
 }
 
 impl<AGN: Agent> Drop for JobBridge<AGN> {
     fn drop(&mut self) {
-        let upd = AgentUpdate::Disconnected(SINGLETON_ID);
+        let upd = AgentLifecycleEvent::Disconnected(SINGLETON_ID);
         self.scope.send(upd);
-        let upd = AgentUpdate::Destroy;
+        let upd = AgentLifecycleEvent::Destroy;
         self.scope.send(upd);
     }
 }
@@ -331,10 +413,12 @@ impl<AGN: Agent> Drop for JobBridge<AGN> {
 // <<< SEPARATE THREAD >>>
 
 /// Create a new instance for every bridge.
+#[allow(missing_debug_implementations)]
 pub struct Private;
 
 impl Discoverer for Private {
-    fn spawn_or_join<AGN: Agent>(callback: Callback<AGN::Output>) -> Box<dyn Bridge<AGN>> {
+    fn spawn_or_join<AGN: Agent>(callback: Option<Callback<AGN::Output>>) -> Box<dyn Bridge<AGN>> {
+        let callback = callback.expect("Callback required for Private agents");
         let handler = move |data: Vec<u8>| {
             let msg = FromWorker::<AGN::Output>::unpack(&data);
             match msg {
@@ -371,6 +455,12 @@ pub struct PrivateBridge<T: Agent> {
     _agent: PhantomData<T>,
 }
 
+impl<AGN: Agent> fmt::Debug for PrivateBridge<AGN> {
+    fn fmt(&self, f: &mut fmt::Formatter<'_>) -> fmt::Result {
+        f.write_str("PrivateBridge<_>")
+    }
+}
+
 impl<AGN: Agent> Bridge<AGN> for PrivateBridge<AGN> {
     fn send(&mut self, msg: AGN::Input) {
         // TODO Important! Implement.
@@ -394,22 +484,21 @@ impl<AGN: Agent> Drop for PrivateBridge<AGN> {
 
 struct RemoteAgent<AGN: Agent> {
     worker: Value,
-    slab: Shared<Slab<Callback<AGN::Output>>>,
+    slab: SharedOutputSlab<AGN>,
 }
 
 impl<AGN: Agent> RemoteAgent<AGN> {
-    pub fn new(worker: &Value, slab: Shared<Slab<Callback<AGN::Output>>>) -> Self {
-        RemoteAgent {
-            worker: worker.clone(),
-            slab,
-        }
+    pub fn new(worker: Value, slab: SharedOutputSlab<AGN>) -> Self {
+        RemoteAgent { worker, slab }
     }
 
-    fn create_bridge(&mut self, callback: Callback<AGN::Output>) -> PublicBridge<AGN> {
-        let id = self.slab.borrow_mut().insert(callback);
+    fn create_bridge(&mut self, callback: Option<Callback<AGN::Output>>) -> PublicBridge<AGN> {
+        let respondable = callback.is_some();
+        let id: usize = self.slab.borrow_mut().insert(callback);
+        let id = HandlerId::new(id, respondable);
         PublicBridge {
             worker: self.worker.clone(),
-            id: id.into(),
+            id,
             _agent: PhantomData,
         }
     }
@@ -423,39 +512,48 @@ impl<AGN: Agent> RemoteAgent<AGN> {
 
 thread_local! {
     static REMOTE_AGENTS_POOL: RefCell<AnyMap> = RefCell::new(AnyMap::new());
+    static REMOTE_AGENTS_LOADED: RefCell<HashSet<TypeId>> = RefCell::new(HashSet::new());
+    static REMOTE_AGENTS_EARLY_MSGS_QUEUE: RefCell<HashMap<TypeId, Vec<Vec<u8>>>> = RefCell::new(HashMap::new());
 }
 
 /// Create a single instance in a tab.
+#[allow(missing_debug_implementations)]
 pub struct Public;
 
 impl Discoverer for Public {
-    fn spawn_or_join<AGN: Agent>(callback: Callback<AGN::Output>) -> Box<dyn Bridge<AGN>> {
+    fn spawn_or_join<AGN: Agent>(callback: Option<Callback<AGN::Output>>) -> Box<dyn Bridge<AGN>> {
         let bridge = REMOTE_AGENTS_POOL.with(|pool| {
             match pool.borrow_mut().entry::<RemoteAgent<AGN>>() {
-                Entry::Occupied(mut entry) => {
+                anymap::Entry::Occupied(mut entry) => {
                     // TODO Insert callback!
                     entry.get_mut().create_bridge(callback)
                 }
-                Entry::Vacant(entry) => {
-                    let slab_base: Shared<Slab<Callback<AGN::Output>>> =
+                anymap::Entry::Vacant(entry) => {
+                    let slab: Shared<Slab<Option<Callback<AGN::Output>>>> =
                         Rc::new(RefCell::new(Slab::new()));
-                    let slab = slab_base.clone();
-                    let handler = move |data: Vec<u8>| {
-                        let msg = FromWorker::<AGN::Output>::unpack(&data);
-                        match msg {
-                            FromWorker::WorkerLoaded => {
-                                // TODO Use `AtomicBool` lock to check its loaded
-                                // TODO Send `Connected` message
-                            }
-                            FromWorker::ProcessOutput(id, output) => {
-                                let callback = slab.borrow().get(id.raw_id()).cloned();
-                                if let Some(callback) = callback {
-                                    callback.emit(output);
-                                } else {
-                                    warn!(
-                                        "Id of handler for remote worker not exists <slab>: {}",
-                                        id.raw_id()
-                                    );
+                    let handler = {
+                        let slab = slab.clone();
+                        move |data: Vec<u8>, worker: Value| {
+                            let msg = FromWorker::<AGN::Output>::unpack(&data);
+                            match msg {
+                                FromWorker::WorkerLoaded => {
+                                    // TODO Send `Connected` message
+                                    let _ = REMOTE_AGENTS_LOADED.with(|local| {
+                                        local.borrow_mut().insert(TypeId::of::<AGN>())
+                                    });
+                                    REMOTE_AGENTS_EARLY_MSGS_QUEUE.with(|local| {
+                                        if let Some(msgs) =
+                                            local.borrow_mut().get_mut(&TypeId::of::<AGN>())
+                                        {
+                                            for msg in msgs.drain(..) {
+                                                let worker = &worker;
+                                                js! {@{worker}.postMessage(@{msg});};
+                                            }
+                                        }
+                                    });
+                                }
+                                FromWorker::ProcessOutput(id, output) => {
+                                    locate_callback_and_respond::<AGN>(&slab, id, output);
                                 }
                             }
                         }
@@ -465,11 +563,11 @@ impl Discoverer for Public {
                         var worker = new Worker(@{name_of_resource});
                         var handler = @{handler};
                         worker.onmessage = function(event) {
-                            handler(event.data);
+                            handler(event.data, worker);
                         };
                         return worker;
                     };
-                    let launched = RemoteAgent::new(&worker, slab_base);
+                    let launched = RemoteAgent::new(worker, slab);
                     entry.insert(launched).create_bridge(callback)
                 }
             }
@@ -478,32 +576,65 @@ impl Discoverer for Public {
     }
 }
 
+impl Dispatchable for Public {}
+
 /// A connection manager for components interaction with workers.
-pub struct PublicBridge<T: Agent> {
+pub struct PublicBridge<AGN: Agent> {
     worker: Value,
     id: HandlerId,
-    _agent: PhantomData<T>,
+    _agent: PhantomData<AGN>,
+}
+
+impl<AGN: Agent> fmt::Debug for PublicBridge<AGN> {
+    fn fmt(&self, f: &mut fmt::Formatter<'_>) -> fmt::Result {
+        f.write_str("PublicBridge<_>")
+    }
 }
 
 impl<AGN: Agent> PublicBridge<AGN> {
-    fn send_to_remote(&self, msg: ToWorker<AGN::Input>) {
-        // TODO Important! Implement.
-        // Use a queue to collect a messages if an instance is not ready
-        // and send them to an agent when it will reported readiness.
-        let msg = msg.pack();
-        let worker = &self.worker;
-        js! {
-            var worker = @{worker};
-            var bytes = @{msg};
-            worker.postMessage(bytes);
-        };
+    fn worker_is_loaded(&self) -> bool {
+        REMOTE_AGENTS_LOADED.with(|local| local.borrow().contains(&TypeId::of::<AGN>()))
+    }
+
+    fn msg_to_queue(&self, msg: Vec<u8>) {
+        REMOTE_AGENTS_EARLY_MSGS_QUEUE.with(|local| {
+            match local.borrow_mut().entry(TypeId::of::<AGN>()) {
+                hash_map::Entry::Vacant(record) => {
+                    record.insert({
+                        let mut v = Vec::new();
+                        v.push(msg);
+                        v
+                    });
+                }
+                hash_map::Entry::Occupied(ref mut record) => {
+                    record.get_mut().push(msg);
+                }
+            }
+        });
     }
 }
 
+fn send_to_remote<AGN: Agent>(worker: &Value, msg: ToWorker<AGN::Input>) {
+    // TODO Important! Implement.
+    // Use a queue to collect a messages if an instance is not ready
+    // and send them to an agent when it will reported readiness.
+    let msg = msg.pack();
+    js! {
+        var worker = @{worker};
+        var bytes = @{msg};
+        worker.postMessage(bytes);
+    };
+}
+
 impl<AGN: Agent> Bridge<AGN> for PublicBridge<AGN> {
     fn send(&mut self, msg: AGN::Input) {
         let msg = ToWorker::ProcessInput(self.id, msg);
-        self.send_to_remote(msg);
+        if self.worker_is_loaded() {
+            send_to_remote::<AGN>(&self.worker, msg);
+        } else {
+            let msg = msg.pack();
+            self.msg_to_queue(msg);
+        }
     }
 }
 
@@ -518,31 +649,38 @@ impl<AGN: Agent> Drop for PublicBridge<AGN> {
                 }
             };
             let upd = ToWorker::Disconnected(self.id);
-            self.send_to_remote(upd);
+            send_to_remote::<AGN>(&self.worker, upd);
             if terminate_worker {
                 let upd = ToWorker::Destroy;
-                self.send_to_remote(upd);
+                send_to_remote::<AGN>(&self.worker, upd);
                 pool.borrow_mut().remove::<RemoteAgent<AGN>>();
+                REMOTE_AGENTS_LOADED.with(|pool| {
+                    pool.borrow_mut().remove(&TypeId::of::<AGN>());
+                });
+                REMOTE_AGENTS_EARLY_MSGS_QUEUE.with(|pool| {
+                    pool.borrow_mut().remove(&TypeId::of::<AGN>());
+                });
             }
         });
     }
 }
 
 /// Create a single instance in a browser.
+#[allow(missing_debug_implementations)]
 pub struct Global;
 
 impl Discoverer for Global {}
 
 /// Declares the behavior of the agent.
 pub trait Agent: Sized + 'static {
-    /// Reach capaility of the agent.
+    /// Reach capability of the agent.
     type Reach: Discoverer;
-    /// Type of an input messagae.
+    /// Type of an input message.
     type Message;
     /// Incoming message type.
-    type Input: Transferable;
+    type Input: Serialize + for<'de> Deserialize<'de>;
     /// Outgoing message type.
-    type Output: Transferable;
+    type Output: Serialize + for<'de> Deserialize<'de>;
 
     /// Creates an instance of an agent.
     fn create(link: AgentLink<Self>) -> Self;
@@ -554,12 +692,12 @@ pub trait Agent: Sized + 'static {
     fn connected(&mut self, _id: HandlerId) {}
 
     /// This method called on every incoming message.
-    fn handle(&mut self, msg: Self::Input, id: HandlerId);
+    fn handle_input(&mut self, msg: Self::Input, id: HandlerId);
 
     /// This method called on when a new bridge destroyed.
     fn disconnected(&mut self, _id: HandlerId) {}
 
-    /// Creates an instance of an agent.
+    /// This method called when the agent is destroyed.
     fn destroy(&mut self) {}
 
     /// Represents the name of loading resorce for remote workers which
@@ -569,11 +707,17 @@ pub trait Agent: Sized + 'static {
     }
 }
 
-/// This sctruct holds a reference to a component and to a global scheduler.
+/// This struct holds a reference to a component and to a global scheduler.
 pub struct AgentScope<AGN: Agent> {
     shared_agent: Shared<AgentRunnable<AGN>>,
 }
 
+impl<AGN: Agent> fmt::Debug for AgentScope<AGN> {
+    fn fmt(&self, f: &mut fmt::Formatter<'_>) -> fmt::Result {
+        f.write_str("AgentScope<_>")
+    }
+}
+
 impl<AGN: Agent> Clone for AgentScope<AGN> {
     fn clone(&self) -> Self {
         AgentScope {
@@ -583,12 +727,13 @@ impl<AGN: Agent> Clone for AgentScope<AGN> {
 }
 
 impl<AGN: Agent> AgentScope<AGN> {
-    fn new() -> Self {
+    /// Create agent scope
+    pub fn new() -> Self {
         let shared_agent = Rc::new(RefCell::new(AgentRunnable::new()));
         AgentScope { shared_agent }
     }
-
-    fn send(&self, update: AgentUpdate<AGN>) {
+    /// Schedule message for sending to agent
+    pub fn send(&self, update: AgentLifecycleEvent<AGN>) {
         let envelope = AgentEnvelope {
             shared_agent: self.shared_agent.clone(),
             update,
@@ -598,14 +743,22 @@ impl<AGN: Agent> AgentScope<AGN> {
     }
 }
 
-trait Responder<AGN: Agent> {
-    fn response(&self, id: HandlerId, output: AGN::Output);
+impl<AGN: Agent> Default for AgentScope<AGN> {
+    fn default() -> Self {
+        Self::new()
+    }
+}
+
+/// Defines communication from Worker to Consumers
+pub trait Responder<AGN: Agent> {
+    /// Implementation for communication channel from Worker to Consumers
+    fn respond(&self, id: HandlerId, output: AGN::Output);
 }
 
 struct WorkerResponder {}
 
 impl<AGN: Agent> Responder<AGN> for WorkerResponder {
-    fn response(&self, id: HandlerId, output: AGN::Output) {
+    fn respond(&self, id: HandlerId, output: AGN::Output) {
         let msg = FromWorker::ProcessOutput(id, output);
         let data = msg.pack();
         js! {
@@ -618,41 +771,55 @@ impl<AGN: Agent> Responder<AGN> for WorkerResponder {
 /// Link to agent's scope for creating callbacks.
 pub struct AgentLink<AGN: Agent> {
     scope: AgentScope<AGN>,
-    responder: Box<dyn Responder<AGN>>,
+    responder: Rc<dyn Responder<AGN>>,
 }
 
 impl<AGN: Agent> AgentLink<AGN> {
     /// Create link for a scope.
-    fn connect<T>(scope: &AgentScope<AGN>, responder: T) -> Self
+    pub fn connect<T>(scope: &AgentScope<AGN>, responder: T) -> Self
     where
         T: Responder<AGN> + 'static,
     {
         AgentLink {
             scope: scope.clone(),
-            responder: Box::new(responder),
+            responder: Rc::new(responder),
         }
     }
 
-    /// Send response to an actor.
-    pub fn response(&self, id: HandlerId, output: AGN::Output) {
-        self.responder.response(id, output);
+    /// Send response to an agent.
+    pub fn respond(&self, id: HandlerId, output: AGN::Output) {
+        self.responder.respond(id, output);
     }
 
-    /// This method sends messages back to the component's loop.
-    pub fn send_back<F, IN>(&self, function: F) -> Callback<IN>
+    /// Create a callback which will send a message to the agent when invoked.
+    pub fn callback<F, IN>(&self, function: F) -> Callback<IN>
     where
         F: Fn(IN) -> AGN::Message + 'static,
     {
         let scope = self.scope.clone();
         let closure = move |input| {
             let output = function(input);
-            let msg = AgentUpdate::Message(output);
-            scope.clone().send(msg);
+            scope.send(AgentLifecycleEvent::Message(output));
         };
         closure.into()
     }
 }
 
+impl<AGN: Agent> fmt::Debug for AgentLink<AGN> {
+    fn fmt(&self, f: &mut fmt::Formatter<'_>) -> fmt::Result {
+        f.write_str("AgentLink<_>")
+    }
+}
+
+impl<AGN: Agent> Clone for AgentLink<AGN> {
+    fn clone(&self) -> Self {
+        AgentLink {
+            scope: self.scope.clone(),
+            responder: self.responder.clone(),
+        }
+    }
+}
+
 struct AgentRunnable<AGN> {
     agent: Option<AGN>,
     // TODO Use agent field to control create message this flag
@@ -668,18 +835,26 @@ impl<AGN> AgentRunnable<AGN> {
     }
 }
 
-enum AgentUpdate<AGN: Agent> {
+/// Local Agent messages
+#[derive(Debug)]
+pub enum AgentLifecycleEvent<AGN: Agent> {
+    /// Request to create link
     Create(AgentLink<AGN>),
+    /// Internal Agent message
     Message(AGN::Message),
+    /// Client connected
     Connected(HandlerId),
+    /// Received mesasge from Client
     Input(AGN::Input, HandlerId),
+    /// Client disconnected
     Disconnected(HandlerId),
+    /// Request to destroy agent
     Destroy,
 }
 
 struct AgentEnvelope<AGN: Agent> {
     shared_agent: Shared<AgentRunnable<AGN>>,
-    update: AgentUpdate<AGN>,
+    update: AgentLifecycleEvent<AGN>,
 }
 
 impl<AGN> Runnable for AgentEnvelope<AGN>
@@ -692,34 +867,34 @@ where
             return;
         }
         match self.update {
-            AgentUpdate::Create(env) => {
-                this.agent = Some(AGN::create(env));
+            AgentLifecycleEvent::Create(link) => {
+                this.agent = Some(AGN::create(link));
             }
-            AgentUpdate::Message(msg) => {
+            AgentLifecycleEvent::Message(msg) => {
                 this.agent
                     .as_mut()
                     .expect("agent was not created to process messages")
                     .update(msg);
             }
-            AgentUpdate::Connected(id) => {
+            AgentLifecycleEvent::Connected(id) => {
                 this.agent
                     .as_mut()
                     .expect("agent was not created to send a connected message")
                     .connected(id);
             }
-            AgentUpdate::Input(inp, id) => {
+            AgentLifecycleEvent::Input(inp, id) => {
                 this.agent
                     .as_mut()
                     .expect("agent was not created to process inputs")
-                    .handle(inp, id);
+                    .handle_input(inp, id);
             }
-            AgentUpdate::Disconnected(id) => {
+            AgentLifecycleEvent::Disconnected(id) => {
                 this.agent
                     .as_mut()
                     .expect("agent was not created to send a disconnected message")
                     .disconnected(id);
             }
-            AgentUpdate::Destroy => {
+            AgentLifecycleEvent::Destroy => {
                 let mut agent = this
                     .agent
                     .take()
diff --git a/src/app.rs b/src/app.rs
index 2ea32d9924b..3e6a9c2835e 100644
--- a/src/app.rs
+++ b/src/app.rs
@@ -1,10 +1,11 @@
-//! This module contains `App` struct which used to bootstrap
+//! This module contains the `App` struct, which is used to bootstrap
 //! a component in an isolated scope.
 
-use crate::html::{Component, Renderable, Scope};
+use crate::html::{Component, NodeRef, Scope};
 use stdweb::web::{document, Element, INode, IParentNode};
 
 /// An application instance.
+#[derive(Debug)]
 pub struct App<COMP: Component> {
     /// `Scope` holder
     scope: Scope<COMP>,
@@ -12,7 +13,7 @@ pub struct App<COMP: Component> {
 
 impl<COMP> Default for App<COMP>
 where
-    COMP: Component + Renderable<COMP>,
+    COMP: Component,
 {
     fn default() -> Self {
         App::new()
@@ -21,7 +22,7 @@ where
 
 impl<COMP> App<COMP>
 where
-    COMP: Component + Renderable<COMP>,
+    COMP: Component,
     COMP::Properties: Default,
 {
     /// The main entrypoint of a yew program. It works similarly to the `program`
@@ -31,8 +32,12 @@ where
     /// use the `mount_with_props` method.
     pub fn mount(self, element: Element) -> Scope<COMP> {
         clear_element(&element);
-        self.scope
-            .mount_in_place(element, None, None, COMP::Properties::default())
+        self.scope.mount_in_place(
+            element,
+            None,
+            NodeRef::default(),
+            COMP::Properties::default(),
+        )
     }
 
     /// Alias to `mount("body", ...)`.
@@ -61,14 +66,18 @@ where
         html_element
             .remove_child(&body_element)
             .expect("can't remove body child");
-        self.scope
-            .mount_in_place(html_element, None, None, COMP::Properties::default())
+        self.scope.mount_in_place(
+            html_element,
+            None,
+            NodeRef::default(),
+            COMP::Properties::default(),
+        )
     }
 }
 
 impl<COMP> App<COMP>
 where
-    COMP: Component + Renderable<COMP>,
+    COMP: Component,
 {
     /// Creates a new `App` with a component in a context.
     pub fn new() -> Self {
@@ -82,7 +91,8 @@ where
     /// will render the model to a virtual DOM tree.
     pub fn mount_with_props(self, element: Element, props: COMP::Properties) -> Scope<COMP> {
         clear_element(&element);
-        self.scope.mount_in_place(element, None, None, props)
+        self.scope
+            .mount_in_place(element, None, NodeRef::default(), props)
     }
 
     /// Alias to `mount_with_props("body", ...)`.
@@ -111,7 +121,8 @@ where
         html_element
             .remove_child(&body_element)
             .expect("can't remove body child");
-        self.scope.mount_in_place(html_element, None, None, props)
+        self.scope
+            .mount_in_place(html_element, None, NodeRef::default(), props)
     }
 }
 
diff --git a/src/callback.rs b/src/callback.rs
index 1f56dec59ea..d53810e41e3 100644
--- a/src/callback.rs
+++ b/src/callback.rs
@@ -41,18 +41,25 @@ impl<IN> Callback<IN> {
     pub fn emit(&self, value: IN) {
         (self.0)(value);
     }
+
+    /// Creates a no-op callback which can be used when it is not suitable to use an
+    /// `Option<Callback>`.
+    pub fn noop() -> Self {
+        Self::from(|_| {})
+    }
 }
 
 impl<IN: 'static> Callback<IN> {
     /// Changes input type of the callback to another.
     /// Works like common `map` method but in an opposite direction.
-    pub fn reform<F, T>(self, func: F) -> Callback<T>
+    pub fn reform<F, T>(&self, func: F) -> Callback<T>
     where
         F: Fn(T) -> IN + 'static,
     {
+        let this = self.clone();
         let func = move |input| {
             let output = func(input);
-            self.clone().emit(output);
+            this.emit(output);
         };
         Callback::from(func)
     }
diff --git a/src/components/select.rs b/src/components/select.rs
index 3b1dc6b768d..a28f5d61892 100644
--- a/src/components/select.rs
+++ b/src/components/select.rs
@@ -3,36 +3,56 @@
 //! helps you to track selected value in an original type. Example:
 //!
 //! ```
+//!# use yew::{Html, Component, components::Select, ComponentLink, html};
+//! #[derive(PartialEq, Clone)]
 //! enum Scene {
 //!     First,
 //!     Second,
 //! }
+//!# struct Model { link: ComponentLink<Self> };
+//!# impl Component for Model {
+//!#     type Message = ();type Properties = ();
+//!#     fn create(props: Self::Properties,link: ComponentLink<Self>) -> Self {unimplemented!()}
+//!#     fn update(&mut self,msg: Self::Message) -> bool {unimplemented!()}
+//!#     fn view(&self) -> Html {unimplemented!()}}
+//! impl ToString for Scene {
+//!     fn to_string(&self) -> String {
+//!         match self {
+//!             Scene::First => "First".to_string(),
+//!             Scene::Second => "Second".to_string()
+//!         }
+//!     }
+//! }
 //!
-//! fn view() -> Html<Model> {
+//! fn view(link: ComponentLink<Model>) -> Html {
 //!     let scenes = vec![Scene::First, Scene::Second];
 //!     html! {
-//!         <Select<Scenes> options=scenes />
+//!         <Select<Scene> options=scenes onchange=link.callback(|_| ()) />
 //!     }
 //! }
+//! ```
 
 use crate::callback::Callback;
-use crate::html::{ChangeData, Component, ComponentLink, Html, Renderable, ShouldRender};
+use crate::html::{ChangeData, Component, ComponentLink, Html, ShouldRender};
 use crate::macros::{html, Properties};
 
 /// `Select` component.
-pub struct Select<T> {
+#[derive(Debug)]
+pub struct Select<T: ToString + PartialEq + Clone + 'static> {
     props: Props<T>,
+    link: ComponentLink<Self>,
 }
 
 /// Internal message of the component.
+#[derive(Debug)]
 pub enum Msg {
     /// This message indicates the option with id selected.
     Selected(Option<usize>),
 }
 
 /// Properties of `Select` component.
-#[derive(PartialEq, Properties)]
-pub struct Props<T> {
+#[derive(PartialEq, Clone, Properties, Debug)]
+pub struct Props<T: Clone> {
     /// Initially selected value.
     pub selected: Option<T>,
     /// Disabled the component's selector.
@@ -46,13 +66,13 @@ pub struct Props<T> {
 
 impl<T> Component for Select<T>
 where
-    T: PartialEq + Clone + 'static,
+    T: ToString + PartialEq + Clone + 'static,
 {
     type Message = Msg;
     type Properties = Props<T>;
 
-    fn create(props: Self::Properties, _: ComponentLink<Self>) -> Self {
-        Self { props }
+    fn create(props: Self::Properties, link: ComponentLink<Self>) -> Self {
+        Self { props, link }
     }
 
     fn update(&mut self, msg: Self::Message) -> ShouldRender {
@@ -73,13 +93,8 @@ where
         self.props = props;
         true
     }
-}
 
-impl<T> Renderable<Select<T>> for Select<T>
-where
-    T: ToString + PartialEq + Clone + 'static,
-{
-    fn view(&self) -> Html<Self> {
+    fn view(&self) -> Html {
         let selected = self.props.selected.as_ref();
         let view_option = |value: &T| {
             let flag = selected == Some(value);
@@ -87,19 +102,9 @@ where
                 <option selected=flag>{ value.to_string() }</option>
             }
         };
+
         html! {
-            <select disabled=self.props.disabled
-                    onchange=|event| {
-                        match event {
-                            ChangeData::Select(elem) => {
-                                let value = elem.selected_index().map(|x| x as usize);
-                                Msg::Selected(value)
-                            }
-                            _ => {
-                                unreachable!();
-                            }
-                        }
-                    }>
+            <select disabled=self.props.disabled onchange=self.onchange()>
                 <option disabled=true selected=selected.is_none()>
                     { "↪" }
                 </option>
@@ -108,3 +113,20 @@ where
         }
     }
 }
+
+impl<T> Select<T>
+where
+    T: ToString + PartialEq + Clone + 'static,
+{
+    fn onchange(&self) -> Callback<ChangeData> {
+        self.link.callback(|event| match event {
+            ChangeData::Select(elem) => {
+                let value = elem.selected_index().map(|x| x as usize);
+                Msg::Selected(value)
+            }
+            _ => {
+                unreachable!();
+            }
+        })
+    }
+}
diff --git a/src/format/bincode.rs b/src/format/bincode.rs
new file mode 100644
index 00000000000..a828dffdf37
--- /dev/null
+++ b/src/format/bincode.rs
@@ -0,0 +1,24 @@
+//! Contains an implementation of Bincode serialization format.
+
+use bincode;
+
+/// A representation of a Bincode data. Use it as wrapper to
+/// set a format you want to use for conversion:
+///
+/// ```rust
+/// // Converts (lazy) data to a Bincode
+///# use yew::format::Bincode;
+///# fn dont_execute() {
+///# let data: String = unimplemented!();
+/// let dump = Bincode(&data);
+///
+/// // Converts Bincode to a data (lazy).
+/// let Bincode(data) = dump;
+///# }
+/// ```
+/// This is a binary only format.
+#[derive(Debug)]
+pub struct Bincode<T>(pub T);
+
+binary_format!(Bincode, bincode::serialize, bincode::deserialize);
+text_format_is_an_error!(Bincode);
diff --git a/src/format/cbor.rs b/src/format/cbor.rs
index 8fcbfb3299b..e6e1bda9ca9 100644
--- a/src/format/cbor.rs
+++ b/src/format/cbor.rs
@@ -5,13 +5,20 @@ use serde_cbor;
 /// A representation of a CBOR data. Use it as wrapper to
 /// set a format you want to use for conversion:
 ///
-/// ```rust
+/// ```
 /// // Converts (lazy) data to a Cbor
+///# use yew::format::Cbor;
+///# fn dont_execute() {
+///# let data: String = unimplemented!();
 /// let dump = Cbor(&data);
 ///
 /// // Converts CBOR string to a data (lazy).
 /// let Cbor(data) = dump;
+///# }
 /// ```
+/// This is a binary only format.
+#[derive(Debug)]
 pub struct Cbor<T>(pub T);
 
 binary_format!(Cbor based on serde_cbor);
+text_format_is_an_error!(Cbor);
diff --git a/src/format/json.rs b/src/format/json.rs
index f034afb9a2f..c9473d500aa 100644
--- a/src/format/json.rs
+++ b/src/format/json.rs
@@ -3,13 +3,16 @@
 /// A representation of a JSON data. Use it as wrapper to
 /// set a format you want to use for conversion:
 ///
-/// ```rust
+/// ```
 /// // Converts (lazy) data to a Json
+/// use yew::format::Json;
+/// let data: String = r#"{lorem: "ipsum"}"#.to_string();
 /// let dump = Json(&data);
 ///
 /// // Converts JSON string to a data (lazy).
 /// let Json(data) = dump;
 /// ```
+#[derive(Debug)]
 pub struct Json<T>(pub T);
 
 text_format!(Json based on serde_json);
diff --git a/src/format/macros.rs b/src/format/macros.rs
index adc08902a84..07873b3cd2f 100644
--- a/src/format/macros.rs
+++ b/src/format/macros.rs
@@ -1,5 +1,23 @@
-//! Contains macro for wrapping serde format.
+//! Contains three macros for wrapping serde format.  Collectively they
+//! allow you to define your own text and binary wrappers.
 
+#[macro_export]
+/// This macro is used for a format that can be encoded as Text.  It
+/// is used in conjunction with a type definition for a tuple struct
+/// with one (publically accessible) element of a generic type.  Since
+/// any type that can be encoded as Text can also be encoded as Binary,
+/// it should be used with the binary_format macro.
+///
+/// ## Example
+///
+/// ```rust
+/// use yew::{binary_format, text_format};
+///
+/// pub struct Json<T>(pub T);
+///
+/// text_format!(Json based on serde_json);
+/// binary_format!(Json based on serde_json);
+/// ```
 macro_rules! text_format {
     ($type:ident based on $format:ident) => {
         impl<'a, T> Into<$crate::format::Text> for $type<&'a T>
@@ -7,17 +25,17 @@ macro_rules! text_format {
             T: ::serde::Serialize,
         {
             fn into(self) -> $crate::format::Text {
-                $format::to_string(&self.0).map_err(::failure::Error::from)
+                $format::to_string(&self.0).map_err(::anyhow::Error::from)
             }
         }
 
-        impl<T> From<$crate::format::Text> for $type<Result<T, ::failure::Error>>
+        impl<T> From<$crate::format::Text> for $type<Result<T, ::anyhow::Error>>
         where
             T: for<'de> ::serde::Deserialize<'de>,
         {
             fn from(value: $crate::format::Text) -> Self {
                 match value {
-                    Ok(data) => $type($format::from_str(&data).map_err(::failure::Error::from)),
+                    Ok(data) => $type($format::from_str(&data).map_err(::anyhow::Error::from)),
                     Err(reason) => $type(Err(reason)),
                 }
             }
@@ -25,27 +43,126 @@ macro_rules! text_format {
     };
 }
 
+#[macro_export]
+/// This macro is used for a format that can be encoded as Binary.  It
+/// is used in conjunction with a type definition for a tuple struct
+/// with one (publicly accessible) element of a generic type.  Not
+/// all types that can be encoded as Binary can be encoded as Text.
+/// As such, this macro should be paired with the text_format macro
+/// where such an encoding works (e.g., JSON), or with the
+/// text_format_is_an_error macro for binary-only formats (e.g.,
+/// MsgPack).
+///
+/// # Rely on serde's `to_vec` and `from_vec`
+/// The simplest form of this macro relegates all the work to serde's
+/// `to_vec` function for serialization and serde's `from_vec` for
+/// deseriaization.
+///
+/// ## Examples
+///
+/// ### Binary that is also Text
+///
+/// ```rust
+/// use yew::{binary_format, text_format};
+///
+/// pub struct Json<T>(pub T);
+///
+/// text_format!(Json based on serde_json);
+/// binary_format!(Json based on serde_json);
+/// ```
+///
+/// ### Binary only
+/// ```rust
+/// # mod to_make_rustdoc_happy {
+///   use rmp_serde;
+///   use yew::{binary_format, text_format_is_an_error};
+///
+///   pub struct MsgPack<T>(pub T);
+///
+///   binary_format!(MsgPack based on rmp_serde);
+///   text_format_is_an_error!(MsgPack);
+/// # }
+/// ```
+///
+/// # Supply serialization and deserialization functions
+///
+/// In addition to the "based on" form of this macro demonstrated above,
+/// you can use the three parameter second form to supply
+/// non-standard (i.e., alternatives to serde's `to_vec` and/or `from_slice`)
+/// helpers as the second and third parameters.
+///
+/// ## Example
+/// ```rust
+/// # mod to_make_rustdoc_happy {
+///   use bincode;
+///   use yew::{binary_format, text_format_is_an_error};
+///
+///   pub struct Bincode<T>(pub T);
+///
+///   binary_format!(Bincode, bincode::serialize, bincode::deserialize);
+///   text_format_is_an_error!(Bincode);
+/// # }
+/// ```
 macro_rules! binary_format {
     ($type:ident based on $format:ident) => {
+        binary_format!($type, $format::to_vec, $format::from_slice);
+    };
+    ($type:ident, $into:path, $from:path) => {
         impl<'a, T> Into<$crate::format::Binary> for $type<&'a T>
         where
             T: ::serde::Serialize,
         {
             fn into(self) -> $crate::format::Binary {
-                $format::to_vec(&self.0).map_err(::failure::Error::from)
+                $into(&self.0).map_err(::anyhow::Error::from)
             }
         }
 
-        impl<T> From<$crate::format::Binary> for $type<Result<T, ::failure::Error>>
+        impl<T> From<$crate::format::Binary> for $type<Result<T, ::anyhow::Error>>
         where
             T: for<'de> ::serde::Deserialize<'de>,
         {
             fn from(value: $crate::format::Binary) -> Self {
                 match value {
-                    Ok(data) => $type($format::from_slice(&data).map_err(::failure::Error::from)),
+                    Ok(data) => $type($from(&data).map_err(::anyhow::Error::from)),
                     Err(reason) => $type(Err(reason)),
                 }
             }
         }
     };
 }
+
+#[macro_export]
+/// This macro is used for a format that can be encoded as Binary but
+/// can't be encoded as Text.  It is used in conjunction with a type
+/// definition for a tuple struct with one (publically accessible)
+/// element of a generic type.  This macro should be paired with the
+/// binary_format macro that defines the binary-only format.
+///
+/// ## Example
+/// ```rust
+/// # mod to_make_rustdoc_happy {
+///   use rmp_serde;
+///   use yew::{binary_format, text_format_is_an_error};
+///
+///   pub struct MsgPack<T>(pub T);
+///
+///   binary_format!(MsgPack based on rmp_serde);
+///   text_format_is_an_error!(MsgPack);
+/// # }
+/// ```
+
+macro_rules! text_format_is_an_error {
+    ($type:ident) => {
+        use $crate::{format::FormatError, text_format};
+
+        fn to_string<T>(_value: T) -> Result<String, ::anyhow::Error> {
+            Err(FormatError::CantEncodeBinaryAsText.into())
+        }
+
+        fn from_str<T>(_s: &str) -> Result<T, ::anyhow::Error> {
+            Err(FormatError::ReceivedTextForBinary.into())
+        }
+
+        text_format!($type based on self);
+    }
+}
diff --git a/src/format/mod.rs b/src/format/mod.rs
index 6e7d2ff4f78..4c6c570b7ed 100644
--- a/src/format/mod.rs
+++ b/src/format/mod.rs
@@ -4,11 +4,14 @@
 //! All types here are lazy and it's necessary to
 //! use `Into` and `From` traits to get (convert) the data.
 
-use failure::Error;
+use anyhow::Error;
+use thiserror::Error as ThisError;
 
 #[macro_use]
 pub mod macros;
 
+#[cfg(feature = "bincode")]
+pub mod bincode;
 #[cfg(feature = "cbor")]
 pub mod cbor;
 pub mod json;
@@ -20,6 +23,8 @@ pub mod toml;
 #[cfg(feature = "yaml")]
 pub mod yaml;
 
+#[cfg(feature = "bincode")]
+pub use self::bincode::Bincode;
 #[cfg(feature = "cbor")]
 pub use self::cbor::Cbor;
 pub use self::json::Json;
@@ -32,6 +37,9 @@ pub use self::toml::Toml;
 pub use self::yaml::Yaml;
 
 /// A representation of a value which can be stored and restored as a text.
+///
+/// Some formats are binary only and can't be serialized to or deserialized
+/// from Text.  Attempting to do so will return an Err(FormatError).
 pub type Text = Result<String, Error>;
 
 /// A representation of a value which can be stored and restored as a binary.
@@ -40,3 +48,16 @@ pub type Binary = Result<Vec<u8>, Error>;
 /// A helper which represents a specific format.
 #[doc(hidden)]
 pub type Format<T> = Result<T, Error>;
+
+/// Represents formatting errors.
+#[derive(Debug, ThisError)]
+pub enum FormatError {
+    /// Received text for a binary format, e.g. someone sending text
+    /// on a WebSocket that is using a binary serialization format, like Cbor.
+    #[error("received text for a binary format")]
+    ReceivedTextForBinary,
+    /// Trying to encode a binary format as text", e.g., trying to
+    /// store a Cbor encoded value in a String.
+    #[error("trying to encode a binary format as Text")]
+    CantEncodeBinaryAsText,
+}
diff --git a/src/format/msgpack.rs b/src/format/msgpack.rs
index ecfa071bf67..c0135559259 100644
--- a/src/format/msgpack.rs
+++ b/src/format/msgpack.rs
@@ -5,13 +5,21 @@ use rmp_serde;
 /// A representation of a MessagePack data. Use it as wrapper to
 /// set a format you want to use for conversion:
 ///
-/// ```rust
+/// ```
 /// // Converts (lazy) data to a MsgPack
+///
+///# use yew::format::MsgPack;
+///# fn dont_execute() {
+///# let data: String = unimplemented!();
 /// let dump = MsgPack(&data);
 ///
 /// // Converts MessagePack string to a data (lazy).
 /// let MsgPack(data) = dump;
+///# }
 /// ```
+/// This is a binary only protocol.
+#[derive(Debug)]
 pub struct MsgPack<T>(pub T);
 
 binary_format!(MsgPack based on rmp_serde);
+text_format_is_an_error!(MsgPack);
diff --git a/src/format/nothing.rs b/src/format/nothing.rs
index 09cc080e536..88bc5fa6069 100644
--- a/src/format/nothing.rs
+++ b/src/format/nothing.rs
@@ -1,14 +1,15 @@
 //! Contains an implementation of empty serialization format (`Nothing`).
 
 use super::{Binary, Text};
-use failure::err_msg;
+use anyhow::bail;
 
 /// A representation of an empty data. Nothing stored. Nothing restored.
+#[derive(Debug)]
 pub struct Nothing;
 
 impl Into<Text> for Nothing {
     fn into(self) -> Text {
-        Err(err_msg("nothing"))
+        bail!("nothing")
     }
 }
 
@@ -20,7 +21,7 @@ impl From<Text> for Nothing {
 
 impl Into<Binary> for Nothing {
     fn into(self) -> Binary {
-        Err(err_msg("nothing"))
+        bail!("nothing")
     }
 }
 
diff --git a/src/format/toml.rs b/src/format/toml.rs
index 55af48accd4..99cbe04164f 100644
--- a/src/format/toml.rs
+++ b/src/format/toml.rs
@@ -5,13 +5,18 @@ use toml;
 /// A representation of a TOML data. Use it as wrapper to
 /// set a format you want to use for conversion:
 ///
-/// ```rust
+/// ```
 /// // Converts (lazy) data to a Toml
+///# use yew::format::Toml;
+///# fn dont_execute() {
+///# let data: String = unimplemented!();
 /// let dump = Toml(&data);
 ///
 /// // Converts TOML string to a data (lazy).
 /// let Toml(data) = dump;
+/// }
 /// ```
+#[derive(Debug)]
 pub struct Toml<T>(pub T);
 
 text_format!(Toml based on toml);
diff --git a/src/format/yaml.rs b/src/format/yaml.rs
index 9aa8f189e21..6202742d393 100644
--- a/src/format/yaml.rs
+++ b/src/format/yaml.rs
@@ -5,13 +5,19 @@ use serde_yaml;
 /// A representation of a YAML data. Use it as wrapper to
 /// set a format you want to use for conversion:
 ///
-/// ```rust
+/// ```
 /// // Converts (lazy) data to a Yaml
+///# use yew::format::Yaml;
+///
+///# fn dont_execute() {
+///# let data: String = unimplemented!();
 /// let dump = Yaml(&data);
 ///
 /// // Converts YAML string to a data (lazy).
 /// let Yaml(data) = dump;
+///# }
 /// ```
+#[derive(Debug)]
 pub struct Yaml<T>(pub T);
 
 text_format!(Yaml based on serde_yaml);
diff --git a/src/html/listener.rs b/src/html/listener.rs
index ddcf74c7153..a064669790a 100644
--- a/src/html/listener.rs
+++ b/src/html/listener.rs
@@ -1,6 +1,5 @@
-use super::*;
+use crate::callback::Callback;
 use crate::virtual_dom::Listener;
-use log::debug;
 use stdweb::web::html_element::SelectElement;
 #[allow(unused_imports)]
 use stdweb::web::{EventListenerHandle, FileList, INode};
@@ -15,42 +14,33 @@ macro_rules! impl_action {
             use stdweb::web::event::{IEvent, $type};
             use super::*;
 
-            /// A wrapper for a callback.
-            /// Listener extracted from here when attached.
-            pub struct Wrapper<F>(Option<F>);
-
-            /// And event type which keeps the returned type.
-            pub type Event = $ret;
+            /// A wrapper for a callback which attaches event listeners to elements.
+            #[derive(Clone, Debug)]
+            pub struct Wrapper {
+                callback: Callback<Event>,
+            }
 
-            impl<F, MSG> From<F> for Wrapper<F>
-            where
-                MSG: 'static,
-                F: Fn($ret) -> MSG + 'static,
-            {
-                fn from(handler: F) -> Self {
-                    Wrapper(Some(handler))
+            impl Wrapper {
+                /// Create a wrapper for an event-typed callback
+                pub fn new(callback: Callback<Event>) -> Self {
+                    Wrapper { callback }
                 }
             }
 
-            impl<T, COMP> Listener<COMP> for Wrapper<T>
-            where
-                T: Fn($ret) -> COMP::Message + 'static,
-                COMP: Component + Renderable<COMP>,
-            {
+            /// And event type which keeps the returned type.
+            pub type Event = $ret;
+
+            impl Listener for Wrapper {
                 fn kind(&self) -> &'static str {
                     stringify!($action)
                 }
 
-                fn attach(&mut self, element: &Element, mut activator: Scope<COMP>)
-                    -> EventListenerHandle {
-                    let handler = self.0.take().expect("tried to attach listener twice");
+                fn attach(&self, element: &Element) -> EventListenerHandle {
                     let this = element.clone();
+                    let callback = self.callback.clone();
                     let listener = move |event: $type| {
-                        debug!("Event handler: {}", stringify!($type));
                         event.stop_propagation();
-                        let handy_event: $ret = $convert(&this, event);
-                        let msg = handler(handy_event);
-                        activator.send_message(msg);
+                        callback.emit($convert(&this, event));
                     };
                     element.add_event_listener(listener)
                 }
@@ -144,11 +134,11 @@ impl_action! {
             }
         }
     }
-    touchcancel(event: TouchCancel) -> TouchCancel => |_, event| { event }
-    touchend(event: TouchEnd) -> TouchEnd => |_, event| { event }
-    touchenter(event: TouchEnter) -> TouchEnter => |_, event| { event }
-    touchmove(event: TouchMove) -> TouchMove => |_, event| { event }
-    touchstart(event: TouchStart) -> TouchStart => |_, event| { event }
+    ontouchcancel(event: TouchCancel) -> TouchCancel => |_, event| { event }
+    ontouchend(event: TouchEnd) -> TouchEnd => |_, event| { event }
+    ontouchenter(event: TouchEnter) -> TouchEnter => |_, event| { event }
+    ontouchmove(event: TouchMove) -> TouchMove => |_, event| { event }
+    ontouchstart(event: TouchStart) -> TouchStart => |_, event| { event }
 }
 
 /// A type representing data from `oninput` event.
diff --git a/src/html/mod.rs b/src/html/mod.rs
index 16f841161ab..b567846b44e 100644
--- a/src/html/mod.rs
+++ b/src/html/mod.rs
@@ -7,11 +7,17 @@ mod listener;
 mod scope;
 
 pub use listener::*;
-pub(crate) use scope::ComponentUpdate;
-pub use scope::{NodeCell, Scope};
+pub(crate) use scope::{ComponentUpdate, HiddenScope};
+pub use scope::{Scope, ScopeHolder};
 
 use crate::callback::Callback;
-use crate::virtual_dom::VNode;
+use crate::virtual_dom::{VChild, VList, VNode};
+use std::any::TypeId;
+use std::cell::RefCell;
+use std::fmt;
+use std::rc::Rc;
+use stdweb::unstable::TryFrom;
+use stdweb::web::Node;
 
 /// This type indicates that component should be rendered again.
 pub type ShouldRender = bool;
@@ -36,26 +42,301 @@ pub trait Component: Sized + 'static {
     /// Called when the component's parent component re-renders and the
     /// component's place in the DOM tree remains unchanged. If the component's
     /// place in the DOM tree changes, calling this method is unnecessary as the
-    /// component is recreated from scratch. It defaults
-    /// to true if not implemented.
-    fn change(&mut self, _: Self::Properties) -> ShouldRender {
-        true
+    /// component is recreated from scratch. It defaults to true if not implemented
+    /// and Self::Properties is not the unit type `()`.
+    fn change(&mut self, _props: Self::Properties) -> ShouldRender {
+        TypeId::of::<Self::Properties>() != TypeId::of::<()>()
     }
+    /// Called by rendering loop.
+    fn view(&self) -> Html;
     /// Called for finalization on the final point of the component's lifetime.
     fn destroy(&mut self) {} // TODO Replace with `Drop`
 }
 
 /// A type which expected as a result of `view` function implementation.
-pub type Html<MSG> = VNode<MSG>;
+pub type Html = VNode;
+
+/// A type used for accepting children elements in Component::Properties.
+///
+/// # Example
+/// **`model.rs`**
+///
+/// In this example, the `Wrapper` component is used to wrap other elements.
+/// ```
+///# use yew::{Children, Html, Properties, Component, ComponentLink, html};
+///# #[derive(Clone, Properties)]
+///# struct WrapperProps {
+///#     children: Children,
+///# }
+///# struct Wrapper;
+///# impl Component for Wrapper{
+///#     type Message = ();
+///#     type Properties = WrapperProps;
+///#     fn create(props: Self::Properties,link: ComponentLink<Self>) -> Self {unimplemented!()}
+///#     fn update(&mut self,msg: Self::Message) -> bool {unimplemented!()}
+///#     // This is not a valid implementation.  This is done for space convenience.
+///#     fn view(&self) -> Html {
+/// html! {
+///     <Wrapper>
+///         <h4>{ "Hi" }</h4>
+///         <div>{ "Hello" }</div>
+///     </Wrapper>
+/// }
+///#     }
+///# }
+/// ```
+///
+/// **`wrapper.rs`**
+///
+/// The Wrapper component must define a `children` property in order to wrap other elements. The
+/// children property can be used to render the wrapped elements.
+/// ```
+///# use yew::{Children, Html, Properties, Renderable, Component, ComponentLink, html};
+/// #[derive(Clone, Properties)]
+/// struct WrapperProps {
+///     children: Children,
+/// }
+///
+///# struct Wrapper {props: WrapperProps};
+/// impl Component for Wrapper {
+///     // ...
+///#     type Message = ();
+///#     type Properties = WrapperProps;
+///#     fn create(props: Self::Properties,link: ComponentLink<Self>) -> Self {unimplemented!()}
+///#     fn update(&mut self,msg: Self::Message) -> bool {unimplemented!()}
+///     fn view(&self) -> Html {
+///         html! {
+///             <div id="container">
+///                 { self.props.children.render() }
+///             </div>
+///         }
+///     }
+/// }
+/// ```
+pub type Children = ChildrenRenderer<Html>;
+
+/// A type used for accepting children elements in Component::Properties and accessing their props.
+///
+/// # Example
+/// **`model.rs`**
+///
+/// In this example, the `List` component can wrap `ListItem` components.
+/// ```
+///# use yew::{html, Component, Renderable, Html, ComponentLink, ChildrenWithProps, Properties};
+///#
+///# #[derive(Clone, Properties)]
+///# struct ListProps {
+///#     children: ChildrenWithProps<ListItem>,
+///# }
+///# struct List;
+///# impl Component for List {
+///#     type Message = ();
+///#     type Properties = ListProps;
+///#     fn create(props: Self::Properties, link: ComponentLink<Self>) -> Self {unimplemented!()}
+///#     fn update(&mut self, msg: Self::Message) -> bool {unimplemented!()}
+///#     fn view(&self) -> Html {unimplemented!()}
+///# }
+///# #[derive(Clone, Properties)]
+///# struct ListItemProps {
+///#     value: String
+///# }
+///# struct ListItem;
+///# impl Component for ListItem {
+///#     type Message = ();
+///#     type Properties = ListItemProps;
+///#     fn create(props: Self::Properties, link: ComponentLink<Self>) -> Self {unimplemented!()}
+///#     fn update(&mut self, msg: Self::Message) -> bool {unimplemented!()}
+///#     fn view(&self) -> Html {unimplemented!()}
+///# }
+///# fn view() -> Html {
+/// html!{
+///   <List>
+///     <ListItem value="a" />
+///     <ListItem value="b" />
+///     <ListItem value="c" />
+///   </List>
+/// }
+///# }
+/// ```
+///
+/// **`list.rs`**
+///
+/// The `List` component must define a `children` property in order to wrap the list items. The
+/// `children` property can be used to filter, mutate, and render the items.
+/// ```
+///# use yew::{html, Component, Html, ChildrenWithProps, ComponentLink, Properties};
+///#
+/// #[derive(Clone, Properties)]
+/// struct ListProps {
+///   children: ChildrenWithProps<ListItem>,
+/// }
+///
+///# struct List {props: ListProps};
+/// impl Component for List {
+///#     type Message = ();
+///#     type Properties = ListProps;
+///#     fn create(props: Self::Properties,link: ComponentLink<Self>) -> Self {unimplemented!()}
+///#     fn update(&mut self,msg: Self::Message) -> bool {unimplemented!()}
+///     // ...
+///     fn view(&self) -> Html {
+///         html!{{
+///             for self.props.children.iter().map(|mut item| {
+///                 item.props.value = format!("item-{}", item.props.value);
+///                 item
+///             })
+///         }}
+///     }
+/// }
+///#
+///# #[derive(Clone, Properties)]
+///# struct ListItemProps {
+///#     value: String
+///# }
+///#
+///# struct ListItem;
+///# impl Component for ListItem {
+///#     type Message = ();
+///#     type Properties = ListItemProps;
+///#     fn create(props: Self::Properties, link: ComponentLink<Self>) -> Self {unimplemented!()}
+///#     fn update(&mut self, msg: Self::Message) -> bool {unimplemented!()}
+///#     fn view(&self) -> Html {unimplemented!()}
+///# }
+/// ```
+pub type ChildrenWithProps<CHILD> = ChildrenRenderer<VChild<CHILD>>;
+
+/// A type used for rendering children html.
+#[derive(Clone)]
+pub struct ChildrenRenderer<T> {
+    children: Vec<T>,
+}
+
+impl<T> ChildrenRenderer<T>
+where
+    T: Clone + Into<VNode>,
+{
+    /// Create children
+    pub fn new(children: Vec<T>) -> Self {
+        Self { children }
+    }
+
+    /// Children list is empty
+    pub fn is_empty(&self) -> bool {
+        self.children.is_empty()
+    }
+
+    /// Number of children elements
+    pub fn len(&self) -> usize {
+        self.children.len()
+    }
+
+    /// Build children components and return `Vec`
+    pub fn to_vec(&self) -> Vec<T> {
+        self.children.clone()
+    }
+
+    /// Render children components and return `Iterator`
+    pub fn iter(&self) -> impl Iterator<Item = T> {
+        self.to_vec().into_iter()
+    }
+}
+
+impl<T> Default for ChildrenRenderer<T> {
+    fn default() -> Self {
+        Self {
+            children: Vec::new(),
+        }
+    }
+}
+
+impl<T> fmt::Debug for ChildrenRenderer<T> {
+    fn fmt(&self, f: &mut fmt::Formatter<'_>) -> fmt::Result {
+        f.write_str("ChildrenRenderer<_>")
+    }
+}
+
+impl<T> Renderable for ChildrenRenderer<T>
+where
+    T: Clone + Into<VNode>,
+{
+    fn render(&self) -> Html {
+        VList::new_with_children(self.iter().map(|c| c.into()).collect()).into()
+    }
+}
 
-/// Should be rendered relative to context and component environment.
-pub trait Renderable<COMP: Component> {
+/// Wrapped Node reference for later use in Component lifecycle methods.
+///
+/// # Example
+/// Focus an `<input>` element on mount.
+/// ```
+/// use stdweb::web::html_element::InputElement;
+/// use stdweb::web::IHtmlElement;
+///# use yew::*;
+///
+/// pub struct Input {
+///     node_ref: NodeRef,
+/// }
+///
+/// impl Component for Input {
+///     type Message = ();
+///     type Properties = ();
+///
+///     fn create(_: Self::Properties, _: ComponentLink<Self>) -> Self {
+///         Input {
+///             node_ref: NodeRef::default(),
+///         }
+///     }
+///
+///     fn mounted(&mut self) -> ShouldRender {
+///         if let Some(input) = self.node_ref.try_into::<InputElement>() {
+///             input.focus();
+///         }
+///         false
+///     }
+///
+///     fn update(&mut self, _: Self::Message) -> ShouldRender {
+///         false
+///     }
+///
+///     fn view(&self) -> Html {
+///         html! {
+///             <input ref=self.node_ref.clone() type="text" />
+///         }
+///     }
+/// }
+#[derive(PartialEq, Debug, Default, Clone)]
+pub struct NodeRef(Rc<RefCell<Option<Node>>>);
+
+impl NodeRef {
+    /// Get the wrapped Node reference if it exists
+    pub fn get(&self) -> Option<Node> {
+        self.0.borrow().clone()
+    }
+
+    /// Try converting the node reference into another form
+    pub fn try_into<INTO: TryFrom<Node>>(&self) -> Option<INTO> {
+        self.get().and_then(|node| INTO::try_from(node).ok())
+    }
+
+    /// Place a Node in a reference for later use
+    pub(crate) fn set(&self, node: Option<Node>) {
+        *self.0.borrow_mut() = node;
+    }
+}
+
+/// Trait for rendering virtual DOM elements
+pub trait Renderable {
     /// Called by rendering loop.
-    fn view(&self) -> Html<COMP>;
+    fn render(&self) -> Html;
+}
+
+impl<COMP: Component> Renderable for COMP {
+    fn render(&self) -> Html {
+        self.view()
+    }
 }
 
 /// Trait for building properties for a component
-pub trait Properties {
+pub trait Properties: Clone {
     /// Builder that will be used to construct properties
     type Builder;
 
@@ -64,6 +345,7 @@ pub trait Properties {
 }
 
 /// Builder for when a component has no properties
+#[derive(Debug)]
 pub struct EmptyBuilder;
 
 impl Properties for () {
@@ -86,7 +368,7 @@ pub struct ComponentLink<COMP: Component> {
 
 impl<COMP> ComponentLink<COMP>
 where
-    COMP: Component + Renderable<COMP>,
+    COMP: Component,
 {
     /// Create link for a scope.
     fn connect(scope: &Scope<COMP>) -> Self {
@@ -95,23 +377,62 @@ where
         }
     }
 
-    /// This method sends messages back to the component's loop.
-    pub fn send_back<F, IN>(&mut self, function: F) -> Callback<IN>
+    /// This method creates a `Callback` which will send a batch of messages back to the linked
+    /// component's update method when called.
+    pub fn batch_callback<F, IN>(&self, function: F) -> Callback<IN>
+    where
+        F: Fn(IN) -> Vec<COMP::Message> + 'static,
+    {
+        let scope = self.scope.clone();
+        let closure = move |input| {
+            let messages = function(input);
+            scope.send_message_batch(messages);
+        };
+        closure.into()
+    }
+
+    /// This method creates a `Callback` which will send a message to the linked component's
+    /// update method when invoked.
+    pub fn callback<F, IN>(&self, function: F) -> Callback<IN>
     where
         F: Fn(IN) -> COMP::Message + 'static,
     {
         let scope = self.scope.clone();
         let closure = move |input| {
             let output = function(input);
-            scope.clone().send_message(output);
+            scope.send_message(output);
         };
         closure.into()
     }
 
-    /// This method sends a message to this component immediately.
-    pub fn send_self(&mut self, msg: COMP::Message) {
+    /// This method sends a message to this component to be processed immediately after the
+    /// component has been updated and/or rendered.
+    pub fn send_message(&mut self, msg: COMP::Message) {
         self.scope.send_message(msg);
     }
+
+    /// Sends a batch of messages to the component to be processed immediately after
+    /// the component has been updated and/or rendered..
+    ///
+    /// All messages will first be processed by `update`, and if _any_ of them return `true`,
+    /// then re-render will occur.
+    pub fn send_message_batch(&mut self, msgs: Vec<COMP::Message>) {
+        self.scope.send_message_batch(msgs)
+    }
+}
+
+impl<COMP: Component> fmt::Debug for ComponentLink<COMP> {
+    fn fmt(&self, f: &mut fmt::Formatter<'_>) -> fmt::Result {
+        f.write_str("ComponentLink<_>")
+    }
+}
+
+impl<COMP: Component> Clone for ComponentLink<COMP> {
+    fn clone(&self) -> Self {
+        ComponentLink {
+            scope: self.scope.clone(),
+        }
+    }
 }
 
 /// A bridging type for checking `href` attribute value.
diff --git a/src/html/scope.rs b/src/html/scope.rs
index 280a5dd05c5..e771da5f91e 100644
--- a/src/html/scope.rs
+++ b/src/html/scope.rs
@@ -4,25 +4,32 @@ use crate::virtual_dom::{VDiff, VNode};
 use std::cell::RefCell;
 use std::fmt;
 use std::rc::Rc;
-use stdweb::web::{Element, Node};
+use stdweb::web::Element;
 
-/// Holder for the element.
-pub type NodeCell = Rc<RefCell<Option<Node>>>;
-
-/// Updates for a `Components` instance. Used by scope sender.
+/// Updates for a `Component` instance. Used by scope sender.
 pub(crate) enum ComponentUpdate<COMP: Component> {
     /// Wraps messages for a component.
     Message(COMP::Message),
+    /// Wraps batch of messages for a component.
+    MessageBatch(Vec<COMP::Message>),
     /// Wraps properties for a component.
     Properties(COMP::Properties),
 }
 
-/// A context which contains a bridge to send a messages to a loop.
-/// Mostly services uses it.
+/// A reference to the parent's scope which will be used later to send messages.
+pub type ScopeHolder<PARENT> = Rc<RefCell<Option<Scope<PARENT>>>>;
+
+/// A context which allows sending messages to a component.
 pub struct Scope<COMP: Component> {
     shared_state: Shared<ComponentState<COMP>>,
 }
 
+impl<COMP: Component> fmt::Debug for Scope<COMP> {
+    fn fmt(&self, f: &mut fmt::Formatter<'_>) -> fmt::Result {
+        f.write_str("Scope<_>")
+    }
+}
+
 impl<COMP: Component> Clone for Scope<COMP> {
     fn clone(&self) -> Self {
         Scope {
@@ -31,17 +38,58 @@ impl<COMP: Component> Clone for Scope<COMP> {
     }
 }
 
-impl<COMP> Scope<COMP>
-where
-    COMP: Component + Renderable<COMP>,
-{
+impl<COMP: Component> Default for Scope<COMP> {
+    fn default() -> Self {
+        Scope::new()
+    }
+}
+
+impl<COMP: Component> Scope<COMP> {
+    /// visible for testing
+    pub fn new() -> Self {
+        let shared_state = Rc::new(RefCell::new(ComponentState::Empty));
+        Scope { shared_state }
+    }
+
+    /// Mounts a component with `props` to the specified `element` in the DOM.
+    pub(crate) fn mount_in_place(
+        self,
+        element: Element,
+        ancestor: Option<VNode>,
+        node_ref: NodeRef,
+        props: COMP::Properties,
+    ) -> Scope<COMP> {
+        let mut scope = self;
+        let link = ComponentLink::connect(&scope);
+        let ready_state = ReadyState {
+            element,
+            node_ref,
+            link,
+            props,
+            ancestor,
+        };
+        *scope.shared_state.borrow_mut() = ComponentState::Ready(ready_state);
+        scope.create();
+        scope.mounted();
+        scope
+    }
+
+    /// Schedules a task to call the mounted method on a component and optionally re-render
+    pub(crate) fn mounted(&mut self) {
+        let shared_state = self.shared_state.clone();
+        let mounted = Box::new(MountedComponent { shared_state });
+        scheduler().put_and_try_run(mounted);
+    }
+
+    /// Schedules a task to create and render a component and then mount it to the DOM
     pub(crate) fn create(&mut self) {
         let shared_state = self.shared_state.clone();
         let create = CreateComponent { shared_state };
         scheduler().put_and_try_run(Box::new(create));
     }
 
-    pub(crate) fn update(&mut self, update: ComponentUpdate<COMP>) {
+    /// Schedules a task to send a message or new props to a component
+    pub(crate) fn update(&self, update: ComponentUpdate<COMP>) {
         let update = UpdateComponent {
             shared_state: self.shared_state.clone(),
             update,
@@ -49,6 +97,7 @@ where
         scheduler().put_and_try_run(Box::new(update));
     }
 
+    /// Schedules a task to destroy a component
     pub(crate) fn destroy(&mut self) {
         let shared_state = self.shared_state.clone();
         let destroy = DestroyComponent { shared_state };
@@ -56,9 +105,14 @@ where
     }
 
     /// Send a message to the component
-    pub fn send_message(&mut self, msg: COMP::Message) {
+    pub fn send_message(&self, msg: COMP::Message) {
         self.update(ComponentUpdate::Message(msg));
     }
+
+    /// Send a batch of messages to the component
+    pub fn send_message_batch(&self, messages: Vec<COMP::Message>) {
+        self.update(ComponentUpdate::MessageBatch(messages));
+    }
 }
 
 enum ComponentState<COMP: Component> {
@@ -83,35 +137,32 @@ impl<COMP: Component> fmt::Display for ComponentState<COMP> {
 }
 
 struct ReadyState<COMP: Component> {
-    env: Scope<COMP>,
     element: Element,
-    occupied: Option<NodeCell>,
+    node_ref: NodeRef,
     props: COMP::Properties,
     link: ComponentLink<COMP>,
-    ancestor: Option<VNode<COMP>>,
+    ancestor: Option<VNode>,
 }
 
 impl<COMP: Component> ReadyState<COMP> {
     fn create(self) -> CreatedState<COMP> {
         CreatedState {
             component: COMP::create(self.props, self.link),
-            env: self.env,
             element: self.element,
             last_frame: self.ancestor,
-            occupied: self.occupied,
+            node_ref: self.node_ref,
         }
     }
 }
 
 struct CreatedState<COMP: Component> {
-    env: Scope<COMP>,
     element: Element,
     component: COMP,
-    last_frame: Option<VNode<COMP>>,
-    occupied: Option<NodeCell>,
+    last_frame: Option<VNode>,
+    node_ref: NodeRef,
 }
 
-impl<COMP: Component + Renderable<COMP>> CreatedState<COMP> {
+impl<COMP: Component> CreatedState<COMP> {
     /// Called once immediately after the component is created.
     fn mounted(mut self) -> Self {
         if self.component.mounted() {
@@ -122,58 +173,34 @@ impl<COMP: Component + Renderable<COMP>> CreatedState<COMP> {
     }
 
     fn update(mut self) -> Self {
-        let mut next_frame = self.component.view();
-        let node = next_frame.apply(&self.element, None, self.last_frame, &self.env);
-        if let Some(ref mut cell) = self.occupied {
-            *cell.borrow_mut() = node;
-        }
-
-        self.last_frame = Some(next_frame);
+        let mut vnode = self.component.render();
+        let node = vnode.apply(&self.element, None, self.last_frame);
+        self.node_ref.set(node);
+        self.last_frame = Some(vnode);
         self
     }
 }
 
-impl<COMP> Scope<COMP>
+struct MountedComponent<COMP>
 where
-    COMP: Component + Renderable<COMP>,
+    COMP: Component,
 {
-    /// visible for testing
-    pub fn new() -> Self {
-        let shared_state = Rc::new(RefCell::new(ComponentState::Empty));
-        Scope { shared_state }
-    }
-
-    // TODO Consider to use &Node instead of Element as parent
-    /// Mounts elements in place of previous node (ancestor).
-    pub(crate) fn mount_in_place(
-        self,
-        element: Element,
-        ancestor: Option<VNode<COMP>>,
-        occupied: Option<NodeCell>,
-        props: COMP::Properties,
-    ) -> Scope<COMP> {
-        let mut scope = self.clone();
-        let link = ComponentLink::connect(&scope);
-        let ready_state = ReadyState {
-            env: self.clone(),
-            element,
-            occupied,
-            link,
-            props,
-            ancestor,
-        };
-        *scope.shared_state.borrow_mut() = ComponentState::Ready(ready_state);
-        scope.create();
-        scope
-    }
+    shared_state: Shared<ComponentState<COMP>>,
 }
 
-impl<COMP> Default for Scope<COMP>
+impl<COMP> Runnable for MountedComponent<COMP>
 where
-    COMP: Component + Renderable<COMP>,
+    COMP: Component,
 {
-    fn default() -> Self {
-        Scope::new()
+    fn run(self: Box<Self>) {
+        let current_state = self.shared_state.replace(ComponentState::Processing);
+        self.shared_state.replace(match current_state {
+            ComponentState::Created(state) => ComponentState::Created(state.mounted()),
+            ComponentState::Destroyed => current_state,
+            ComponentState::Empty | ComponentState::Processing | ComponentState::Ready(_) => {
+                panic!("unexpected component state: {}", current_state);
+            }
+        });
     }
 }
 
@@ -186,14 +213,12 @@ where
 
 impl<COMP> Runnable for CreateComponent<COMP>
 where
-    COMP: Component + Renderable<COMP>,
+    COMP: Component,
 {
     fn run(self: Box<Self>) {
         let current_state = self.shared_state.replace(ComponentState::Processing);
         self.shared_state.replace(match current_state {
-            ComponentState::Ready(state) => {
-                ComponentState::Created(state.create().update().mounted())
-            }
+            ComponentState::Ready(state) => ComponentState::Created(state.create().update()),
             ComponentState::Created(_) | ComponentState::Destroyed => current_state,
             ComponentState::Empty | ComponentState::Processing => {
                 panic!("unexpected component state: {}", current_state);
@@ -211,7 +236,7 @@ where
 
 impl<COMP> Runnable for DestroyComponent<COMP>
 where
-    COMP: Component + Renderable<COMP>,
+    COMP: Component,
 {
     fn run(self: Box<Self>) {
         match self.shared_state.replace(ComponentState::Destroyed) {
@@ -242,14 +267,17 @@ where
 
 impl<COMP> Runnable for UpdateComponent<COMP>
 where
-    COMP: Component + Renderable<COMP>,
+    COMP: Component,
 {
     fn run(self: Box<Self>) {
         let current_state = self.shared_state.replace(ComponentState::Processing);
         self.shared_state.replace(match current_state {
             ComponentState::Created(mut this) => {
                 let should_update = match self.update {
-                    ComponentUpdate::Message(msg) => this.component.update(msg),
+                    ComponentUpdate::Message(message) => this.component.update(message),
+                    ComponentUpdate::MessageBatch(messages) => messages
+                        .into_iter()
+                        .fold(false, |acc, msg| this.component.update(msg) || acc),
                     ComponentUpdate::Properties(props) => this.component.change(props),
                 };
                 let next_state = if should_update { this.update() } else { this };
@@ -262,3 +290,32 @@ where
         });
     }
 }
+
+struct Hidden;
+
+pub(crate) struct HiddenScope {
+    type_id: TypeId,
+    scope: *mut Hidden,
+}
+
+impl<COMP: Component> From<Scope<COMP>> for HiddenScope {
+    fn from(scope: Scope<COMP>) -> Self {
+        HiddenScope {
+            type_id: TypeId::of::<COMP>(),
+            scope: Box::into_raw(Box::new(scope)) as *mut Hidden,
+        }
+    }
+}
+
+impl<COMP: Component> Into<Scope<COMP>> for HiddenScope {
+    fn into(self: HiddenScope) -> Scope<COMP> {
+        if self.type_id != TypeId::of::<COMP>() {
+            panic!("encountered unespected component type");
+        }
+
+        unsafe {
+            let raw: *mut Scope<COMP> = self.scope as *mut Scope<COMP>;
+            *Box::from_raw(raw)
+        }
+    }
+}
diff --git a/src/lib.rs b/src/lib.rs
index 153250cdc48..a7c87749b1c 100644
--- a/src/lib.rs
+++ b/src/lib.rs
@@ -1,3 +1,4 @@
+#![allow(clippy::needless_doctest_main)]
 //! # Yew Framework - API Documentation
 //!
 //! Yew is a framework for web-client apps created with
@@ -8,11 +9,10 @@
 //! Minimal example:
 //!
 //! ```rust
-//! #[macro_use]
-//! extern crate yew;
 //! use yew::prelude::*;
 //!
 //! struct Model {
+//!     link: ComponentLink<Self>,
 //!     value: i64,
 //! }
 //!
@@ -23,8 +23,9 @@
 //! impl Component for Model {
 //!     type Message = Msg;
 //!     type Properties = ();
-//!     fn create(_: Self::Properties, _: ComponentLink<Self>) -> Self {
+//!     fn create(_: Self::Properties, link: ComponentLink<Self>) -> Self {
 //!         Self {
+//!             link,
 //!             value: 0,
 //!         }
 //!     }
@@ -35,29 +36,29 @@
 //!         }
 //!         true
 //!     }
-//! }
 //!
-//! impl Renderable<Model> for Model {
-//!     fn view(&self) -> Html<Self> {
+//!     fn view(&self) -> Html {
 //!         html! {
 //!             <div>
-//!                <button onclick=|_| Msg::DoIt>{ "+1" }</button>
+//!                 <button onclick=self.link.callback(|_| Msg::DoIt)>{ "+1" }</button>
 //!                 <p>{ self.value }</p>
 //!             </div>
 //!         }
 //!     }
 //! }
-//!
+//!# fn dont_execute() {
 //! fn main() {
 //!     yew::initialize();
 //!     App::<Model>::new().mount_to_body();
 //!     yew::run_loop();
 //! }
+//!# }
 //! ```
 //!
 
 #![deny(
     missing_docs,
+    missing_debug_implementations,
     bare_trait_objects,
     anonymous_parameters,
     elided_lifetimes_in_paths
@@ -71,23 +72,31 @@ use proc_macro_hack::proc_macro_hack;
 #[proc_macro_hack(support_nested)]
 pub use yew_macro::html;
 
+#[doc(hidden)]
+#[proc_macro_hack(support_nested)]
+pub use yew_macro::html_nested;
+
 /// This module contains macros which implements html! macro and JSX-like templates
 pub mod macros {
     pub use crate::html;
+    pub use crate::html_nested;
     pub use yew_macro::Properties;
 }
 
-pub mod agent;
 pub mod app;
 pub mod callback;
 pub mod components;
 pub mod format;
 pub mod html;
 pub mod scheduler;
-pub mod services;
 pub mod utils;
 pub mod virtual_dom;
 
+#[cfg(feature = "agent")]
+pub mod agent;
+#[cfg(feature = "services")]
+pub mod services;
+
 /// The module that contains all events available in the framework.
 pub mod events {
     pub use crate::html::{ChangeData, InputData};
@@ -117,7 +126,7 @@ pub fn run_loop() {
 /// Starts an app mounted to a body of the document.
 pub fn start_app<COMP>()
 where
-    COMP: Component + Renderable<COMP>,
+    COMP: Component,
     COMP::Properties: Default,
 {
     initialize();
@@ -128,7 +137,7 @@ where
 /// Starts an app mounted to a body of the document.
 pub fn start_app_with_props<COMP>(props: COMP::Properties)
 where
-    COMP: Component + Renderable<COMP>,
+    COMP: Component,
 {
     initialize();
     App::<COMP>::new().mount_to_body_with_props(props);
@@ -144,20 +153,23 @@ where
 /// use yew::prelude::*;
 /// ```
 pub mod prelude {
+    #[cfg(feature = "agent")]
     pub use crate::agent::{Bridge, Bridged, Threaded};
     pub use crate::app::App;
     pub use crate::callback::Callback;
     pub use crate::events::*;
     pub use crate::html::{
-        Component, ComponentLink, Href, Html, Properties, Renderable, ShouldRender,
+        Children, ChildrenWithProps, Component, ComponentLink, Href, Html, NodeRef, Properties,
+        Renderable, ShouldRender,
     };
     pub use crate::macros::*;
+    pub use crate::virtual_dom::Classes;
 
     /// Prelude module for creating worker.
+    #[cfg(feature = "agent")]
     pub mod worker {
         pub use crate::agent::{
             Agent, AgentLink, Bridge, Bridged, Context, Global, HandlerId, Job, Private, Public,
-            Transferable,
         };
     }
 }
diff --git a/src/prelude.rs b/src/prelude.rs
new file mode 100644
index 00000000000..e69de29bb2d
diff --git a/src/services/console.rs b/src/services/console.rs
index 57090322296..47d441a9df4 100644
--- a/src/services/console.rs
+++ b/src/services/console.rs
@@ -5,7 +5,7 @@ use stdweb::{_js_impl, js};
 
 /// A service to use methods of a
 /// [Console](https://developer.mozilla.org/en-US/docs/Web/API/Console).
-#[derive(Default)]
+#[derive(Default, Debug)]
 pub struct ConsoleService {}
 
 impl ConsoleService {
diff --git a/src/services/dialog.rs b/src/services/dialog.rs
index 0d42fb656b3..8410d6ce7c1 100644
--- a/src/services/dialog.rs
+++ b/src/services/dialog.rs
@@ -6,7 +6,7 @@ use stdweb::Value;
 use stdweb::{_js_impl, js};
 
 /// A dialog service.
-#[derive(Default)]
+#[derive(Default, Debug)]
 pub struct DialogService {}
 
 impl DialogService {
diff --git a/src/services/fetch.rs b/src/services/fetch.rs
index b1a57a450be..00f6d90070b 100644
--- a/src/services/fetch.rs
+++ b/src/services/fetch.rs
@@ -3,20 +3,21 @@
 use super::Task;
 use crate::callback::Callback;
 use crate::format::{Binary, Format, Text};
-use failure::Fail;
 use serde::Serialize;
 use std::collections::HashMap;
+use std::fmt;
 use stdweb::serde::Serde;
 use stdweb::unstable::{TryFrom, TryInto};
 use stdweb::web::ArrayBuffer;
 use stdweb::{JsSerialize, Value};
 #[allow(unused_imports)]
 use stdweb::{_js_impl, js};
+use thiserror::Error;
 
 pub use http::{HeaderMap, Method, Request, Response, StatusCode, Uri};
 
 /// Type to set cache for fetch.
-#[derive(Serialize)]
+#[derive(Serialize, Debug)]
 #[serde(rename_all = "kebab-case")]
 pub enum Cache {
     /// `default` value of cache.
@@ -35,7 +36,7 @@ pub enum Cache {
 }
 
 /// Type to set credentials for fetch.
-#[derive(Serialize)]
+#[derive(Serialize, Debug)]
 #[serde(rename_all = "kebab-case")]
 pub enum Credentials {
     /// `omit` value of credentials.
@@ -47,7 +48,7 @@ pub enum Credentials {
 }
 
 /// Type to set mode for fetch.
-#[derive(Serialize)]
+#[derive(Serialize, Debug)]
 #[serde(rename_all = "kebab-case")]
 pub enum Mode {
     /// `same-origin` value of mode.
@@ -59,7 +60,7 @@ pub enum Mode {
 }
 
 /// Type to set redirect behaviour for fetch.
-#[derive(Serialize)]
+#[derive(Serialize, Debug)]
 #[serde(rename_all = "kebab-case")]
 pub enum Redirect {
     /// `follow` value of redirect.
@@ -72,7 +73,7 @@ pub enum Redirect {
 
 /// Init options for `fetch()` function call.
 /// https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/fetch
-#[derive(Serialize, Default)]
+#[derive(Serialize, Default, Debug)]
 pub struct FetchOptions {
     /// Cache of a fetch request.
     #[serde(skip_serializing_if = "Option::is_none")]
@@ -89,9 +90,9 @@ pub struct FetchOptions {
 }
 
 /// Represents errors of a fetch service.
-#[derive(Debug, Fail)]
+#[derive(Debug, Error)]
 enum FetchError {
-    #[fail(display = "failed response")]
+    #[error("failed response")]
     FailedResponse,
 }
 
@@ -99,8 +100,14 @@ enum FetchError {
 #[must_use]
 pub struct FetchTask(Option<Value>);
 
+impl fmt::Debug for FetchTask {
+    fn fmt(&self, f: &mut fmt::Formatter<'_>) -> fmt::Result {
+        f.write_str("FetchTask")
+    }
+}
+
 /// A service to fetch resources.
-#[derive(Default)]
+#[derive(Default, Debug)]
 pub struct FetchService {}
 
 impl FetchService {
@@ -115,48 +122,96 @@ impl FetchService {
     /// You may use a Request builder to build your request declaratively as on the
     /// following examples:
     ///
-    /// ```rust
-    ///    let post_request = Request::post("https://my.api/v1/resource")
-    ///            .header("Content-Type", "application/json")
-    ///            .body(Json(&json!({"foo": "bar"})))
-    ///            .expect("Failed to build request.");
+    /// ```
+    ///# use yew::format::{Nothing, Json};
+    ///# use yew::services::fetch::Request;
+    ///# use serde_json::json;
+    /// let post_request = Request::post("https://my.api/v1/resource")
+    ///     .header("Content-Type", "application/json")
+    ///     .body(Json(&json!({"foo": "bar"})))
+    ///     .expect("Failed to build request.");
     ///
-    ///    let get_request = Request::get("https://my.api/v1/resource")
-    ///            .body(Nothing)
-    ///            .expect("Failed to build request.");
+    /// let get_request = Request::get("https://my.api/v1/resource")
+    ///     .body(Nothing)
+    ///     .expect("Failed to build request.");
     /// ```
     ///
     /// The callback function can build a loop message by passing or analizing the
     /// response body and metadata.
     ///
-    /// ```rust
-    ///     context.web.fetch(
-    ///         post_request,
-    ///         |response| {
-    ///             if response.status().is_success() {
-    ///                 Msg::Noop
-    ///             } else {
-    ///                 Msg::Error
-    ///             }
+    /// ```
+    ///# use yew::{Component, ComponentLink, Html, Renderable};
+    ///# use yew::services::FetchService;
+    ///# use yew::services::fetch::{Response, Request};
+    ///# struct Comp;
+    ///# impl Component for Comp {
+    ///#     type Message = Msg;type Properties = ();
+    ///#     fn create(props: Self::Properties,link: ComponentLink<Self>) -> Self {unimplemented!()}
+    ///#     fn update(&mut self,msg: Self::Message) -> bool {unimplemented!()}
+    ///#     fn view(&self) -> Html {unimplemented!()}
+    ///# }
+    ///# enum Msg {
+    ///#     Noop,
+    ///#     Error
+    ///# }
+    ///# fn dont_execute() {
+    ///# let link: ComponentLink<Comp> = unimplemented!();
+    ///# let mut fetch_service: FetchService = FetchService::new();
+    ///# let post_request: Request<Result<String, anyhow::Error>> = unimplemented!();
+    /// let task = fetch_service.fetch(
+    ///     post_request,
+    ///     link.callback(|response: Response<Result<String, anyhow::Error>>| {
+    ///         if response.status().is_success() {
+    ///             Msg::Noop
+    ///         } else {
+    ///             Msg::Error
     ///         }
-    ///     )
+    ///     }),
+    /// );
+    ///# }
     /// ```
     ///
-    /// One can also simply consume and pass the response or body object into
-    /// the message.
+    /// For a full example, you can specify that the response must be in the JSON format,
+    /// and be a specific serialized data type. If the mesage isn't Json, or isn't the specified
+    /// data type, then you will get a message indicating failure.
     ///
-    /// ```rust
-    ///     context.web.fetch(
-    ///         get_request,
-    ///         |response| {
-    ///             let (meta, Json(body)) = response.into_parts();
-    ///             if meta.status.is_success() {
-    ///                 Msg::FetchResourceComplete(body)
-    ///             } else {
-    ///                 Msg::FetchResourceFailed
-    ///             }
+    /// ```
+    ///# use yew::format::{Json, Nothing, Format};
+    ///# use yew::services::FetchService;
+    ///# use http::Request;
+    ///# use yew::services::fetch::Response;
+    ///# use yew::{Component, ComponentLink, Renderable, Html};
+    ///# use serde_derive::Deserialize;
+    ///# struct Comp;
+    ///# impl Component for Comp {
+    ///#     type Message = Msg;type Properties = ();
+    ///#     fn create(props: Self::Properties,link: ComponentLink<Self>) -> Self {unimplemented!()}
+    ///#     fn update(&mut self,msg: Self::Message) -> bool {unimplemented!()}
+    ///#     fn view(&self) -> Html {unimplemented!()}
+    ///# }
+    ///# enum Msg {
+    ///#     FetchResourceComplete(Data),
+    ///#     FetchResourceFailed
+    ///# }
+    /// #[derive(Deserialize)]
+    /// struct Data {
+    ///    value: String
+    /// }
+    ///
+    ///# fn dont_execute() {
+    ///# let link: ComponentLink<Comp> = unimplemented!();
+    /// let get_request = Request::get("/thing").body(Nothing).unwrap();
+    /// let callback = link.callback(|response: Response<Json<Result<Data, anyhow::Error>>>| {
+    ///     if let (meta, Json(Ok(body))) = response.into_parts() {
+    ///         if meta.status.is_success() {
+    ///             return Msg::FetchResourceComplete(body);
     ///         }
-    ///     )
+    ///     }
+    ///     Msg::FetchResourceFailed
+    /// });
+    ///
+    /// let task = FetchService::new().fetch(get_request, callback);
+    ///# }
     /// ```
     ///
     pub fn fetch<IN, OUT: 'static>(
@@ -173,14 +228,33 @@ impl FetchService {
 
     /// `fetch` with provided `FetchOptions` object.
     /// Use it if you need to send cookies with a request:
-    /// ```rust
-    ///     let request = fetch::Request::get("/path/")
-    ///         .body(Nothing).unwrap();
-    ///     let options = FetchOptions {
-    ///         credentials: Some(Credentials::SameOrigin),
-    ///         ..FetchOptions::default()
-    ///     };
-    ///     let task = fetch_service.fetch_with_options(request, options, callback);
+    /// ```
+    ///# use yew::format::Nothing;
+    ///# use yew::services::fetch::{self, FetchOptions, Credentials};
+    ///# use yew::{Renderable, Html, Component, ComponentLink};
+    ///# use yew::services::FetchService;
+    ///# use http::Response;
+    ///# struct Comp;
+    ///# impl Component for Comp {
+    ///#     type Message = Msg;
+    ///#     type Properties = ();
+    ///#     fn create(props: Self::Properties, link: ComponentLink<Self>) -> Self {unimplemented!()}
+    ///#     fn update(&mut self, msg: Self::Message) -> bool {unimplemented!()}
+    ///#     fn view(&self) -> Html {unimplemented!()}
+    ///# }
+    ///# pub enum Msg {}
+    ///# fn dont_execute() {
+    ///# let link: ComponentLink<Comp> = unimplemented!();
+    ///# let callback = link.callback(|response: Response<Result<String, anyhow::Error>>| unimplemented!());
+    /// let request = fetch::Request::get("/path/")
+    ///     .body(Nothing)
+    ///     .unwrap();
+    /// let options = FetchOptions {
+    ///     credentials: Some(Credentials::SameOrigin),
+    ///     ..FetchOptions::default()
+    /// };
+    /// let task = FetchService::new().fetch_with_options(request, options, callback);
+    ///# }
     /// ```
     pub fn fetch_with_options<IN, OUT: 'static>(
         &mut self,
@@ -261,10 +335,9 @@ where
     // Notice that the callback signature must match the call from the javascript
     // side. There is no static check at this point.
     let callback = move |success: bool, status: u16, headers: HashMap<String, String>, data: X| {
-        let mut response_builder = Response::builder();
-        response_builder.status(status);
-        for (key, values) in &headers {
-            response_builder.header(key.as_str(), values.as_str());
+        let mut response_builder = Response::builder().status(status);
+        for (key, values) in headers {
+            response_builder = response_builder.header(key.as_str(), values.as_str());
         }
 
         // Deserialize and wrap response data into a Text object.
@@ -278,6 +351,7 @@ where
         callback.emit(response);
     };
 
+    #[allow(clippy::too_many_arguments)]
     let handle = js! {
         var body = @{body};
         if (@{binary} && body != null) {
diff --git a/src/services/interval.rs b/src/services/interval.rs
index c43d9407249..b2cf7810b49 100644
--- a/src/services/interval.rs
+++ b/src/services/interval.rs
@@ -3,6 +3,7 @@
 
 use super::{to_ms, Task};
 use crate::callback::Callback;
+use std::fmt;
 use std::time::Duration;
 use stdweb::Value;
 #[allow(unused_imports)]
@@ -13,8 +14,14 @@ use stdweb::{_js_impl, js};
 #[must_use]
 pub struct IntervalTask(Option<Value>);
 
+impl fmt::Debug for IntervalTask {
+    fn fmt(&self, f: &mut fmt::Formatter<'_>) -> fmt::Result {
+        f.write_str("IntervalTask")
+    }
+}
+
 /// A service to send messages on every elapsed interval.
-#[derive(Default)]
+#[derive(Default, Debug)]
 pub struct IntervalService {}
 
 impl IntervalService {
diff --git a/src/services/keyboard.rs b/src/services/keyboard.rs
new file mode 100644
index 00000000000..ba4938a700d
--- /dev/null
+++ b/src/services/keyboard.rs
@@ -0,0 +1,96 @@
+//! Service to register key press event listeners on elements.
+use crate::callback::Callback;
+use std::fmt;
+use stdweb::web::event::{KeyDownEvent, KeyPressEvent, KeyUpEvent};
+use stdweb::web::{EventListenerHandle, IEventTarget};
+
+/// Service for registering callbacks on elements to get keystrokes from the user.
+///
+/// # Note
+/// Elements that natively support keyboard input (input or textarea) can set an
+/// `onkeypress` or `oninput` attribute within the html macro. You **should** use those events instead of
+/// locating the element and registering it with this service.
+///
+/// This service is for adding key event listeners to elements that don't support these attributes,
+/// like the `document` or `<canvas>` elements for example.
+#[derive(Debug)]
+pub struct KeyboardService {}
+
+/// Handle to the key event listener.
+///
+/// When it goes out of scope, the listener will be removed from the element.
+pub struct KeyListenerHandle(Option<EventListenerHandle>);
+
+impl fmt::Debug for KeyListenerHandle {
+    fn fmt(&self, f: &mut fmt::Formatter<'_>) -> fmt::Result {
+        f.write_str("KeyListenerHandle")
+    }
+}
+
+impl KeyboardService {
+    /// Registers a callback that listens to KeyPressEvents on a provided element.
+    ///
+    /// # Documentation
+    /// [keypress event](https://developer.mozilla.org/en-US/docs/Web/API/Document/keypress_event)
+    ///
+    /// # Warning
+    /// This API has been deprecated in the HTML standard and it is not recommended for use in new projects.
+    /// Consult with the browser compatibility chart in the linked MDN documentation.
+    pub fn register_key_press<T: IEventTarget>(
+        element: &T,
+        callback: Callback<KeyPressEvent>,
+    ) -> KeyListenerHandle {
+        let handle = element.add_event_listener(move |event: KeyPressEvent| {
+            callback.emit(event);
+        });
+        KeyListenerHandle(Some(handle))
+    }
+
+    /// Registers a callback that listens to KeyDownEvents on a provided element.
+    ///
+    /// # Documentation
+    /// [keydown event](https://developer.mozilla.org/en-US/docs/Web/API/Document/keydown_event)
+    ///
+    /// # Note
+    /// This browser feature is relatively new and is set to replace keypress events.
+    /// Not all browsers may support it completely.
+    /// Consult with the browser compatibility chart in the linked MDN documentation.
+    pub fn register_key_down<T: IEventTarget>(
+        element: &T,
+        callback: Callback<KeyDownEvent>,
+    ) -> KeyListenerHandle {
+        let handle = element.add_event_listener(move |event: KeyDownEvent| {
+            callback.emit(event);
+        });
+        KeyListenerHandle(Some(handle))
+    }
+
+    /// Registers a callback that listens to KeyUpEvents on a provided element.
+    ///
+    /// # Documentation
+    /// [keyup event](https://developer.mozilla.org/en-US/docs/Web/API/Document/keyup_event)
+    ///
+    /// # Note
+    /// This browser feature is relatively new and is set to replace keypress events.
+    /// Not all browsers may support it completely.
+    /// Consult with the browser compatibility chart in the linked MDN documentation.
+    pub fn register_key_up<T: IEventTarget>(
+        element: &T,
+        callback: Callback<KeyUpEvent>,
+    ) -> KeyListenerHandle {
+        let handle = element.add_event_listener(move |event: KeyUpEvent| {
+            callback.emit(event);
+        });
+        KeyListenerHandle(Some(handle))
+    }
+}
+
+impl Drop for KeyListenerHandle {
+    fn drop(&mut self) {
+        if let Some(handle) = self.0.take() {
+            handle.remove()
+        } else {
+            panic!("Tried to drop KeyListenerHandle twice")
+        }
+    }
+}
diff --git a/src/services/mod.rs b/src/services/mod.rs
index ce89ef9abf1..350349e2566 100644
--- a/src/services/mod.rs
+++ b/src/services/mod.rs
@@ -7,6 +7,7 @@ pub mod console;
 pub mod dialog;
 pub mod fetch;
 pub mod interval;
+pub mod keyboard;
 pub mod reader;
 pub mod render;
 pub mod resize;
diff --git a/src/services/reader.rs b/src/services/reader.rs
index 7a16abb3531..c1fd144b098 100644
--- a/src/services/reader.rs
+++ b/src/services/reader.rs
@@ -3,6 +3,7 @@
 use super::Task;
 use crate::callback::Callback;
 use std::cmp;
+use std::fmt;
 use stdweb::unstable::TryInto;
 use stdweb::web::event::LoadEndEvent;
 pub use stdweb::web::{Blob, File, IBlob};
@@ -39,7 +40,7 @@ pub enum FileChunk {
 }
 
 /// A reader service attached to a user context.
-#[derive(Default)]
+#[derive(Default, Debug)]
 pub struct ReaderService {}
 
 impl ReaderService {
@@ -135,6 +136,12 @@ pub struct ReaderTask {
     file_reader: FileReader,
 }
 
+impl fmt::Debug for ReaderTask {
+    fn fmt(&self, f: &mut fmt::Formatter<'_>) -> fmt::Result {
+        f.write_str("ReaderTask")
+    }
+}
+
 impl Task for ReaderTask {
     fn is_active(&self) -> bool {
         self.file_reader.ready_state() == FileReaderReadyState::Loading
diff --git a/src/services/render.rs b/src/services/render.rs
index 036914a3e4d..b5d244a84b8 100644
--- a/src/services/render.rs
+++ b/src/services/render.rs
@@ -3,6 +3,7 @@
 
 use crate::callback::Callback;
 use crate::services::Task;
+use std::fmt;
 use stdweb::unstable::TryInto;
 use stdweb::Value;
 #[allow(unused_imports)]
@@ -12,8 +13,14 @@ use stdweb::{_js_impl, js};
 #[must_use]
 pub struct RenderTask(Option<Value>);
 
+impl fmt::Debug for RenderTask {
+    fn fmt(&self, f: &mut fmt::Formatter<'_>) -> fmt::Result {
+        f.write_str("RenderTask")
+    }
+}
+
 /// A service to request animation frames.
-#[derive(Default)]
+#[derive(Default, Debug)]
 pub struct RenderService {}
 
 impl RenderService {
@@ -54,7 +61,7 @@ impl Task for RenderTask {
         let handle = self.0.take().expect("tried to cancel render twice");
         js! { @(no_return)
             var handle = @{handle};
-            cancelAnimationFrame(handle.timeout_id);
+            cancelAnimationFrame(handle.render_id);
             handle.callback.drop();
         }
     }
diff --git a/src/services/resize.rs b/src/services/resize.rs
index c94d032cba6..fd3593795f4 100644
--- a/src/services/resize.rs
+++ b/src/services/resize.rs
@@ -1,4 +1,5 @@
 //! This module contains the implementation of a service that listens for browser window resize events.
+use std::fmt;
 use stdweb::Value;
 use stdweb::{
     js,
@@ -7,14 +8,21 @@ use stdweb::{
 use yew::callback::Callback;
 
 /// A service that fires events when the browser window resizes.
-#[derive(Default)]
+#[derive(Default, Debug)]
 pub struct ResizeService {}
 
 /// A handle to the event listener for resize events.
 #[must_use]
 pub struct ResizeTask(Option<Value>);
 
+impl fmt::Debug for ResizeTask {
+    fn fmt(&self, f: &mut fmt::Formatter<'_>) -> fmt::Result {
+        f.write_str("ResizeTask")
+    }
+}
+
 /// Dimensions of the window.
+#[derive(Debug)]
 pub struct WindowDimensions {
     /// The width of the viewport of the browser window.
     pub width: i32,
diff --git a/src/services/storage.rs b/src/services/storage.rs
index 4204cbf53c1..64754239920 100644
--- a/src/services/storage.rs
+++ b/src/services/storage.rs
@@ -2,17 +2,19 @@
 //! use local and session storage of a browser.
 
 use crate::format::Text;
-use failure::Fail;
+use std::fmt;
 use stdweb::web::{window, Storage};
+use thiserror::Error;
 
 /// Represents errors of a storage.
-#[derive(Debug, Fail)]
+#[derive(Debug, Error)]
 enum StorageError {
-    #[fail(display = "restore error")]
+    #[error("restore error")]
     CantRestore,
 }
 
 /// An area to keep the data in.
+#[derive(Debug)]
 pub enum Area {
     /// Use `localStorage` of a browser.
     Local,
@@ -25,6 +27,12 @@ pub struct StorageService {
     storage: Storage,
 }
 
+impl fmt::Debug for StorageService {
+    fn fmt(&self, f: &mut fmt::Formatter<'_>) -> fmt::Result {
+        f.write_str("StorageService")
+    }
+}
+
 impl StorageService {
     /// Creates a new storage service instance with specified storage area.
     pub fn new(area: Area) -> Self {
diff --git a/src/services/timeout.rs b/src/services/timeout.rs
index 0639034c99d..eb8450ecbfb 100644
--- a/src/services/timeout.rs
+++ b/src/services/timeout.rs
@@ -3,6 +3,7 @@
 
 use super::{to_ms, Task};
 use crate::callback::Callback;
+use std::fmt;
 use std::time::Duration;
 use stdweb::Value;
 #[allow(unused_imports)]
@@ -12,8 +13,14 @@ use stdweb::{_js_impl, js};
 #[must_use]
 pub struct TimeoutTask(Option<Value>);
 
+impl fmt::Debug for TimeoutTask {
+    fn fmt(&self, f: &mut fmt::Formatter<'_>) -> fmt::Result {
+        f.write_str("TimeoutTask")
+    }
+}
+
 /// An service to set a timeout.
-#[derive(Default)]
+#[derive(Default, Debug)]
 pub struct TimeoutService {}
 
 impl TimeoutService {
diff --git a/src/services/websocket.rs b/src/services/websocket.rs
index d8decaf4f51..548ee320cee 100644
--- a/src/services/websocket.rs
+++ b/src/services/websocket.rs
@@ -4,12 +4,13 @@
 use super::Task;
 use crate::callback::Callback;
 use crate::format::{Binary, Text};
+use std::fmt;
 use stdweb::traits::IMessageEvent;
 use stdweb::web::event::{SocketCloseEvent, SocketErrorEvent, SocketMessageEvent, SocketOpenEvent};
 use stdweb::web::{IEventTarget, SocketBinaryType, SocketReadyState, WebSocket};
 
-#[derive(Debug)]
 /// A status of a websocket connection. Used for status notification.
+#[derive(Debug)]
 pub enum WebSocketStatus {
     /// Fired when a websocket connection was opened.
     Opened,
@@ -26,8 +27,14 @@ pub struct WebSocketTask {
     notification: Callback<WebSocketStatus>,
 }
 
+impl fmt::Debug for WebSocketTask {
+    fn fmt(&self, f: &mut fmt::Formatter<'_>) -> fmt::Result {
+        f.write_str("WebSocketTask")
+    }
+}
+
 /// A websocket service attached to a user context.
-#[derive(Default)]
+#[derive(Default, Debug)]
 pub struct WebSocketService {}
 
 impl WebSocketService {
@@ -43,11 +50,16 @@ impl WebSocketService {
         url: &str,
         callback: Callback<OUT>,
         notification: Callback<WebSocketStatus>,
-    ) -> WebSocketTask
+    ) -> Result<WebSocketTask, &str>
     where
         OUT: From<Text> + From<Binary>,
     {
-        let ws = WebSocket::new(url).unwrap();
+        let ws = WebSocket::new(url);
+        if ws.is_err() {
+            return Err("Failed to created websocket with given URL");
+        }
+
+        let ws = ws.unwrap();
         ws.set_binary_type(SocketBinaryType::ArrayBuffer);
         let notify = notification.clone();
         ws.add_event_listener(move |_: SocketOpenEvent| {
@@ -73,7 +85,7 @@ impl WebSocketService {
                 callback.emit(out);
             }
         });
-        WebSocketTask { ws, notification }
+        Ok(WebSocketTask { ws, notification })
     }
 }
 
diff --git a/src/utils.rs b/src/utils.rs
index c56d43227ba..c4f17a5af72 100644
--- a/src/utils.rs
+++ b/src/utils.rs
@@ -1,12 +1,41 @@
 //! This module contains useful utils to get information about the current document.
 
-use failure::{err_msg, Error};
+use anyhow::{anyhow, Error};
+use std::marker::PhantomData;
 use stdweb::web::document;
 
 /// Returns `host` for the current document. Useful to connect to a server that server the app.
 pub fn host() -> Result<String, Error> {
     document()
         .location()
-        .ok_or_else(|| err_msg("can't get location"))
+        .ok_or_else(|| anyhow!("can't get location"))
         .and_then(|l| l.host().map_err(Error::from))
 }
+
+/// Specialty type necessary for helping flattening components returned from nested html macros.
+#[derive(Debug)]
+pub struct NodeSeq<IN, OUT>(Vec<OUT>, PhantomData<IN>);
+
+impl<IN: Into<OUT>, OUT> From<IN> for NodeSeq<IN, OUT> {
+    fn from(val: IN) -> Self {
+        Self(vec![val.into()], PhantomData::default())
+    }
+}
+
+impl<IN: Into<OUT>, OUT> From<Vec<IN>> for NodeSeq<IN, OUT> {
+    fn from(val: Vec<IN>) -> Self {
+        Self(
+            val.into_iter().map(|x| x.into()).collect(),
+            PhantomData::default(),
+        )
+    }
+}
+
+impl<IN: Into<OUT>, OUT> IntoIterator for NodeSeq<IN, OUT> {
+    type Item = OUT;
+    type IntoIter = std::vec::IntoIter<Self::Item>;
+
+    fn into_iter(self) -> Self::IntoIter {
+        self.0.into_iter()
+    }
+}
diff --git a/src/virtual_dom/mod.rs b/src/virtual_dom/mod.rs
index ce461f536fe..532b75c17b5 100644
--- a/src/virtual_dom/mod.rs
+++ b/src/virtual_dom/mod.rs
@@ -9,39 +9,38 @@ pub mod vtext;
 use indexmap::set::IndexSet;
 use std::collections::HashMap;
 use std::fmt;
+use std::rc::Rc;
 use stdweb::web::{Element, EventListenerHandle, Node};
 
-pub use self::vcomp::VComp;
+pub use self::vcomp::{VChild, VComp};
 pub use self::vlist::VList;
 pub use self::vnode::VNode;
 pub use self::vtag::VTag;
 pub use self::vtext::VText;
-use crate::html::{Component, Scope};
 
 /// `Listener` trait is an universal implementation of an event listener
 /// which helps to bind Rust-listener to JS-listener (DOM).
-pub trait Listener<COMP: Component> {
+pub trait Listener {
     /// Returns standard name of DOM's event.
     fn kind(&self) -> &'static str;
-    /// Attaches listener to the element and uses scope instance to send
-    /// prepaired event back to the yew main loop.
-    fn attach(&mut self, element: &Element, scope: Scope<COMP>) -> EventListenerHandle;
+    /// Attaches a listener to the element.
+    fn attach(&self, element: &Element) -> EventListenerHandle;
 }
 
-impl<COMP: Component> fmt::Debug for dyn Listener<COMP> {
+impl fmt::Debug for dyn Listener {
     fn fmt(&self, f: &mut fmt::Formatter<'_>) -> fmt::Result {
         write!(f, "Listener {{ kind: {} }}", self.kind())
     }
 }
 
 /// A list of event listeners.
-type Listeners<COMP> = Vec<Box<dyn Listener<COMP>>>;
+type Listeners = Vec<Rc<dyn Listener>>;
 
 /// A map of attributes.
 type Attributes = HashMap<String, String>;
 
 /// A set of classes.
-#[derive(Debug)]
+#[derive(Debug, Clone, Default, PartialEq)]
 pub struct Classes {
     set: IndexSet<String>,
 }
@@ -55,45 +54,84 @@ impl Classes {
     }
 
     /// Adds a class to a set.
+    ///
+    /// Prevents duplication of class names.
     pub fn push(&mut self, class: &str) {
-        self.set.insert(class.into());
+        let class = class.trim();
+        if !class.is_empty() {
+            self.set.insert(class.into());
+        }
     }
 
     /// Check the set contains a class.
     pub fn contains(&self, class: &str) -> bool {
         self.set.contains(class)
     }
+
+    /// Check the set is empty.
+    pub fn is_empty(&self) -> bool {
+        self.set.is_empty()
+    }
+
+    /// Adds other classes to this set of classes; returning itself.
+    ///
+    /// Takes the logical union of both `Classes`.
+    pub fn extend<T: Into<Classes>>(mut self, other: T) -> Self {
+        self.set.extend(other.into().set.into_iter());
+        self
+    }
 }
 
 impl ToString for Classes {
     fn to_string(&self) -> String {
-        let mut buf = String::new();
-        for class in &self.set {
-            buf.push_str(class);
-            buf.push(' ');
-        }
-        buf.pop();
-        buf
+        self.set
+            .iter()
+            .map(String::as_str)
+            .collect::<Vec<&str>>()
+            .join(" ")
     }
 }
 
 impl From<&str> for Classes {
     fn from(t: &str) -> Self {
-        let set = t.split_whitespace().map(String::from).collect();
+        let set = t
+            .split_whitespace()
+            .map(String::from)
+            .filter(|c| !c.is_empty())
+            .collect();
         Self { set }
     }
 }
 
 impl From<String> for Classes {
     fn from(t: String) -> Self {
-        let set = t.split_whitespace().map(String::from).collect();
+        let set = t
+            .split_whitespace()
+            .map(String::from)
+            .filter(|c| !c.is_empty())
+            .collect();
+        Self { set }
+    }
+}
+
+impl From<&String> for Classes {
+    fn from(t: &String) -> Self {
+        let set = t
+            .split_whitespace()
+            .map(String::from)
+            .filter(|c| !c.is_empty())
+            .collect();
         Self { set }
     }
 }
 
 impl<T: AsRef<str>> From<Vec<T>> for Classes {
     fn from(t: Vec<T>) -> Self {
-        let set = t.iter().map(|x| x.as_ref().to_string()).collect();
+        let set = t
+            .iter()
+            .map(|x| x.as_ref().to_string())
+            .filter(|c| !c.is_empty())
+            .collect();
         Self { set }
     }
 }
@@ -117,8 +155,8 @@ enum Reform {
     /// The optional `Node` is used to insert the
     /// new node in the correct slot of the parent.
     ///
-    /// If it does not exist, a `precursor` must be
-    /// speccified (see `VDiff::apply()`).
+    /// If it does not exist, a `previous_sibling` must be
+    /// specified (see `VDiff::apply()`).
     Before(Option<Node>),
 }
 
@@ -126,26 +164,23 @@ enum Reform {
 // In makes possible to include ANY element into the tree.
 // `Ace` editor embedding for example?
 
-/// This trait provides features to update a tree by other tree comparsion.
+/// This trait provides features to update a tree by calculating a difference against another tree.
 pub trait VDiff {
-    /// The component which this instance put into.
-    type Component: Component;
-
     /// Remove itself from parent and return the next sibling.
     fn detach(&mut self, parent: &Element) -> Option<Node>;
 
     /// Scoped diff apply to other tree.
     ///
     /// Virtual rendering for the node. It uses parent node and existing children (virtual and DOM)
-    /// to check the difference and apply patches to the actual DOM represenatation.
+    /// to check the difference and apply patches to the actual DOM representation.
     ///
     /// Parameters:
     /// - `parent`: the parent node in the DOM.
-    /// - `precursor`: the "previous node" in a list of nodes, used to efficiently
+    /// - `previous_sibling`: the "previous node" in a list of nodes, used to efficiently
     ///   find where to put the node.
     /// - `ancestor`: the node that this node will be replacing in the DOM.
     ///   This method will _always_ remove the `ancestor` from the `parent`.
-    /// - `env`: the `Env`.
+    /// - `parent_scope`: the parent `Scope` used for passing messages to the parent `Component`.
     ///
     /// ### Internal Behavior Notice:
     ///
@@ -158,8 +193,13 @@ pub trait VDiff {
     fn apply(
         &mut self,
         parent: &Element,
-        precursor: Option<&Node>,
-        ancestor: Option<VNode<Self::Component>>,
-        scope: &Scope<Self::Component>,
+        previous_sibling: Option<&Node>,
+        ancestor: Option<VNode>,
     ) -> Option<Node>;
 }
+
+/// Transform properties to the expected type.
+pub trait Transformer<FROM, TO> {
+    /// Transforms one type to another.
+    fn transform(from: FROM) -> TO;
+}
diff --git a/src/virtual_dom/vcomp.rs b/src/virtual_dom/vcomp.rs
index d3aa1e60f73..0cfe773ea37 100644
--- a/src/virtual_dom/vcomp.rs
+++ b/src/virtual_dom/vcomp.rs
@@ -1,96 +1,122 @@
 //! This module contains the implementation of a virtual component `VComp`.
 
-use super::{VDiff, VNode};
-use crate::callback::Callback;
-use crate::html::{Component, ComponentUpdate, NodeCell, Renderable, Scope};
+use super::{Transformer, VDiff, VNode};
+use crate::html::{Component, ComponentUpdate, HiddenScope, NodeRef, Scope};
 use std::any::TypeId;
 use std::cell::RefCell;
+use std::fmt;
 use std::rc::Rc;
-use stdweb::unstable::TryInto;
-use stdweb::web::{document, Element, INode, Node};
+use stdweb::web::{document, Element, INode, Node, TextNode};
 
-struct Hidden;
-
-type HiddenScope = *mut Hidden;
-
-/// The method generates an instance of a (child) component.
-type Generator<COMP> = dyn FnOnce(GeneratorType, Scope<COMP>) -> Mounted;
+/// The method generates an instance of a component.
+type Generator = dyn Fn(GeneratorType) -> Mounted;
 
 /// Components can be generated by mounting or by overwriting an old component.
 enum GeneratorType {
-    Mount(Element, Node),
-    Overwrite(TypeId, HiddenScope, NodeCell),
+    Mount(Element, TextNode),
+    Overwrite(HiddenScope),
 }
 
-/// A reference to unknown scope which will be attached later with a generator function.
-pub type ScopeHolder<COMP> = Rc<RefCell<Option<Scope<COMP>>>>;
-
 /// A virtual component.
-pub struct VComp<COMP: Component> {
+pub struct VComp {
     type_id: TypeId,
-    state: Rc<RefCell<MountState<COMP>>>,
+    state: Rc<RefCell<MountState>>,
+}
+
+impl Clone for VComp {
+    fn clone(&self) -> Self {
+        VComp {
+            type_id: self.type_id,
+            state: self.state.clone(),
+        }
+    }
+}
+
+/// A virtual child component.
+pub struct VChild<COMP: Component> {
+    /// The component properties
+    pub props: COMP::Properties,
+    /// Reference to the mounted node
+    node_ref: NodeRef,
+}
+
+impl<COMP: Component> Clone for VChild<COMP> {
+    fn clone(&self) -> Self {
+        VChild {
+            props: self.props.clone(),
+            node_ref: self.node_ref.clone(),
+        }
+    }
+}
+
+impl<COMP> VChild<COMP>
+where
+    COMP: Component,
+{
+    /// Creates a child component that can be accessed and modified by its parent.
+    pub fn new(props: COMP::Properties, node_ref: NodeRef) -> Self {
+        Self { props, node_ref }
+    }
+}
+
+impl<COMP> From<VChild<COMP>> for VComp
+where
+    COMP: Component,
+{
+    fn from(vchild: VChild<COMP>) -> Self {
+        VComp::new::<COMP>(vchild.props, vchild.node_ref)
+    }
 }
 
-enum MountState<COMP: Component> {
-    Unmounted(Unmounted<COMP>),
+enum MountState {
+    Unmounted(Unmounted),
     Mounted(Mounted),
     Mounting,
     Detached,
     Overwritten,
 }
 
-struct Unmounted<COMP: Component> {
-    generator: Box<Generator<COMP>>,
+struct Unmounted {
+    generator: Box<Generator>,
 }
 
 struct Mounted {
-    occupied: NodeCell,
+    node_ref: NodeRef,
     scope: HiddenScope,
     destroyer: Box<dyn FnOnce()>,
 }
 
-impl<COMP: Component> VComp<COMP> {
+impl VComp {
     /// This method prepares a generator to make a new instance of the `Component`.
-    pub fn new<CHILD>(props: CHILD::Properties, scope_holder: ScopeHolder<COMP>) -> Self
+    pub fn new<COMP>(props: COMP::Properties, node_ref: NodeRef) -> Self
     where
-        CHILD: Component + Renderable<CHILD>,
+        COMP: Component,
     {
-        let generator = move |generator_type: GeneratorType, parent: Scope<COMP>| -> Mounted {
-            *scope_holder.borrow_mut() = Some(parent);
+        let generator = move |generator_type: GeneratorType| -> Mounted {
             match generator_type {
-                GeneratorType::Mount(element, ancestor) => {
-                    let occupied: NodeCell = Rc::new(RefCell::new(None));
-                    let scope: Scope<CHILD> = Scope::new();
+                GeneratorType::Mount(element, dummy_node) => {
+                    let scope: Scope<COMP> = Scope::new();
 
-                    // TODO Consider to send ComponentUpdate::Create after `mount_in_place` call
                     let mut scope = scope.mount_in_place(
                         element,
-                        Some(VNode::VRef(ancestor)),
-                        Some(occupied.clone()),
-                        props,
+                        Some(VNode::VRef(dummy_node.into())),
+                        node_ref.clone(),
+                        props.clone(),
                     );
 
                     Mounted {
-                        occupied,
-                        scope: Box::into_raw(Box::new(scope.clone())) as *mut Hidden,
+                        node_ref: node_ref.clone(),
+                        scope: scope.clone().into(),
                         destroyer: Box::new(move || scope.destroy()),
                     }
                 }
-                GeneratorType::Overwrite(type_id, scope, occupied) => {
-                    if type_id != TypeId::of::<CHILD>() {
-                        panic!("tried to overwrite a different type of component");
-                    }
-
-                    let mut scope = unsafe {
-                        let raw: *mut Scope<CHILD> = scope as *mut Scope<CHILD>;
-                        *Box::from_raw(raw)
-                    };
-
-                    scope.update(ComponentUpdate::Properties(props));
+                GeneratorType::Overwrite(hidden_scope) => {
+                    let mut scope: Scope<COMP> = hidden_scope.into();
+                    scope.update(ComponentUpdate::Properties(props.clone()));
 
                     Mounted {
-                        occupied,
-                        scope: Box::into_raw(Box::new(scope.clone())) as *mut Hidden,
+                        node_ref: node_ref.clone(),
+                        scope: scope.clone().into(),
                         destroyer: Box::new(move || scope.destroy()),
                     }
                 }
@@ -98,7 +124,7 @@ impl<COMP: Component> VComp<COMP> {
         };
 
         VComp {
-            type_id: TypeId::of::<CHILD>(),
+            type_id: TypeId::of::<COMP>(),
             state: Rc::new(RefCell::new(MountState::Unmounted(Unmounted {
                 generator: Box::new(generator),
             }))),
@@ -106,180 +132,91 @@ impl<COMP: Component> VComp<COMP> {
     }
 }
 
-/// Converts property and attach empty scope holder which will be activated later.
-pub trait Transformer<COMP: Component, FROM, TO> {
-    /// Transforms one type to another.
-    fn transform(scope_holder: ScopeHolder<COMP>, from: FROM) -> TO;
-}
-
-impl<COMP, T> Transformer<COMP, T, T> for VComp<COMP>
-where
-    COMP: Component,
-{
-    fn transform(_: ScopeHolder<COMP>, from: T) -> T {
-        from
-    }
-}
-
-impl<'a, COMP, T> Transformer<COMP, &'a T, T> for VComp<COMP>
-where
-    COMP: Component,
-    T: Clone,
-{
-    fn transform(_: ScopeHolder<COMP>, from: &'a T) -> T {
-        from.clone()
-    }
-}
-
-impl<'a, COMP> Transformer<COMP, &'a str, String> for VComp<COMP>
-where
-    COMP: Component,
-{
-    fn transform(_: ScopeHolder<COMP>, from: &'a str) -> String {
-        from.to_owned()
-    }
-}
-
-impl<'a, COMP, F, IN> Transformer<COMP, F, Callback<IN>> for VComp<COMP>
-where
-    COMP: Component + Renderable<COMP>,
-    F: Fn(IN) -> COMP::Message + 'static,
-{
-    fn transform(scope: ScopeHolder<COMP>, from: F) -> Callback<IN> {
-        let callback = move |arg| {
-            let msg = from(arg);
-            if let Some(ref mut sender) = *scope.borrow_mut() {
-                sender.send_message(msg);
-            } else {
-                panic!("unactivated callback, parent component have to activate it");
-            }
-        };
-        callback.into()
+impl Unmounted {
+    /// Mount a virtual component using a generator.
+    fn mount(self, parent: Element, dummy_node: TextNode) -> Mounted {
+        (self.generator)(GeneratorType::Mount(parent, dummy_node))
     }
-}
 
-impl<COMP: Component> Unmounted<COMP> {
-    /// mount a virtual component with a generator.
-    fn mount<T: INode>(
-        self,
-        parent: &T,
-        ancestor: Node, // Any dummy expected
-        env: Scope<COMP>,
-    ) -> Mounted {
-        let element: Element = parent
-            .as_node()
-            .as_ref()
-            .to_owned()
-            .try_into()
-            .expect("element expected to mount VComp");
-        (self.generator)(GeneratorType::Mount(element, ancestor), env)
-    }
-
-    /// Overwrite an existing virtual component with a generator.
-    fn replace(self, type_id: TypeId, old: Mounted, env: Scope<COMP>) -> Mounted {
-        (self.generator)(
-            GeneratorType::Overwrite(type_id, old.scope, old.occupied),
-            env,
-        )
+    /// Overwrite an existing virtual component using a generator.
+    fn replace(self, old: Mounted) -> Mounted {
+        (self.generator)(GeneratorType::Overwrite(old.scope))
     }
 }
 
 enum Reform {
-    Keep(TypeId, Mounted),
+    Keep(Mounted),
     Before(Option<Node>),
 }
 
-impl<COMP> VDiff for VComp<COMP>
-where
-    COMP: Component + 'static,
-{
-    type Component = COMP;
-
-    /// Remove VComp from parent.
+impl VDiff for VComp {
     fn detach(&mut self, parent: &Element) -> Option<Node> {
         match self.state.replace(MountState::Detached) {
             MountState::Mounted(this) => {
                 (this.destroyer)();
-                this.occupied.borrow_mut().take().and_then(|node| {
-                    let sibling = node.next_sibling();
+                this.node_ref.get().and_then(|node| {
+                    let next_sibling = node.next_sibling();
                     parent
                         .remove_child(&node)
                         .expect("can't remove the component");
-                    sibling
+                    next_sibling
                 })
             }
             _ => None,
         }
     }
 
-    /// Renders independent component over DOM `Element`.
-    /// It compares this with an ancestor `VComp` and overwrites it if it is the same type.
     fn apply(
         &mut self,
         parent: &Element,
-        precursor: Option<&Node>,
-        ancestor: Option<VNode<Self::Component>>,
-        env: &Scope<Self::Component>,
+        previous_sibling: Option<&Node>,
+        ancestor: Option<VNode>,
     ) -> Option<Node> {
         match self.state.replace(MountState::Mounting) {
             MountState::Unmounted(this) => {
                 let reform = match ancestor {
                     Some(VNode::VComp(mut vcomp)) => {
+                        // If the ancestor is a Component of the same type, don't replace, keep the
+                        // old Component but update the properties.
                         if self.type_id == vcomp.type_id {
                             match vcomp.state.replace(MountState::Overwritten) {
-                                MountState::Mounted(mounted) => {
-                                    Reform::Keep(vcomp.type_id, mounted)
-                                }
+                                MountState::Mounted(mounted) => Reform::Keep(mounted),
                                 _ => Reform::Before(None),
                             }
                         } else {
-                            let node = vcomp.detach(parent);
-                            Reform::Before(node)
+                            Reform::Before(vcomp.detach(parent))
                         }
                     }
-                    Some(mut vnode) => {
-                        let node = vnode.detach(parent);
-                        Reform::Before(node)
-                    }
+                    Some(mut vnode) => Reform::Before(vnode.detach(parent)),
                     None => Reform::Before(None),
                 };
 
                 let mounted = match reform {
-                    Reform::Keep(type_id, mounted) => {
-                        // Send properties update when component still be rendered.
-                        // But for the first initialization mount gets initial
-                        // properties directly without this channel.
-                        this.replace(type_id, mounted, env.clone())
+                    Reform::Keep(mounted) => {
+                        // Send properties update when the component is already rendered.
+                        this.replace(mounted)
                     }
-                    Reform::Before(before) => {
-                        // This is a workaround, because component should be mounted
-                        // over ancestor element if it exists.
-                        // There is created an empty text node to be replaced with mount call.
-                        let element = document().create_text_node("");
-                        if let Some(sibling) = before {
+                    Reform::Before(next_sibling) => {
+                        // Temporary node which will be replaced by a component's root node.
+                        let dummy_node = document().create_text_node("");
+                        if let Some(next_sibling) = next_sibling {
                             parent
-                                .insert_before(&element, &sibling)
-                                .expect("can't insert dummy element for a component");
+                                .insert_before(&dummy_node, &next_sibling)
+                                .expect("can't insert dummy component node before next sibling");
+                        } else if let Some(next_sibling) =
+                            previous_sibling.and_then(|p| p.next_sibling())
+                        {
+                            parent
+                                .insert_before(&dummy_node, &next_sibling)
+                                .expect("can't insert dummy component node before next sibling");
                         } else {
-                            let precursor = precursor.and_then(|before| before.next_sibling());
-                            if let Some(precursor) = precursor {
-                                parent
-                                    .insert_before(&element, &precursor)
-                                    .expect("can't insert dummy element before precursor");
-                            } else {
-                                parent.append_child(&element);
-                            }
+                            parent.append_child(&dummy_node);
                         }
-                        let node = element.as_node().to_owned();
-                        this.mount(parent, node, env.clone())
+                        this.mount(parent.to_owned(), dummy_node)
                     }
                 };
 
-                let node = mounted
-                    .occupied
-                    .borrow()
-                    .as_ref()
-                    .map(|node| node.to_owned());
+                let node = mounted.node_ref.get();
                 self.state.replace(MountState::Mounted(mounted));
                 node
             }
@@ -291,8 +228,68 @@ where
     }
 }
 
-impl<COMP: Component> PartialEq for VComp<COMP> {
-    fn eq(&self, other: &VComp<COMP>) -> bool {
+impl<T> Transformer<T, T> for VComp {
+    fn transform(from: T) -> T {
+        from
+    }
+}
+
+impl<'a, T> Transformer<&'a T, T> for VComp
+where
+    T: Clone,
+{
+    fn transform(from: &'a T) -> T {
+        from.clone()
+    }
+}
+
+impl<'a> Transformer<&'a str, String> for VComp {
+    fn transform(from: &'a str) -> String {
+        from.to_owned()
+    }
+}
+
+impl<T> Transformer<T, Option<T>> for VComp {
+    fn transform(from: T) -> Option<T> {
+        Some(from)
+    }
+}
+
+impl<'a, T> Transformer<&'a T, Option<T>> for VComp
+where
+    T: Clone,
+{
+    fn transform(from: &T) -> Option<T> {
+        Some(from.clone())
+    }
+}
+
+impl<'a> Transformer<&'a str, Option<String>> for VComp {
+    fn transform(from: &'a str) -> Option<String> {
+        Some(from.to_owned())
+    }
+}
+
+impl<'a> Transformer<Option<&'a str>, Option<String>> for VComp {
+    fn transform(from: Option<&'a str>) -> Option<String> {
+        from.map(|s| s.to_owned())
+    }
+}
+
+impl PartialEq for VComp {
+    fn eq(&self, other: &VComp) -> bool {
         self.type_id == other.type_id
     }
 }
+
+impl fmt::Debug for VComp {
+    fn fmt(&self, f: &mut fmt::Formatter<'_>) -> fmt::Result {
+        f.write_str("VComp")
+    }
+}
+
+impl<COMP: Component> fmt::Debug for VChild<COMP> {
+    fn fmt(&self, f: &mut fmt::Formatter<'_>) -> fmt::Result {
+        f.write_str("VChild<_>")
+    }
+}
diff --git a/src/virtual_dom/vlist.rs b/src/virtual_dom/vlist.rs
index e1a4a65725a..5748d4a1b00 100644
--- a/src/virtual_dom/vlist.rs
+++ b/src/virtual_dom/vlist.rs
@@ -1,58 +1,82 @@
 //! This module contains fragments implementation.
 use super::{VDiff, VNode, VText};
-use crate::html::{Component, Scope};
+use std::ops::{Deref, DerefMut};
 use stdweb::web::{Element, Node};
 
 /// This struct represents a fragment of the Virtual DOM tree.
-pub struct VList<COMP: Component> {
-    /// The list of children nodes. Which also could have own children.
-    pub childs: Vec<VNode<COMP>>,
+#[derive(Clone, Debug, PartialEq, Default)]
+pub struct VList {
+    /// The list of children nodes.
+    pub children: Vec<VNode>,
+    /// Never use a placeholder element if set to true.
+    elide_placeholder: bool,
 }
 
-impl<COMP: Component> Default for VList<COMP> {
-    fn default() -> Self {
-        VList::new()
+impl Deref for VList {
+    type Target = Vec<VNode>;
+
+    fn deref(&self) -> &Self::Target {
+        &self.children
+    }
+}
+
+impl DerefMut for VList {
+    fn deref_mut(&mut self) -> &mut Self::Target {
+        &mut self.children
     }
 }
 
-impl<COMP: Component> VList<COMP> {
-    /// Creates a new `VTag` instance with `tag` name (cannot be changed later in DOM).
+impl VList {
+    /// Creates a new empty `VList` instance.
     pub fn new() -> Self {
-        VList { childs: Vec::new() }
+        Self::default()
+    }
+
+    /// Creates a new `VList` instance with children.
+    pub fn new_with_children(children: Vec<VNode>) -> Self {
+        VList {
+            children,
+            elide_placeholder: false,
+        }
+    }
+
+    /// Creates a new empty `VList` instance which does not need a placeholder node.
+    pub(crate) fn new_without_placeholder() -> Self {
+        VList {
+            children: Vec::new(),
+            elide_placeholder: true,
+        }
     }
 
     /// Add `VNode` child.
-    pub fn add_child(&mut self, child: VNode<COMP>) {
-        self.childs.push(child);
+    pub fn add_child(&mut self, child: VNode) {
+        self.children.push(child);
     }
 }
 
-impl<COMP: Component> VDiff for VList<COMP> {
-    type Component = COMP;
-
+impl VDiff for VList {
     fn detach(&mut self, parent: &Element) -> Option<Node> {
-        let mut last_sibling = None;
-        for mut child in self.childs.drain(..) {
-            last_sibling = child.detach(parent);
+        let mut next_sibling = None;
+        for mut child in self.children.drain(..) {
+            next_sibling = child.detach(parent);
         }
-        last_sibling
+        next_sibling
     }
 
     fn apply(
         &mut self,
         parent: &Element,
-        precursor: Option<&Node>,
-        ancestor: Option<VNode<Self::Component>>,
-        env: &Scope<Self::Component>,
+        previous_sibling: Option<&Node>,
+        ancestor: Option<VNode>,
     ) -> Option<Node> {
-        // Reuse precursor, because fragment reuse parent
-        let mut precursor = precursor.map(|node| node.to_owned());
+        // Reuse previous_sibling, because fragment reuse parent
+        let mut previous_sibling = previous_sibling.cloned();
         let mut rights = {
             match ancestor {
                 // If element matched this type
                 Some(VNode::VList(vlist)) => {
                     // Previously rendered items
-                    vlist.childs
+                    vlist.children
                 }
                 Some(vnode) => {
                     // Use the current node as a single fragment list
@@ -63,25 +87,24 @@ impl<COMP: Component> VDiff for VList<COMP> {
             }
         };
 
-        if self.childs.is_empty() {
-            // Fixes: https://github.com/DenisKolodin/yew/issues/294
+        if self.children.is_empty() && !self.elide_placeholder {
             // Without a placeholder the next element becomes first
             // and corrupts the order of rendering
             // We use empty text element to stake out a place
             let placeholder = VText::new("".into());
-            self.childs.push(placeholder.into());
+            self.children.push(placeholder.into());
         }
 
         // Process children
-        let mut lefts = self.childs.iter_mut();
+        let mut lefts = self.children.iter_mut();
         let mut rights = rights.drain(..);
         loop {
             match (lefts.next(), rights.next()) {
                 (Some(left), Some(right)) => {
-                    precursor = left.apply(parent, precursor.as_ref(), Some(right), &env);
+                    previous_sibling = left.apply(parent, previous_sibling.as_ref(), Some(right));
                 }
                 (Some(left), None) => {
-                    precursor = left.apply(parent, precursor.as_ref(), None, &env);
+                    previous_sibling = left.apply(parent, previous_sibling.as_ref(), None);
                 }
                 (None, Some(ref mut right)) => {
                     right.detach(parent);
@@ -89,6 +112,6 @@ impl<COMP: Component> VDiff for VList<COMP> {
                 (None, None) => break,
             }
         }
-        precursor
+        previous_sibling
     }
 }
diff --git a/src/virtual_dom/vnode.rs b/src/virtual_dom/vnode.rs
index 679df81c3b7..3e0eed744a9 100644
--- a/src/virtual_dom/vnode.rs
+++ b/src/virtual_dom/vnode.rs
@@ -1,28 +1,28 @@
 //! This module contains the implementation of abstract virtual node.
 
-use super::{VComp, VDiff, VList, VTag, VText};
-use crate::html::{Component, Renderable, Scope};
+use super::{VChild, VComp, VDiff, VList, VTag, VText};
+use crate::html::{Component, Renderable};
 use std::cmp::PartialEq;
 use std::fmt;
+use std::iter::FromIterator;
 use stdweb::web::{Element, INode, Node};
 
 /// Bind virtual element to a DOM reference.
-pub enum VNode<COMP: Component> {
+#[derive(Clone)]
+pub enum VNode {
     /// A bind between `VTag` and `Element`.
-    VTag(VTag<COMP>),
+    VTag(Box<VTag>),
     /// A bind between `VText` and `TextNode`.
-    VText(VText<COMP>),
+    VText(VText),
     /// A bind between `VComp` and `Element`.
-    VComp(VComp<COMP>),
+    VComp(VComp),
     /// A holder for a list of other nodes.
-    VList(VList<COMP>),
+    VList(VList),
     /// A holder for any `Node` (necessary for replacing node).
     VRef(Node),
 }
 
-impl<COMP: Component> VDiff for VNode<COMP> {
-    type Component = COMP;
-
+impl VDiff for VNode {
     /// Remove VNode from parent.
     fn detach(&mut self, parent: &Element) -> Option<Node> {
         match *self {
@@ -43,15 +43,14 @@ impl<COMP: Component> VDiff for VNode<COMP> {
     fn apply(
         &mut self,
         parent: &Element,
-        precursor: Option<&Node>,
-        ancestor: Option<VNode<Self::Component>>,
-        env: &Scope<Self::Component>,
+        previous_sibling: Option<&Node>,
+        ancestor: Option<VNode>,
     ) -> Option<Node> {
         match *self {
-            VNode::VTag(ref mut vtag) => vtag.apply(parent, precursor, ancestor, env),
-            VNode::VText(ref mut vtext) => vtext.apply(parent, precursor, ancestor, env),
-            VNode::VComp(ref mut vcomp) => vcomp.apply(parent, precursor, ancestor, env),
-            VNode::VList(ref mut vlist) => vlist.apply(parent, precursor, ancestor, env),
+            VNode::VTag(ref mut vtag) => vtag.apply(parent, previous_sibling, ancestor),
+            VNode::VText(ref mut vtext) => vtext.apply(parent, previous_sibling, ancestor),
+            VNode::VComp(ref mut vcomp) => vcomp.apply(parent, previous_sibling, ancestor),
+            VNode::VList(ref mut vlist) => vlist.apply(parent, previous_sibling, ancestor),
             VNode::VRef(ref mut node) => {
                 let sibling = match ancestor {
                     Some(mut n) => n.detach(parent),
@@ -71,43 +70,68 @@ impl<COMP: Component> VDiff for VNode<COMP> {
     }
 }
 
-impl<COMP: Component> From<VText<COMP>> for VNode<COMP> {
-    fn from(vtext: VText<COMP>) -> Self {
+impl Default for VNode {
+    fn default() -> Self {
+        VNode::VList(VList::default())
+    }
+}
+
+impl From<VText> for VNode {
+    fn from(vtext: VText) -> Self {
         VNode::VText(vtext)
     }
 }
 
-impl<COMP: Component> From<VList<COMP>> for VNode<COMP> {
-    fn from(vlist: VList<COMP>) -> Self {
+impl From<VList> for VNode {
+    fn from(vlist: VList) -> Self {
         VNode::VList(vlist)
     }
 }
 
-impl<COMP: Component> From<VTag<COMP>> for VNode<COMP> {
-    fn from(vtag: VTag<COMP>) -> Self {
-        VNode::VTag(vtag)
+impl From<VTag> for VNode {
+    fn from(vtag: VTag) -> Self {
+        VNode::VTag(Box::new(vtag))
     }
 }
 
-impl<COMP: Component> From<VComp<COMP>> for VNode<COMP> {
-    fn from(vcomp: VComp<COMP>) -> Self {
+impl From<VComp> for VNode {
+    fn from(vcomp: VComp) -> Self {
         VNode::VComp(vcomp)
     }
 }
 
-impl<COMP: Component, T: ToString> From<T> for VNode<COMP> {
+impl<COMP> From<VChild<COMP>> for VNode
+where
+    COMP: Component,
+{
+    fn from(vchild: VChild<COMP>) -> Self {
+        VNode::VComp(VComp::from(vchild))
+    }
+}
+
+impl<T: ToString> From<T> for VNode {
     fn from(value: T) -> Self {
         VNode::VText(VText::new(value.to_string()))
     }
 }
 
-impl<'a, COMP: Component> From<&'a dyn Renderable<COMP>> for VNode<COMP> {
-    fn from(value: &'a dyn Renderable<COMP>) -> Self {
-        value.view()
+impl<'a> From<&'a dyn Renderable> for VNode {
+    fn from(value: &'a dyn Renderable) -> Self {
+        value.render()
     }
 }
 
-impl<COMP: Component> fmt::Debug for VNode<COMP> {
+impl<A: Into<VNode>> FromIterator<A> for VNode {
+    fn from_iter<T: IntoIterator<Item = A>>(iter: T) -> Self {
+        let vlist = iter.into_iter().fold(VList::default(), |mut acc, x| {
+            acc.add_child(x.into());
+            acc
+        });
+        VNode::VList(vlist)
+    }
+}
+
+impl fmt::Debug for VNode {
     fn fmt(&self, f: &mut fmt::Formatter<'_>) -> fmt::Result {
         match *self {
             VNode::VTag(ref vtag) => vtag.fmt(f),
@@ -119,21 +143,12 @@ impl<COMP: Component> fmt::Debug for VNode<COMP> {
     }
 }
 
-impl<COMP: Component> PartialEq for VNode<COMP> {
-    fn eq(&self, other: &VNode<COMP>) -> bool {
-        match *self {
-            VNode::VTag(ref vtag_a) => match *other {
-                VNode::VTag(ref vtag_b) => vtag_a == vtag_b,
-                _ => false,
-            },
-            VNode::VText(ref vtext_a) => match *other {
-                VNode::VText(ref vtext_b) => vtext_a == vtext_b,
-                _ => false,
-            },
-            _ => {
-                // TODO Implement it
-                false
-            }
+impl PartialEq for VNode {
+    fn eq(&self, other: &VNode) -> bool {
+        match (self, other) {
+            (VNode::VTag(vtag_a), VNode::VTag(vtag_b)) => vtag_a == vtag_b,
+            (VNode::VText(vtext_a), VNode::VText(vtext_b)) => vtext_a == vtext_b,
+            _ => false, // TODO: Implement other variants
         }
     }
 }
diff --git a/src/virtual_dom/vtag.rs b/src/virtual_dom/vtag.rs
index 021d359425e..cd9f9729118 100644
--- a/src/virtual_dom/vtag.rs
+++ b/src/virtual_dom/vtag.rs
@@ -1,12 +1,14 @@
 //! This module contains the implementation of a virtual element node `VTag`.
 
-use super::{Attributes, Classes, Listener, Listeners, Patch, Reform, VDiff, VNode};
-use crate::html::{Component, Scope};
+use super::{
+    Attributes, Classes, Listener, Listeners, Patch, Reform, Transformer, VDiff, VList, VNode,
+};
+use crate::html::NodeRef;
 use log::warn;
 use std::borrow::Cow;
 use std::cmp::PartialEq;
-use std::collections::HashSet;
 use std::fmt;
+use std::rc::Rc;
 use stdweb::unstable::TryFrom;
 use stdweb::web::html_element::InputElement;
 use stdweb::web::html_element::TextAreaElement;
@@ -23,17 +25,17 @@ pub const HTML_NAMESPACE: &str = "http://www.w3.org/1999/xhtml";
 /// A type for a virtual
 /// [Element](https://developer.mozilla.org/en-US/docs/Web/API/Element)
 /// representation.
-pub struct VTag<COMP: Component> {
+pub struct VTag {
     /// A tag of the element.
     tag: Cow<'static, str>,
     /// A reference to the `Element`.
     pub reference: Option<Element>,
     /// List of attached listeners.
-    pub listeners: Listeners<COMP>,
+    pub listeners: Listeners,
     /// List of attributes.
     pub attributes: Attributes,
-    /// The list of children nodes. Which also could have own children.
-    pub childs: Vec<VNode<COMP>>,
+    /// List of children nodes
+    pub children: VList,
     /// List of attached classes.
     pub classes: Classes,
     /// Contains a value of an
@@ -49,12 +51,31 @@ pub struct VTag<COMP: Component> {
     /// in original HTML it sets `defaultChecked` value of `InputElement`, but for reactive
     /// frameworks it's more useful to control `checked` value of an `InputElement`.
     pub checked: bool,
-    /// _Service field_. Keeps handler for attached listeners
-    /// to have an opportunity to drop them later.
+    /// A node reference used for DOM access in Component lifecycle methods
+    pub node_ref: NodeRef,
+    /// Keeps handler for attached listeners to have an opportunity to drop them later.
     captured: Vec<EventListenerHandle>,
 }
 
-impl<COMP: Component> VTag<COMP> {
+impl Clone for VTag {
+    fn clone(&self) -> Self {
+        VTag {
+            tag: self.tag.clone(),
+            reference: None,
+            listeners: self.listeners.clone(),
+            attributes: self.attributes.clone(),
+            children: self.children.clone(),
+            classes: self.classes.clone(),
+            value: self.value.clone(),
+            kind: self.kind.clone(),
+            checked: self.checked,
+            node_ref: self.node_ref.clone(),
+            captured: Vec::new(),
+        }
+    }
+}
+
+impl VTag {
     /// Creates a new `VTag` instance with `tag` name (cannot be changed later in DOM).
     pub fn new<S: Into<Cow<'static, str>>>(tag: S) -> Self {
         VTag {
@@ -64,7 +85,8 @@ impl<COMP: Component> VTag<COMP> {
             attributes: Attributes::new(),
             listeners: Vec::new(),
             captured: Vec::new(),
-            childs: Vec::new(),
+            children: VList::new_without_placeholder(),
+            node_ref: NodeRef::default(),
             value: None,
             kind: None,
             // In HTML node `checked` attribute sets `defaultChecked` parameter,
@@ -79,14 +101,14 @@ impl<COMP: Component> VTag<COMP> {
     }
 
     /// Add `VNode` child.
-    pub fn add_child(&mut self, child: VNode<COMP>) {
-        self.childs.push(child);
+    pub fn add_child(&mut self, child: VNode) {
+        self.children.add_child(child);
     }
 
     /// Add multiple `VNode` children.
-    pub fn add_children(&mut self, children: Vec<VNode<COMP>>) {
+    pub fn add_children(&mut self, children: Vec<VNode>) {
         for child in children {
-            self.childs.push(child);
+            self.add_child(child);
         }
     }
 
@@ -94,10 +116,7 @@ impl<COMP: Component> VTag<COMP> {
     /// [Element.classList.add](https://developer.mozilla.org/en-US/docs/Web/API/Element/classList)
     /// call later.
     pub fn add_class(&mut self, class: &str) {
-        let class = class.trim();
-        if !class.is_empty() {
-            self.classes.push(class);
-        }
+        self.classes.push(class);
     }
 
     /// Adds multiple classes to this virtual node. Actually it will set by
@@ -105,10 +124,7 @@ impl<COMP: Component> VTag<COMP> {
     /// call later.
     pub fn add_classes(&mut self, classes: Vec<&str>) {
         for class in classes {
-            let class = class.trim();
-            if !class.is_empty() {
-                self.classes.push(class);
-            }
+            self.classes.push(class);
         }
     }
 
@@ -157,15 +173,15 @@ impl<COMP: Component> VTag<COMP> {
 
     /// Adds new listener to the node.
     /// It's boxed because we want to keep it in a single list.
-    /// Lates `Listener::attach` called to attach actual listener to a DOM node.
-    pub fn add_listener(&mut self, listener: Box<dyn Listener<COMP>>) {
+    /// Later `Listener::attach` will attach an actual listener to a DOM node.
+    pub fn add_listener(&mut self, listener: Rc<dyn Listener>) {
         self.listeners.push(listener);
     }
 
     /// Adds new listeners to the node.
     /// They are boxed because we want to keep them in a single list.
-    /// Lates `Listener::attach` called to attach actual listener to a DOM node.
-    pub fn add_listeners(&mut self, listeners: Vec<Box<dyn Listener<COMP>>>) {
+    /// Later `Listener::attach` will attach an actual listener to a DOM node.
+    pub fn add_listeners(&mut self, listeners: Vec<Rc<dyn Listener>>) {
         for listener in listeners {
             self.listeners.push(listener);
         }
@@ -179,128 +195,114 @@ impl<COMP: Component> VTag<COMP> {
     /// - items that are the same stay the same.
     ///
     /// Otherwise just add everything.
-    fn diff_classes(&mut self, ancestor: &mut Option<Self>) -> Vec<Patch<String, ()>> {
-        // TODO: Use generator in order to avoid useless alloc
-
-        let mut changes = Vec::new();
-        if let Some(ref ancestor) = ancestor {
-            // Only change what is necessary.
-            let to_add = self
-                .classes
-                .set
-                .difference(&ancestor.classes.set)
-                .map(|class| Patch::Add(class.to_owned(), ()));
-            changes.extend(to_add);
-            let to_remove = ancestor
-                .classes
-                .set
-                .difference(&self.classes.set)
-                .map(|class| Patch::Remove(class.to_owned()));
-            changes.extend(to_remove);
-        } else {
-            // Add everything
-            let to_add = self
-                .classes
-                .set
+    fn diff_classes<'a>(
+        &'a self,
+        ancestor: &'a Option<Box<Self>>,
+    ) -> impl Iterator<Item = Patch<&'a str, ()>> + 'a {
+        let to_add = {
+            let all_or_nothing = not(ancestor)
                 .iter()
-                .map(|class| Patch::Add(class.to_owned(), ()));
-            changes.extend(to_add);
-        }
-        changes
+                .flat_map(move |_| self.classes.set.iter())
+                .map(|class| Patch::Add(&**class, ()));
+
+            let ancestor_difference = ancestor
+                .iter()
+                .flat_map(move |ancestor| self.classes.set.difference(&ancestor.classes.set))
+                .map(|class| Patch::Add(&**class, ()));
+
+            all_or_nothing.chain(ancestor_difference)
+        };
+
+        let to_remove = ancestor
+            .iter()
+            .flat_map(move |ancestor| ancestor.classes.set.difference(&self.classes.set))
+            .map(|class| Patch::Remove(&**class));
+
+        to_add.chain(to_remove)
     }
 
     /// Similar to diff_classes except for attributes.
     ///
     /// This also handles patching of attributes when the keys are equal but
     /// the values are different.
-    fn diff_attributes(&mut self, ancestor: &mut Option<Self>) -> Vec<Patch<String, String>> {
-        let mut changes = Vec::new();
-        if let Some(ref mut ancestor) = ancestor {
-            // Only change what is necessary.
-            let self_keys = self.attributes.keys().collect::<HashSet<_>>();
-            let ancestor_keys = ancestor.attributes.keys().collect::<HashSet<_>>();
-            let to_add = self_keys.difference(&ancestor_keys).map(|key| {
-                let value = self.attributes.get(*key).expect("attribute of vtag lost");
-                Patch::Add(key.to_string(), value.to_string())
-            });
-            changes.extend(to_add);
-            for key in self_keys.intersection(&ancestor_keys) {
-                let self_value = self
-                    .attributes
-                    .get(*key)
-                    .expect("attribute of self side lost");
-                let ancestor_value = ancestor
-                    .attributes
-                    .get(*key)
-                    .expect("attribute of ancestor side lost");
-                if self_value != ancestor_value {
-                    let mutator = Patch::Replace(key.to_string(), self_value.to_string());
-                    changes.push(mutator);
+    fn diff_attributes<'a>(
+        &'a self,
+        ancestor: &'a Option<Box<Self>>,
+    ) -> impl Iterator<Item = Patch<&'a str, &'a str>> + 'a {
+        // Only change what is necessary.
+        let to_add_or_replace =
+            self.attributes.iter().filter_map(move |(key, value)| {
+                match ancestor
+                    .as_ref()
+                    .and_then(|ancestor| ancestor.attributes.get(&**key))
+                {
+                    None => Some(Patch::Add(&**key, &**value)),
+                    Some(ancestor_value) if value != ancestor_value => {
+                        Some(Patch::Replace(&**key, &**value))
+                    }
+                    _ => None,
                 }
-            }
-            let to_remove = ancestor_keys
-                .difference(&self_keys)
-                .map(|key| Patch::Remove(key.to_string()));
-            changes.extend(to_remove);
-        } else {
-            // Add everything
-            for (key, value) in &self.attributes {
-                let mutator = Patch::Add(key.to_string(), value.to_string());
-                changes.push(mutator);
-            }
-        }
-        changes
+            });
+        let to_remove = ancestor
+            .iter()
+            .flat_map(|ancestor| ancestor.attributes.keys())
+            .filter(move |key| !self.attributes.contains_key(&**key))
+            .map(|key| Patch::Remove(&**key));
+
+        to_add_or_replace.chain(to_remove)
     }
 
     /// Similar to `diff_attributers` except there is only a single `kind`.
-    fn diff_kind(&mut self, ancestor: &mut Option<Self>) -> Option<Patch<String, ()>> {
+    fn diff_kind<'a>(&'a self, ancestor: &'a Option<Box<Self>>) -> Option<Patch<&'a str, ()>> {
         match (
-            &self.kind,
-            ancestor.as_mut().and_then(|anc| anc.kind.take()),
+            self.kind.as_ref(),
+            ancestor.as_ref().and_then(|anc| anc.kind.as_ref()),
         ) {
-            (&Some(ref left), Some(ref right)) => {
+            (Some(ref left), Some(ref right)) => {
                 if left != right {
-                    Some(Patch::Replace(left.to_string(), ()))
+                    Some(Patch::Replace(&**left, ()))
                 } else {
                     None
                 }
             }
-            (&Some(ref left), None) => Some(Patch::Add(left.to_string(), ())),
-            (&None, Some(right)) => Some(Patch::Remove(right)),
-            (&None, None) => None,
+            (Some(ref left), None) => Some(Patch::Add(&**left, ())),
+            (None, Some(right)) => Some(Patch::Remove(&**right)),
+            (None, None) => None,
         }
     }
 
     /// Almost identical in spirit to `diff_kind`
-    fn diff_value(&mut self, ancestor: &mut Option<Self>) -> Option<Patch<String, ()>> {
+    fn diff_value<'a>(&'a self, ancestor: &'a Option<Box<Self>>) -> Option<Patch<&'a str, ()>> {
         match (
-            &self.value,
-            ancestor.as_mut().and_then(|anc| anc.value.take()),
+            self.value.as_ref(),
+            ancestor.as_ref().and_then(|anc| anc.value.as_ref()),
         ) {
-            (&Some(ref left), Some(ref right)) => {
+            (Some(ref left), Some(ref right)) => {
                 if left != right {
-                    Some(Patch::Replace(left.to_string(), ()))
+                    Some(Patch::Replace(&**left, ()))
                 } else {
                     None
                 }
             }
-            (&Some(ref left), None) => Some(Patch::Add(left.to_string(), ())),
-            (&None, Some(right)) => Some(Patch::Remove(right)),
-            (&None, None) => None,
+            (Some(ref left), None) => Some(Patch::Add(&**left, ())),
+            (None, Some(right)) => Some(Patch::Remove(&**right)),
+            (None, None) => None,
         }
     }
 
-    fn apply_diffs(&mut self, element: &Element, ancestor: &mut Option<Self>) {
+    fn apply_diffs(&mut self, ancestor: &Option<Box<Self>>) {
+        let element = self.reference.as_ref().expect("element expected");
+
         // Update parameters
         let changes = self.diff_classes(ancestor);
         for change in changes {
             let list = element.class_list();
             match change {
                 Patch::Add(class, _) | Patch::Replace(class, _) => {
-                    list.add(&class).expect("can't add a class");
+                    list.add(class).expect("can't add a class");
                 }
                 Patch::Remove(class) => {
-                    list.remove(&class).expect("can't remove a class");
+                    list.remove(class).expect("can't remove a class");
                 }
             }
         }
@@ -323,34 +325,24 @@ impl<COMP: Component> VTag<COMP> {
         // attribute as `checked` parameter, not `defaultChecked` as browsers do
         if let Ok(input) = InputElement::try_from(element.clone()) {
             if let Some(change) = self.diff_kind(ancestor) {
-                match change {
-                    Patch::Add(kind, _) | Patch::Replace(kind, _) => {
-                        //https://github.com/koute/stdweb/commit/3b85c941db00b8e3c942624afd50c5929085fb08
-                        //input.set_kind(&kind);
-                        let input = &input;
-                        js! { @(no_return)
-                            @{input}.type = @{kind};
-                        }
-                    }
-                    Patch::Remove(_) => {
-                        //input.set_kind("");
-                        let input = &input;
-                        js! { @(no_return)
-                            @{input}.type = "";
-                        }
-                    }
+                let kind = match change {
+                    Patch::Add(kind, _) | Patch::Replace(kind, _) => kind,
+                    Patch::Remove(_) => "",
+                };
+                //https://github.com/koute/stdweb/commit/3b85c941db00b8e3c942624afd50c5929085fb08
+                //input.set_kind(&kind);
+                let input = &input;
+                js! { @(no_return)
+                    @{input}.type = @{kind};
                 }
             }
 
             if let Some(change) = self.diff_value(ancestor) {
-                match change {
-                    Patch::Add(kind, _) | Patch::Replace(kind, _) => {
-                        input.set_raw_value(&kind);
-                    }
-                    Patch::Remove(_) => {
-                        input.set_raw_value("");
-                    }
-                }
+                let raw_value = match change {
+                    Patch::Add(kind, _) | Patch::Replace(kind, _) => kind,
+                    Patch::Remove(_) => "",
+                };
+                input.set_raw_value(raw_value);
             }
 
             // IMPORTANT! This parameter has to be set every time
@@ -358,33 +350,32 @@ impl<COMP: Component> VTag<COMP> {
             set_checked(&input, self.checked);
         } else if let Ok(tae) = TextAreaElement::try_from(element.clone()) {
             if let Some(change) = self.diff_value(ancestor) {
-                match change {
-                    Patch::Add(value, _) | Patch::Replace(value, _) => {
-                        tae.set_value(&value);
-                    }
-                    Patch::Remove(_) => {
-                        tae.set_value("");
-                    }
-                }
+                let value = match change {
+                    Patch::Add(kind, _) | Patch::Replace(kind, _) => kind,
+                    Patch::Remove(_) => "",
+                };
+                tae.set_value(value);
             }
         }
     }
 }
 
-impl<COMP: Component> VDiff for VTag<COMP> {
-    type Component = COMP;
-
+impl VDiff for VTag {
     /// Remove VTag from parent.
     fn detach(&mut self, parent: &Element) -> Option<Node> {
         let node = self
             .reference
             .take()
             .expect("tried to remove not rendered VTag from DOM");
-        let sibling = node.next_sibling();
+
+        // recursively remove its children
+        self.children.detach(&node);
+
+        let next_sibling = node.next_sibling();
         if parent.remove_child(&node).is_err() {
             warn!("Node not found to remove VTag");
         }
-        sibling
+        next_sibling
     }
 
     /// Renders virtual tag over DOM `Element`, but it also compares this with an ancestor `VTag`
@@ -392,9 +383,8 @@ impl<COMP: Component> VDiff for VTag<COMP> {
     fn apply(
         &mut self,
         parent: &Element,
-        precursor: Option<&Node>,
-        ancestor: Option<VNode<Self::Component>>,
-        env: &Scope<Self::Component>,
+        previous_sibling: Option<&Node>,
+        ancestor: Option<VNode>,
     ) -> Option<Node> {
         assert!(
             self.reference.is_none(),
@@ -409,14 +399,12 @@ impl<COMP: Component> VDiff for VTag<COMP> {
                         (Reform::Keep, Some(vtag))
                     } else {
                         // We have to create a new reference, remove ancestor.
-                        let node = vtag.detach(parent);
-                        (Reform::Before(node), None)
+                        (Reform::Before(vtag.detach(parent)), None)
                     }
                 }
                 Some(mut vnode) => {
                     // It is not a VTag variant we must remove the ancestor.
-                    let node = vnode.detach(parent);
-                    (Reform::Before(node), None)
+                    (Reform::Before(vnode.detach(parent)), None)
                 }
                 None => (Reform::Before(None), None),
             }
@@ -426,12 +414,14 @@ impl<COMP: Component> VDiff for VTag<COMP> {
         //
         // This can use the previous reference or create a new one.
         // If we create a new one we must insert it in the correct
-        // place, which we use `before` or `precusor` for.
+        // place, which we use `next_sibling` or `previous_sibling` for.
         match reform {
             Reform::Keep => {}
-            Reform::Before(before) => {
+            Reform::Before(next_sibling) => {
                 let element = if self.tag == "svg"
-                    || parent.namespace_uri() == Some(SVG_NAMESPACE.to_string())
+                    || parent
+                        .namespace_uri()
+                        .map_or(false, |ns| ns == SVG_NAMESPACE)
                 {
                     document()
                         .create_element_ns(SVG_NAMESPACE, &self.tag)
@@ -442,69 +432,49 @@ impl<COMP: Component> VDiff for VTag<COMP> {
                         .expect("can't create element for vtag")
                 };
 
-                if let Some(sibling) = before {
+                if let Some(next_sibling) = next_sibling {
+                    parent
+                        .insert_before(&element, &next_sibling)
+                        .expect("can't insert tag before next sibling");
+                } else if let Some(next_sibling) = previous_sibling.and_then(|p| p.next_sibling()) {
                     parent
-                        .insert_before(&element, &sibling)
-                        .expect("can't insert tag before sibling");
+                        .insert_before(&element, &next_sibling)
+                        .expect("can't insert tag before next sibling");
                 } else {
-                    let precursor = precursor.and_then(|before| before.next_sibling());
-                    if let Some(precursor) = precursor {
-                        parent
-                            .insert_before(&element, &precursor)
-                            .expect("can't insert tag before precursor");
-                    } else {
-                        parent.append_child(&element);
-                    }
+                    parent.append_child(&element);
                 }
                 self.reference = Some(element);
             }
         }
 
-        let element = self.reference.clone().expect("element expected");
+        self.apply_diffs(&ancestor);
 
-        {
-            let mut ancestor_childs = Vec::new();
-            if let Some(ref mut a) = ancestor {
-                std::mem::swap(&mut ancestor_childs, &mut a.childs);
+        // Every render it removes all listeners and attach it back later
+        // TODO Compare references of handler to do listeners update better
+        if let Some(ancestor) = ancestor.as_mut() {
+            for handle in ancestor.captured.drain(..) {
+                handle.remove();
             }
+        }
 
-            self.apply_diffs(&element, &mut ancestor);
+        let element = self.reference.clone().expect("element expected");
 
-            // Every render it removes all listeners and attach it back later
-            // TODO Compare references of handler to do listeners update better
-            if let Some(mut ancestor) = ancestor {
-                for handle in ancestor.captured.drain(..) {
-                    handle.remove();
-                }
-            }
+        for listener in self.listeners.drain(..) {
+            let handle = listener.attach(&element);
+            self.captured.push(handle);
+        }
 
-            for mut listener in self.listeners.drain(..) {
-                let handle = listener.attach(&element, env.clone());
-                self.captured.push(handle);
-            }
+        // Process children
+        self.children
+            .apply(&element, None, ancestor.map(|a| a.children.into()));
 
-            // Process children
-            // Start with an empty precursor, because it put childs to itself
-            let mut precursor = None;
-            let mut self_childs = self.childs.iter_mut();
-            let mut ancestor_childs = ancestor_childs.drain(..);
-            loop {
-                match (self_childs.next(), ancestor_childs.next()) {
-                    (Some(left), right) => {
-                        precursor = left.apply(&element, precursor.as_ref(), right, &env);
-                    }
-                    (None, Some(ref mut right)) => {
-                        right.detach(&element);
-                    }
-                    (None, None) => break,
-                }
-            }
-        }
-        self.reference.as_ref().map(|e| e.as_node().to_owned())
+        let node = self.reference.as_ref().map(|e| e.as_node().to_owned());
+        self.node_ref.set(node.clone());
+        node
     }
 }
 
-impl<COMP: Component> fmt::Debug for VTag<COMP> {
+impl fmt::Debug for VTag {
     fn fmt(&self, f: &mut fmt::Formatter<'_>) -> fmt::Result {
         write!(f, "VTag {{ tag: {} }}", self.tag)
     }
@@ -526,58 +496,44 @@ fn set_checked(input: &InputElement, value: bool) {
     js!( @(no_return) @{input}.checked = @{value}; );
 }
 
-impl<COMP: Component> PartialEq for VTag<COMP> {
-    fn eq(&self, other: &VTag<COMP>) -> bool {
-        if self.tag != other.tag {
-            return false;
-        }
-
-        if self.value != other.value {
-            return false;
-        }
-
-        if self.kind != other.kind {
-            return false;
-        }
-
-        if self.checked != other.checked {
-            return false;
-        }
-
-        if self.listeners.len() != other.listeners.len() {
-            return false;
-        }
-
-        for i in 0..self.listeners.len() {
-            let a = &self.listeners[i];
-            let b = &other.listeners[i];
-
-            if a.kind() != b.kind() {
-                return false;
-            }
-        }
-
-        if self.attributes != other.attributes {
-            return false;
-        }
-
-        if self.classes.set.iter().ne(other.classes.set.iter()) {
-            return false;
-        }
-
-        if self.childs.len() != other.childs.len() {
-            return false;
-        }
+impl PartialEq for VTag {
+    fn eq(&self, other: &VTag) -> bool {
+        self.tag == other.tag
+            && self.value == other.value
+            && self.kind == other.kind
+            && self.checked == other.checked
+            && self.listeners.len() == other.listeners.len()
+            && self
+                .listeners
+                .iter()
+                .map(|l| l.kind())
+                .eq(other.listeners.iter().map(|l| l.kind()))
+            && self.attributes == other.attributes
+            && self.classes.set.len() == other.classes.set.len()
+            && self.classes.set.iter().eq(other.classes.set.iter())
+            && self.children == other.children
+    }
+}
 
-        for i in 0..self.childs.len() {
-            let a = &self.childs[i];
-            let b = &other.childs[i];
+pub(crate) fn not<T>(option: &Option<T>) -> &Option<()> {
+    if option.is_some() {
+        &None
+    } else {
+        &Some(())
+    }
+}
 
-            if a != b {
-                return false;
-            }
-        }
+impl<T> Transformer<T, T> for VTag {
+    fn transform(from: T) -> T {
+        from
+    }
+}
 
-        true
+impl<'a, T> Transformer<&'a T, T> for VTag
+where
+    T: Clone,
+{
+    fn transform(from: &'a T) -> T {
+        from.clone()
     }
 }
diff --git a/src/virtual_dom/vtext.rs b/src/virtual_dom/vtext.rs
index 9e3adfd679a..97357fcd5eb 100644
--- a/src/virtual_dom/vtext.rs
+++ b/src/virtual_dom/vtext.rs
@@ -1,68 +1,59 @@
 //! This module contains the implementation of a virtual text node `VText`.
 
 use super::{Reform, VDiff, VNode};
-use crate::html::{Component, Scope};
 use log::warn;
 use std::cmp::PartialEq;
 use std::fmt;
-use std::marker::PhantomData;
 use stdweb::web::{document, Element, INode, Node, TextNode};
 
 /// A type for a virtual
 /// [`TextNode`](https://developer.mozilla.org/en-US/docs/Web/API/Document/createTextNode)
-/// represenation.
-pub struct VText<COMP: Component> {
+/// representation.
+#[derive(Clone)]
+pub struct VText {
     /// Contains a text of the node.
     pub text: String,
     /// A reference to the `TextNode`.
     pub reference: Option<TextNode>,
-    _comp: PhantomData<COMP>,
 }
 
-impl<COMP: Component> VText<COMP> {
+impl VText {
     /// Creates new virtual text node with a content.
     pub fn new(text: String) -> Self {
         VText {
             text,
             reference: None,
-            _comp: PhantomData,
         }
     }
 }
 
-impl<COMP: Component> VDiff for VText<COMP> {
-    type Component = COMP;
-
-    /// Remove VTag from parent.
+impl VDiff for VText {
+    /// Remove VText from parent.
     fn detach(&mut self, parent: &Element) -> Option<Node> {
         let node = self
             .reference
             .take()
             .expect("tried to remove not rendered VText from DOM");
-        let sibling = node.next_sibling();
+        let next_sibling = node.next_sibling();
         if parent.remove_child(&node).is_err() {
             warn!("Node not found to remove VText");
         }
-        sibling
+        next_sibling
     }
 
-    /// Renders virtual node over existent `TextNode`, but
-    /// only if value of text had changed.
-    /// Parameter `precursor` is necesssary for `VTag` and `VList` which
-    /// has children and renders them.
+    /// Renders virtual node over existing `TextNode`, but only if value of text had changed.
     fn apply(
         &mut self,
         parent: &Element,
-        _: Option<&Node>,
-        opposite: Option<VNode<Self::Component>>,
-        _: &Scope<Self::Component>,
+        previous_sibling: Option<&Node>,
+        ancestor: Option<VNode>,
     ) -> Option<Node> {
         assert!(
             self.reference.is_none(),
             "reference is ignored so must not be set"
         );
         let reform = {
-            match opposite {
+            match ancestor {
                 // If element matched this type
                 Some(VNode::VText(mut vtext)) => {
                     self.reference = vtext.reference.take();
@@ -73,21 +64,22 @@ impl<COMP: Component> VDiff for VText<COMP> {
                     }
                     Reform::Keep
                 }
-                Some(mut vnode) => {
-                    let node = vnode.detach(parent);
-                    Reform::Before(node)
-                }
+                Some(mut vnode) => Reform::Before(vnode.detach(parent)),
                 None => Reform::Before(None),
             }
         };
         match reform {
             Reform::Keep => {}
-            Reform::Before(node) => {
+            Reform::Before(next_sibling) => {
                 let element = document().create_text_node(&self.text);
-                if let Some(sibling) = node {
+                if let Some(next_sibling) = next_sibling {
+                    parent
+                        .insert_before(&element, &next_sibling)
+                        .expect("can't insert text before the next sibling");
+                } else if let Some(next_sibling) = previous_sibling.and_then(|p| p.next_sibling()) {
                     parent
-                        .insert_before(&element, &sibling)
-                        .expect("can't insert text before sibling");
+                        .insert_before(&element, &next_sibling)
+                        .expect("can't insert text before next_sibling");
                 } else {
                     parent.append_child(&element);
                 }
@@ -98,14 +90,14 @@ impl<COMP: Component> VDiff for VText<COMP> {
     }
 }
 
-impl<COMP: Component> fmt::Debug for VText<COMP> {
+impl fmt::Debug for VText {
     fn fmt(&self, f: &mut fmt::Formatter<'_>) -> fmt::Result {
         write!(f, "VText {{ text: {} }}", self.text)
     }
 }
 
-impl<COMP: Component> PartialEq for VText<COMP> {
-    fn eq(&self, other: &VText<COMP>) -> bool {
+impl PartialEq for VText {
+    fn eq(&self, other: &VText) -> bool {
         self.text == other.text
     }
 }
diff --git a/tests/derive_props/fail.rs b/tests/derive_props/fail.rs
index 2b12dce8338..80bd00a95f4 100644
--- a/tests/derive_props/fail.rs
+++ b/tests/derive_props/fail.rs
@@ -4,8 +4,9 @@ use yew::prelude::*;
 
 mod t1 {
     use super::*;
+    #[derive(Clone)]
     struct Value;
-    #[derive(Properties)]
+    #[derive(Clone, Properties)]
     pub struct Props {
         // ERROR: optional params must implement default
         value: Value,
@@ -14,7 +15,7 @@ mod t1 {
 
 mod t2 {
     use super::*;
-    #[derive(Properties)]
+    #[derive(Clone, Properties)]
     pub struct Props {
         // ERROR: optional is not a tag
         #[props(optional)]
@@ -24,7 +25,7 @@ mod t2 {
 
 mod t3 {
     use super::*;
-    #[derive(Properties)]
+    #[derive(Clone, Properties)]
     pub struct Props {
         #[props(required)]
         value: String,
@@ -37,7 +38,7 @@ mod t3 {
 
 mod t4 {
     use super::*;
-    #[derive(Properties)]
+    #[derive(Clone, Properties)]
     pub struct Props {
         b: i32,
         #[props(required)]
@@ -49,4 +50,72 @@ mod t4 {
     }
 }
 
+mod t5 {
+    use super::*;
+    #[derive(Clone, Properties)]
+    pub struct Props {
+        // ERROR: default must be given a value
+        #[props(default)]
+        value: String,
+    }
+}
+
+mod t6 {
+    use super::*;
+    #[derive(Clone, Properties)]
+    pub struct Props {
+        // ERROR: 123 is not a path or an identifier
+        #[props(default = 123)]
+        value: i32,
+    }
+}
+
+mod t7 {
+    use super::*;
+    #[derive(Clone, Properties)]
+    pub struct Props {
+        // ERROR: the value must be parsed into a path to a function
+        #[props(default = "123")]
+        value: String,
+    }
+}
+
+mod t8 {
+    use super::*;
+    #[derive(Clone, Properties)]
+    pub struct Props {
+        // ERROR: cannot find function foo in this scope
+        #[props(default = "foo")]
+        value: String,
+    }
+}
+
+mod t9 {
+    use super::*;
+    #[derive(Clone, Properties)]
+    pub struct Props {
+        // ERROR: the function must take no arguments
+        #[props(default = "foo")]
+        value: String,
+    }
+
+    fn foo(bar: i32) -> String {
+        unimplemented!()
+    }
+}
+
+mod t10 {
+    use super::*;
+    #[derive(Clone, Properties)]
+    pub struct Props {
+        // ERROR: the function returns incompatible types
+        #[props(default = "foo")]
+        value: String,
+    }
+
+    fn foo() -> i32 {
+        unimplemented!()
+    }
+}
+
 fn main() {}
diff --git a/tests/derive_props/fail.stderr b/tests/derive_props/fail.stderr
index 9f626a97d5b..69173dc50d9 100644
--- a/tests/derive_props/fail.stderr
+++ b/tests/derive_props/fail.stderr
@@ -1,34 +1,84 @@
-error: expected `props(required)`
-  --> $DIR/fail.rs:20:11
+error: expected `props(required)` or `#[props(default="...")]`
+  --> $DIR/fail.rs:21:11
    |
-20 |         #[props(optional)]
+21 |         #[props(optional)]
    |           ^^^^^
 
+error: expected `props(required)` or `#[props(default="...")]`
+  --> $DIR/fail.rs:58:11
+   |
+58 |         #[props(default)]
+   |           ^^^^^
+
+error: expected `props(required)` or `#[props(default="...")]`
+  --> $DIR/fail.rs:68:11
+   |
+68 |         #[props(default = 123)]
+   |           ^^^^^
+
+error: expected identifier
+  --> $DIR/fail.rs:78:27
+   |
+78 |         #[props(default = "123")]
+   |                           ^^^^^
+
+error[E0425]: cannot find function `foo` in this scope
+  --> $DIR/fail.rs:88:27
+   |
+88 |         #[props(default = "foo")]
+   |                           ^^^^^ not found in this scope
+   |
+help: possible candidates are found in other modules, you can import them into scope
+   |
+84 |     use crate::t10::foo;
+   |
+84 |     use crate::t9::foo;
+   |
+
 error[E0277]: the trait bound `t1::Value: std::default::Default` is not satisfied
- --> $DIR/fail.rs:8:14
+ --> $DIR/fail.rs:9:21
   |
-8 |     #[derive(Properties)]
-  |              ^^^^^^^^^^ the trait `std::default::Default` is not implemented for `t1::Value`
+9 |     #[derive(Clone, Properties)]
+  |                     ^^^^^^^^^^ the trait `std::default::Default` is not implemented for `t1::Value`
   |
   = note: required by `std::default::Default::default`
 
 error[E0599]: no method named `build` found for type `t3::PropsBuilder<t3::PropsBuilderStep_missing_required_prop_value>` in the current scope
-  --> $DIR/fail.rs:34:26
+  --> $DIR/fail.rs:35:26
    |
-27 |     #[derive(Properties)]
-   |                       - method `build` not found for this
+28 |     #[derive(Clone, Properties)]
+   |                              - method `build` not found for this
 ...
-34 |         Props::builder().build();
-   |                          ^^^^^
+35 |         Props::builder().build();
+   |                          ^^^^^ method not found in `t3::PropsBuilder<t3::PropsBuilderStep_missing_required_prop_value>`
 
 error[E0599]: no method named `b` found for type `t4::PropsBuilder<t4::PropsBuilderStep_missing_required_prop_a>` in the current scope
-  --> $DIR/fail.rs:48:26
+  --> $DIR/fail.rs:49:26
    |
-40 |     #[derive(Properties)]
-   |                       - method `b` not found for this
+41 |     #[derive(Clone, Properties)]
+   |                              - method `b` not found for this
+...
+49 |         Props::builder().b(1).a(2).build();
+   |                          ^ help: there is a method with a similar name: `a`
+
+error[E0061]: this function takes 1 parameter but 0 parameters were supplied
+   --> $DIR/fail.rs:98:27
+    |
+98  |         #[props(default = "foo")]
+    |                           ^^^^^ expected 1 parameter
 ...
-48 |         Props::builder().b(1).a(2).build();
-   |                          ^ help: did you mean: `a`
+102 |     fn foo(bar: i32) -> String {
+    |     -------------------------- defined here
 
-Some errors occurred: E0277, E0599.
-For more information about an error, try `rustc --explain E0277`.
+error[E0308]: match arms have incompatible types
+   --> $DIR/fail.rs:112:27
+    |
+112 |         #[props(default = "foo")]
+    |                           ^^^^^
+    |                           |
+    |                           expected struct `std::string::String`, found i32
+    |                           `match` arms have incompatible types
+    |                           this is found to be of type `std::string::String`
+    |
+    = note: expected type `std::string::String`
+               found type `i32`
diff --git a/tests/derive_props/pass.rs b/tests/derive_props/pass.rs
index dc661769d37..8f713e66f0d 100644
--- a/tests/derive_props/pass.rs
+++ b/tests/derive_props/pass.rs
@@ -5,8 +5,8 @@ use yew::prelude::*;
 mod t1 {
     use super::*;
 
-    #[derive(Properties)]
-    pub struct Props<T: Default> {
+    #[derive(Clone, Properties)]
+    pub struct Props<T: Clone + Default> {
         value: T,
     }
 
@@ -19,9 +19,10 @@ mod t1 {
 mod t2 {
     use super::*;
 
+    #[derive(Clone)]
     struct Value;
-    #[derive(Properties)]
-    pub struct Props<T> {
+    #[derive(Clone, Properties)]
+    pub struct Props<T: Clone> {
         #[props(required)]
         value: T,
     }
@@ -34,7 +35,7 @@ mod t2 {
 mod t3 {
     use super::*;
 
-    #[derive(Properties)]
+    #[derive(Clone, Properties)]
     pub struct Props {
         #[props(required)]
         b: i32,
@@ -50,10 +51,10 @@ mod t3 {
 mod t4 {
     use super::*;
 
-    #[derive(Properties)]
+    #[derive(Clone, Properties)]
     pub struct Props<T>
     where
-        T: Default,
+        T: Clone + Default,
     {
         value: T,
     }
@@ -67,8 +68,8 @@ mod t4 {
 mod t5 {
     use super::*;
 
-    #[derive(Properties)]
-    pub struct Props<'a, T: Default + 'a> {
+    #[derive(Clone, Properties)]
+    pub struct Props<'a, T: Clone + Default + 'a> {
         static_value: &'static str,
         #[props(required)]
         value: &'a T,
@@ -83,4 +84,77 @@ mod t5 {
     }
 }
 
+mod t6 {
+    use super::*;
+    use std::str::FromStr;
+
+    #[derive(Properties, Clone)]
+    pub struct Props<T: FromStr + Clone>
+    where
+        <T as FromStr>::Err: Clone,
+    {
+        #[props(required)]
+        value: Result<T, <T as FromStr>::Err>,
+    }
+
+    fn required_prop_generics_with_where_clause_should_work() {
+        Props::<String>::builder()
+            .value(Ok(String::from("")))
+            .build();
+    }
+}
+
+mod t7 {
+    use super::*;
+
+    #[derive(Clone, Debug, Eq, PartialEq)]
+    pub enum Foo {
+        One,
+        Two,
+    }
+
+    #[derive(Clone, Properties)]
+    pub struct Props {
+        #[props(default = "default_value")]
+        value: Foo,
+    }
+
+    fn default_value() -> Foo {
+        Foo::One
+    }
+
+    fn default_value_should_work() {
+        let props = Props::builder().build();
+        assert_eq!(props.value, Foo::One);
+        Props::builder().value(Foo::Two).build();
+    }
+}
+
+mod t8 {
+    use super::*;
+    use std::str::FromStr;
+
+    #[derive(Clone, Properties)]
+    pub struct Props<T: FromStr + Clone>
+    where
+        <T as FromStr>::Err: Clone,
+    {
+        #[props(default = "default_value")]
+        value: Result<T, <T as FromStr>::Err>,
+    }
+
+    fn default_value<T: FromStr + Clone>() -> Result<T, <T as FromStr>::Err>
+    where
+        <T as FromStr>::Err: Clone,
+    {
+        "123".parse()
+    }
+
+    fn default_value_with_generics_should_work() {
+        let props = Props::<i32>::builder().build();
+        assert_eq!(props.value, Ok(123));
+        Props::<i32>::builder().value(Ok(456)).build();
+    }
+}
+
 fn main() {}
diff --git a/tests/derive_props_test.rs b/tests/derive_props_test.rs
index 2b287b6bd0f..82774383256 100644
--- a/tests/derive_props_test.rs
+++ b/tests/derive_props_test.rs
@@ -1,5 +1,5 @@
 #[allow(dead_code)]
-#[rustversion::attr(stable(1.35.0), cfg_attr(not(feature = "web_test"), test))]
+#[rustversion::attr(stable(1.40.0), cfg_attr(not(feature = "web_test"), test))]
 fn tests() {
     let t = trybuild::TestCases::new();
     t.pass("tests/derive_props/pass.rs");
diff --git a/tests/macro/helpers.rs b/tests/macro/helpers.rs
deleted file mode 100644
index e6e00ac9641..00000000000
--- a/tests/macro/helpers.rs
+++ /dev/null
@@ -1,23 +0,0 @@
-#[macro_export]
-macro_rules! pass_helper {
-    ( @html ) => { html! {} };
-    ( @html html! { $($view:tt)* }; $($tail:tt)* ) => {
-        let _: Html<Self> = html! { $($view)* };
-        pass_helper! { @ html $($tail)* }
-    };
-    ( @html $head:stmt; $($tail:tt)* ) => {
-        $head;
-        pass_helper! { @ html $($tail)* }
-    };
-    ( $($content:tt)* ) => {
-        mod test_component;
-        use test_component::TestComponent;
-        // #[allow(unused_imports)]
-        use yew::prelude::*;
-        impl Renderable<TestComponent> for TestComponent {
-            fn view(&self) -> Html<Self> {
-                pass_helper! { @ html $($content)* }
-            }
-        }
-    };
-}
diff --git a/tests/macro/html-block-fail.rs b/tests/macro/html-block-fail.rs
index a36527b015a..006fb018690 100644
--- a/tests/macro/html-block-fail.rs
+++ b/tests/macro/html-block-fail.rs
@@ -1,7 +1,11 @@
 use yew::prelude::*;
 
 fn compile_fail() {
-    html! { () };
+    html! {
+        <>
+            { () }
+        </>
+    };
 
     let not_tree = || ();
     html! {
diff --git a/tests/macro/html-block-fail.stderr b/tests/macro/html-block-fail.stderr
index abd7e1d6c99..71aebfff923 100644
--- a/tests/macro/html-block-fail.stderr
+++ b/tests/macro/html-block-fail.stderr
@@ -1,37 +1,35 @@
 error[E0277]: `()` doesn't implement `std::fmt::Display`
- --> $DIR/html-block-fail.rs:4:13
+ --> $DIR/html-block-fail.rs:6:15
   |
-4 |     html! { () };
-  |             ^^ `()` cannot be formatted with the default formatter
+6 |             { () }
+  |               ^^ `()` cannot be formatted with the default formatter
   |
   = help: the trait `std::fmt::Display` is not implemented for `()`
   = note: in format strings you may be able to use `{:?}` (or {:#?} for pretty-print) instead
   = note: required because of the requirements on the impl of `std::string::ToString` for `()`
-  = note: required because of the requirements on the impl of `std::convert::From<()>` for `yew::virtual_dom::vnode::VNode<_>`
+  = note: required because of the requirements on the impl of `std::convert::From<()>` for `yew::virtual_dom::vnode::VNode`
   = note: required by `std::convert::From::from`
 
 error[E0277]: `()` doesn't implement `std::fmt::Display`
- --> $DIR/html-block-fail.rs:8:16
-  |
-8 |         <div>{ not_tree() }</div>
-  |                ^^^^^^^^ `()` cannot be formatted with the default formatter
-  |
-  = help: the trait `std::fmt::Display` is not implemented for `()`
-  = note: in format strings you may be able to use `{:?}` (or {:#?} for pretty-print) instead
-  = note: required because of the requirements on the impl of `std::string::ToString` for `()`
-  = note: required because of the requirements on the impl of `std::convert::From<()>` for `yew::virtual_dom::vnode::VNode<_>`
-  = note: required by `std::convert::From::from`
+  --> $DIR/html-block-fail.rs:12:16
+   |
+12 |         <div>{ not_tree() }</div>
+   |                ^^^^^^^^ `()` cannot be formatted with the default formatter
+   |
+   = help: the trait `std::fmt::Display` is not implemented for `()`
+   = note: in format strings you may be able to use `{:?}` (or {:#?} for pretty-print) instead
+   = note: required because of the requirements on the impl of `std::string::ToString` for `()`
+   = note: required because of the requirements on the impl of `std::convert::From<()>` for `yew::virtual_dom::vnode::VNode`
+   = note: required by `std::convert::From::from`
 
 error[E0277]: `()` doesn't implement `std::fmt::Display`
-  --> $DIR/html-block-fail.rs:11:17
+  --> $DIR/html-block-fail.rs:15:17
    |
-11 |         <>{ for (0..3).map(|_| not_tree()) }</>
+15 |         <>{ for (0..3).map(|_| not_tree()) }</>
    |                 ^^^^^^ `()` cannot be formatted with the default formatter
    |
    = help: the trait `std::fmt::Display` is not implemented for `()`
    = note: in format strings you may be able to use `{:?}` (or {:#?} for pretty-print) instead
    = note: required because of the requirements on the impl of `std::string::ToString` for `()`
-   = note: required because of the requirements on the impl of `std::convert::From<()>` for `yew::virtual_dom::vnode::VNode<_>`
-   = note: required because of the requirements on the impl of `std::convert::Into<yew::virtual_dom::vnode::VNode<_>>` for `()`
-
-For more information about this error, try `rustc --explain E0277`.
+   = note: required because of the requirements on the impl of `std::convert::From<()>` for `yew::virtual_dom::vnode::VNode`
+   = note: required because of the requirements on the impl of `std::convert::Into<yew::virtual_dom::vnode::VNode>` for `()`
diff --git a/tests/macro/html-block-pass.rs b/tests/macro/html-block-pass.rs
index 26c07512440..8fab2395a47 100644
--- a/tests/macro/html-block-pass.rs
+++ b/tests/macro/html-block-pass.rs
@@ -1,7 +1,6 @@
-#[macro_use]
-mod helpers;
+use yew::prelude::*;
 
-pass_helper! {
+fn compile_pass() {
     html! { <>{ "Hi" }</> };
     html! { <>{ format!("Hello") }</> };
     html! { <>{ String::from("Hello") }</> };
diff --git a/tests/macro/html-component-fail-unimplemented.stderr b/tests/macro/html-component-fail-unimplemented.stderr
index 185eda68a78..db30280c993 100644
--- a/tests/macro/html-component-fail-unimplemented.stderr
+++ b/tests/macro/html-component-fail-unimplemented.stderr
@@ -3,5 +3,3 @@ error[E0277]: the trait bound `std::string::String: yew::html::Component` is not
   |
 6 |     html! { <String /> };
   |              ^^^^^^ the trait `yew::html::Component` is not implemented for `std::string::String`
-
-For more information about this error, try `rustc --explain E0277`.
diff --git a/tests/macro/html-component-fail.rs b/tests/macro/html-component-fail.rs
index 85c83aed675..d3836290055 100644
--- a/tests/macro/html-component-fail.rs
+++ b/tests/macro/html-component-fail.rs
@@ -1,51 +1,88 @@
 #![recursion_limit = "128"]
 
+use std::marker::PhantomData;
 use yew::prelude::*;
 
-#[derive(Properties, PartialEq)]
+#[derive(Clone, Properties, PartialEq)]
 pub struct ChildProperties {
     pub string: String,
     #[props(required)]
     pub int: i32,
 }
 
-pub struct ChildComponent;
-impl Component for ChildComponent {
+pub struct Child;
+impl Component for Child {
     type Message = ();
     type Properties = ChildProperties;
 
-    fn create(props: Self::Properties, _: ComponentLink<Self>) -> Self {
-        ChildComponent
-    }
+    fn create(_: Self::Properties, _: ComponentLink<Self>) -> Self { unimplemented!() }
+    fn update(&mut self, _: Self::Message) -> ShouldRender { unimplemented!() }
+    fn view(&self) -> Html { unimplemented!() }
+}
+
+#[derive(Clone, Properties)]
+pub struct ChildContainerProperties {
+    #[props(required)]
+    pub children: ChildrenWithProps<Child>,
+}
+
+pub struct ChildContainer;
+impl Component for ChildContainer {
+    type Message = ();
+    type Properties = ChildContainerProperties;
 
-    fn update(&mut self, _: Self::Message) -> ShouldRender {
-        unimplemented!()
-    }
+    fn create(_: Self::Properties, _: ComponentLink<Self>) -> Self { unimplemented!() }
+    fn update(&mut self, _: Self::Message) -> ShouldRender { unimplemented!() }
+    fn view(&self) -> Html { unimplemented!() }
 }
 
-impl Renderable<ChildComponent> for ChildComponent {
-    fn view(&self) -> Html<Self> {
-        unimplemented!()
-    }
+pub struct Generic<G> {
+    marker: PhantomData<G>,
+}
+
+impl Component for Generic<String> {
+    type Message = ();
+    type Properties = ();
+
+    fn create(_: Self::Properties, _: ComponentLink<Self>) -> Self { unimplemented!() }
+    fn update(&mut self, _: Self::Message) -> ShouldRender { unimplemented!() }
+    fn view(&self) -> Html { unimplemented!() }
 }
 
 fn compile_fail() {
-    html! { <ChildComponent> };
-    html! { <ChildComponent:: /> };
-    html! { <ChildComponent with /> };
-    html! { <ChildComponent props /> };
-    html! { <ChildComponent with props > };
-    html! { <ChildComponent with blah /> };
-    html! { <ChildComponent with props () /> };
-    html! { <ChildComponent type=0 /> };
-    html! { <ChildComponent invalid-prop-name=0 /> };
-    html! { <ChildComponent unknown="unknown" /> };
-    html! { <ChildComponent string= /> };
-    html! { <ChildComponent int=1 string={} /> };
-    html! { <ChildComponent int=1 string=3 /> };
-    html! { <ChildComponent int=1 string={3} /> };
-    html! { <ChildComponent int=0u32 /> };
-    html! { <ChildComponent string="abc" /> };
+    html! { <Child> };
+    html! { <Child:: /> };
+    html! { <Child with /> };
+    html! { <Child props /> };
+    html! { <Child with props > };
+    html! { <Child with props ref=() ref=() /> };
+    html! { <Child ref=() with props /> };
+    html! { <Child with blah /> };
+    html! { <Child with props () /> };
+    html! { <Child type=0 /> };
+    html! { <Child invalid-prop-name=0 /> };
+    html! { <Child unknown="unknown" /> };
+    html! { <Child string= /> };
+    html! { <Child int=1 string={} /> };
+    html! { <Child int=1 string=3 /> };
+    html! { <Child int=1 string={3} /> };
+    html! { <Child int=1 ref=() /> };
+    html! { <Child int=1 ref=() ref=() /> };
+    html! { <Child int=0u32 /> };
+    html! { <Child string="abc" /> };
+    html! { </Child> };
+    html! { <Child><Child></Child> };
+    html! { <Child></Child><Child></Child> };
+    html! { <Child>{ "Not allowed" }</Child> };
+
+    html! { <ChildContainer /> };
+    html! { <ChildContainer></ChildContainer> };
+    html! { <ChildContainer>{ "Not allowed" }</ChildContainer> };
+    html! { <ChildContainer><></></ChildContainer> };
+    html! { <ChildContainer><other /></ChildContainer> };
+
+    html! { <Generic<String>></Generic> };
+    html! { <Generic<String>></Generic<Vec<String>>> };
 }
 
 fn main() {}
diff --git a/tests/macro/html-component-fail.stderr b/tests/macro/html-component-fail.stderr
index 0462d2280d1..24fcb2989c8 100644
--- a/tests/macro/html-component-fail.stderr
+++ b/tests/macro/html-component-fail.stderr
@@ -1,127 +1,265 @@
-error: expected component tag be of form `< .. />`
-  --> $DIR/html-component-fail.rs:33:13
+error: this open tag has no corresponding close tag
+  --> $DIR/html-component-fail.rs:53:13
    |
-33 |     html! { <ChildComponent> };
-   |             ^^^^^^^^^^^^^^^^
+53 |     html! { <Child> };
+   |             ^^^^^^^
 
-error: unexpected end of input, expected identifier
-  --> $DIR/html-component-fail.rs:34:31
+error: expected identifier
+  --> $DIR/html-component-fail.rs:54:22
    |
-34 |     html! { <ChildComponent:: /> };
-   |                               ^
+54 |     html! { <Child:: /> };
+   |                      ^
 
 error: unexpected end of input, expected identifier
-  --> $DIR/html-component-fail.rs:35:34
+  --> $DIR/html-component-fail.rs:55:5
    |
-35 |     html! { <ChildComponent with /> };
-   |                                  ^
+55 |     html! { <Child with /> };
+   |     ^^^^^^^^^^^^^^^^^^^^^^^^^
+   |
+   = note: this error originates in a macro outside of the current crate (in Nightly builds, run with -Z external-macro-backtrace for more info)
 
 error: unexpected token
-  --> $DIR/html-component-fail.rs:36:29
+  --> $DIR/html-component-fail.rs:56:20
    |
-36 |     html! { <ChildComponent props /> };
-   |                             ^^^^^
+56 |     html! { <Child props /> };
+   |                    ^^^^^
 
-error: expected component tag be of form `< .. />`
-  --> $DIR/html-component-fail.rs:37:13
+error: this open tag has no corresponding close tag
+  --> $DIR/html-component-fail.rs:57:13
    |
-37 |     html! { <ChildComponent with props > };
-   |             ^^^^^^^^^^^^^^^^^^^^^^^^^^^^
+57 |     html! { <Child with props > };
+   |             ^^^^^^^^^^^^^^^^^^^
 
 error: unexpected token
-  --> $DIR/html-component-fail.rs:39:40
+  --> $DIR/html-component-fail.rs:58:38
    |
-39 |     html! { <ChildComponent with props () /> };
-   |                                        ^^
+58 |     html! { <Child with props ref=() ref=() /> };
+   |                                      ^^^
+
+error: unexpected token
+  --> $DIR/html-component-fail.rs:59:27
+   |
+59 |     html! { <Child ref=() with props /> };
+   |                           ^^^^
+
+error: unexpected token
+  --> $DIR/html-component-fail.rs:61:31
+   |
+61 |     html! { <Child with props () /> };
+   |                               ^^
 
 error: expected identifier
-  --> $DIR/html-component-fail.rs:40:29
+  --> $DIR/html-component-fail.rs:62:20
    |
-40 |     html! { <ChildComponent type=0 /> };
-   |                             ^^^^
+62 |     html! { <Child type=0 /> };
+   |                    ^^^^
 
 error: expected identifier
-  --> $DIR/html-component-fail.rs:41:29
+  --> $DIR/html-component-fail.rs:63:20
    |
-41 |     html! { <ChildComponent invalid-prop-name=0 /> };
-   |                             ^^^^^^^^^^^^^^^^^
+63 |     html! { <Child invalid-prop-name=0 /> };
+   |                    ^^^^^^^^^^^^^^^^^
 
 error: unexpected end of input, expected expression
-  --> $DIR/html-component-fail.rs:43:37
+  --> $DIR/html-component-fail.rs:65:5
+   |
+65 |     html! { <Child string= /> };
+   |     ^^^^^^^^^^^^^^^^^^^^^^^^^^^^
+   |
+   = note: this error originates in a macro outside of the current crate (in Nightly builds, run with -Z external-macro-backtrace for more info)
+
+error: too many refs set
+  --> $DIR/html-component-fail.rs:70:33
+   |
+70 |     html! { <Child int=1 ref=() ref=() /> };
+   |                                 ^^^
+
+error: this close tag has no corresponding open tag
+  --> $DIR/html-component-fail.rs:73:13
+   |
+73 |     html! { </Child> };
+   |             ^^^^^^^^
+
+error: this open tag has no corresponding close tag
+  --> $DIR/html-component-fail.rs:74:13
+   |
+74 |     html! { <Child><Child></Child> };
+   |             ^^^^^^^
+
+error: only one root html element allowed
+  --> $DIR/html-component-fail.rs:75:28
+   |
+75 |     html! { <Child></Child><Child></Child> };
+   |                            ^^^^^^^^^^^^^^^
+
+error: this close tag has no corresponding open tag
+  --> $DIR/html-component-fail.rs:84:30
    |
-43 |     html! { <ChildComponent string= /> };
-   |                                     ^
+84 |     html! { <Generic<String>></Generic> };
+   |                              ^^^^^^^^^^
+
+error: this close tag has no corresponding open tag
+  --> $DIR/html-component-fail.rs:85:30
+   |
+85 |     html! { <Generic<String>></Generic<Vec<String>>> };
+   |                              ^^^^^^^^^^^^^^^^^^^^^^^
 
 error[E0425]: cannot find value `blah` in this scope
-  --> $DIR/html-component-fail.rs:38:34
+  --> $DIR/html-component-fail.rs:60:25
    |
-38 |     html! { <ChildComponent with blah /> };
-   |                                  ^^^^ not found in this scope
+60 |     html! { <Child with blah /> };
+   |                         ^^^^ not found in this scope
 
 error[E0609]: no field `unknown` on type `ChildProperties`
-  --> $DIR/html-component-fail.rs:42:29
+  --> $DIR/html-component-fail.rs:64:20
    |
-42 |     html! { <ChildComponent unknown="unknown" /> };
-   |                             ^^^^^^^ unknown field
+64 |     html! { <Child unknown="unknown" /> };
+   |                    ^^^^^^^ unknown field
    |
    = note: available fields are: `string`, `int`
 
 error[E0599]: no method named `unknown` found for type `ChildPropertiesBuilder<ChildPropertiesBuilderStep_missing_required_prop_int>` in the current scope
-  --> $DIR/html-component-fail.rs:42:29
+  --> $DIR/html-component-fail.rs:64:20
    |
-5  | #[derive(Properties, PartialEq)]
-   |                   - method `unknown` not found for this
+6  | #[derive(Clone, Properties, PartialEq)]
+   |                          - method `unknown` not found for this
 ...
-42 |     html! { <ChildComponent unknown="unknown" /> };
-   |                             ^^^^^^^
+64 |     html! { <Child unknown="unknown" /> };
+   |                    ^^^^^^^ method not found in `ChildPropertiesBuilder<ChildPropertiesBuilderStep_missing_required_prop_int>`
 
-error[E0308]: mismatched types
-  --> $DIR/html-component-fail.rs:44:42
+error[E0277]: the trait bound `yew::virtual_dom::vcomp::VComp: yew::virtual_dom::Transformer<(), std::string::String>` is not satisfied
+  --> $DIR/html-component-fail.rs:66:33
    |
-44 |     html! { <ChildComponent int=1 string={} /> };
-   |                                          ^^ expected struct `std::string::String`, found ()
+66 |     html! { <Child int=1 string={} /> };
+   |                                 ^^ the trait `yew::virtual_dom::Transformer<(), std::string::String>` is not implemented for `yew::virtual_dom::vcomp::VComp`
    |
-   = note: expected type `std::string::String`
-              found type `()`
+   = help: the following implementations were found:
+             <yew::virtual_dom::vcomp::VComp as yew::virtual_dom::Transformer<&'a T, T>>
+             <yew::virtual_dom::vcomp::VComp as yew::virtual_dom::Transformer<&'a T, std::option::Option<T>>>
+             <yew::virtual_dom::vcomp::VComp as yew::virtual_dom::Transformer<&'a str, std::option::Option<std::string::String>>>
+             <yew::virtual_dom::vcomp::VComp as yew::virtual_dom::Transformer<&'a str, std::string::String>>
+           and 3 others
+   = note: required by `yew::virtual_dom::Transformer::transform`
 
-error[E0308]: mismatched types
-  --> $DIR/html-component-fail.rs:45:42
+error[E0277]: the trait bound `yew::virtual_dom::vcomp::VComp: yew::virtual_dom::Transformer<{integer}, std::string::String>` is not satisfied
+  --> $DIR/html-component-fail.rs:67:33
    |
-45 |     html! { <ChildComponent int=1 string=3 /> };
-   |                                          ^
-   |                                          |
-   |                                          expected struct `std::string::String`, found integer
-   |                                          help: try using a conversion method: `3.to_string()`
+67 |     html! { <Child int=1 string=3 /> };
+   |                                 ^ the trait `yew::virtual_dom::Transformer<{integer}, std::string::String>` is not implemented for `yew::virtual_dom::vcomp::VComp`
    |
-   = note: expected type `std::string::String`
-              found type `{integer}`
+   = help: the following implementations were found:
+             <yew::virtual_dom::vcomp::VComp as yew::virtual_dom::Transformer<&'a T, T>>
+             <yew::virtual_dom::vcomp::VComp as yew::virtual_dom::Transformer<&'a T, std::option::Option<T>>>
+             <yew::virtual_dom::vcomp::VComp as yew::virtual_dom::Transformer<&'a str, std::option::Option<std::string::String>>>
+             <yew::virtual_dom::vcomp::VComp as yew::virtual_dom::Transformer<&'a str, std::string::String>>
+           and 3 others
+   = note: required by `yew::virtual_dom::Transformer::transform`
 
-error[E0308]: mismatched types
-  --> $DIR/html-component-fail.rs:46:42
+error[E0277]: the trait bound `yew::virtual_dom::vcomp::VComp: yew::virtual_dom::Transformer<{integer}, std::string::String>` is not satisfied
+  --> $DIR/html-component-fail.rs:68:33
    |
-46 |     html! { <ChildComponent int=1 string={3} /> };
-   |                                          ^^^
-   |                                          |
-   |                                          expected struct `std::string::String`, found integer
-   |                                          help: try using a conversion method: `{3}.to_string()`
+68 |     html! { <Child int=1 string={3} /> };
+   |                                 ^^^ the trait `yew::virtual_dom::Transformer<{integer}, std::string::String>` is not implemented for `yew::virtual_dom::vcomp::VComp`
    |
-   = note: expected type `std::string::String`
-              found type `{integer}`
+   = help: the following implementations were found:
+             <yew::virtual_dom::vcomp::VComp as yew::virtual_dom::Transformer<&'a T, T>>
+             <yew::virtual_dom::vcomp::VComp as yew::virtual_dom::Transformer<&'a T, std::option::Option<T>>>
+             <yew::virtual_dom::vcomp::VComp as yew::virtual_dom::Transformer<&'a str, std::option::Option<std::string::String>>>
+             <yew::virtual_dom::vcomp::VComp as yew::virtual_dom::Transformer<&'a str, std::string::String>>
+           and 3 others
+   = note: required by `yew::virtual_dom::Transformer::transform`
 
 error[E0308]: mismatched types
-  --> $DIR/html-component-fail.rs:47:33
+  --> $DIR/html-component-fail.rs:69:30
    |
-47 |     html! { <ChildComponent int=0u32 /> };
-   |                                 ^^^^ expected i32, found u32
+69 |     html! { <Child int=1 ref=() /> };
+   |                              ^^ expected struct `yew::html::NodeRef`, found ()
+   |
+   = note: expected type `yew::html::NodeRef`
+              found type `()`
+
+error[E0277]: the trait bound `yew::virtual_dom::vcomp::VComp: yew::virtual_dom::Transformer<u32, i32>` is not satisfied
+  --> $DIR/html-component-fail.rs:71:24
+   |
+71 |     html! { <Child int=0u32 /> };
+   |                        ^^^^ the trait `yew::virtual_dom::Transformer<u32, i32>` is not implemented for `yew::virtual_dom::vcomp::VComp`
+   |
+   = help: the following implementations were found:
+             <yew::virtual_dom::vcomp::VComp as yew::virtual_dom::Transformer<&'a T, T>>
+             <yew::virtual_dom::vcomp::VComp as yew::virtual_dom::Transformer<&'a T, std::option::Option<T>>>
+             <yew::virtual_dom::vcomp::VComp as yew::virtual_dom::Transformer<&'a str, std::option::Option<std::string::String>>>
+             <yew::virtual_dom::vcomp::VComp as yew::virtual_dom::Transformer<&'a str, std::string::String>>
+           and 3 others
+   = note: required by `yew::virtual_dom::Transformer::transform`
 
 error[E0599]: no method named `string` found for type `ChildPropertiesBuilder<ChildPropertiesBuilderStep_missing_required_prop_int>` in the current scope
-  --> $DIR/html-component-fail.rs:48:29
+  --> $DIR/html-component-fail.rs:72:20
    |
-5  | #[derive(Properties, PartialEq)]
-   |                   - method `string` not found for this
+6  | #[derive(Clone, Properties, PartialEq)]
+   |                          - method `string` not found for this
 ...
-48 |     html! { <ChildComponent string="abc" /> };
-   |                             ^^^^^^
+72 |     html! { <Child string="abc" /> };
+   |                    ^^^^^^ method not found in `ChildPropertiesBuilder<ChildPropertiesBuilderStep_missing_required_prop_int>`
+
+error[E0599]: no method named `children` found for type `ChildPropertiesBuilder<ChildPropertiesBuilderStep_missing_required_prop_int>` in the current scope
+  --> $DIR/html-component-fail.rs:76:5
+   |
+6  | #[derive(Clone, Properties, PartialEq)]
+   |                          - method `children` not found for this
+...
+76 |     html! { <Child>{ "Not allowed" }</Child> };
+   |     ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ method not found in `ChildPropertiesBuilder<ChildPropertiesBuilderStep_missing_required_prop_int>`
+   |
+   = note: this error originates in a macro outside of the current crate (in Nightly builds, run with -Z external-macro-backtrace for more info)
+
+error[E0599]: no method named `build` found for type `ChildContainerPropertiesBuilder<ChildContainerPropertiesBuilderStep_missing_required_prop_children>` in the current scope
+  --> $DIR/html-component-fail.rs:78:5
+   |
+23 | #[derive(Clone, Properties)]
+   |                          - method `build` not found for this
+...
+78 |     html! { <ChildContainer /> };
+   |     ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ method not found in `ChildContainerPropertiesBuilder<ChildContainerPropertiesBuilderStep_missing_required_prop_children>`
+   |
+   = note: this error originates in a macro outside of the current crate (in Nightly builds, run with -Z external-macro-backtrace for more info)
 
-Some errors occurred: E0308, E0425, E0599, E0609.
-For more information about an error, try `rustc --explain E0308`.
+error[E0599]: no method named `build` found for type `ChildContainerPropertiesBuilder<ChildContainerPropertiesBuilderStep_missing_required_prop_children>` in the current scope
+  --> $DIR/html-component-fail.rs:79:5
+   |
+23 | #[derive(Clone, Properties)]
+   |                          - method `build` not found for this
+...
+79 |     html! { <ChildContainer></ChildContainer> };
+   |     ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ method not found in `ChildContainerPropertiesBuilder<ChildContainerPropertiesBuilderStep_missing_required_prop_children>`
+   |
+   = note: this error originates in a macro outside of the current crate (in Nightly builds, run with -Z external-macro-backtrace for more info)
+
+error[E0277]: the trait bound `yew::virtual_dom::vcomp::VChild<Child>: std::convert::From<&str>` is not satisfied
+  --> $DIR/html-component-fail.rs:80:5
+   |
+80 |     html! { <ChildContainer>{ "Not allowed" }</ChildContainer> };
+   |     ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ the trait `std::convert::From<&str>` is not implemented for `yew::virtual_dom::vcomp::VChild<Child>`
+   |
+   = note: required because of the requirements on the impl of `std::convert::Into<yew::virtual_dom::vcomp::VChild<Child>>` for `&str`
+   = note: required because of the requirements on the impl of `std::iter::IntoIterator` for `yew::utils::NodeSeq<&str, yew::virtual_dom::vcomp::VChild<Child>>`
+   = note: this error originates in a macro outside of the current crate (in Nightly builds, run with -Z external-macro-backtrace for more info)
+
+error[E0277]: the trait bound `yew::virtual_dom::vcomp::VChild<Child>: std::convert::From<yew::virtual_dom::vnode::VNode>` is not satisfied
+  --> $DIR/html-component-fail.rs:81:5
+   |
+81 |     html! { <ChildContainer><></></ChildContainer> };
+   |     ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ the trait `std::convert::From<yew::virtual_dom::vnode::VNode>` is not implemented for `yew::virtual_dom::vcomp::VChild<Child>`
+   |
+   = note: required because of the requirements on the impl of `std::convert::Into<yew::virtual_dom::vcomp::VChild<Child>>` for `yew::virtual_dom::vnode::VNode`
+   = note: required because of the requirements on the impl of `std::iter::IntoIterator` for `yew::utils::NodeSeq<yew::virtual_dom::vnode::VNode, yew::virtual_dom::vcomp::VChild<Child>>`
+   = note: this error originates in a macro outside of the current crate (in Nightly builds, run with -Z external-macro-backtrace for more info)
+
+error[E0277]: the trait bound `yew::virtual_dom::vcomp::VChild<Child>: std::convert::From<yew::virtual_dom::vnode::VNode>` is not satisfied
+  --> $DIR/html-component-fail.rs:82:5
+   |
+82 |     html! { <ChildContainer><other /></ChildContainer> };
+   |     ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ the trait `std::convert::From<yew::virtual_dom::vnode::VNode>` is not implemented for `yew::virtual_dom::vcomp::VChild<Child>`
+   |
+   = note: required because of the requirements on the impl of `std::convert::Into<yew::virtual_dom::vcomp::VChild<Child>>` for `yew::virtual_dom::vnode::VNode`
+   = note: required because of the requirements on the impl of `std::iter::IntoIterator` for `yew::utils::NodeSeq<yew::virtual_dom::vnode::VNode, yew::virtual_dom::vcomp::VChild<Child>>`
+   = note: this error originates in a macro outside of the current crate (in Nightly builds, run with -Z external-macro-backtrace for more info)
diff --git a/tests/macro/html-component-pass.rs b/tests/macro/html-component-pass.rs
index 9977f2ff5a3..68283badd52 100644
--- a/tests/macro/html-component-pass.rs
+++ b/tests/macro/html-component-pass.rs
@@ -1,84 +1,320 @@
-#![recursion_limit = "128"]
+#![recursion_limit = "256"]
 
-#[macro_use]
-mod helpers;
+use std::marker::PhantomData;
+use yew::html::ChildrenRenderer;
+use yew::prelude::*;
+use yew::virtual_dom::{VChild, VNode};
 
-#[derive(Properties, Default, PartialEq)]
+pub struct Generic<G> {
+    marker: PhantomData<G>,
+}
+
+impl Component for Generic<String> {
+    type Message = ();
+    type Properties = ();
+
+    fn create(_: Self::Properties, _: ComponentLink<Self>) -> Self {
+        unimplemented!()
+    }
+    fn update(&mut self, _: Self::Message) -> ShouldRender {
+        unimplemented!()
+    }
+    fn view(&self) -> Html {
+        unimplemented!()
+    }
+}
+
+impl Component for Generic<Vec<String>> {
+    type Message = ();
+    type Properties = ();
+
+    fn create(_: Self::Properties, _: ComponentLink<Self>) -> Self {
+        unimplemented!()
+    }
+    fn update(&mut self, _: Self::Message) -> ShouldRender {
+        unimplemented!()
+    }
+    fn view(&self) -> Html {
+        unimplemented!()
+    }
+}
+
+#[derive(Clone, Properties, Default)]
+pub struct ContainerProperties {
+    #[props(required)]
+    pub int: i32,
+    pub children: Children,
+}
+
+pub struct Container;
+impl Component for Container {
+    type Message = ();
+    type Properties = ContainerProperties;
+
+    fn create(_: Self::Properties, _: ComponentLink<Self>) -> Self {
+        unimplemented!()
+    }
+    fn update(&mut self, _: Self::Message) -> ShouldRender {
+        unimplemented!()
+    }
+    fn view(&self) -> Html {
+        unimplemented!()
+    }
+}
+
+#[derive(Clone)]
+pub enum ChildrenVariants {
+    Child(VChild<Child>),
+    AltChild(VChild<AltChild>),
+}
+
+impl From<VChild<Child>> for ChildrenVariants {
+    fn from(comp: VChild<Child>) -> Self {
+        ChildrenVariants::Child(comp)
+    }
+}
+
+impl From<VChild<AltChild>> for ChildrenVariants {
+    fn from(comp: VChild<AltChild>) -> Self {
+        ChildrenVariants::AltChild(comp)
+    }
+}
+
+impl Into<VNode> for ChildrenVariants {
+    fn into(self) -> VNode {
+        match self {
+            Self::Child(comp) => VNode::VComp(comp.into()),
+            Self::AltChild(comp) => VNode::VComp(comp.into()),
+        }
+    }
+}
+
+#[derive(Clone, Properties, Default, PartialEq)]
 pub struct ChildProperties {
     pub string: String,
     #[props(required)]
     pub int: i32,
+    pub opt_str: Option<String>,
     pub vec: Vec<i32>,
+    pub optional_callback: Option<Callback<()>>,
 }
 
-pub struct ChildComponent;
-impl Component for ChildComponent {
+pub struct Child;
+impl Component for Child {
     type Message = ();
     type Properties = ChildProperties;
 
     fn create(_: Self::Properties, _: ComponentLink<Self>) -> Self {
-        ChildComponent
+        unimplemented!()
+    }
+    fn update(&mut self, _: Self::Message) -> ShouldRender {
+        unimplemented!()
     }
+    fn view(&self) -> Html {
+        unimplemented!()
+    }
+}
 
+pub struct AltChild;
+impl Component for AltChild {
+    type Message = ();
+    type Properties = ();
+
+    fn create(_: Self::Properties, _: ComponentLink<Self>) -> Self {
+        unimplemented!()
+    }
     fn update(&mut self, _: Self::Message) -> ShouldRender {
         unimplemented!()
     }
+    fn view(&self) -> Html {
+        unimplemented!()
+    }
 }
 
-impl Renderable<ChildComponent> for ChildComponent {
-    fn view(&self) -> Html<Self> {
+#[derive(Clone, Properties, Default)]
+pub struct ChildContainerProperties {
+    #[props(required)]
+    pub int: i32,
+    pub children: ChildrenRenderer<ChildrenVariants>,
+}
+
+pub struct ChildContainer;
+impl Component for ChildContainer {
+    type Message = ();
+    type Properties = ChildContainerProperties;
+
+    fn create(_: Self::Properties, _: ComponentLink<Self>) -> Self {
+        unimplemented!()
+    }
+    fn update(&mut self, _: Self::Message) -> ShouldRender {
+        unimplemented!()
+    }
+    fn view(&self) -> Html {
         unimplemented!()
     }
 }
 
 mod scoped {
-    pub use super::ChildComponent;
+    pub use super::Child;
+    pub use super::Container;
 }
 
-pass_helper! {
-    html! { <ChildComponent int=1 /> };
+fn compile_pass() {
+    html! { <Child int=1 /> };
 
     // backwards compat
-    html! { <ChildComponent: int=1 /> };
+    html! { <Child: int=1 /> };
 
     html! {
         <>
-            <ChildComponent int=1 />
-            <scoped::ChildComponent int=1 />
+            <Child int=1 />
+            <scoped::Child int=1 />
 
             // backwards compat
-            <ChildComponent: int=1 />
-            <scoped::ChildComponent: int=1 />
+            <Child: int=1 />
+            <scoped::Child: int=1 />
         </>
     };
 
-    let props = <ChildComponent as Component>::Properties::default();
-    let props2 = <ChildComponent as Component>::Properties::default();
+    let props = <Child as Component>::Properties::default();
+    let props2 = <Child as Component>::Properties::default();
     html! {
         <>
-            <ChildComponent with props />
+            <Child with props />
 
             // backwards compat
-            <ChildComponent: with props2, />
+            <Child: with props2, />
         </>
     };
 
     html! {
         <>
-            <ChildComponent int=1 string="child" />
-            <ChildComponent int=1 />
-            <ChildComponent int={1+1} />
-            <ChildComponent int=1 vec={vec![1]} />
-            <ChildComponent string={String::from("child")} int=1 />
+            <Child int=1 string="child" />
+            <Child int=1 />
+            <Child int={1+1} />
+            <Child int=1 vec={vec![1]} />
+            <Child string={String::from("child")} int=1 />
+
+            <Child opt_str="child" int=1 />
+            <Child opt_str=String::from("child") int=1 />
+            <Child opt_str=Some("child") int=1 />
+            <Child opt_str=Some(String::from("child")) int=1 />
 
             // backwards compat
-            <ChildComponent: string="child", int=3, />
+            <Child: string="child", int=3, />
         </>
     };
 
     let name_expr = "child";
     html! {
-        <ChildComponent int=1 string=name_expr />
+        <Child int=1 string=name_expr />
+    };
+
+    html! {
+        <>
+            <Child int=1 />
+            <Child int=1 optional_callback=Some(Callback::from(|_| ())) />
+            <Child int=1 optional_callback=Callback::from(|_| ()) />
+            <Child int=1 optional_callback=None />
+        </>
+    };
+
+    let node_ref = NodeRef::default();
+    html! {
+        <>
+            <Child int=1 ref=node_ref />
+        </>
+    };
+
+    let props = <Container as Component>::Properties::default();
+    html! {
+        <>
+            <Container int=1 />
+            <Container int=1></Container>
+
+            <Container with props>
+                <></>
+            </Container>
+
+            <Container int=1>
+                <Child int=2 />
+            </Container>
+
+            <scoped::Container int=1>
+                <scoped::Container int=2/>
+            </scoped::Container>
+
+            <Container int=1 children=ChildrenRenderer::new(
+                vec![html!{ "String" }]
+            ) />
+        </>
+    };
+
+    html! {
+        <>
+            <ChildContainer int=1 />
+            <ChildContainer int=1></ChildContainer>
+            <ChildContainer int=1><Child int = 2 /></ChildContainer>
+            <ChildContainer int=1><Child int = 2 /><Child int = 2 /></ChildContainer>
+        </>
+    };
+
+    html! {
+        <ChildContainer int=1>
+            <AltChild />
+            <Child int=1 />
+            {
+                html_nested! {
+                    <Child int=1 />
+                }
+            }
+            {
+                (0..2)
+                    .map(|i| { html_nested! { <Child int=i /> } })
+                    .collect::<Vec<_>>()
+            }
+        </ChildContainer>
+    };
+
+    let variants = || -> Vec<ChildrenVariants> {
+        vec![
+            ChildrenVariants::Child(VChild::new(ChildProperties::default(), NodeRef::default())),
+            ChildrenVariants::AltChild(VChild::new((), NodeRef::default())),
+        ]
+    };
+
+    html! {
+        <>
+            {
+                variants()
+                    .into_iter()
+                    .filter(|c| match c {
+                        ChildrenVariants::Child(_) => true,
+                        _ => false,
+                    })
+                    .collect::<VNode>()
+            }
+            <div>
+                {
+                    variants()
+                        .into_iter()
+                        .filter(|c| match c {
+                            ChildrenVariants::AltChild(_) => true,
+                            _ => false,
+                        })
+                        .collect::<VNode>()
+                }
+            </div>
+        </>
+    };
+
+    html! {
+        <>
+            <Generic<String> />
+            <Generic<String> ></Generic<String>>
+            <Generic<Vec<String>> />
+            <Generic<Vec<String>>></ Generic<Vec<String>>>
+        </>
     };
 }
 
diff --git a/tests/macro/html-iterable-fail.stderr b/tests/macro/html-iterable-fail.stderr
index e14d785dbf7..249a5a08a6b 100644
--- a/tests/macro/html-iterable-fail.stderr
+++ b/tests/macro/html-iterable-fail.stderr
@@ -11,7 +11,7 @@ error[E0277]: `()` is not an iterator
   |                 ^^ `()` is not an iterator
   |
   = help: the trait `std::iter::Iterator` is not implemented for `()`
-  = note: required for the cast to the object type `dyn std::iter::Iterator<Item = _>`
+  = note: required by `std::iter::IntoIterator::into_iter`
 
 error[E0277]: `()` is not an iterator
  --> $DIR/html-iterable-fail.rs:6:17
@@ -20,7 +20,7 @@ error[E0277]: `()` is not an iterator
   |                 ^^^^ `()` is not an iterator
   |
   = help: the trait `std::iter::Iterator` is not implemented for `()`
-  = note: required for the cast to the object type `dyn std::iter::Iterator<Item = _>`
+  = note: required by `std::iter::IntoIterator::into_iter`
 
 error[E0277]: `()` doesn't implement `std::fmt::Display`
  --> $DIR/html-iterable-fail.rs:7:17
@@ -31,8 +31,8 @@ error[E0277]: `()` doesn't implement `std::fmt::Display`
   = help: the trait `std::fmt::Display` is not implemented for `()`
   = note: in format strings you may be able to use `{:?}` (or {:#?} for pretty-print) instead
   = note: required because of the requirements on the impl of `std::string::ToString` for `()`
-  = note: required because of the requirements on the impl of `std::convert::From<()>` for `yew::virtual_dom::vnode::VNode<_>`
-  = note: required because of the requirements on the impl of `std::convert::Into<yew::virtual_dom::vnode::VNode<_>>` for `()`
+  = note: required because of the requirements on the impl of `std::convert::From<()>` for `yew::virtual_dom::vnode::VNode`
+  = note: required because of the requirements on the impl of `std::convert::Into<yew::virtual_dom::vnode::VNode>` for `()`
 
 error[E0277]: `()` doesn't implement `std::fmt::Display`
   --> $DIR/html-iterable-fail.rs:10:17
@@ -43,8 +43,8 @@ error[E0277]: `()` doesn't implement `std::fmt::Display`
    = help: the trait `std::fmt::Display` is not implemented for `()`
    = note: in format strings you may be able to use `{:?}` (or {:#?} for pretty-print) instead
    = note: required because of the requirements on the impl of `std::string::ToString` for `()`
-   = note: required because of the requirements on the impl of `std::convert::From<()>` for `yew::virtual_dom::vnode::VNode<_>`
-   = note: required because of the requirements on the impl of `std::convert::Into<yew::virtual_dom::vnode::VNode<_>>` for `()`
+   = note: required because of the requirements on the impl of `std::convert::From<()>` for `yew::virtual_dom::vnode::VNode`
+   = note: required because of the requirements on the impl of `std::convert::Into<yew::virtual_dom::vnode::VNode>` for `()`
 
 error[E0277]: `()` doesn't implement `std::fmt::Display`
   --> $DIR/html-iterable-fail.rs:13:17
@@ -56,7 +56,5 @@ error[E0277]: `()` doesn't implement `std::fmt::Display`
    = note: in format strings you may be able to use `{:?}` (or {:#?} for pretty-print) instead
    = note: required because of the requirements on the impl of `std::fmt::Display` for `&()`
    = note: required because of the requirements on the impl of `std::string::ToString` for `&()`
-   = note: required because of the requirements on the impl of `std::convert::From<&()>` for `yew::virtual_dom::vnode::VNode<_>`
-   = note: required because of the requirements on the impl of `std::convert::Into<yew::virtual_dom::vnode::VNode<_>>` for `&()`
-
-For more information about this error, try `rustc --explain E0277`.
+   = note: required because of the requirements on the impl of `std::convert::From<&()>` for `yew::virtual_dom::vnode::VNode`
+   = note: required because of the requirements on the impl of `std::convert::Into<yew::virtual_dom::vnode::VNode>` for `&()`
diff --git a/tests/macro/html-iterable-pass.rs b/tests/macro/html-iterable-pass.rs
index c9f00b0317c..32afe47e4ca 100644
--- a/tests/macro/html-iterable-pass.rs
+++ b/tests/macro/html-iterable-pass.rs
@@ -1,16 +1,18 @@
-#[macro_use]
-mod helpers;
-
+use yew::prelude::*;
 use std::iter;
 
-pass_helper! {
-    html! { for iter::empty::<Html<Self>>() };
-    html! { for Vec::<Html<Self>>::new().into_iter() };
+fn compile_pass() {
+    html! { for iter::empty::<Html>() };
+    html! { for Vec::<Html>::new() };
+    html! { for Vec::<Html>::new().into_iter() };
     html! { for (0..3).map(|num| { html! { <span>{num}</span> } }) };
-    html! { for {iter::empty::<Html<Self>>()} };
+    html! { for {iter::empty::<Html>()} };
 
-    let empty: Vec<Html<Self>> = Vec::new();
+    let empty: Vec<Html> = Vec::new();
     html! { for empty.into_iter() };
+
+    let empty: Vec<Html> = Vec::new();
+    html! { for empty };
 }
 
 fn main() {}
diff --git a/tests/macro/html-list-pass.rs b/tests/macro/html-list-pass.rs
index 140837787a8..4f1c98f4adb 100644
--- a/tests/macro/html-list-pass.rs
+++ b/tests/macro/html-list-pass.rs
@@ -1,7 +1,6 @@
-#[macro_use]
-mod helpers;
+use yew::prelude::*;
 
-pass_helper! {
+fn compile_pass() {
     html! {};
     html! { <></> };
     html! {
diff --git a/tests/macro/html-node-fail.stderr b/tests/macro/html-node-fail.stderr
index 6b23450139a..2d93d9da1bb 100644
--- a/tests/macro/html-node-fail.stderr
+++ b/tests/macro/html-node-fail.stderr
@@ -22,7 +22,7 @@ error: unsupported type
 11 |     html! {  b"str" };
    |              ^^^^^^
 
-error: unsupported type
+error: integer literal is too large
   --> $DIR/html-node-fail.rs:12:14
    |
 12 |     html! {  1111111111111111111111111111111111111111111111111111111111111111111111111111 };
@@ -40,7 +40,7 @@ error: unsupported type
 14 |     html! {  <span>{ b"str" }</span> };
    |                      ^^^^^^
 
-error: unsupported type
+error: integer literal is too large
   --> $DIR/html-node-fail.rs:15:22
    |
 15 |     html! {  <span>{ 1111111111111111111111111111111111111111111111111111111111111111111111111111 }</span> };
@@ -61,7 +61,7 @@ error[E0277]: `()` doesn't implement `std::fmt::Display`
   = help: the trait `std::fmt::Display` is not implemented for `()`
   = note: in format strings you may be able to use `{:?}` (or {:#?} for pretty-print) instead
   = note: required because of the requirements on the impl of `std::string::ToString` for `()`
-  = note: required because of the requirements on the impl of `std::convert::From<()>` for `yew::virtual_dom::vnode::VNode<_>`
+  = note: required because of the requirements on the impl of `std::convert::From<()>` for `yew::virtual_dom::vnode::VNode`
   = note: required by `std::convert::From::from`
 
 error[E0277]: `()` doesn't implement `std::fmt::Display`
@@ -73,8 +73,5 @@ error[E0277]: `()` doesn't implement `std::fmt::Display`
    = help: the trait `std::fmt::Display` is not implemented for `()`
    = note: in format strings you may be able to use `{:?}` (or {:#?} for pretty-print) instead
    = note: required because of the requirements on the impl of `std::string::ToString` for `()`
-   = note: required because of the requirements on the impl of `std::convert::From<()>` for `yew::virtual_dom::vnode::VNode<_>`
+   = note: required because of the requirements on the impl of `std::convert::From<()>` for `yew::virtual_dom::vnode::VNode`
    = note: required by `std::convert::From::from`
-
-Some errors occurred: E0277, E0425.
-For more information about an error, try `rustc --explain E0277`.
diff --git a/tests/macro/html-node-pass.rs b/tests/macro/html-node-pass.rs
index f383cf7468d..8390071f21a 100644
--- a/tests/macro/html-node-pass.rs
+++ b/tests/macro/html-node-pass.rs
@@ -1,7 +1,6 @@
-#[macro_use]
-mod helpers;
+use yew::prelude::*;
 
-pass_helper! {
+fn compile_pass() {
     html! { "" };
     html! { 'a' };
     html! { "hello" };
diff --git a/tests/macro/html-tag-fail.rs b/tests/macro/html-tag-fail.rs
index dec477dc829..8a8ebd1d6d1 100644
--- a/tests/macro/html-tag-fail.rs
+++ b/tests/macro/html-tag-fail.rs
@@ -1,5 +1,7 @@
 use yew::prelude::*;
 
+struct NotToString;
+
 fn compile_fail() {
     html! { <div> };
     html! { <div><div> };
@@ -28,9 +30,12 @@ fn compile_fail() {
     html! { <a href=() /> };
 
     html! { <input onclick=1 /> };
-    html! { <input onclick=|| () /> };
-    html! { <input onclick=|a, b| () /> };
-    html! { <input onclick=|a: String| () /> };
+    html! { <input onclick=Callback::from(|a: String| ()) /> };
+
+    html! { <input string=NotToString /> };
+
+    html! { <input ref=() /> };
+    html! { <input ref=() ref=() /> };
 }
 
 fn main() {}
diff --git a/tests/macro/html-tag-fail.stderr b/tests/macro/html-tag-fail.stderr
index 8a6afb1f719..9258e21f025 100644
--- a/tests/macro/html-tag-fail.stderr
+++ b/tests/macro/html-tag-fail.stderr
@@ -1,162 +1,142 @@
 error: this open tag has no corresponding close tag
- --> $DIR/html-tag-fail.rs:4:13
+ --> $DIR/html-tag-fail.rs:6:13
   |
-4 |     html! { <div> };
+6 |     html! { <div> };
   |             ^^^^^
 
 error: this open tag has no corresponding close tag
- --> $DIR/html-tag-fail.rs:5:18
+ --> $DIR/html-tag-fail.rs:7:18
   |
-5 |     html! { <div><div> };
+7 |     html! { <div><div> };
   |                  ^^^^^
 
 error: this close tag has no corresponding open tag
- --> $DIR/html-tag-fail.rs:6:13
+ --> $DIR/html-tag-fail.rs:8:13
   |
-6 |     html! { </div> };
+8 |     html! { </div> };
   |             ^^^^^^
 
 error: this open tag has no corresponding close tag
- --> $DIR/html-tag-fail.rs:7:13
+ --> $DIR/html-tag-fail.rs:9:13
   |
-7 |     html! { <div><div></div> };
+9 |     html! { <div><div></div> };
   |             ^^^^^
 
 error: only one root html element allowed
- --> $DIR/html-tag-fail.rs:8:24
-  |
-8 |     html! { <div></div><div></div> };
-  |                        ^^^^^^^^^^^
+  --> $DIR/html-tag-fail.rs:10:24
+   |
+10 |     html! { <div></div><div></div> };
+   |                        ^^^^^^^^^^^
 
 error: this close tag has no corresponding open tag
- --> $DIR/html-tag-fail.rs:9:18
-  |
-9 |     html! { <div></span> };
-  |                  ^^^^^^^
+  --> $DIR/html-tag-fail.rs:11:18
+   |
+11 |     html! { <div></span> };
+   |                  ^^^^^^^
 
 error: this close tag has no corresponding open tag
-  --> $DIR/html-tag-fail.rs:10:20
+  --> $DIR/html-tag-fail.rs:12:20
    |
-10 |     html! { <tag-a></tag-b> };
+12 |     html! { <tag-a></tag-b> };
    |                    ^^^^^^^^
 
 error: this close tag has no corresponding open tag
-  --> $DIR/html-tag-fail.rs:11:18
+  --> $DIR/html-tag-fail.rs:13:18
    |
-11 |     html! { <div></span></div> };
+13 |     html! { <div></span></div> };
    |                  ^^^^^^^
 
 error: only one root html element allowed
-  --> $DIR/html-tag-fail.rs:12:20
+  --> $DIR/html-tag-fail.rs:14:20
    |
-12 |     html! { <img /></img> };
+14 |     html! { <img /></img> };
    |                    ^^^^^^
 
-error: unexpected end of input, expected token tree
-  --> $DIR/html-tag-fail.rs:13:5
+error: expected valid html element
+  --> $DIR/html-tag-fail.rs:15:18
    |
-13 |     html! { <div>Invalid</div> };
-   |     ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
-   |
-   = note: this error originates in a macro outside of the current crate (in Nightly builds, run with -Z external-macro-backtrace for more info)
+15 |     html! { <div>Invalid</div> };
+   |                  ^^^^^^^
 
 error: only one `attr` attribute allowed
-  --> $DIR/html-tag-fail.rs:15:27
+  --> $DIR/html-tag-fail.rs:17:27
    |
-15 |     html! { <input attr=1 attr=2 /> };
+17 |     html! { <input attr=1 attr=2 /> };
    |                           ^^^^
 
 error: only one `value` attribute allowed
-  --> $DIR/html-tag-fail.rs:16:32
+  --> $DIR/html-tag-fail.rs:18:32
    |
-16 |     html! { <input value="123" value="456" /> };
+18 |     html! { <input value="123" value="456" /> };
    |                                ^^^^^
 
 error: only one `kind` attribute allowed
-  --> $DIR/html-tag-fail.rs:17:36
+  --> $DIR/html-tag-fail.rs:19:36
    |
-17 |     html! { <input kind="checkbox" kind="submit" /> };
+19 |     html! { <input kind="checkbox" kind="submit" /> };
    |                                    ^^^^
 
 error: only one `checked` attribute allowed
-  --> $DIR/html-tag-fail.rs:18:33
+  --> $DIR/html-tag-fail.rs:20:33
    |
-18 |     html! { <input checked=true checked=false /> };
+20 |     html! { <input checked=true checked=false /> };
    |                                 ^^^^^^^
 
 error: only one `disabled` attribute allowed
-  --> $DIR/html-tag-fail.rs:19:34
+  --> $DIR/html-tag-fail.rs:21:34
    |
-19 |     html! { <input disabled=true disabled=false /> };
+21 |     html! { <input disabled=true disabled=false /> };
    |                                  ^^^^^^^^
 
 error: only one `selected` attribute allowed
-  --> $DIR/html-tag-fail.rs:20:35
+  --> $DIR/html-tag-fail.rs:22:35
    |
-20 |     html! { <option selected=true selected=false /> };
+22 |     html! { <option selected=true selected=false /> };
    |                                   ^^^^^^^^
 
 error: only one `class` attribute allowed
-  --> $DIR/html-tag-fail.rs:21:32
+  --> $DIR/html-tag-fail.rs:23:32
    |
-21 |     html! { <div class="first" class="second" /> };
+23 |     html! { <div class="first" class="second" /> };
    |                                ^^^^^
 
-error: `onclick` attribute value should be a closure
-  --> $DIR/html-tag-fail.rs:30:20
-   |
-30 |     html! { <input onclick=1 /> };
-   |                    ^^^^^^^
-
-error: there must be one closure argument
-  --> $DIR/html-tag-fail.rs:31:28
-   |
-31 |     html! { <input onclick=|| () /> };
-   |                            ^^
-
-error: there must be one closure argument
-  --> $DIR/html-tag-fail.rs:32:28
+error: only one `ref` attribute allowed
+  --> $DIR/html-tag-fail.rs:38:27
    |
-32 |     html! { <input onclick=|a, b| () /> };
-   |                            ^^^^^^
-
-error: invalid closure argument
-  --> $DIR/html-tag-fail.rs:33:28
-   |
-33 |     html! { <input onclick=|a: String| () /> };
-   |                            ^^^^^^^^^^^
+38 |     html! { <input ref=() ref=() /> };
+   |                           ^^^
 
 error[E0308]: mismatched types
-  --> $DIR/html-tag-fail.rs:23:28
+  --> $DIR/html-tag-fail.rs:25:28
    |
-23 |     html! { <input checked=1 /> };
+25 |     html! { <input checked=1 /> };
    |                            ^ expected bool, found integer
    |
    = note: expected type `bool`
               found type `{integer}`
 
 error[E0308]: mismatched types
-  --> $DIR/html-tag-fail.rs:24:29
+  --> $DIR/html-tag-fail.rs:26:29
    |
-24 |     html! { <input disabled=1 /> };
+26 |     html! { <input disabled=1 /> };
    |                             ^ expected bool, found integer
    |
    = note: expected type `bool`
               found type `{integer}`
 
 error[E0308]: mismatched types
-  --> $DIR/html-tag-fail.rs:25:30
+  --> $DIR/html-tag-fail.rs:27:30
    |
-25 |     html! { <option selected=1 /> };
+27 |     html! { <option selected=1 /> };
    |                              ^ expected bool, found integer
    |
    = note: expected type `bool`
               found type `{integer}`
 
 error[E0277]: `()` doesn't implement `std::fmt::Display`
-  --> $DIR/html-tag-fail.rs:26:25
+  --> $DIR/html-tag-fail.rs:28:25
    |
-26 |     html! { <input type=() /> };
+28 |     html! { <input type=() /> };
    |                         ^^ `()` cannot be formatted with the default formatter
    |
    = help: the trait `std::fmt::Display` is not implemented for `()`
@@ -164,9 +144,9 @@ error[E0277]: `()` doesn't implement `std::fmt::Display`
    = note: required because of the requirements on the impl of `std::string::ToString` for `()`
 
 error[E0277]: `()` doesn't implement `std::fmt::Display`
-  --> $DIR/html-tag-fail.rs:27:26
+  --> $DIR/html-tag-fail.rs:29:26
    |
-27 |     html! { <input value=() /> };
+29 |     html! { <input value=() /> };
    |                          ^^ `()` cannot be formatted with the default formatter
    |
    = help: the trait `std::fmt::Display` is not implemented for `()`
@@ -174,9 +154,9 @@ error[E0277]: `()` doesn't implement `std::fmt::Display`
    = note: required because of the requirements on the impl of `std::string::ToString` for `()`
 
 error[E0277]: the trait bound `yew::html::Href: std::convert::From<()>` is not satisfied
-  --> $DIR/html-tag-fail.rs:28:21
+  --> $DIR/html-tag-fail.rs:30:21
    |
-28 |     html! { <a href=() /> };
+30 |     html! { <a href=() /> };
    |                     ^^ the trait `std::convert::From<()>` is not implemented for `yew::html::Href`
    |
    = help: the following implementations were found:
@@ -184,5 +164,44 @@ error[E0277]: the trait bound `yew::html::Href: std::convert::From<()>` is not s
              <yew::html::Href as std::convert::From<std::string::String>>
    = note: required because of the requirements on the impl of `std::convert::Into<yew::html::Href>` for `()`
 
-Some errors occurred: E0277, E0308.
-For more information about an error, try `rustc --explain E0277`.
+error[E0308]: mismatched types
+  --> $DIR/html-tag-fail.rs:32:20
+   |
+32 |     html! { <input onclick=1 /> };
+   |                    ^^^^^^^ expected struct `yew::callback::Callback`, found integer
+   |
+   = note: expected type `yew::callback::Callback<stdweb::webapi::events::mouse::ClickEvent>`
+              found type `{integer}`
+
+error[E0308]: mismatched types
+  --> $DIR/html-tag-fail.rs:33:20
+   |
+33 |     html! { <input onclick=Callback::from(|a: String| ()) /> };
+   |                    ^^^^^^^ expected struct `stdweb::webapi::events::mouse::ClickEvent`, found struct `std::string::String`
+   |
+   = note: expected type `yew::callback::Callback<stdweb::webapi::events::mouse::ClickEvent>`
+              found type `yew::callback::Callback<std::string::String>`
+
+error[E0599]: no method named `to_string` found for type `NotToString` in the current scope
+  --> $DIR/html-tag-fail.rs:35:27
+   |
+3  | struct NotToString;
+   | ------------------- method `to_string` not found for this
+...
+35 |     html! { <input string=NotToString /> };
+   |                           ^^^^^^^^^^^ method not found in `NotToString`
+   |
+   = note: the method `to_string` exists but the following trait bounds were not satisfied:
+           `NotToString : std::string::ToString`
+   = help: items from traits can only be used if the trait is implemented and in scope
+   = note: the following trait defines an item `to_string`, perhaps you need to implement it:
+           candidate #1: `std::string::ToString`
+
+error[E0308]: mismatched types
+  --> $DIR/html-tag-fail.rs:37:24
+   |
+37 |     html! { <input ref=() /> };
+   |                        ^^ expected struct `yew::html::NodeRef`, found ()
+   |
+   = note: expected type `yew::html::NodeRef`
+              found type `()`
diff --git a/tests/macro/html-tag-pass.rs b/tests/macro/html-tag-pass.rs
index c933e3add6d..d8eba616243 100644
--- a/tests/macro/html-tag-pass.rs
+++ b/tests/macro/html-tag-pass.rs
@@ -1,13 +1,13 @@
 #![recursion_limit = "512"]
+use yew::prelude::*;
 
-#[macro_use]
-mod helpers;
-
-pass_helper! {
+fn compile_pass() {
+    let onclick = Callback::from(|_: ClickEvent| ());
+    let parent_ref = NodeRef::default();
     html! {
         <div>
             <div data-key="abc"></div>
-            <div class="parent">
+            <div ref=parent_ref class="parent">
                 <span class="child", value="anything",></span>
                 <label for="first-name">{"First Name"}</label>
                 <input type="text" id="first-name" value="placeholder" />
@@ -35,7 +35,8 @@ pass_helper! {
             </svg>
             <img class=("avatar", "hidden") src="http://pic.com" />
             <img class="avatar hidden", />
-            <button onclick=|e| panic!(e) />
+            <button onclick=&onclick />
+            <button onclick=onclick />
             <a href="http://google.com" />
             <custom-tag-a>
                 <custom-tag-b />
diff --git a/tests/macro/test_component.rs b/tests/macro/test_component.rs
index 13af06f06e5..b4afc83b6ca 100644
--- a/tests/macro/test_component.rs
+++ b/tests/macro/test_component.rs
@@ -1,6 +1,6 @@
 use yew::prelude::*;
 
-#[derive(Properties, PartialEq)]
+#[derive(Clone, Properties, PartialEq)]
 pub struct TestProperties {
     pub string: String,
     pub int: i32,
@@ -18,4 +18,12 @@ impl Component for TestComponent {
     fn update(&mut self, _: Self::Message) -> ShouldRender {
         unimplemented!()
     }
+
+    fn change(&mut self, _: Self::Properties) -> ShouldRender {
+        unimplemented!()
+    }
+
+    fn view(&self) -> Html {
+        unimplemented!()
+    }
 }
diff --git a/tests/macro_test.rs b/tests/macro_test.rs
index 9c8f08405bd..de35457c04e 100644
--- a/tests/macro_test.rs
+++ b/tests/macro_test.rs
@@ -1,5 +1,5 @@
 #[allow(dead_code)]
-#[rustversion::attr(stable(1.35.0), cfg_attr(not(feature = "web_test"), test))]
+#[rustversion::attr(stable(1.40.0), cfg_attr(not(feature = "web_test"), test))]
 fn tests() {
     let t = trybuild::TestCases::new();
 
diff --git a/tests/vcomp_test.rs b/tests/vcomp_test.rs
index 56785a1a27b..f3e99470014 100644
--- a/tests/vcomp_test.rs
+++ b/tests/vcomp_test.rs
@@ -1,15 +1,14 @@
 #[cfg(feature = "wasm_test")]
 use wasm_bindgen_test::{wasm_bindgen_test as test, wasm_bindgen_test_configure};
 use yew::macros::Properties;
-use yew::virtual_dom::VNode;
-use yew::{html, Component, ComponentLink, Html, Renderable, ShouldRender};
+use yew::{html, Component, ComponentLink, Html, ShouldRender};
 
 #[cfg(feature = "wasm_test")]
 wasm_bindgen_test_configure!(run_in_browser);
 
 struct Comp;
 
-#[derive(PartialEq, Properties)]
+#[derive(Clone, PartialEq, Properties)]
 struct Props {
     field_1: u32,
     field_2: u32,
@@ -26,29 +25,27 @@ impl Component for Comp {
     fn update(&mut self, _: Self::Message) -> ShouldRender {
         unimplemented!();
     }
-}
 
-impl Renderable<Comp> for Comp {
-    fn view(&self) -> Html<Self> {
+    fn view(&self) -> Html {
         unimplemented!();
     }
 }
 
 #[test]
 fn set_properties_to_component() {
-    let _: VNode<Comp> = html! {
+    html! {
         <Comp />
     };
 
-    let _: VNode<Comp> = html! {
+    html! {
         <Comp field_1=1 />
     };
 
-    let _: VNode<Comp> = html! {
+    html! {
         <Comp field_2=2 />
     };
 
-    let _: VNode<Comp> = html! {
+    html! {
         <Comp field_1=1 field_2=2 />
     };
 
@@ -57,7 +54,7 @@ fn set_properties_to_component() {
         field_2: 1,
     };
 
-    let _: VNode<Comp> = html! {
+    html! {
         <Comp with props />
     };
 }
diff --git a/tests/vlist_test.rs b/tests/vlist_test.rs
index 88d200e52ec..02bee958017 100644
--- a/tests/vlist_test.rs
+++ b/tests/vlist_test.rs
@@ -1,7 +1,6 @@
 #[cfg(feature = "wasm_test")]
 use wasm_bindgen_test::{wasm_bindgen_test as test, wasm_bindgen_test_configure};
-use yew::virtual_dom::VNode;
-use yew::{html, Component, ComponentLink, Html, Renderable, ShouldRender};
+use yew::{html, Component, ComponentLink, Html, ShouldRender};
 
 #[cfg(feature = "wasm_test")]
 wasm_bindgen_test_configure!(run_in_browser);
@@ -19,21 +18,19 @@ impl Component for Comp {
     fn update(&mut self, _: Self::Message) -> ShouldRender {
         unimplemented!();
     }
-}
 
-impl Renderable<Comp> for Comp {
-    fn view(&self) -> Html<Self> {
+    fn view(&self) -> Html {
         unimplemented!();
     }
 }
 
 #[test]
 fn check_fragments() {
-    let fragment: VNode<Comp> = html! {
+    let fragment = html! {
         <>
         </>
     };
-    let _: VNode<Comp> = html! {
+    html! {
         <div>
             { fragment }
         </div>
diff --git a/tests/vtag_test.rs b/tests/vtag_test.rs
index 8a55ea560c7..94c6b687cb2 100644
--- a/tests/vtag_test.rs
+++ b/tests/vtag_test.rs
@@ -2,10 +2,9 @@
 use stdweb::web::{document, IElement};
 #[cfg(feature = "wasm_test")]
 use wasm_bindgen_test::{wasm_bindgen_test as test, wasm_bindgen_test_configure};
-use yew::html::Scope;
 use yew::virtual_dom::vtag::{VTag, HTML_NAMESPACE, SVG_NAMESPACE};
 use yew::virtual_dom::{VDiff, VNode};
-use yew::{html, Component, ComponentLink, Html, Renderable, ShouldRender};
+use yew::{html, Component, ComponentLink, Html, ShouldRender};
 
 #[cfg(feature = "wasm_test")]
 wasm_bindgen_test_configure!(run_in_browser);
@@ -23,10 +22,8 @@ impl Component for Comp {
     fn update(&mut self, _: Self::Message) -> ShouldRender {
         unimplemented!();
     }
-}
 
-impl Renderable<Comp> for Comp {
-    fn view(&self) -> Html<Self> {
+    fn view(&self) -> Html {
         unimplemented!();
     }
 }
@@ -44,10 +41,8 @@ impl Component for CompInt {
     fn update(&mut self, _: Self::Message) -> ShouldRender {
         unimplemented!();
     }
-}
 
-impl Renderable<CompInt> for CompInt {
-    fn view(&self) -> Html<Self> {
+    fn view(&self) -> Html {
         unimplemented!();
     }
 }
@@ -65,25 +60,23 @@ impl Component for CompBool {
     fn update(&mut self, _: Self::Message) -> ShouldRender {
         unimplemented!();
     }
-}
 
-impl Renderable<CompBool> for CompBool {
-    fn view(&self) -> Html<Self> {
+    fn view(&self) -> Html {
         unimplemented!();
     }
 }
 
 #[test]
 fn it_compares_tags() {
-    let a: VNode<Comp> = html! {
+    let a = html! {
         <div></div>
     };
 
-    let b: VNode<Comp> = html! {
+    let b = html! {
         <div></div>
     };
 
-    let c: VNode<Comp> = html! {
+    let c = html! {
         <p></p>
     };
 
@@ -93,15 +86,15 @@ fn it_compares_tags() {
 
 #[test]
 fn it_compares_text() {
-    let a: VNode<Comp> = html! {
+    let a = html! {
         <div>{ "correct" }</div>
     };
 
-    let b: VNode<Comp> = html! {
+    let b = html! {
         <div>{ "correct" }</div>
     };
 
-    let c: VNode<Comp> = html! {
+    let c = html! {
         <div>{ "incorrect" }</div>
     };
 
@@ -111,15 +104,15 @@ fn it_compares_text() {
 
 #[test]
 fn it_compares_attributes() {
-    let a: VNode<Comp> = html! {
+    let a = html! {
         <div a="test"></div>
     };
 
-    let b: VNode<Comp> = html! {
+    let b = html! {
         <div a="test"></div>
     };
 
-    let c: VNode<Comp> = html! {
+    let c = html! {
         <div a="fail"></div>
     };
 
@@ -129,19 +122,19 @@ fn it_compares_attributes() {
 
 #[test]
 fn it_compares_children() {
-    let a: VNode<Comp> = html! {
+    let a = html! {
         <div>
             <p></p>
         </div>
     };
 
-    let b: VNode<Comp> = html! {
+    let b = html! {
         <div>
             <p></p>
         </div>
     };
 
-    let c: VNode<Comp> = html! {
+    let c = html! {
         <div>
             <span></span>
         </div>
@@ -153,19 +146,19 @@ fn it_compares_children() {
 
 #[test]
 fn it_compares_classes() {
-    let a: VNode<Comp> = html! {
+    let a = html! {
         <div class="test"></div>
     };
 
-    let b: VNode<Comp> = html! {
+    let b = html! {
         <div class="test"></div>
     };
 
-    let c: VNode<Comp> = html! {
+    let c = html! {
         <div class="fail"></div>
     };
 
-    let d: VNode<Comp> = html! {
+    let d = html! {
         <div class=format!("fail")></div>
     };
 
@@ -176,17 +169,17 @@ fn it_compares_classes() {
 
 #[test]
 fn classes_from_local_variables() {
-    let a: VNode<Comp> = html! {
+    let a = html! {
         <div class=("class-1", "class-2")></div>
     };
 
     let class_2 = "class-2";
-    let b: VNode<Comp> = html! {
+    let b = html! {
         <div class=("class-1", class_2)></div>
     };
 
     let class_2_fmt = format!("class-{}", 2);
-    let c: VNode<Comp> = html! {
+    let c = html! {
         <div class=("class-1", class_2_fmt)></div>
     };
 
@@ -196,11 +189,11 @@ fn classes_from_local_variables() {
 
 #[test]
 fn supports_multiple_classes_string() {
-    let a: VNode<Comp> = html! {
+    let a = html! {
         <div class="class-1 class-2   class-3"></div>
     };
 
-    let b: VNode<Comp> = html! {
+    let b = html! {
         <div class="class-2 class-3 class-1"></div>
     };
 
@@ -220,7 +213,7 @@ fn supports_multiple_classes_string() {
 fn supports_multiple_classes_vec() {
     let mut classes = vec!["class-1"];
     classes.push("class-2");
-    let a: VNode<Comp> = html! {
+    let a = html! {
         <div class=classes></div>
     };
 
@@ -234,14 +227,41 @@ fn supports_multiple_classes_vec() {
     }
 }
 
-fn assert_vtag(node: &mut VNode<Comp>) -> &mut VTag<Comp> {
+#[test]
+fn filter_empty_string_classes_vec() {
+    let mut classes = vec![""];
+    classes.push("class-2");
+    let a = html! { <div class=vec![""]></div> };
+    let b = html! { <div class=("")></div> };
+    let c = html! { <div class=""></div> };
+
+    if let VNode::VTag(vtag) = a {
+        assert!(vtag.classes.is_empty());
+    } else {
+        panic!("vtag expected");
+    }
+
+    if let VNode::VTag(vtag) = b {
+        assert!(vtag.classes.is_empty());
+    } else {
+        panic!("vtag expected");
+    }
+
+    if let VNode::VTag(vtag) = c {
+        assert!(vtag.classes.is_empty());
+    } else {
+        panic!("vtag expected");
+    }
+}
+
+fn assert_vtag(node: &mut VNode) -> &mut VTag {
     if let VNode::VTag(vtag) = node {
         return vtag;
     }
     panic!("should be vtag");
 }
 
-fn assert_namespace(vtag: &VTag<Comp>, namespace: &'static str) {
+fn assert_namespace(vtag: &VTag, namespace: &'static str) {
     assert_eq!(
         vtag.reference.as_ref().unwrap().namespace_uri().unwrap(),
         namespace
@@ -250,32 +270,31 @@ fn assert_namespace(vtag: &VTag<Comp>, namespace: &'static str) {
 
 #[test]
 fn supports_svg() {
-    let scope = Scope::new();
     let div_el = document().create_element("div").unwrap();
     let svg_el = document().create_element_ns(SVG_NAMESPACE, "svg").unwrap();
 
-    let mut g_node: VNode<Comp> = html! { <g></g> };
-    let path_node: VNode<Comp> = html! { <path></path> };
-    let mut svg_node: VNode<Comp> = html! { <svg>{path_node}</svg> };
+    let mut g_node = html! { <g></g> };
+    let path_node = html! { <path></path> };
+    let mut svg_node = html! { <svg>{path_node}</svg> };
 
     let svg_tag = assert_vtag(&mut svg_node);
-    svg_tag.apply(&div_el, None, None, &scope);
+    svg_tag.apply(&div_el, None, None);
     assert_namespace(svg_tag, SVG_NAMESPACE);
-    let path_tag = assert_vtag(svg_tag.childs.get_mut(0).unwrap());
+    let path_tag = assert_vtag(svg_tag.children.get_mut(0).unwrap());
     assert_namespace(path_tag, SVG_NAMESPACE);
 
     let g_tag = assert_vtag(&mut g_node);
-    g_tag.apply(&div_el, None, None, &scope);
+    g_tag.apply(&div_el, None, None);
     assert_namespace(g_tag, HTML_NAMESPACE);
     g_tag.reference = None;
 
-    g_tag.apply(&svg_el, None, None, &scope);
+    g_tag.apply(&svg_el, None, None);
     assert_namespace(g_tag, SVG_NAMESPACE);
 }
 
 #[test]
 fn keeps_order_of_classes() {
-    let a: VNode<Comp> = html! {
+    let a = html! {
         <div class="class-1 class-2   class-3",></div>
     };
 
@@ -287,15 +306,15 @@ fn keeps_order_of_classes() {
 
 #[test]
 fn it_compares_values() {
-    let a: VNode<Comp> = html! {
+    let a = html! {
         <input value="test"/>
     };
 
-    let b: VNode<Comp> = html! {
+    let b = html! {
         <input value="test"/>
     };
 
-    let c: VNode<Comp> = html! {
+    let c = html! {
         <input value="fail"/>
     };
 
@@ -305,15 +324,15 @@ fn it_compares_values() {
 
 #[test]
 fn it_compares_kinds() {
-    let a: VNode<Comp> = html! {
+    let a = html! {
         <input type="text"/>
     };
 
-    let b: VNode<Comp> = html! {
+    let b = html! {
         <input type="text"/>
     };
 
-    let c: VNode<Comp> = html! {
+    let c = html! {
         <input type="hidden"/>
     };
 
@@ -323,15 +342,15 @@ fn it_compares_kinds() {
 
 #[test]
 fn it_compares_checked() {
-    let a: VNode<Comp> = html! {
+    let a = html! {
         <input type="checkbox" checked=false />
     };
 
-    let b: VNode<Comp> = html! {
+    let b = html! {
         <input type="checkbox" checked=false />
     };
 
-    let c: VNode<Comp> = html! {
+    let c = html! {
         <input type="checkbox" checked=true />
     };
 
@@ -341,7 +360,7 @@ fn it_compares_checked() {
 
 #[test]
 fn it_allows_aria_attributes() {
-    let a: VNode<Comp> = html! {
+    let a = html! {
         <p aria-controls="it-works">
             <a class="btn btn-primary"
                data-toggle="collapse"
@@ -375,38 +394,16 @@ fn it_allows_aria_attributes() {
 
 #[test]
 fn it_checks_mixed_closing_tags() {
-    let a: VNode<Comp> = html! { <div> <div/>      </div> };
-    let b: VNode<Comp> = html! { <div> <div></div> </div> };
-    assert_eq!(a, b);
-
-    let a: VNode<Comp> = html! { <div> <div data-val={ 2 / 1 }/>  </div> };
-    let b: VNode<Comp> = html! { <div> <div data-val={ 2 }></div> </div> };
-    assert_eq!(a, b);
-
-    let a: VNode<Comp> = html! { <div> <div data-val={ 2 > 1 }/>  </div> };
-    let b: VNode<Comp> = html! { <div> <div data-val={ true }></div> </div> };
-    assert_eq!(a, b);
-
-    let a: VNode<CompInt> = html! { <div> <div onblur=|_| 2 / 1/>  </div> };
-    let b: VNode<CompInt> = html! { <div> <div onblur=|_| 2></div> </div> };
+    let a = html! { <div> <div/>      </div> };
+    let b = html! { <div> <div></div> </div> };
     assert_eq!(a, b);
 }
 
 #[test]
 fn it_checks_misleading_gt() {
-    let a: VNode<CompBool> = html! { <div> <div onblur=|_|   2 > 1   /> </div> };
-    let b: VNode<CompBool> = html! { <div> <div onblur=|_| { 2 > 1 } /> </div> };
-    let c: VNode<CompBool> = html! { <div> <div onblur=|_| ( 2 > 1 ) /> </div> };
-    let d: VNode<CompBool> = html! { <div> <div onblur=|_| true ></div> </div> };
-    assert_eq!(a, b);
-    assert_eq!(a, c);
-    assert_eq!(a, d);
+    html! { <div data-val=<u32 as Default>::default()></div> };
+    html! { <div data-val=Box::<u32>::default()></div> };
 
-    let a: VNode<CompBool> = html! { <div><div onblur=|_|  2 > 1 />      </div> };
-    let b: VNode<CompBool> = html! { <div><div onblur=|_| { true }></div></div> };
-    assert_eq!(a, b);
-
-    let a: VNode<CompInt> = html! { <div> <a onblur=|_| -> u32 { 0 } />  </div> };
-    let b: VNode<CompInt> = html! { <div> <a onblur=|_| 0></a> </div> };
-    assert_eq!(a, b);
+    html! { <div><a data-val=<u32 as Default>::default() /> </div> };
+    html! { <div><a data-val=Box::<u32>::default() /></div> };
 }
diff --git a/tests/vtext_test.rs b/tests/vtext_test.rs
index 55db731f77c..25d85a9baeb 100644
--- a/tests/vtext_test.rs
+++ b/tests/vtext_test.rs
@@ -1,7 +1,6 @@
 #[cfg(feature = "wasm_test")]
 use wasm_bindgen_test::{wasm_bindgen_test as test, wasm_bindgen_test_configure};
-use yew::virtual_dom::VNode;
-use yew::{html, Component, ComponentLink, Html, Renderable, ShouldRender};
+use yew::{html, Component, ComponentLink, Html, ShouldRender};
 
 #[cfg(feature = "wasm_test")]
 wasm_bindgen_test_configure!(run_in_browser);
@@ -19,21 +18,19 @@ impl Component for Comp {
     fn update(&mut self, _: Self::Message) -> ShouldRender {
         unimplemented!();
     }
-}
 
-impl Renderable<Comp> for Comp {
-    fn view(&self) -> Html<Self> {
+    fn view(&self) -> Html {
         unimplemented!();
     }
 }
 
 #[test]
 fn text_as_root() {
-    let _: VNode<Comp> = html! {
+    html! {
         "Text Node As Root"
     };
 
-    let _: VNode<Comp> = html! {
+    html! {
         { "Text Node As Root" }
     };
 }