Hands-On Web Development with Hyperapp V2

This video gives us an overview of the entire course.

In this video, we introduce the high-level concepts of Hyperapp 2.

• Explain the roots and inspirations for Hyperapp

• Explain what being minimal, declarative, and standalone means

• Explain the pragmatic approach to Hyperapp's development

Overview of the two main methods for using the Hyperapp library.

• Get to know about npm install with Hyperapp and a bundler

• Show how to import Hyperapp through a CDN

• Explore the pros and cons of each approach

In this video, we introduce the audience to Hyperapp's app() runtime.

• Discuss the app() runtime

• Explain init, view, and node

• Explain the h() function

In this video, we show how to create reusable component functions.

• Explain how components are just functions

• Explain how components are stateless

• Explain how components always return a virtual DOM tree

In this video, we show how to compose multiple components together.

• Explain that a higher-order component accepts other components

• Show higher-order components recursively

• Demonstrate how h() is similar, being a higher-order function

In this video, we introduce Cypress, and how to use it with Hyperapp, to write end-to- end tests.

• Explain how end-to-end tests should be high level

• Understand end-to-end tests in detail and follow how a user thinks

• Look at how end-to-end tests are a great way to reproduce bugs

In this video, we introduce Jest to the project and its tests.

• Explain how the components are easy to test

• Analyze how testing public interfaces is always preferable

• Create test helpers to make testing easier

Give the audience a deep dive into how Hyperapp works internally, with emphasis on how the state is updated.

• Explain the role of Hyperapp actions

• Explain the role of Hyperapp effects

• Show visual representation of Hyperapp internals

In this video, we will show how to use actions and effects to fetch data from the HackerNews API.

• Show real-world use case of actions to manage data

• Show real-world use case of effects to fetch data

• Show chart of effects and actions internally

In this video, we will show how to test actions and effects to have trust-worthy code.

• Show how to test actions

• Show how to test effects

• Demonstrate complexity of effect testing

Explain three ways of chaining actions and effects together to accomplish complex tasks.

• Demonstrate chaining by passing actions

• Demonstrate chaining with higher-order action functions

• Demonstrate chaining by batching effects

Explain what a subscription is, in the context of Hyperapp.

• Show similarities and differences from effects and subscriptions

• Get to know the Hyperapp internals diagrams with subscriptions

• Show how subscriptions are self-cleaning

In this video, we will demonstrate the different ways to use subscriptions in an application.

• Demonstrate what a one-off subscription is

• Demonstrate how to create subscriptions from state collections

• Demonstrate how to group subscriptions together with arrays

In this video, we will explain the lifecycle transitions of subscriptions, and what they mean.

• Explain continued subscriptions
• Explain cancelled subscriptions
• Explain restarted subscriptions

With a disclaimer and a word of warning, explain and show the internals of a subscription, and why you should avoid writing them in your applications.

• Get to know how to avoid subscriptions, because they're unpredictable
• Explain why subscriptions are never in scope of your project
• Explore how to preferably use the official and community packages for effects

In this video, we will explain how to pick a router to integrate into your own applications.

• Find routers with required features for your app
• Find routers that are data driven
• Find routers that work well in subscriptions (i.e. stoppable)

In this video, we will demonstrate how to use subscriptions and actions to sync our Hyperapp state with the router.

• Demonstrate how to make routes with data
• Demonstrate how to dispatch the action on route changes
• Demonstrate how to build an action to handle route changes

In this video, we will show how to run various actions when routing changes.

• Explain how to write one action for one job
• Demonstrate the deep relationship with actions and effects
• Show how components, actions, and state work together

As an exercise, demonstrate the level of effort to create a custom router for your application.

• Aanlyze the onhashchange based router
• Explain a pushState based router
• Explain short-comings and possible solutions

In this video, we will show Lazy component optimization for rendering expensive components.

• Explain memoization and how Lazy works
• Explain how Lazy is a deeply integrated component
• Compare implementation, both, with and without Lazy components

In this video, we will explain and demonstrate how you can write JSX in your Hyperapp applications.

• Explore what JSX is and how it works
• Demonstrate configuration of JSX and the h() function
• Explain required component signature for JSX to work

In this video, we will bring in bootstrap to show strategies on how to use third party components.

• Show how easy it is to integrate third-party CSS
• Demonstrate how to run untrusted code in subscriptions
• Explain that untrusted code can be re-implemented in our application

In this video, we will show how we can implement our Hyperapp applications inside other frameworks using the web component API.

• Explain how HTML tags are universal in front-end frameworks
• Explain how web components can react to attribute changes
• Demonstrate our application mounted inside React