DOCSEARCHbyAlgolia
Submit Docs

Nullstack Documentation

website·Indexed 32 days ago

https://nullstack.app/

A feature-driven full-stack framework for building web applications. Documentation covers server functions, stateful and stateless components, server-side rendering, static site generation, and two-way binding. Includes guides for deploying to Vercel and GitHub Pages, as well as integrating MongoDB, Google Analytics, and Facebook Pixel.

Tokens
23.4K
Snippets
129
Records
152
Agent score
62%

What's inside Nullstack

  1. Overview of Nullstack feature-driven components

    Nullstack is a full-stack web framework based on 'feature-driven' components. It allows developers to define both frontend UI and backend server logic within a single component class, eliminating the need for manual API architecture. Key characteristics include:

    • Unified Components: Frontend and backend logic coexist in one file.
    • Reactive State: Instance variables are mutable and reactive; changes to these variables automatically update the DOM.
    • Server-Side Execution: Static async functions are executed on the server. Nullstack automatically generates a microservice API for these functions at compile time.
    • Composable Architecture: Features are built as small, isolated components that can be nested within other components or applications.

  2. Understand Nullstack's feature-driven architecture

    Nullstack uses a 'feature-driven' approach where every component is a full-stack feature. This means server functions (for data loading and saving), render functions (for UI), and event handlers are all co-located within a single component file. This architecture aligns the code structure with UX and project management tickets, allowing developers to build complex features (like a 'Like' button or an entire e-commerce app) as self-contained units.

  3. Compose features and applications in Nullstack

    Nullstack components can be composed by nesting them within other components or by defining high-level application routes. This allows for a modular architecture where complex apps are built from small, isolated features.
    // Nesting a feature component inside a page component
function Post({ post }) {
  return (
    <div>
      <article> {post.content} </article>
      <LikeButton post={post.id} />
    </div>
  )
}

// Composing an entire application with routed sub-apps
function Application() {
  return (
    <div>
      <Blog route="/blog/*" />
      <Ecommerce route="/shop/*" />
      <Home route="/" />
    </div>
  )
}

  4. Use Nullstack context types in TypeScript

    When writing TypeScript in Nullstack, use NullstackServerContext for server-side functions and NullstackClientContext for client-side functions to get full type safety and contextual information about the environment.
    import Nullstack, {NullstackClientContext, NullstackServerContext} from 'nullstack'

class TypeScript extends Nullstack {
    // Server-side function with context
    async serverFunction(context?: NullstackServerContext) {
        // ...
    }

    // Client-side function with context
    async clientFunction(context?: NullstackClientContext) {
        // ...
    }
}

  5. Nullstack framework overview

    Nullstack is a full-stack JavaScript framework that enables developers to plug-and-play isomorphic features into a codebase. It is designed to be product-focused and feature-driven while remaining flexible regarding design patterns. Key characteristics include:

    • Support for vanilla JavaScript and standard HTML tags (e.g., <a>) and attributes (e.g., class, onclick) without breaking Single Page Application (SPA) mode.
    • Compatibility with any vanilla JS library and the Node.js ecosystem.
    • Ability to build PWAs with server-side rendering (SSR), hybrid mobile apps, and Chrome extensions backed by microservices within a single codebase.

  6. Understand Nullstack Context basics

    In Nullstack, every function receives a context object as its first argument. This context acts as a proxy that merges framework-level data, application-level state, and component-level attributes. There are two distinct contexts: the client context (persists as long as the browser tab is open) and the server context (persists as long as the server is running).

  7. Nullstack API Stability and Roadmap

    The Nullstack API is currently stable; lifecycle methods and context keys are considered frozen. Future updates will focus on bug fixes and quality-of-life improvements. Planned steps and upcoming updates are tracked via the Nullstack GitHub issues page.

  8. Understand Nullstack Server-Side Rendering (SSR) behavior

    Nullstack uses Server-Side Rendering (SSR) as the default build and development mode to optimize SEO and response times. When a user enters the application, Nullstack generates the HTML for that specific route on the server.

    Key technical behaviors include:

    • Lifecycle Execution: Before serving HTML, Nullstack waits for the prepare and initiate phases of all components on the route to resolve.
    • Server Function Execution: During SSR, server functions run locally on the server instead of making external API fetches, reducing latency.
    • Hydration: Once the HTML is painted in the browser, the JavaScript client bundle is loaded to begin the hydration process. No additional server requests are required to recover the application state during this phase.
    • SEO Meta Tags: The page head automatically generates meta tags based on the project and page context keys.

  9. Understand Nullstack (.njs) transpilation behavior

    Nullstack uses the .njs file extension to signal Webpack which loaders to use during transpilation. Key transpilation rules include:

    • Imports: .njs files must import Nullstack or one of its subclasses. If only a subclass is imported, a Nullstack import is automatically injected.
    • JSX: JSX tags are replaced with Nullstack.element during transpilation.
    • Extensions: In addition to .njs, the framework supports .jsx, .nts, and .tsx extensions.

  10. Nullstack Rendering and PWA Lifecycle

    Nullstack optimizes the user experience through a multi-stage loading process:

    1. First Render: Delivers SEO-ready HTML optimized for the first paint in a single request using local functions, with zero JavaScript dependencies in the initial client bundle.
    2. Hydration: Once the network is idle, Nullstack JavaScript loads and restores the application state, converting the page into a Single Page Application (SPA).
    3. Subsequent Requests: Server functions fetch JSON from automatically generated microservice APIs, deserialize the response, update state, and re-render the page.

  11. Create full-stack isomorphic components with Nullstack

    Nullstack allows developers to write both backend and frontend logic within a single isomorphic component by extending the Nullstack class.

    • Server-side logic: Defined as static async functions. These are automatically extracted into microservice APIs by the compiler.
    • Client-side logic: Defined as instance methods that can invoke the static server functions.
    • Rendering: The render() method returns JSX that follows HTML standards.
    class WaifuCounter extends Nullstack {
  // runs on the server
  static async getWaifus({ database }) {
    const sql = "SELECT COUNT(*) FROM WAIFUS";
    return database.query(sql);
  }

  // runs on the client
  async countWaifus() {
    this.waifus = this.getWaifus()
  }

  // runs wherever is best (SSR or Client)
  render() {
    return (
      <button onclick={this.countWaifus}>
        Count: {this.waifus}
      </button>
    );
  }
}

  12. Deploy a static generated site with Nullstack

    After generating a static site using Nullstack's static site generation process, deploy the application by moving the resulting output folder to any host machine capable of serving HTML files.