zox

Zox.js

Service-Oriented Web Framework.

Build scalable web apps and services with React and GraphQL or generate Static Sites.

VISIT THE WEBSITE

Get started with a new project:

npm i zox zox-plugins

Add support for GraphQL:

npm i graphql-plugins zox-graphql-ws

Render React Components on the Server-Side:

npm i zox-react

Use handlebars templates:

npm i zox-handlebars

A simple controller

Controllers implement a handle() method that returns a Response object which will be in charge of sending the HTTP response.

@Route({
    route: '/page/hello-world'
})
export class MyPage implements IController
{
    public handle(): IResponse
    {
        return new StringResponse('Hello World');
    }
}

Page controller

A PageController is a base controller class that returns our page in a RenderResponse. As the name suggests this class will render our template and add the required js, css and meta tags, before sending the response.

@Route({
    route: '/page/hello-world'
})
export class MyPage extends PageController
{
    public page()
    {
        const renderable = this.container.create(
            Renderable,
            'my-template-name'
        );
        renderable.text = 'Hello World';
        return renderable;
    }
}

A simple API

Creating API endpoints is as simple as creating a controller that returns a JsonResponse.

@Route({
    route: '/api/user/:id'
})
export class MyApi extends Controller
{
    public handle(): IResponse
    {
        const data = users.find(u => u.id == this.params.id);
        return new JsonResponse(data);
    }
}

GraphQL resolvers

With GraphQL we get to explicitly define types of inputs and outputs of our endpoints.

@Query('user(id: ID!): User', UserDef)
export class UserQuery extends ResolverBase
{
    public resolve(root, args, context): Array<UserData>
    {
        return users.find(u => u.id == args.id);
    }
}

React SPA

You can simply return a ReactRenderable with your App component and continue with your regular React workflow.

@Route({
    route: '/react/hello-world'
})
export class MyReactPage extends PageController
{
    public page()
    {
        return this.container.create(
            ReactRenderable,
            <App text='Hello World' />
        );
    }
}