Bobril我 启动

分享于 

10分钟阅读

Web开发

  繁體

bobril徽标

介绍

在本文中,我们将学习关于bobril的基本知识,并创建一个简单的。 然后,我们将看一下如何简单地通过npm设置项目。

背景

Bobril是一个由React和Mithril启发的面向组件的框架。 它结合了两者的优点。 它是基于虚拟DOM的快速。低大小的框架。 主要关注代码生成的速度和简单性。 Bobril的速度比( 请参见 vdom基准测试。) 快 8x。

任何页面的内容和行为都可以通过编写JavaScript对象来定义。

页面内容呈现是基于虚拟dom的比较。 应用程序有一些状态,并且bobril应用程序根据这个状态生成虚拟 DOM。 虚拟DOM是生成的DOM的对象表示。 如果发生了一些状态更改事件,而前一个虚拟DOM与当前生成的虚拟DOM不同,则实际DOM将更改。

Bobril是由 Boris Letocha ( GMC软件技术中的软件架构师和开发者) 编写的。

引用:框架作者 Boris Letocha

除了大小和速度优势,bobril还有一些非常有用的特性,你在别处找不到。 例如所有浏览器下的透明仿真 pointer-events:none 或者 user-select:none。 跨所有支持浏览器的鼠标和触摸事件透明统一,包括 Chrome。IE10.IE11. 我称之为"虚拟 CSS"的另一个特性- 你可以用JS定义样式,它会在运行时透明地构建最佳 CSS。 图像 spriting。图像重新着色。与绘图紧密集成。 bobril在编译时构建增强你的代码,做类似于汇总的最佳绑定。 Bobril消除了一些像组件 root 这样的限制:不需要仅仅是一个元素。 直接包括路由器和拖放功能。 还有更多。

你可以在上找到更多详细信息和示例。

如何启动

让我们从简单的app ( 类型化的JavaScript ) 示例开始- 传统 Hello World。

安装生成系统

使用编译系统,包括 optimalized/,testing,translations,>,,*,*,testing,testing,testing,testing,。

要安装bobril生成,请将以下命令发送到 命令行:

npm i bobril-build -g

我们还建议安装 tslint bobril构建插件插件,该插件为项目生成 tslint.json 文件:

npm i typescript tslint -g
bb plugins -i bb-tslint-plugin

TSLint检查你的TypeScript代码以获得可读性,可维护性和功能错误。

现在我们可以从创建项目开始。 因此创建一些文件夹 比如 sample1 在这个文件夹中创建一个空文件 index.ts 并在它的root 中传递以下命令:

npm init
npm i bobril --save
bb

这些命令将:

  • 初始化项目为npm包。 你可以点击输入所有问题。
  • 安装bobril依赖项
  • 运行bobril生成

现在bobril构建以交互模式运行,这意味着它要监视代码,将应用程序构建到内存文件系统,并在地址 http://localhost:8080 服务器上服务。

构建的应用程序解决了所有依赖项。创建了 index.html。debbuging源映射以及你通常需要在另一个框架中手工完成的。

让我们写一个代码

为此,我们建议使用已经安装的tslint和bobril插件的Visual Studio 代码。 bobril构建针对这个编辑器进行了优化,包含了自己的bobril扩展,带有Fragment和分析工具。

在编辑器中打开 sample1 文件夹并更改 index.ts 如下所示:

import * as b from 'bobril';
b.init(() => {
 return { tag: 'h1', children: 'Hello World!' };
});

来自bobril包的b imortend代表了bobril世界及其所有可用的基本功能。 init 函数使用返回虚拟DOM的函数初始化应用程序。 示例中是用唯一一个节点( IBobrilNode - ) 表示的虚拟 DOM,它包含内容 ' Hello World '。

是的,就是这么简单。 除了 string 之外,children 属性可以分配给另一个 IBobrilNode 或者使用 IBobrilNode的array,所以我们可以构建整个树。

现在看一下浏览器中的 http://localhost:8080 电子邮件地址。 你可以看到用bobril编写的第一个应用程序 !

组件

Bobril是一个关注组件和虚拟DOM组合的框架,我们可以定义easy-to-use组件。 让我们准备一个 button 组件。

添加具有以下内容的新文件 button.ts:

import * as b from 'bobril';exportinterface IButtonData {
 title: string;
 onClick?: () => void;
}interface IButtonCtx extends b.IBobrilCtx {
 data: IButtonData;
}exportconst button = b.createComponent<IButtonData>({
 render(ctx: IButtonCtx, me: b.IBobrilNode) {
 me.tag = 'button';
 me.children = ctx.data.title;
 },
 onClick(ctx: IButtonCtx): boolean {
 if (ctx.data.onClick) {
 ctx.data.onClick();
 }
 returntrue;
 }
});exportdefault button;

b.createComponent 函数接受定义组件在它的生命周期中的行为的对象。 这个生命周期定义函数如 initrenderpostRender 等等 由接口 IBobrilComponent. 定义。每个函数的描述都可以在 its bobril index.ts 文件的注释中找到。 我们的按钮使用 renderonClick 函数,它们接受 ctx ( 上下文) 作为第一个参数。

上下文是特定组件实例的当前状态的存储,对于每个特定的button - 比如的特定节点。

扩展了 IBobrilCtx的上下文接口 IButtonCtx 具有预定义成员 data,该成员由bobril在虚拟DOM树呈现。 它准备与自己的IButtonData 接口定义一起使用。

这里 data 成员被设计为用作组件的输入信息。 它可以定义组件的外观和行为。 示例中的按钮具有从外部定义的titleonClick 回调。

data onClick 回调在 IBobrilComponent 接口再次定义的onClick 生命周期函数中调用。

现在按钮组件已经可以在 index.ts 中使用了,因此我们可以将它的修改为如下所示:

import * as b from 'bobril';import { button } from './button';
b.init(() => {
 return [
 { tag: 'h1', children: 'Hello World!' },
 button({ title: 'Click Me!', onClick: () => alert('Yeah! I was clicked!') })
 ];
});

自动重新编译后,你可以打开这里页面,查看 bobril的工作方式。

别名的经典导入也可以使用:

import * as btn from './button';

让它 to

如果我们需要进行一些操作( 比如。 我们将对bobril函数和bobril调用调用 b.invalidate() 函数,并调用提供给 b.init 函数的函数,作为对某些后端事件的React,更改状态并告诉。 要尝试它,我们可以简单地更改代码:

import * as b from 'bobril';import { button } from './button';
let counter = 0;
b.init(() => {
 setTimeout(() => { counter++; b.invalidate(); }, 1000);
 return [
 { tag: 'h1', children: 'Hello World!' },
 button({ title: 'Click Me!', onClick: () => alert('Yeah! I was clicked!') }),
 { tag: 'p', children: counter.toString() }
 ];
});

它增加了一个新元素,每 1000毫秒增加一个计数器。 如果需要调用某个组件的b.invalidate inside,可以将它的作为参数使用 ctx,因此 b.invalidate(ctx)。 它将仅执行特定组件的呈现。

Bobril包含很多其他非常有用的函数,如 styleDef 来定义样式作为对象,并准备使用 style 函数来使用。 其他有用的函数是 routesroute,用于定义应用程序中页面之间的路由。

便笺

要构建,缩小并将你的应用程序打包到 dist文件夹只需键入以下命令:

bb b

有关bobril和bobril构建的更多信息,请访问github页面:

https://github.com/Bobris/Bobril

https://github.com/Bobris/bobril-build

你可以下载并使用附加的sampleBasic projectTo检查它的外观。 在这种情况下,只需键入 root 文件夹:

bb

历史记录

  • 2017-01-02 ( bobril-build@0.59.2.bobril@5.2.)
  • 2016-11-04 ( bobril-build@0.50.1.bobril@4.49.)
  • 2016-05-26 Changed只使用bobril生成系统( bobril-build@0.36.2.bobril@4.41.)
  • 1 根据生成改为 simpleApp
  • 2015-11-22添加了 vs 代码任务配置
  • 1-添加了指向基准的链接
  • 2015-11-08更新版本 4.8.2的版本
  • 2015-10-28在版本 4.4.0上创建文章

STA  
相关文章