npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

webtasks

v0.0.3

Published

A lightweight web framework based on express and subtask.js

Downloads

3

Readme

webtasks

A lightweight web framework based on express and subtask.js

npm version Dependency Status Build Status Test Coverage Code Climate License Features

Make developer decouple complex web application logic into small logic pieces for reusing, and speed up implement and testing.

  • All logical components are webtasks in commonjs.
  • All webtask are async.
  • React support (and server side rendering)

Logical components in this framework

  • Input: focus on deal with params or other request based inputs
  • Data: call api or get data from storage
  • Module: handle presentation logics then rendered with a view
  • Page: composite modules then rendered with a view
  • React: handle presentation logics then rendered with given properties (data)
  • Ajax: collect data then output as JSON

Getting Started

Create your app

npm init
npm install webtasks --save

Hello World

  • Create a page webtask in page/hello.js:
/*jslint node: true */                                                                                  
'use strict';

module.exports = function () {
    return this.task({
        title: 'Good!',
        description: 'Hello World'
    });
};
  • Create a handlebars.js view for page/hello.js in view/page_hello.hbs :
<html>
<head>
<title>{{title}}</title>
</head>
<body>
{{description}}
</body>
</html>
  • Create an express server in server.js :
/*jslint node: true */
'use strict';

var app = require('webtasks');

app
.use(app.middleware('page', 'hello'))
.listen(3000);
  • Start the server and browse http://localhost:3000/ :
node server.js

About Webtask

Webtask is extended from subtask with Context API . Webtasks are automatic singleton per-request, developers do not need to worry about api optimization or task sequence.

For example, to deliver an article page for login user brings this task depdency:

[checkLogin] -> [getArticle] -> [setPageTitle] -> [composeModules]

If we add another module depend on another data source, then the module tasks will be appended after composeModules and make the task queue longer. When we try to speed up html deliver time, we will mess up the module composite tasks and data tasks.

When this done by webtasks it will like:

// NOTE: pseudo code
articlePage = webtask({
    isLogin: input('isLogin'),
    title: param('id').pipe(data('getArticle')).pick('title'),   // one data('getArticle')
    story: param('id').pipe(module('article')),
});

articleModule = param('id').pipe(data('getArticle'));            // another data('getArticle')

dataGetArticle = function (id) {
    return webtask( ..... call API by id );
};

All data('getArticle') with same id in this request refer to single webtask instance, the API call will be executed only one time in a request. Another good news is all webtask/subtask are executed parallel, you get performance boost. And, all webtasks focus on handle jobs for itself, you do not need to add extra code to maintain states cross different modules.

Page Component

Page is a webtask which will be rendered by a handlebars.js temlpate view. All pages are placed under page directory, and all views for pages are placed under view directory with page_* prefix.

Module Component

Module is a webtask which will be rendered by a handlebars.js temlpate view. All modules are placed under module directory, and all views for pages are placed under view directory with module_* prefix. The behavior of a module or a page are exact same, they are named differently for concept reason.

Data Component

Data is a webtask without view and focus on get and processs data. All data are placed under data directory.

Input Component

Input is a webtask without view and focus on get and process inputs from request, all inputs are places under input directory. The behavior of a input or a data are exact same, they are named differently for concept reason.

AJAX Component

AJAX is a webtask without view and focus on response json by different request. Actually AJAX is normal webtask placed under ajax directory, and in most case it will execute input and data subtasks.

REACT Component

REACT is pure jsx commonjs module be placed under react directory. You can pipe data into react component to render static or dynamic modules, please check the Context API: this.react and this.dreact .

Context API

All these API return a subtask

  • this.query(name) : access to req.query[name] , return a subtask

  • this.param(name) : access to req.params[name] , return a subtask

  • this.header(name) : access to req.header(name) , return a subtask

  • this.cookie(name) : access to req.cookies[name] , return a subtask

  • this.input(name) : get a input subtask

  • this.page(name) : get a page subtask creator

  • this.module(name) : get a module subtask creator

  • this.data(name) : get a data subtask creator

  • this.react : get a react subtask creator (static)

  • this.dreact : get a react subtask creator (will be rendered at server side then be binded at client side)

  • this.creact : get a react subtask creator (will be rendered/binded at client side)

TODO

  • sample project
  • react state ajax bridge
  • flux?
  • css component
  • gulp env