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
 
  • 启动依赖服务
  1. yarn start-fragments
 
  • 启动tailor 服务
  1. yarn start
 

修改说明

主要是templates 的index.html

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

测试效果

  • 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. Android : android 8.0 audio 接口分析

    1.HIDL 的概念 HIDL 读作 hide-l,全称是 Hardware Interface Definition Language.它在 Android Project Treble 中被起草, ...

  2. ui-router ng-router

    开发中常用ui-router来设置路由: ui-router使用很简单,延续了之前ngRoute的特点. 1.首先得注入ui.router模块. 接下来就是简单的配置 2.$stateProvider ...

  3. centos tar 常用

    tar命令详解 -c: 建立压缩档案 -x:解压 -t:查看内容 -r:向压缩归档文件末尾追加文件 -u:更新原压缩包中的文件 这五个是独立的命令,压缩解压都要用到其中一个,可以和别的命令连用但只能用 ...

  4. IDEA中maven的依赖jar包报红

    问题描述: 查看本地的repository中有相关的jar包,但是在IDEA中就是报红(下面红色波浪线) 解决方法: 将pom.xml中相关的dependcy配置注释掉,maven中jar包就会删除. ...

  5. java中String的认识

    String不是Java的基本数据类型.String类是final类,故不可继承. String 和 StringBuffer之间的区别非常大,Java平台提供了两个类,两者都是包含多个字符的的字符数 ...

  6. angular2组件通讯的几种方式

    最近刚刚接触angular2,对ng2也是一知半解,如有说得不对的地方欢迎指出,欢迎加q共同探讨学习991085978: 1.通过输入型绑定把数据从父组件传到子组件 HeroChildComponen ...

  7. Web 开发最有用的50款 jQuery 插件集锦——《内容滑块篇》

    http://www.cnblogs.com/lhb25/archive/2013/04/02/50-jquery-plugins-d.html responsive-carousel 是一个内容传送 ...

  8. 【Python】xml遍历练习

      <?xml version="1.0" encoding="utf-8" ?> <!--this is a test about xml. ...

  9. SQL server 存储过程学习

    一.定义变量--简单赋值 declare @a intset @a=5 print @a --使用select语句赋值 declare @user1 nvarchar(50) select @user ...

  10. 大数据-02-Scala入门

    Scala 简介 它是一门基于JVM的面向函数和面向对象的编程语言, 它包含了求值表达式,闭包,切片操作,模式匹配,隐式转换等特性. 可变量/不可变量 可变集合/不可变集合.集合操作 函数 值函数 求 ...