Hyperstack
  • Welcome
  • Rails Installation and Configuration
    • Prerequisites
    • Using the Hyperstack Installer
    • Using the Generators
    • File Structure
    • Routing and Mounting Components
    • Other Rails Configuration Details
    • Why Rails? Other Frameworks?
  • HyperComponent
    • Component Classes
    • HTML Tags & CSS Classes
    • Component Children, Keys and Fragments
    • Component Params
    • Lifecycle Methods
    • Component State
    • Events and Callbacks
    • Interlude: Tic Tac Toe
    • Recovering from Errors
    • JavaScript Components
    • Elements and Rendering
    • Summary of Methods
    • List of Predefined Tags & Components
    • Predefined Events
    • Notes
    • Further Reading
  • HyperState
  • HyperRouter
  • HyperModel
  • Operations
  • Policies
  • Internationalization
  • Development Tools, Workflow and Procedures
    • Debugging
    • HyperTrace
    • HyperSpec
      • Installation
      • Tutorial
      • Methods and Features
      • Using with Rack
    • Deploy To Heroku
  • Tutorial
    • TodoMVC Tutorial Part I
    • TodoMVC Tutorial Part II
  • Community
Powered by GitBook
On this page

Was this helpful?

HyperComponent

PreviousWhy Rails? Other Frameworks?NextComponent Classes

Last updated 4 years ago

Was this helpful?

Your Hyperstack Application is built from a series of Components which are Ruby Classes that display portions of the UI. Hyperstack Components are implemented using , and can interoperate with existing React components and libraries. Here is a simple example that displays a ticking clock:

# Components inherit from the HyperComponent base class
# which supplies the DSL to translate from Ruby into React
# function calls
class Clock < HyperComponent
  # Components can be parameterized.
  # in this case you can override the default
  # with a different format
  param format: "%m/%d/%Y %I:%M:%S"
  # After_mount is an example of a life cycle method.
  after_mount do
    # Before the component is first rendered (mounted)
    # we setup a periodic timer that will update the  
    # current_time instance variable every second.
    # The mutate method signals a change in state
    every(1.second) { mutate @current_time = Time.now }
  end
  # every component has a render block which describes what will be
  # drawn on the UI
  render do
    # Components can render other components or primitive HTML or SVG
    # tags.  Components also use their state to determine what to render,
    # in this case the @current_time instance variable
    DIV { @current_time.strftime(format) }
  end
end

The following chapters cover these aspects and more in detail.

React