bnorth: why me

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

bnorth 诞生记

工作量年头长了就会有大量重复工作很是不爽，好在聪明的程序员前辈们，编写了很多优秀的框架。

• 04年刚刚接触 html 一切从基础开始，使用 dom api ，html中设置大量id，class 属性，然后用 document.querySelector 去获取再设置，觉得很神奇。
• 后来 jquery 来了，可以通过父子关系等等，少写几个id 了，不用修改点逻辑还要大量修改html 文件了。
• 再后来又用了 backbone，有了mvc 的概念，模板省了好多 html 的 id，心情好多了，可是写一个页面要来回写好多的 模板，view，modal。
• 还没等用明白呢 angularjs 来了，才开始有了组件的概念，原来h5 也可以这么优雅的复用和组件化，可是怎么那么多的嵌入在html 上的伪属性啊，ng-if，ng-for，事件也要ng-click=”xxx”，学习成本有点高，学不会。
• vuejs 流行好久了，一直忙着研究php 不能落后了，果然不错，这里面有大量的组件和成熟的中文社区，开发一个项目周期短，体验好。

  • 只是还是与 angularjs 类似大量的伪属性。

     <span>{{service.price | currency}}</span> 
    

  • 还有写在属性字符串里的js 语句很不适应

    <a class="grid-icon" v-bind:class="{ 'active': layout == 'grid'}" v-on:click="layout = 'grid'"></a>
    

• 一个偶然的机会接触了一直觉得高深莫测敬而远之的 reactjs，虽然它的 jsx 混合写法颠覆了我根深蒂固的 html，js，css 三大文件的结构。但是性感的花括号，还是让html 与 js 泾渭分明的，反而带来的极大的方便。
• 使用 reactjs 自然要从 create-react-app 脚手架，react-router 路由和 redux 最佳实践入手。囊括了应用的创建，应用的组成和应用对数据的处理。
• 先说路由，地址驱动的路由一下端正了我h5 spa 应用的核心价值观，一路向前。只是随着项目的累积，觉得缺少页面的管理。地址驱动是王道，但是应用的组织应该是页面而不是组件（页面也是组件，符合一切皆组件概念），更适应hibird 开发和未来转换为小程序额。有了页面可以做到页面和页面之间的跳转，而不是地址的跳转。可以做到页面的生命周期和事件，而不仅仅组件。
• 同样 redux 的单向数据流也坚实的端正了我应用数据处理的思路。初始数据存在数据工厂，应用事件和用户事件触发 action， action 又驱动数据单向流动到组件，组件无厘头更新，reactjs 去负责性能优化（脏数据检查，即虚拟dom，仅修改过的数据才会真正的dom 更新）。但是每个功能都要建立，state，reduxer，和action。重复工作有点多，冗余代码量大，之前 bnorth 一直做对 redux 的封装，后来在react 16开始直接使用 React Context 重新开发了全新的数据流
• 对于脚手架，参考了 roadhog 的设计，增加了很多工程的配置参数和实现了代理等功能
• 除了最佳实践还有很多优秀的库，比如 dvajs 和 umijs，umijs 还实现了自动路由非常好用。但是仅仅定位为mvvc 开发框架或者最佳实践模板，不能做到一站式开发，比如没有显示配套的组件和功能插件，以及页面管理，数据管理等能力
• 进过3个大版本和无数小版本的迭代，超过7个项目的实践打磨，bnorth 初步成型

bnorth 的特性

1. 一站式工具集

   bnorth 不仅是 react 最佳实践，不仅是 mvc 框架，不仅是 react 组件库，而是一个大前端的综合一站式解决方案。包括了 web 应用搭建，hybird 打包，以及通过扩展实现的相关功能，比如 im，语音识别等等。可以根据需要选择工具集中的组件完成应用的快速开发。

2. 体系化

   bnorth 采用体系化的设计，各个组件紧密结合，使性能达到最大化，复用达到最大化。比如为了提供 css 的易用性，bnorth 开发了 rich.css 样式库，而 components 组件库则完全在 rich.css 之上进行开发。业务页面也采用 rich.css 开发，达到体系内紧密结合。同时也对 npm 上的其他库保持开放。

3. 插件机制

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

4. 深度可定制

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

5. rich.css

   rich.css 用创新的方式，实现了动态的，可定制的，全覆盖的 css 样式库。无需 css 文件，实现 class 属性编程。

数字与案例

通过几个实际的案例，来只管感受下 bnorht 带来的提升：

1. 代码量缩减 70%

   在对一个使用 backbone 架构的老工程进行 bnorth 改版后发现，代码量从 26755 行缩减到 7667 行。这得益于 react 缩减了大量无用的 selector 代码和性能优化代码，es6 使代码十分紧凑，加上 bnorth 封装了大量代码，缩减了 70% 代码也不足为奇

2. 开发速度提高 40%

   有了代码量的缩减，加上 react 带来开发上行云流水的体验，（不用往来于 html 和 js，id 和 selector，request 与 innerHtml）。因为 统计时 bnorth 还不完善，开发过程还在同时更新 bnorth，因此当 bnorth 成熟后，时间应该能再提高一些

3. 商城开发 1人月

   包含了线上与线下的手机和 pc 端的 web app 积分商城，因为是对老版商城的改版，逻辑和接口清晰，改变在 1个人月内完成

4. 办公类的 hybird app 开发周期 0.5 人月

   某省的察访核验系统前端，以地图驱动，包含语音，文字，图片等丰富的察访内容。以及 即时通讯和周边相关功能组成的 app