able99's dollhouse

react love bnorth 《⊙_⊙ home assistant is the third

随笔(2)

React: why me

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

原创    12 Apr 2018


免费Blog 与 gitpages 和 jekyll

小站搭建完毕,非要感谢下gitpage 和 jekyll,算是给想搭建blog 的伙伴小福利

原创    12 Apr 2018

大前端开发套件 bnorth(20)

大前端开发套件 bnorth

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

原创    25 Dec 2018


bnorth 从零开始开发 h5 与 bybird app

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

原创    25 Dec 2018


bnorth: why me

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

原创    25 Dec 2018


bnorth 插件管理

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

原创    25 Dec 2018


bnorth 页面管理

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

原创    25 Dec 2018


bnorth 事件驱动机制

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

原创    25 Dec 2018


bnorth 数据流

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

原创    25 Dec 2018


通用 css 样式库 rich.css

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

原创    25 Dec 2018


脚手架与工程配置

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

原创    25 Dec 2018


不一样的 bnorth,深度可定制

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

原创    25 Dec 2018


bnorth react 组件库

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

原创    25 Dec 2018


bnorth rich.css 参考手册

css class 库

链接    25 Dec 2018


bnorth 插件集

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

链接    25 Dec 2018


bnorth 例子

链接    25 Dec 2018


bnorth core 参考手册

bnorth 解决方案,核心组件库

链接    25 Dec 2018


bnorth components 参考手册

bnorth 解决方案,react 组件库

链接    25 Dec 2018


bnorth 桌面应用开发

TODO

原创    25 Dec 2018


bnorth app 开发

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

原创    25 Dec 2018


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

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

原创    25 Dec 2018


flex 弹性布局

网页布局(layout)是CSS的一个重点应用。布局的传统解决方案,基于盒状模型,依赖 display属性 + position属性 + float属性。它对于那些特殊布局非常不方便,比如,垂直居中就不容易实现。bnorth 中包括 bnorth 组件主要基于 flex 布局实现。

链接    25 Dec 2018