Fate - the Deep Responsive Internet Application framework

saber

GitHub Docs

基于 AMD 的细粒度、模块化的前端应用框架。
提供了 20+ 个功能专注的模块，覆盖语言增强、DOM 操作、
流程控制、动画、环境侦测、SPA、MPA 等方面。

模块化

小而专注

每个 AMD 包的功能专一、目标明确，只为现代浏览器设计。API 设计直白，配有完整的测试用例与示例代码。在项目中按需引用，将应用的体积控制在理想范围之内。

依赖清晰

基于 AMD 成熟的模块化机制与细粒度的模块划分，框架各部分的依赖清晰，系统整体结构一目了然，能够更精细的进行模块变更、依赖、按需加载和引用的管理。

社区友好

遵从 AMD 规范，融入社区。需要扩充框架的功能时，有众多优秀的开源模块可以被无障碍的选用；需要拓展其他架构的 AMD 项目时，也可以轻松的引入 saber 中的模块。

单页面应用

接口化

前后端完全基于 HTTP(s) 接口进行开发、通信，促进了开发过程中前后端的分离，在提升用户体验的同时也有效地降低了网络传输量。

交互流畅

借助 saber 的基础组件，能够在移动 Web 页面上打造出如同原生 APP 应用般迅速的点击响应与流畅的页面间转场效果。

关注点分离

采用 MVP 构建单页面应用，充分抽象、隔离应用的业务逻辑，严格规定各抽象的职责范围，降低了耦合度，有效地控制了代码的复杂程度。

工程化

脚手架

saber 提供的工程化支持工具 edpx-mobile 固化了 Fate 的最佳实践，通过简单的命令一键完成项目的初始化、业务模块的增加、测试服务的启动与项目的构建等工作。

自测环境

工程化工具内置了开发自测专用的 webserver ，除了提供样式列表的实时编译、模版文件的处理、网络请求的代理等一系列的自动化支持外，还提供 weinre 与 liveroload 功能，最大限度的方便手机端调试。

打包构建

工程化工具提供了简单、强大的一键构建功能，自动完成样式列表的编译，JavaScript模块的编译、合并与压缩，模版文件处理等构建工作，生成最优的上线代码。同时也提供了详细的配置文件，方便用户掌控构建过程。

rebas

GitHub Docs

基于 Node 的 JavaScript 同构解决方案。
提供了 saber 的服务端运行环境，使其具备从 SPA 到 MPA，
从前端渲染到后端渲染的深度响应式能力。

同构

浏览器不再是唯一的用武之地了，从现在开始，欢迎进入崭新的全栈时代！借助于 MVP 良好的逻辑分层与众多 saber 模块的同构化努力，您的应用能无缝地同时运行在 Node 平台与客户端浏览器中，为您带来前所未有的编程体验。平台无关的代码既能运行在服务器端提供良好地 SEO 优化与首屏渲染速度，也能同时运行在浏览器中提供流畅的，无刷新、全异步交互体验。写一份代码，两处运行，不止双倍的爽快～

深度响应式

得利于框架的平台扩展，我们进一步扩张了响应式的意义，不仅考虑终端的屏幕尺寸，更关乎应用的整体体验，更充分地为用户的体验服务，根据具体的前端运行环境（浏览器版本）选择最合适的运行模式，让您的应用即能为中高端浏览器提供最佳的单页面应用体验，也能充分照顾到低端浏览器为其提供更为有效的多页面应用体验。这一切都无关业务逻辑，rebas 会默默地在幕后帮您漂亮地解决掉～

rider

GitHub Docs

基于 Stylus 与后处理器、无侵入风格的 CSS 样式工具库。
提供了样式初始化、顺时针简写、缓动函数、图片、排版、单位转换、
形状、动画、响应式工具等功能，让样式开发更轻松、便捷。

高效工作流

DSL(Stylus)

.navbar
    fixed: _ 0 0
    display: flex
    box-sizing: border-box

标准 CSS

.navbar {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    display: flex;
    box-sizing: border-box;
}

生产环境 CSS

.navbar {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

rider 通过前后处理器混合的方式，提供了更高效的工作流。

通过「预处理器」处理样式层的抽象、复用，减少冗余；通过「后处理器」处理兼容性问题、优化输出。

在写 Stylus 时，只需面向「标准 CSS」开发；在后处理阶段，将自动生成为目标浏览器优化的「生产环境 CSS」。

无侵入风格

Bootstrap 风格

被样式类污染的 HTML 结构

<div class="col-xs-6 col-md-4">
    <p class="text-danger">...</p>
    <button class="btn btn-danger btn-xs" type="button">...</button>
</div>

无论是否用到，都输出所有样式

.col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xs-2, .col-sm-2,
.col-md-2, .col-lg-2, .col-xs-3, .col-sm-3, .col-md-3, .col-lg-3,
.col-xs-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xs-5, .col-sm-5,
.col-md-5, .col-lg-5, .col-xs-6, .col-sm-6, .col-md-6, .col-lg-6,
.col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, .col-xs-8, .col-sm-8,
.col-md-8, .col-lg-8, .col-xs-9, .col-sm-9, .col-md-9, .col-lg-9,
.col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, .col-xs-11,
.col-sm-11, .col-md-11, .col-lg-11, .col-xs-12, .col-sm-12,
.col-md-12, .col-lg-12 {
    /* 通用样式 */
}
.col-xs-1, .col-xs-2, .col-xs-3, .col-xs-4,
.col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8,
.col-xs-9, .col-xs-10, .col-xs-11, .col-xs-12 {
    /* 另一组通用样式 */
}
.text-danger {
    /* ... */
}
/* 更多没有被用到的样式 */

无侵入风格

一目了然，语义化的 HTML 结构

<div class="order">
    <p class="total-prices">...</p>
    <button class="pay" type="button">...</button>
</div>

无调用，不输出

.order {
    /* 通过 Mixin, Function 生成样式 */
}
.order .total-prices {
    /* ... */
}
.order .pay {
    /* ... */
}

在预处理阶段，rider 的各种功能均通过 mixin、function 或 block 的方式提供，只有在主动调用时才输出代码。

我们不提供直接给 HTML 调用的类名，不会用「样式类」污染 HTML 代码的语义。

所以，您能在享受 rider 各种便捷工具的同时，写出干净且符合语义的 HTML 代码。