# [Tranel](https://github.com/etoah/tranel)
[![](https://img.shields.io/badge/Powered%20By%20Plugge-brightgreen.svg)](https://www.npmjs.com/package/plugge)

自然优雅的跨进程调用

## 特点

### 1. 无感调用远程函数&读写远程变量：
比如应用tranel-dom, 可以在worker中读写dom
```javascript
importScripts("../../lib/tranel.js");
self.t = new TranelDOM();
t.proxy({ hookGlobal: true, proxyObject: self });
self.fibonacci = function fibonacci(num) {
  if (num <= 1) return 1;
  return fibonacci(num - 1) + fibonacci(num - 2);
}

let $wcomputeButton = document.getElementById('wcompute');
let $wresult = document.getElementById('wresult');
let $input = document.getElementById('input')

$wcomputeButton.addEventListener('click', () => {
  // $wresult.innerText = $input.value
  $input.value.then(v => { // 读变成异步 
    console.time('workerComputeDuration');
    $wresult.innerText = fibonacci(Number(v))
    console.timeEnd('workerComputeDuration');
  })
})
```

### 2. 可以访问不可序列化对象

### 3. 支持一对多，一对一的正向和反向调用

### 4. 可定化的通信机制, 可以用postMessage, socket， http, 共享内存等方法通信。

实现以下api， 可以实现跨tab/进程/线程的调用， 

```javascript
export default interface IBroadcastChannel {
  postMessage(message: any, targetOrigin?: any, ...transfer: string[]): void;
  // tslint:disable-next-line:max-line-length
  addEventListener<K extends keyof BroadcastChannelEventMap>(type: K, listener: (this: IBroadcastChannel, ev: BroadcastChannelEventMap[K]) => any, options?: any): void;
  // tslint:disable-next-line:max-line-length
  addEventListener(type: string, listener: any, options?: any): void;
  // tslint:disable-next-line:max-line-length
  removeEventListener<K extends keyof BroadcastChannelEventMap>(type: K, listener: (this: IBroadcastChannel, ev: BroadcastChannelEventMap[K]) => any, options?: any): void;
  // tslint:disable-next-line:max-line-length
  removeEventListener(type: string, listener: any, options?: any): void;
  /**
   * Closes the BroadcastChannel object, opening it up to garbage collection.
   */
  close(): void;
}
```


### Demo: 
tranel-dom: 
1. [PlayVideo](http://tranel.pages.oa.com/demo/worker-video/)
2. [fibonacci](http://tranel.pages.oa.com/demo/fibonacci/)

### Benchmarks：
tranel-dom: 
- 大列表渲染性能(12018个DOM节点)
  1. [Tranel 渲染](http://tranel.pages.oa.com/benchmarks/big-table/tranel-turbo.html)
  2. [Worker-DOM 渲染](http://tranel.pages.oa.com/benchmarks/big-table/worker-dom.html)

## Usage 

请查看`tranel-dom`，`tranel-socket`库


### 注意
tranel内部拦截了异步操作标识符: `catch`, `finally`,  `then`， 不建议业务中用这些像保留字的字符串作为函数名或属性名。
如果用到可以在前面加'$'进行转义, 即 `$catch`, `$finally`, `$then`。

## 性能

测试环境： i7-6700@3.4GHz


### Proxy生成指令的性能

**778Q/MS**, 即1ms可生成778个指令,详情查看([big-table benchmarks](./benchmarks/big-table)), 示例中35016个指令生成需要45ms
> 这个时间包括参数的序列化， 与参数的复杂度有关， 如果参数是大json, 时间会变长。


## 兼容性

支持所有现在现代浏览器(`Proxy`)，对于不支持`Proxy`的， 可用`proxy-polyfill`可兼容 IE9+, Safari 6+等。


## 开发指南

安装依赖

```bash
$ tnpm install
```


```bash
$ npm run dev
```

To build the project:

```bash
$ npm run build
```

To run unit tests:

```bash
$ npm t
```


## Directory
```
├── demo - Using demo
├── benchmarks 
├── dist - Compiler output code
├── docs - Project documents
├── src - Source code directory
├── test - Unit tests
├── CHANGELOG.md - Change log

```