美文网首页前端译趣
FrintJS应用思考

FrintJS应用思考

作者: linc2046 | 来源:发表于2018-05-24 10:16 被阅读50次
FrintJS应用思考

引言

当你使用FrintJS实现功能时,首先会创建一个应用。

习惯上你创建的第一个应用称作根应用

由于只能创建一个根应用, FrintJS提供了相关API,可以在根应用中创建和注册多个子应用。

为什么要创建子应用?

所有的应用都会随着时间发展,变得越来越大。

FrintJS中的子应用帮助你將大型应用分解成多个更小的独立应用, 可以按需注册加载甚至渲染。

如果你正在构建大型浏览器应用,想象可以通过每个应用独立的打包文件异步加载,像: app.js, app2.js

分解成更小的子应用,意味着子应用可以独立负责自己的逻辑,长期来说更容易维护。

一旦根应用中的provider分类明确,你甚至可以轻易地將子应用分发给不同团队实现。

示例应用

譬如一个大型项目管理应用,会有这些功能:

  • 用户管理

  • 待办事项

  • 事件管理日历

子应用拆解

如果使用FrintJS构建这类大型应用,你可以分解成下面的子应用:

  • 根应用 应用的基础

  • 用户 用来处理用户的子应用

  • 待办事项 用来处理待办的子应用

  • 事件 和日历、事件有关的子应用

每个子应用都会有自己独立的providers集合,应用本身需要的依赖。
其他子应用除非真的需要,一般无需引用。

frint-cli 本身使用FrintJS创建,frint基础命令是根应用,子命令 frint helpfrint new 都是独立的子应用。

创建和注册子应用

首先创建根应用:

import {createApp} from 'frint';
const RootApp = createApp({
  name: 'MyRootApp',
  providers: [
    {
      name: 'foo',
      useValue: 'foo value here',
    },
  ],
});
const app = new RootApp();

我们已经完成根应用创建和实例化,可以开始创建子应用:

const TodosApp = createApp({
  name: 'Todos',
});

然后注册子应用:

app.registerApp(TodosApp);

现在完成Todos子应用的注册。
可以这样获取Todos应用的实例:

const todosApp = app.getAppInstance('Todos');

自上而下传递provider

你的根应用中可能有许多很重要的provider, 你想要在子应用中直接访问这些provider。

FrintJS允许在根应用中层叠定义Provider。

上例中,根应用只有一个名为foo的provider。
为了让子应用Todos可以直接访问,我们可以稍微更新下根应用定义:

import { createApp } from 'frint';
const RootApp = createApp({
  name: 'MyRootApp',
  providers: [
    {
      name: 'foo',
      useValue: 'foo value here',
      cascade: true,
    },
  ],
});
const app = new RootApp();

启用cascade属性,可以让注册过的子应用都可以访问到foo provider

Todos子应用可以这样访问:

const todosApp = app.getAppInstance('Todos');
todosApp.get('foo'); // 获取foo的值

你可以在官方文档中了解更多。

如何渲染子应用

本文中故意没有涉及渲染话题是因为这里会涉及不同的渲染库ReactVue.js

顺便说一句FrintJS同时支持ReactVue.js

我强烈建议阅读FrintJS官方文档中的组件区域相关概念,

文档中以示例代码解释所有概念。

你可以看看这个处理多子应用的应用实例

我在另外一篇文章中写了使用React.js渲染子应用的话题。

译者注

原文链接

  • 因译者水平有限,如有错误,欢迎指正交流

相关文章

  • FrintJS应用思考

    引言 当你使用FrintJS实现功能时,首先会创建一个应用。 习惯上你创建的第一个应用称作根应用。 由于只能创建一...

  • Frintjs实战: 使用子应用和区域

    引言 本文专注于使用Reactjs渲染FrintJS子应用至指定UI区域。 为了掌握本文,建议先阅读下面两篇文章:...

  • 应用思考

    Smart Grid 是一种没有状态的应用,因为是每个小时就刷新,重新计算。但是可以测试ACK机制的影响,因为窗口...

  • 语音应用思考

    功能类: 一,家。1,控制电器,包括但不限于控制开关,包括控制音量,调节水温,调节亮暗等。2,私人家教,通过软件学...

  • Java高并发-应用拆分

    应用拆分 应用拆分原则 应用拆分思考 Dobbo 和 SpringCloud Dobbo : 分布式服务框架,提供...

  • 2019-09-20你好

    重磅!!!Chameleon支持快应用————快应用官方&&滴滴合作研发出品 背景 选型和思考 快应用介绍快应用简...

  • JS沙箱机制

    一.思考 微前端应用加载 刚开始我加载A应用 window.a B应用 window.a 怎样可以俩个应用里的...

  • 快速上手微前端框架 icestark (二)

    思考 微前端中都需要哪些通信 主应用与子应用通信 子应用之间的通信 主应用与子应用通信 主应用传参到子应用 sto...

  • 每周书评-05—《触动人心——设计优秀的iPhone应用》-Jo

    文|莫唁 本书通篇都以iPhone的角度来思考应用,帮助你理解如何设计一款触动人心的iPhone应用,综合思考设计...

  • 新应用思考-yami

    今天在36kr上看到了一个推荐应用-yami,官方介绍不妨先看看: 简单而言,Yami是一个顶级厨师提供私人定制服...

网友评论

本文标题:FrintJS应用思考

本文链接:https://www.haomeiwen.com/subject/ifhdjftx.html