How to handle async data fetching in Whatsup components?

Use generator functions in components to yield promises directly, allowing async operations like data fetching within the component flow without extra hooks or state managers, similar to the examples in the documentation.

Whatsup vs React: which is better for my project?

Whatsup offers a lighter, generator-based approach with built-in state and routing, ideal for performance-focused apps, while React has a larger ecosystem and more mature tooling, making it better for teams needing extensive third-party support.

Can I use Tailwind CSS with Whatsup?

Whatsup's CSSX system is exclusive and based on CSS modules, so integrating Tailwind or other CSS frameworks requires extra configuration or workarounds, as it's designed for scoped, component-level styling.

How to set up client-side routing in Whatsup?

Whatsup provides a built-in router with an intuitive API; define routes using components and hooks from the framework, as outlined in the routing section of the documentation on the website.

Is Whatsup good for large-scale applications?

While performant and type-safe, Whatsup's niche status means fewer large-scale case studies and potential risks in long-term support, so it's best for projects where its unique features outweigh ecosystem limitations.

What browsers does Whatsup support?

Whatsup requires modern browsers with ES6 generator support; older browsers may need polyfills or might not work fully, so check compatibility if targeting legacy environments.

Open-Awesome

Whatsup

MITTypeScriptv2.6.0

A frontend framework with JSX components on generators, fast reactivity system, and exclusive CSSX styling.

Visit Website GitHub

153 stars9 forks0 contributors

What is Whatsup?

Whatsup is a frontend framework that enables chillout-mode development with JSX components based on generators, a fast reactivity system similar to MobX, and an exclusive CSSX styling system. It provides a modern, type-safe approach to building user interfaces with minimal boilerplate and high performance.

Target Audience

Frontend developers looking for a lightweight, modern framework with built-in state management and styling, especially those interested in generator-based components and TypeScript.

Value Proposition

Developers choose Whatsup for its unique combination of generator-based components, high-performance reactivity, and exclusive CSSX styling—all in a small, type-safe package that simplifies frontend development.

Overview

A frontend framework for chillout-mode development 🥤 JSX components on generators*, fast mobx-like state management and exclusive cssx style system

Use Cases

Best For

Building interactive UIs with generator-based async patterns
Projects requiring lightweight, high-performance state management
Teams prioritizing TypeScript and type safety in frontend development
Applications needing built-in client-side routing with an intuitive API
Developers seeking a modern alternative to larger frameworks with minimal boilerplate
Styling with scoped CSS modules via the exclusive CSSX system

Not Ideal For

Projects requiring extensive server-side rendering or static site generation out of the box
Teams heavily reliant on React's vast ecosystem of third-party UI libraries and tools
Developers unfamiliar with JavaScript generators or preferring class-based or hook-based component models
Applications targeting older browsers without ES6 generator support

Pros & Cons

Pros

Lightweight Performance

With a bundle size of approximately 7kB gzipped, including state, JSX, and CSSX, Whatsup delivers high performance without bloat, as emphasized in the README.

Generator-Based Components

Components built on pure functions and generators enable intuitive async patterns, simplifying handling of asynchronous operations within UI logic, as shown in the example code.

Built-in State and Routing

Includes a fast, glitch-free reactivity system and an intuitive router, reducing external dependencies and boilerplate for state management and navigation.

TypeScript Native

Written in TypeScript with full type support out of the box, ensuring robust type safety and enhanced developer experience, as highlighted in the features.

Cons

Limited Ecosystem

As a newer, niche framework, it lacks the extensive third-party libraries, community plugins, and tooling support found in mainstream options like React or Vue, which can hinder development speed.

Generator Learning Curve

The unique reliance on generators for components adds complexity for developers accustomed to traditional models, potentially increasing initial setup and debugging time.

CSSX Vendor Lock-in

The exclusive CSSX styling system, while powerful for scoped styles, ties styling closely to the framework, making migration difficult and limiting flexibility with external CSS solutions.

Frequently Asked Questions

Related Projects

Vue

This is the repo for Vue 2. For Vue 3, go to https://github.com/vuejs/core

Stars210,113

Forks33,695

Last commit1 year ago

GitHub Repo

Deliver web apps with confidence 🚀

web development for the rest of us

Stars87,651

Forks5,053