大前端开发套件 bnorth

日期: 25 Dec 2018   

bnorth 是基于 React 的大前端开发工具集。便捷的开发框架,实现了页面管理,数据管理等能力和可通过插件扩展的机制。并提供了统一的样式库,丰富的 react 组件,以及脚手架和工具集,形成了一站式的多平台的 web 和 hybird 应用开发系统。

从零开始

从环境搭建到工具选择,从开发实例到基本概念,用简单的方式给 bnorth 编程一个快照。仅为初次接触开发准备的教程,大牛请绕行。

点击进入

起步

npx @bnorth/cli create demo
cd demo
npm start

为什么要用 bnorth

bnorth 的理念是,由 bnorth 去跟随大前端的主流思想和优秀项目,再提供统一的 bnorth 风格接口。并在使用过程中,将丰富的功能以插件形式逐渐积累完善。最终的目的是,使用 bnorth,无需在海量的 github 资源中摸索,而是通过统一的 bnorth 风格接口去使用,达到快速开发的目的。

点击进入

组成成分

首先了解下 bnorth 的组成:

Layer 1 cli build browser pc android ios ... core plugin components rich.css eletron cordova

bnorth 是由 4 大块,多个库组成的由 leana 进行管理发布的工具集。并兼容 react 组件,npm 库,以及遵循 bnorth 规则的 bnorth 插件和组件:

核心的基本构造

再来了解下核心库的构造,core 是核心库,也是应用的入口,应用首先需要实例化 App 类,然后通过 start 方法启动应用。start 方法触发一系列的事件,各个模块和插件在收到事件后,完成初始化和相关任务,最终完成应用启动。core 是由 App 类和几个由 App 初始化并挂载在 App 上的模块组成。

Layer 1 App Event Router Render Context Plugin Log Keyborad Page State Utils

深入 bnorth

这一章节通过几个重要概念深入了解 bnorth。事件驱动、页面管理、数据流和插件机制是构成 bnorth 的核心概念。样式库和组件库的概念提供了丰富的 ui 表现力。脚手架、工程配置与深度定制概念则使 bnorth 能够更好的适应多种应用场景。

事件驱动

bnorth 的运行以事件方式驱动,各个模块松散耦合。使流程开发更为灵活,性能更为优化,事件管理更加统一,功能可深度定制,也为插件机制的实现提供了必要的支持。bnorth 的事件采用 es7 async 异步方案。

点击进入

页面管理

前端的框架普遍使用的 web app 组织方式都是用嵌套结构的路由表配置地址与组件的映射关系。可以清晰有效的表现出各个组件和组件之前的层叠关系,但是没有页面的概念。bnorth 提出了页面的概念,即在路由表中配置的不是地址映射,而是页面的列表。地址的每个 path 段被映射成不同的页面,页面有了自己的实例,有了页面级别的属性方法,有了页面的事件,有了页面的生命周期,更接近 app 的页面组织方式。

点击进入

数据流

bnorth 参考了主流的单向数据流思想,使用 redux 方案,并在 react 升级到 16 以后改用 react 自带的 context 方案进行数据管理。并且创造了数据单元概念,代理了数据的操作,有效的解决了 redux 方案的代码冗余等问题。使数据管理更集中有效,减少代码提供开发效率,同时数据单元有自己的生命周期事件和逻辑控制。

点击进入

插件机制

bnorth 参考了主流的框架设计思想,采用微内核与插件扩展机制。提供更好的定制和扩充性,降低了体积。也为 bnorth 逐渐积累功能,形成一站式开发套件的核心思想提供了技术可行性。

点击进入

通用 css 样式库

rich.css 用创新的方式,实现了动态的,可定制的,全覆盖的 css 样式库。无需开发 css 样式,也无需在 css html js 间切换,实现了样表库的名称编程。

点击进入

丰富的 react 组件库

bnorth react 组件库是普通的 react 组件库,可以用在任何 react 工程中。 但是在技术上有自己的特点,bnorth 组件库是 bnorth 工具集的组成部分。 在样式上使用 bnorth rich.css 样式库。 在设计上使用层次化的设计思想,基础组件提供共同的基本属性,面板组件提供统一的布局方法,方便实现主题替换。

点击进入

脚手架与工程配置

简单的命令操作,深度定制的工程配置。bnorth 脚手架实现了从工程创建到工程模板选择,从代码编译到代码优化与混淆,从调试服务器到数据模拟和数据代理,从代码转换到代码静态检查,从 html 生成配置到各项精细配置。

点击进入

不一样的 bnorth,深度可定制

bnorth 的设计思想是,提供最便捷的使用方法和最大的适应行。为了便捷,bnorth 提供丰富的内容,实现 0 配置使用。同时通过 js 的特性和植入在代码中的可定制机制和可配置机制,使得 bnorth 工具集可组合,可选择,可定制。

点击进入

例子

点击进入

参考手册

bnorth github

点击进入

核心库:bnorth core

bnorth 解决方案,核心组件库

点击进入

样式库:bnorth rich.css

css class 库

点击进入

组件库:bnorth components

bnorth 解决方案,react 组件库

点击进入

插件集:bnorth plugins

bnorth 是微内核设计,但实现了插件机制,通过插件扩展功能。这里列举了 bnorth 插件列表。

点击进入

注重开发的体验

接下来谈谈使用上的感受,bnorth 希望不仅仅带来的应用框架,更希望带来的是开发上的舒适感。能带来如书法般的行云流水,酣畅淋漓的感受,或者编程如同创造艺术品一样的喜悦。

React 带来的开发体验

react 用最富创造性的思想来构建前端,虽然虚拟dom 带来的性能提升是选择react 的最重要原因,但是其技术背后的设计哲学更值得我们学习。

点击进入

ES678 带来的舒适感

TODO

Chrome 调试神器

TODO

app 开发

bnorth 作为大前端的工具集,不仅仅是 web 应用开发。更需要考虑在微信支付宝环境下的适配和 api 的调用,已经 bybird App 的开发。

容器上的开发,运行在微信与支付宝的地盘上

bnorth 开发的 web app 是运行在 web 容器上的网页应用,容器提供了标准 html 定义的浏览器 api。同时 web app 也可能运行在微信或者支付宝等其他容器上,微信与支付宝都提供了平台相关的 api 能力。在使用平台能力时,由于一些注入的 api 存在使用时序问题,部分 api 还需要签名认证,异步操作较为麻烦,为此 bnorth 对容器提供的能力,以 browser 插件方式提供了封装,提供了统一方便的调用方式。

点击进入

hybird 移动开发

一般来说,移动 app 开发有三种方式,native 开发,hybird 混合开发和 react native 开发。bnorth 在 web 开发上积累较深,采用 hybird 混合开发方案。开发效率较高,但是页面性能较为普通,适合前期快速开发抢占市场,以及后期为可变部分嵌入开发,比如内置的广告,内置的游戏等等。bnorth 混合开发,实际上对 cordova 的结合,提供了脚手架和插件,屏蔽复杂概念,降低使用复杂度。

点击进入

PC 应用开发

TODO

未来

对于大前端综合工具集的定位,bnorth 的路是永不停歇的,收集并入主流的优秀项目和功能是 bnorth 的核心思想和主要工作。

同时适配新平台,更为重要和艰巨。微信小程序已经不是太新的内容了,但是 bnorth 暂时还没有支持。目前在这个领域 Taro 比较领先,但是还没有达到可商用程度。

bnorth 的页面管理思想更加符合小程序的页面概念,是优势。但是小程序的类 vue 语法特性,使得 bnorth 需要做 ast 转换,难度较大。加上 richcss 是完成的 css3 库,对于小程序的兼容性还需要做大量的测试。短期了 bnorth 的主要工作重点就在于此。