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

bigkoa

v0.1.15

Published

> BigKoa = BigView + Koa

Downloads

15

Readme

BigKoa (Node.js 8.x +)

BigKoa = BigView + Koa

codecov.io js-standard-style

  • bigkoa NPM version
  • biglet NPM version
  • bigview-cli NPM version
  • bigconsole NPM version

特性

  • 模块化
  • 具有测试性
  • 支持mock数据
  • 生成html片段(便于对比)
  • 提供Scaffold(bigview-cli)
  • 提供调试UI(bigconsole)

功能点

  • 支持静态布局和动态布局
  • 支持5种bigpipe渲染模式
    • parallel.js 并行模式, 先写布局,并行请求,但在获得所有请求的结果后再渲染
    • pipeline.js (默认) 管线模式:即并行模式, 先写布局,并行请求,并即时渲染
    • reduce.js 顺序模式: 先写布局,按照pagelet加入顺序,依次执行,写入
    • reducerender.js 先写布局,然后顺序执行,在获得所有请求的结果后再渲染
    • render.js 一次渲染模式:即普通模式,不写入布局,所有pagelet执行完成,一次写入到浏览器。支持搜索引擎,用来支持那些不支持JS的客户端。
  • 支持子pagelet,无限级嵌套
  • 支持根据条件渲染模板,延时输出布局
  • bigview支持错误模块显示,仅限于布局之前

生命周期

bigview的生命周期

  • before
  • .then(this.beforeRenderLayout.bind(this))
  • .then(this.renderLayout.bind(this))
  • .then(this.afterRenderLayout.bind(this))
  • .then(this.beforeRenderPagelets.bind(this))
  • .then(this.renderPagelets.bind(this))
  • .then(this.afterRenderPagelets.bind(this)
  • end

bigview的生命周期精简

  • before
  • renderLayout
  • renderPagelets
  • end

biglet的生命周期

  • before
  • .then(self.fetch.bind(self))
  • .then(self.parse.bind(self))
  • .then(self.render.bind(self))
  • end

Scaffold

Install

$ npm i -g bigview-cli

Usages

$ bpm a b c
generate ~/a/MyPagelet.js
generate ~/a/index.html
generate ~/a/index.js
generate ~/a/req.js
generate ~/b/MyPagelet.js
generate ~/b/index.html
generate ~/b/index.js
generate ~/b/req.js
generate ~/c/MyPagelet.js
generate ~/c/index.html
generate ~/c/index.js
generate ~/c/req.js

安装

$ npm i -S bigview

mode 1 并行渲染

const MyBigView = require('./MyBigView')

app.get('/', function (req, res) {
  var bigpipe = new MyBigView(req, res, 'basic/index', { title: "测试" })

  var Pagelet1 = require('./bpmodules/basic/p1')
  var pagelet1 = new Pagelet1()

  var Pagelet2 = require('./bpmodules/basic/p2')
  var pagelet2 = new Pagelet2()

  bigpipe.add(pagelet1)
  bigpipe.add(pagelet2)

  bigpipe.start()
});

mode 2 支持嵌套子布局

app.get('/nest', function (req, res) {
  var bigpipe = new MyBigView(req, res, 'nest/index', { title: "测试" })

  var Pagelet1 = require('./bpmodules/nest/p1')
  var pagelet1 = new Pagelet1()

  var Pagelet2 = require('./bpmodules/nest/p2')
  var pagelet2 = new Pagelet2()

  pagelet1.addChild(pagelet2)

  bigpipe.add(pagelet1)

  bigpipe.start()
});

a) 静态布局

views/nest/index.html是bp的布局文件

<!doctype html>
<html class="no-js">
<head>
    <title><%= title %></title>
    <link rel="stylesheet" href="/stylesheets/style.css">
</head>
<body>
    <div id="pagelet2" class="pagelet2">load,,,,</div>

    <ul>
    <% pagelets.forEach(function(p){ %>
        <li><%= p.name %> | <%= p.selector %>
        <% if (p.children.length) { %>
            <ul>
            <% p.children.forEach(function(sub){ %>
                <li> subPagelet = <%= sub.name %> | <%= sub.selector %>
            <% }) %>
            </ul>
        <% } %>
    <% }) %>
    </ul>

    <% pagelets.forEach(function(p){ %>
       <div id="<%= p.location %>" class="<%= p.selector %>">loading...<%= p.name %>...</div>
    <% }) %>

    <script src="/js/jquery.min.js"></script>
    <script src="/js/bigpipe.js"></script>
    <script>
        var bigpipe=new Bigpipe();

        <% pagelets.forEach(function(p){ %>

        bigpipe.ready('<%= p.name %>',function(data){
            $("#<%= p.location %>").html(data);
        })
        <% }) %>

        bigpipe.ready('pagelet2',function(data){
            $("#pagelet2").html(data);
        })

    </script>
</body>
</html>

遍历pagelets来生成各种页面需要的即可。

b) 延时输出布局

views/nest2/index.html是bp的布局文件

<!doctype html>
<html class="no-js">
<head>
    <title><%= title %></title>
    <link rel="stylesheet" href="/stylesheets/style.css">
</head>
<body>
    <ul>
    <% pagelets.forEach(function(p){ %>
        <li><%= p.name %> | <%= p.selector %>
        <% if (p.children.length) { %>
            <ul>
            <% p.children.forEach(function(sub){ %>
                <li> subPagelet = <%= sub.name %> | <%= sub.selector %>
            <% }) %>
            </ul>
        <% } %>
    <% }) %>
    </ul>

    <% pagelets.forEach(function(p){ %>
       <div id="<%= p.location %>" class="<%= p.selector %>">loading...<%= p.name %>...</div>
    <% }) %>

    <script src="/js/jquery.min.js"></script>
    <script src="/js/bigpipe.js"></script>
    <script>
        var bigpipe=new Bigpipe();

        <% pagelets.forEach(function(p){ %>

        bigpipe.ready('<%= p.name %>',function(data){
            $("#<%= p.location %>").html(data);
        })
        <% }) %>
    </script>
</body>
</html>

此时无任何pagelet2的布局

在bpmodules/nest2/p1/p1.html里,输出pagelet2的布局。

  <script>bigpipe.set("pagelet1", '<%= is %>');</script>

  <div id="pagelet2" class="pagelet2">load,,,,</div>

  <script>
      bigpipe.ready('pagelet2',function(data){
          $("#pagelet2").html(data);
      })
  </script>

mode 3:根据条件渲染模板

自定义p1和p2,设置this.immediately = false

'use strict'

const Pagelet = require('../../../../packages/biglet')

module.exports = class MyPagelet extends Pagelet {
  constructor () {
      super()
      this.root = __dirname
      this.name = 'pagelet1'
      this.data = { is: "pagelet1测试" }
      this.selector = 'pagelet1'
      this.location = 'pagelet1'
      this.tpl = 'p1.html'
      this.delay = 4000
      this.immediately = false
  }

  fetch () {
		let pagelet = this
		return require('./req')(pagelet)
	}
}

自定义BigView基类

'use strict'

const BigView = require('../../../packages/bigview')

module.exports = class MyBigView extends BigView {
  before () {
    let self = this
     return new Promise(function(resolve, reject) {
       self.showPagelet = self.query.a
       resolve(true)
    })
  }

  afterRenderLayout () {
    let self = this

    if (self.showPagelet === '1') {
      self.run('pagelet1')
    } else {
      self.run('pagelet2')
    }

    // console.log('afterRenderLayout')
    return Promise.resolve(true)
  }
}

在bigview

'use strict'

const debug = require('debug')('bigview')
const fs = require('fs')
const MyBigView = require('./MyBigView')

module.exports = function (req, res) {
  var bigpipe = new MyBigView(req, res, 'if/index', { title: "条件选择pagelet" })

  bigpipe.add(require('./p1'))
  bigpipe.add(require('./p2'))

  bigpipe.start()
}
  • http://127.0.0.1:4005/if?a=1
  • http://127.0.0.1:4005/if?a=2

出错模块

  • bigview出错,即在所有pagelets渲染之前,显示错误模块,终端其他模块渲染
  • 如果是pagelets里的某一个出错,可以自己根据模板去,模块内的错误就模块自己处理就好了
    var bigpipe = new MyBigView(req, res, 'error/index', { title: "测试" })
    // bigpipe.mode = 'render'
    bigpipe.add(require('./p1'))
    bigpipe.addErrorPagelet(require('./error'))

显示ErrorPagelet,可以在bigview的生命周期,执行子Pagelets之前。reject一个error即可。

比如在afterRenderLayout里,reject

	afterRenderLayout() {
		let self = this
		// console.log('afterRenderLayout')
		return new Promise(function(resolve, reject) {
			setTimeout(function() {
				reject(new Error('xxxxxx'))
				// resolve()
			}, 0)
		})
	}

通过addErrorPagelet设置Error时要显示的模块,如果要包含多个,请使用pagelet子模块。

另外,如果设置了ErrorPagelet,布局的时候可以使用errorPagelet来控制错误显示

<!doctype html>
<html class="no-js">
<head>
    <title><%= title %></title>
    <link rel="stylesheet" href="/stylesheets/style.css">
</head>
<body>
    <div id="<%= errorPagelet.location %>" class="<%= errorPagelet.selector %>">
        <ul>
        <% pagelets.forEach(function(p){ %>
            <li><%= p.name %> | <%= p.selector %>
        <% }) %>
        </ul>

        <% pagelets.forEach(function(p){ %>
        <div id="<%= p.location %>" class="<%= p.selector %>">loading...<%= p.name %>...</div>
        <% }) %>
    </div>

    <script src="/js/jquery.min.js"></script>
    <script src="/js/bigpipe.js"></script>
    <script>
        var bigpipe=new Bigpipe();

        <% pagelets.forEach(function(p){ %>

        bigpipe.ready('<%= p.name %>',function(data){
            $("#<%= p.location %>").html(data);
        })
        <% }) %>

        bigpipe.ready('<%= errorPagelet.name %>',function(data){
            $("#<%= errorPagelet.location %>").html(data);
        })
    </script>
    <script src="/bigconsole.min.js"></script>
</body>
</html>

Pagelet里触发其他模块

提供trigger方法,可以触发1个多个多个其他模块,无序并行。结果返回的是Promise

'use strict'

const Pagelet = require('../../../../packages/biglet')
const somePagelet1 = require('./somePagelet1')
const somePagelet2 = require('./somePagelet2')
const somePagelet = require('./somePagelet')

module.exports = class MyPagelet extends Pagelet {
	constructor () {
		super()

		this.root = __dirname
		this.name = 'pagelet1'
	}

	fetch () {
    // 触发一个模块
    this.trigger(new somePagelet())
    // 触发一个模块
    this.trigger([new somePagelet1(), new somePagelet2()])
	}
}

不允许,直接

return this.trigger([require('./somePagelet1'), require('./somePagelet2')])

这样会有缓存,不会根据业务请求来进行不同处理。

也可以强制的fetch里完成

'use strict'

const Pagelet = require('../../../../packages/biglet')
const somePagelet1 = require('./somePagelet1')
const somePagelet2 = require('./somePagelet2')
const somePagelet = require('./somePagelet')

module.exports = class MyPagelet extends Pagelet {
	constructor () {
		super()

		this.root = __dirname
		this.name = 'pagelet1'
	}

	fetch () {
    // 触发多个模块
    return this.trigger([new somePagelet1, new somePagelet2()])
	}
}

生成预览数据

app.get('/', function (req, res) {
  var bigpipe = new MyBigView(req, res, 'basic/index', { title: "测试" })

  var Pagelet1 = require('./bpmodules/basic/p1')
  var pagelet1 = new Pagelet1()

  var Pagelet2 = require('./bpmodules/basic/p2')
  var pagelet2 = new Pagelet2()

  bigpipe.add(pagelet1)
  bigpipe.add(pagelet2)

  // bigpipe.preview('aaaa.html')
  bigpipe.previewFile = 'aaaa.html'
  bigpipe.start()
});

方法

  • 设置previewFile
  • bigpipe.preview('aaaa.html')

获取数据

'use strict'

const Pagelet = require('../../../../packages/biglet')

module.exports = class MyPagelet extends Pagelet {
	constructor () {
		super()

		this.root = __dirname
		this.name = 'pagelet1'
		this.data = { is: "pagelet1测试" }
		this.location = 'pagelet1'
		this.tpl = 'p1.html'
		this.selector = 'pagelet1'
		this.delay = 2000
	}

  fetch () {
    return new Promise(function(resolve, reject){
      setTimeout(function() {
        // self.owner.end()
        resolve(self.data)
      }, 4000);
    })
  }
}

只需要重写fetch方法,并且返回Promise对象即可。如果想多个,就利用Promise的链式写法解决即可

http支持

无论http也好,还是其他方式(rpc)也好,都是需要参数的

  • bigview为单页应用入口
  • bigview只定义布局,以及各个pagelet位置(当然也可以在before里完成http请求)
  • bigview入口是express路由,可以获取querystring
  • bigview里包含多个pagelet
  • pagelet里需要发起接口请求,获取数据后,想浏览器写html片段

所以要做的,依然是上面的fetch方法,由于pagelet是独立的,所以无法直接获取bigview页面的参数。

但是pagelet里有一个owner对象,其实就是bigview对象。

先看一下模块入口

'use strict'

const debug = require('debug')('bigview')
const fs = require('fs')
const MyBigView = require('./MyBigView')

module.exports = function (req, res) {
  var bigpipe = new MyBigView(req, res, 'basic/index', { title: "测试" })

  var Pagelet1 = require('./p1')
  var pagelet1 = new Pagelet1()

  var Pagelet2 = require('./p2')
  var pagelet2 = new Pagelet2()

  bigpipe.add(pagelet1)
  bigpipe.add(pagelet2)

  // bigpipe.preview('aaaa.html')
  bigpipe.isMock = true
  bigpipe.previewFile = 'aaaa.html'
  bigpipe.start()
}

很明显这就是一个express中间件。

app.get('/', require('./bpmodules/basic'));

所以获取QueryString就很简单了,从req.query里获得就可以了。然后赋值给bigpipe对象。

实际上,bigview已经做了这件事,它自身已经绑定了3个获取参数的属性

  • this.query // ?a=1&b=2
  • this.params // /a/:id this.params.id
  • this.body 仅限于POST等类型的请求,估计用的不会很多

所以在req.js里可以这样使用

  • pagelet.owner.query
  • pagelet.owner.params
  • pagelet.owner.body

例子如下

'use strict'

module.exports = function (pagelet) {
    console.log(pagelet.owner.query)

    pagelet.delay = 1000
    return new Promise(function(resolve, reject){
      setTimeout(function() {
        // self.owner.end()
        resolve(pagelet.data)
      }, pagelet.delay)
    })
}

定义实现render方法,支持更多模板引擎

'use strict'

const Pagelet = require('../../../../packages/biglet')

module.exports = class MyPagelet extends Pagelet {
	constructor () {
		super()

		this.root = __dirname
		this.name = 'pagelet1'
		this.data = { is: "pagelet1测试" }
		this.location = 'pagelet1'
		this.tpl = 'p1.html'
		this.selector = 'pagelet1'
		this.delay = 2000
	}

    fetch () {
        return new Promise(function(resolve, reject){
            setTimeout(function() {
                // self.owner.end()
                resolve(self.data)
            }, 4000);
        })
    }

    render (tpl, data) {
        const ejs = require('ejs')
        let self = this

        return new Promise(function(resolve, reject){
            ejs.renderFile(tpl, data, self.options, function(err, str){
                // str => Rendered HTML string
                if (err) {
                    console.log(err)
                    reject(err)
                }

                resolve(str)
            })
        })
    }
}

重写render()方法,如果不重写则采用默认的模板引擎ejs编译。

render方法的参数

  • tpl,即pagelet对应的模板
  • data,是pagelet对应的模板编译时需要的数据

模块目录的思考

.
├── MyBigView.js(实现类,继承自bigview)
├── index.js (返回MyBigView以及p1和p2等pagelet模块的组织)
├── p1(pagelet模块)
│   ├── index.js
│   ├── p1.html
│   └── req.js
└── p2(pagelet模块)
    ├── index.js
    ├── p2.html
    └── req.js

pagelet模块

pagelet的本章是返回模板引擎编译后的html片段。

模板引擎编译(模板 + 数据) = html

唯一比较麻烦的是数据的来源,可能是静态数据,也可能是api请求的数据,所以在设计pagelet的时候,通过集成fetch方法来实现自定义数据。为了进一步

├── p1(pagelet模块)
│   ├── index.js
│   ├── p1.html
│   └── req.js

说明

  • index.js (实现类,继承自biglet)可以完成各种配置
  • p1.html 是模板
  • req.js 是获取api数据的,提供给模板引擎data的请求文件,返回Promise对象

支持mock数据

bigpipe

  bigpipe.isMock = true
  bigpipe.previewFile = 'aaaa.html'

pagelet带定

var Pagelet1 = require('./bpmodules/basic/p1')
var pagelet1 = new Pagelet1()

pagelet1.mock = true

pagelet1.data = {
  xxx: yyy
}

pagelet1.test()

or

$ pt bpmoduless/p1 url
$ pt bpmoduless/p1 aaaa.json

自动跑测试,并给出测试结果

支持 gzip 压缩

enable gzip:

const bigkoa = new BigKoa({ gzip: true })

More

pagelet能复用么?

直接请求,也未尝不可

  • pagelet独立模块复用
  • http方式调用pagelet(需要深入思考一下)

性能改进

  • req.js,有http改成rpc
  • 缓存模板
  • 缓存编译结果

与传统Ajax比较

  • 减少HTTP请求数:多个模块更新合成一个请求
  • 请求数减少:多个chunk合成一个请求
  • 减少开发成本:前端无需多写JavaScript代码
  • 降低管理成本:模块更新由后端程序控制
  • URL优雅降级:页面链接使用真实地址
  • 代码一致性:页面加载不劢态刷新模块代码相同

前端优化,参考微博的方式

异步加载显示模块的方式:BigPipe方式降低模块开发成本、管理成本

var FM=function(a,b,c){function bN(b,c){a.clear&&(bN=a.clear)(b,c)}function bM(b,c,d){a.start&&(bM=a.start)(b,c,d)}function bL(a){return a===null?"":Object.prototype.toString.call(a).slice(8,-1).toLowerCase()}function bK(){bv(function(){bH();for(var a in J){if(I[a]){bB(P,I[a]);delete


<script>FM.view({"ns":"pl.common.webim","domid":"pl_common_webim","css":["style/css/module/list/comb_webim.css?version=f25a07f3fbb17183"],"js":["webim_prime/js/common/all.js?version=8fde40d2c1ecd58b"]})</script>
<script>FM.view({"ns":"pl.top.index","domid":"plc_top","css":[],"js":["home/js/pl/top/index.js?version=8fde40d2c1ecd58b"],"html":""})</script>

<script>
pl.trigger('pagelet1',{
  css: ['pl1.css'],
  js: ['pl1.js'],
  data: {},
  html:'<span>Here is pagelet1</span>'
});
</script>
  • 同一个pagelet可能触发多次

模块的css可以采用各种预处理编写,在提供bigpipe打包功能,合并到一起或者单独引入(可以再考虑)。

  • 目前是模板引擎里嵌入js和css
  • 显示的方式,应该可以完成更多优化功能,对模板化更好
  • 优化开发方式

4种模式

  • sync 默认就是此模式,直接输出。
  • quicking 此类 widget 在输出时,只会输出个壳子,内容由用户自行决定通过 js,另起请求完成填充,包括静态资源加载。
  • async 此类 widget 在输出时,也只会输出个壳子,但是内容在 body 输出完后,chunk 输出 js 自动填充。widget 将忽略顺序,谁先准备好,谁先输出。
  • pipeline 与 async 基本相同,只是它会严格按顺序输出。

BigPipe的三种模式:

  • 一次渲染模式:即普通模式,支持搜索引擎,用来支持那些不支持JS的客户端。
  • 管线模式:即并行模式,并行请求,并即时渲染。(已实现)
  • 并行模式:并行请求,但在获得所有请求的结果后再渲染。

参考

http://velocity.oreilly.com.cn/2011/ppts/WK_velocity.pdf

review

  • 测试独立

  • render统一(?)

  • 初始化参数

  • fetch()就够用了,不必before(精简生命周期,fetch后增加parse)

  • layout:先返回布局(压测)(ok)

  • out模式:同步

  • 日志

  • 开关

  • 性能

  • 共享内存

  • 约定,所有的数据,只能绑定到data上,改成parse

  • pagelet(传model)

  • 继承自event,外接日志(基本实现)

  • 静态布局和动态布局说明

  • bigview指定模板demo

  • pagelet指定外部模板demo

  • ng proxy给个头compress,expire-buffer

  • 分享

  • 封装前端bigpipe库

TODO

  • 增加事件
  • 支持bigview向浏览器写入方法
  • 支持error模块指定
  • 支持条件

感谢

  • 冯地木
  • 张凯
  • 张代应
  • 陈愉镔

Timeout

主流程bigview上5秒超时,biglet里fetch、parse等操作默认1秒超时,如果不满足,请设置timeout(单位是毫秒)

模块是否渲染

当获取数据后,某些模块不必要展示的时候,打破biglet的渲染promise链即可

biglet

  • before (reject)
  • fetch (reject)
  • parse (reject)
  • render

移除了show属性,没有意义