tailor 是一款很方便的layout 服务,类似facebook 的bigpipe,我们可以使用此工具
方便的集成各类web 框架,实现micro-fronteds 开发

参考demo

https://github.com/rongfengliang/tail-react-vue

说明

代码很简单,是从github 上集成合并的
https://github.com/tsnolan23/tailor-react-spa && https://github.com/shershen08/tailor-vue-demo
目的很简单,就是一个简单的集成测试

运行说明

  • 初始化依赖
    因为使用了lerna
 yarn && yarn install-fragment-dependencies
 
  • 启动依赖服务
yarn start-fragments
 
  • 启动tailor 服务
yarn start
 

修改说明

主要是templates 的index.html

 
<!doctype html>
<html>
<head>
  <title>Tailor Example Application</title>
  <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0">
  <style>
    body {
      background: #ECEFF4;
    }
  </style>
  <script>
    (function(d) {
      require(d);
      var arr = [ 'react', 'react-dom', 'prop-types', 'classnames', 'proppy', 'proppy-react'];
      while (i = arr.pop())(function(dep) {
        define(dep, d, function(b) {
          return b[dep];
        })
      })(i);
    }(['http://localhost:6006/public/bundle.js']));
  </script>
</head>
<body>
  <div id="header"></div>
  <div id="dashboard"></div>
  <div id="contacts"></div>
  <div id="chat"></div>
+ <fragment src="http://localhost:8090"></fragment>
  <fragment src="http://localhost:8081"></fragment>
  <fragment src="http://localhost:5000"></fragment>
  <fragment src="http://localhost:3000"></fragment>
</body>
</html>
 

测试效果

  • UI 效果
  • 资源加载

说明

tailor 的fragment 开发模型,可以加速我们micro-frontends 的开发,功能还是很强大的,v4 版本也即将发布了,新的功能还是很期待的

参考资料

https://github.com/zalando/tailor
https://github.com/tsnolan23/tailor-react-spa
https://github.com/shershen08/tailor-vue-demo
https://github.com/rongfengliang/tail-react-vue

使用tailor 轻松方便的集成web 框架react&&vue的更多相关文章

  1. 珠联壁合地设天造|M1 Mac os(Apple Silicon)基于vscode(arm64)配置搭建Java开发环境(集成web框架Springboot)

    原文转载自「刘悦的技术博客」https://v3u.cn/a_id_194 也许有人从未听说过Python,但是不会有人没听说过Java,它作为一个拥有悠久历史的老牌编程语言,常年雄踞TIOBE编程语 ...

  2. Spring 4 官方文档学习(十三)集成其他web框架

    重点是通用配置,非常建议看一下!有助于理解Spring的ApplicationContext与Servlet Container的关系! 1.介绍 Spring Web Flow SWF目标是成为we ...

  3. Spring与其他Web框架集成

    Spring与多种流行Web应用框架(Struts.JSF和DWR)集成的方法. Spring强大的IoC容器和企业支持特性使其十分适于实现Java EE应用的服务和持续层. 对于表现层,可以在许多不 ...

  4. Spring MVC Web框架

      1. Spring MVC简介 Spring MVC是java EE平台请求驱动类型的轻量级Web框架,使用了MVC设计模式的思想,spring框架的主要优势之一就是分层架构,分层架构允许选择使用 ...

  5. Node.js Web框架收集

    原文地址:http://geek.csdn.net/news/detail/4020 框架列表: http://nodeframework.com/ 与其他很多语言一样,Node.js也有很多Web框 ...

  6. node.js之十大Web框架

    之前接触过Node.js是因为好奇大前端越来越能干了,连我后台的饭碗都要抢了,太嚣张了,于是我想打压打压它,然后就这样接触它了.再到后来是因为Settings-Sync插件二次开发,我需要用node. ...

  7. 教程:在 Visual Studio 中开始使用 Flask Web 框架

    教程:在 Visual Studio 中开始使用 Flask Web 框架 Flask 是一种轻量级 Web 应用程序 Python 框架,为 URL 路由和页面呈现提供基础知识. Flask 被称为 ...

  8. 教程:Visual Studio 中的 Django Web 框架入门

    教程:Visual Studio 中的 Django Web 框架入门 Django 是高级 Python 框架,用于快速.安全及可扩展的 Web 开发. 本教程将在 Visual Studio 提供 ...

  9. Spring Boot + Spring Cloud 实现权限管理系统 后端篇(十一):集成 Shiro 框架

    Apache Shiro 优势特点 它是一个功能强大.灵活的,优秀开源的安全框架. 它可以处理身份验证.授权.企业会话管理和加密. 它易于使用和理解,相比Spring Security入门门槛低. 主 ...

随机推荐

  1. [Leetcode 44]通配符匹配Wildcard Matching

    [题目] 匹配通配符*,?,DP动态规划,重点是*的两种情况 想象成两个S.P长度的字符串,P匹配S. S中不会出现通配符. [条件] (1)P=null,S=null,TRUE (2)P=null, ...

  2. 4.5 C++重载、覆盖和遮蔽

    参考:http://www.weixueyuan.net/view/6375.html 总结: 函数签名包括函数名和函数参数的个数.顺序以及参数数据类型. 需要注意的是函数签名并不包含函数返回值部分, ...

  3. ResNet 简介

    resnet 又叫深度残差网络 图像识别准确率很高,主要作者是国人哦 深度网络的退化问题 深度网络难以训练,梯度消失,梯度爆炸,老生常谈,不多说 resnet 解决了这个问题,并且将网络深度扩展到了最 ...

  4. 12.Python爬虫利器三之Xpath语法与lxml库的用法

    LXML解析库使用的是Xpath语法: XPath 是一门语言 XPath可以在XML文档中查找信息 XPath支持HTML XPath通过元素和属性进行导航 XPath可以用来提取信息 XPath比 ...

  5. <Spark><Programming><Loading and Saving Your Data>

    Motivation Spark是基于Hadoop可用的生态系统构建的,因此Spark可以通过Hadoop MapReduce的InputFormat和OutputFormat接口存取数据. Spar ...

  6. MySQL:用户管理

    用户管理部分 一.数据库不安全因素 非授权用户对数据库的恶意存取和破坏: 数据库中重要或敏感的数据被泄露: 安全环境的脆弱性: 二.数据库安全的常用方法 用户标识和鉴别[使用口令鉴别]::该方法由系统 ...

  7. 虚拟机提示:无法打开内核设备“\\.\Global\vmx86”: 系统找不到指定的文件

    虚拟机提示:无法打开内核设备“\\.\Global\vmx86”: 系统找不到指定的文件 Win 10 vmware12 无法打开内核设备“\\.\Global\vmx86”: 系统找不到指定的文件. ...

  8. JavaWeb:脚本标识

    脚本标识 一.JSP表达式 1.介绍 用于向页面中输出信息 2.语法格式 <%= 表达式%> 3.注意 在"<%"和"="之间不允许有空格,但 ...

  9. PHP中session_start 函数详解使用方法

    一.官方 session_status() 返回值为: PHP_SESSION_DISABLED 会话是被禁用的. PHP_SESSION_NONE 会话是启用的,但不存在当前会话. PHP_SESS ...

  10. Map.putAll()用法

    import Java.util.HashMap; public class Map_putAllTest {public static void main(String[] args){   //两 ...