node-bigpipe

node-bigpipe

Introduction

• Bigpie module for nodejs, web frameworks like Express, Sails, ThinkJS
• ONLY 3 Simple API: start, pipe, end
• Based on Promise, easy to write

Install

• [Copy Files into Your Project] OR [Use npm: npm install node-bigpipe --save-dev]
• Backend in ES6: import {Bigpipe} from 'node-bigpipe' or import {Bigpipe} from './back-end/Bigpipe'
• Backend in ES5: var Bigpipe = require('node-bigpipe').Bigpipe or var Bigpipe = require('./back-end/Bigpipe.es5').Bigpipe
• Front-End: use the jQuery and mo.bigpipe.es5.js files in your html
• Also you can wrap the front-end js by yourself, remember matching the Bigpipe API of Backend

Usage

• In Backend you should create a pipe block and return a promise
• require the node-bigpipe module by var Bigpipe = require('node-bigpipe').Bigpipe
• Create an Bigpipe by var bigpipe = new Bigpipe('pipeName', req, res)
• Use start api to ouput the pipe and render the unclosed base html frame
• Use pipe api to transport to browser the array composed by pipe blocks you created
• Use end api to finish this bigpipe
• More detail in Example

Backend API

• bigpipe.start(viewPath, [data]): Start render
• bigpipe.pipe(promiseList)：transport the pipe
• bigpipe.end([onEndFn])： Stop and finish the pipe
• bigpipe.render(selector, htmlData)： Similar with $(selector).html(htmlData), set the dom html content
• bigpipe.append(selector, htmlData)： Similar with $(selector).append(htmlData), append the dom element content
• bigpipe.fire(eventName, data): Trigger the event which subscribed in Front End. The event should is used to deal with the data transported by bigpipe. You can use on api to subscribe the event.

Browser API

• bigpipe.on(eventName).then(data=>{ // deal with data ... }): Subscribe the eventName and you can use then to add callback fn
• bigpie.fire/render/append Set the dom content, Same with mentioned above in Backend API.

Examples

• Create a pipe and return a Promise

The implementation will be put into the tagPipe, bp

function tagPipe(bp){
    return new Promise((resolve, reject)=>{
        let rdata = {
            'tag': 'your data'
        }

        // simulate the asynchronous response
        setTimeout(()=>{
            let html = '<div><span>TagA</span><span>TagB</span><span>TagC</span><span>TagD</span></div>'

            let pipeData = {
                'html': html,
                'message': 'for tag pipe html'
                'css': ['a.css'],
                'js': ['b.js'],
            }
            // 
            bp.fire('tag', pipeData)
            resolve()
        }, 3000)
    })
}

• In view controller, start the pipe

    index (req, res, next, page=1){
        let bp = new Bigpipe('karatBP', req, res)

        /**
         * bp.start will put the _bigpipe_id into the template `data`。
         * So Front End can get the id just by `new Bigpipe('{{_bigpipe_id}}')`
         * The Object is global in browser
         */
        
        bp.start('view/home')
        .pipe([
            articlePipe,
            tagPipe,
            
            // other ...
        ])
        .end()
    },

• Front End

<script type="text/javascript">

// this method will automatically export a object `karatBP` in window, and the `_bigpipe_id` shoud match the definition in backend 
new Bigpipe('karatBP')


// you can also get the `_bigpipe_id` from data which has been mixed by Bigpipe:
// new Bigpipe('{{_bigpipe_id}}')
</script>

• Full backend code TestController.js：

function tagPipe(bp){
    return new Promise((resolve, reject)=>{
        let rdata = {
            'tag': 'your data'
        }

        // simulate the asynchronous response
        setTimeout(()=>{
            let html = '<div><span>TagA</span><span>TagB</span><span>TagC</span><span>TagD</span></div>'

            let pipeData = {
                'html': html,
                'message': 'for tag pipe html'
                'css': ['a.css'],
                'js': ['b.js'],
            }
            // here the `tag` match the event in front end. 
            bp.fire('tag', pipeData)
            resolve()
        }, 3000)
    })
}


function articlePipe(bp){
    return new Promise((resolve, reject)=>{
        let rdata = {
            'article': 'your data'
        }

        bp.res.render('view/article', rdata, (err, html)=>{

            bp.render('.wrap > .content', html)
            resolve()
        })
    })
}


// here the `index` fn should be bound in router so it can be views by url
export default {

    index (req, res, next, page=1){
        let bp = new Bigpipe('karatBP', req, res)

        bp.start('view/home')
        .pipe([
            articlePipe,
            tagPipe,
            
            // other ...
        ])
        .end()
    },
}

• Full front end code

<script type="text/javascript" src="/static/jquery.min.js"></script>
<script type="text/javascript" src="/static/mo.bigpipe.es5.js"></script>
<script type="text/javascript">
new Bigpipe('karatBP')


// subscribe the events which match the backend API `fire`, like fire('tag', data)

karatBP.on('tag')
.then(function (data) {
    var pipeData = JSON.parse(data)
    console.log(pipeData.message)
    $('#tag').html(pipeData.html)
})
</script>

Support for ThinkJS

Difference of usage in Backend:

• Put an additional param this into new Bigpipe(), like new Bigpipe('xxxBP', http.req, http.res, this)
• Other API is the SAME
• More About ThinkJS: https://thinkjs.org

export default class extends Base {
  indexAction(){
    let http = this.http;

    // Put an additional param: `this`
    let bp = new Bigpipe('thinkBP', http.req, http.res, this)

    // `start` method use default ThinkJS template path: index.html
    
    // other API usage is the same
    bp.start() // or bp.sart('xxx')
    .pipe([
        tagPipe,
        testPipe
        
        // other ...
    ])
    .end()
 
  }
}

ES6 Version

• The default used file is back-end/Bigpipe.es5.js which is ES5

• If you want use the ES6 version ,just modify the package.json in node-bigpipe dir, and modify the "main": "back-end/Bigpipe.es5.js", into "main": "back-end/Bigpipe.js",

Readme

View full demo code in this github repo files.