singlespa是谁开发的

2024-08-01

微前端框架 single-spa 技术分析

在理解微前端技术原理中我们介绍了微前端的概念和核心技术原理.本篇我们结合目前业内主流的微前端实现 single-spa 来说明在生产实践中是如何实现微前端的. single-spa 的文档略显凌乱,概念也比较多,初次接触它的同学容易抓不住重点.今天我们尝试整理出一条清晰的脉络,让感兴趣的同学能够快速理解它. 在 single-spa 的架构设计中,有两种主要角色,主应用和子应用,如下图. 主应用力求足够简单,只负责子应用的调度,业务逻辑都由子应用来承担. 核心能力其实总结来说,single-s

前端微服务初试（singleSpa）

1.基本概念实现一套微前端架构,可以把其分成四部分(参考:https://alili.tech/archive/11052bf4/) 加载器:也就是微前端架构的核心,主要用来调度子应用,决定何时展示哪个子应用, 可以把它理解成电源. 包装器:有了加载器,可以把现有的应用包装,使得加载器可以使用它们,它相当于电源适配器. 主应用:一般是包含所有子应用公共部分的项目—— 它相当于电器底座子应用:众多展示在主应用内容区的应用—— 它相当于你要使用的电器所以是这么个概念:电源(加载器)→电源适配器

微前端框架 single-spa

单体应用对比前端微服务化普通的前端单体应用微前端架构 1.基本概念实现一套微前端架构,可以把其分成四部分(参考:https://alili.tech/archive/11052bf4/) 加载器:也就是微前端架构的核心,主要用来调度子应用,决定何时展示哪个子应用, 可以把它理解成电源. 包装器:有了加载器,可以把现有的应用包装,使得加载器可以使用它们,它相当于电源适配器. 主应用:一般是包含所有子应用公共部分的项目—— 它相当于电器底座子应用:众多展示在主应用内容区的应用—— 它相当于你

微前端大赏二-singlespa实践

微前端大赏二-singlespa实践微前端大赏二-singlespa实践序介绍singleSpa singleSpa核心逻辑搭建环境 vue main react child 生命周期结论参考文章序介绍singleSpa singleSpa是一个javascript库它可以让很多小页面.小的组件.不通架构的前端组件在一个页面应用程序中共存. 这里有一个演示: (https://single-spa.surge.sh/) 这个库可以让你的应用可以使用多个不同的技术栈(vue.rea

微前端框架single-spa初探

前言最近入职的一家公司采用single-spa这个微前端框架,所以自学了此框架. single-spa这个微前端框架虽然有中文文档,但是有些零散和晦涩. 所以我想在学习之余,写篇博客拉平一下这个学习曲线. 什么是微前端? 微前端的灵感来源于服务端微服务的理念. 可以简单理解为,在开发一个复杂前端应用时,将其划分为一系列更小更简单的前端应用. 这些前端应用可以单独开发.测试.部署,松耦合,可维护性强,还可以让前端代码实现增量升级和使用不同的框架. 它的懒加载还能让整个复杂应用加载速度变快. 常用

初步认识微前端（single-spa 和 qiankun）

初步认识微前端微前端是什么现在的前端应用,功能.交互日益复杂,若只由一个团队负责,随着时间的推进,会越来越庞大,愈发难以维护. 微前端这个名词,第一次提出是在2016年底.它将微服务(将单一应用程序划分成一组小的服务,服务之间相同配合,为用户提供最终价值)这个应用于服务端的技术扩展到前端领域. 微前端背后的想法是:将网站或 web 应用程序视为由独立团队负责的子应用(或模块.功能)的组合. 微前端核心是:拆.和. 拆,即将一个应用拆成多个子应用.每个子应用由单独的团队负责,独立开发.发布和

避免重复造轮子的UI自动化测试框架开发

一懒起来就好久没更新文章了,其实懒也还是因为忙,今年上半年的加班赶上了去年一年的加班,加班不息啊,好了吐槽完就写写一直打算继续的自动化开发目前各种UI测试框架层出不穷,但是万变不离其宗,驱动PC浏览器的基本上底层都是selenium,驱动无线app和浏览器基本是appium.monkey之类的,底层都是基于官方支持的自动化测试框架开发而来,然后上层又做了各种封装首先在开始计划开发自动化时,第一步是了解目前已有的自动化开发技术,上面说了,最底层的就那几种,根据实际要去测试的业务需求选择合适的自

App开发：模拟服务器数据接口 - MockApi

为了方便app开发过程中,不受服务器接口的限制,便于客户端功能的快速测试,可以在客户端实现一个模拟服务器数据接口的MockApi模块.本篇文章就尝试为使用gradle的android项目设计实现MockApi. 需求概述在app开发过程中,在和服务器人员协作时,一般会第一时间确定数据接口的请求参数和返回数据格式,然后服务器人员会尽快提供给客户端可调试的假数据接口.不过有时候就算是假数据接口也来不及提供,或者是接口数据格式来回变动--很可能是客户端展示的原因,这个是产品设计决定的,总之带来的问题

使用HTML5开发Kinect体感游戏

一.简介我们要做的是怎样一款游戏? 在前不久成都TGC2016展会上,我们开发了一款<火影忍者手游>的体感游戏,主要模拟手游章节<九尾袭来 >,用户化身四代,与九尾进行对决,吸引了大量玩家参与. 表面上看,这款游戏与其它体感体验无异,实际上,它一直运行于浏览器Chrome下,也就是说,我们只需要掌握前端相应技术,就可以开发基于Kinect的网页体感游戏. 二.实现原理实现思路是什么? 使用H5开发基于Kinect的体感游戏,其实工作原理很简单,由Kinect采集到玩家及环境

Android SwipeRefreshLayout 下拉刷新——Hi_博客 Android App 开发笔记

以前写下拉刷新感觉好费劲,要判断ListView是否滚到顶部,还要加载头布局,还要控制头布局的状态,等等一大堆.感觉麻烦死了.今天学习了SwipeRefreshLayout 的用法,来分享一下,有说的不对的地方请大家指点. SwipeRefreshLayout 是Google在support v4 19.1版本的library更新的一个下拉刷新组件,也就是说开发的时候把Android版本调到4.4或者以上才会有这个. 先来看看效果图再来看看布局文件里的代码(我这里放的是一个ListVie

Android Studio配置 AndroidAnnotations——Hi_博客 Android App 开发笔记

以前用Eclicps 用习惯了现在想学学用Android Studio 两天的钻研终于在我电脑上装了一个Android Studio 并完成了AndroidAnnotations 的配置. AndroidAnnotations是一个能够让你快速进行Android开发的开源框架,它能让你专注于真正重要的地方.使代码更加精简,使项目更加容易维护,它的目标就是“Fast Android Development.Easy maintainance”. 说白了就是可以少写很多代码,哈哈. Andr

Android请求网络共通类——Hi_博客 Android App 开发笔记

今天 ,来分享一下 ,一个博客App的开发过程,以前也没开发过这种类型App 的经验,求大神们轻点喷. 首先我们要创建一个Andriod 项目因为要从网络请求数据所以我们先来一个请求网络的共通类. 思路: 1.把请求网络的方法放到一个类里面 2.创建一个接口将数据发给Activity 3.Activity 实现接口获得服务器返回的数据 4.解析数据来我们一先来看第一步请求网络在这里请求网络我们用Volley .Volley是Android平台上的网络通信库,能使网络通信更快,更简单,更健

Angular2入门系列教程1-使用Angular-cli搭建Angular2开发环境

一直在学Angular2,百忙之中抽点时间来写个简单的教程. 2016年是前端飞速发展的一年,前端越来越形成了(web component)组件化的编程模式:以前Jquery通吃一切的田园时代一去不复返,如果你想了解前端最近究竟有什么变化,不妨去看看这篇文章:在2016年学习javascript是一种什么样的体验? 在学习之前,你可能需要先粗略了解几个东西! 1.nodejs 2.npm 包管理以下的东西就当你是知道了这些概念了 1.首先,到nodejs 官网下载nodejs并安装 2.添加淘

构建一个基本的前端自动化开发环境 —— 基于 Gulp 的前端集成解决方案（四）

通过前面几节的准备工作,对于 npm / node / gulp 应该已经有了基本的认识,本节主要介绍如何构建一个基本的前端自动化开发环境. 下面将逐步构建一个可以自动编译 sass 文件.压缩 javascript 文件.多终端多浏览器同步测试的开发环境,并且还可以通过 piblish 命令对项目下的文件进行打包操作. 相关连接导航在windows下安装gulp —— 基于 Gulp 的前端集成解决方案(一) 执行 $Gulp 时发生了什么 —— 基于 Gulp 的前端集成解决方案(二) 常

读书笔记：《HTML5开发手册》--HTML5新的结构元素

读书笔记:<HTML5开发手册> (HTML5 Developer's CookBook) 虽然从事前端开发已有很长一段时间,对HTML5标签也有使用,但在语义化上面理解还不够清晰.之前在图书馆看到HTML5这类书基本就是略过,想想无非就是介绍一些标签,给一些初学者看,但看了本书之后深受启发,拿来分享,也希望大家多提意见. 一.HTML5中新的结构元素 1. HTML5初始文件 1.1.doctype 在之前,doctype的声明是这样的: <!DOCTYPE HTML PUBLIC &

总结：Mac前端开发环境的搭建（配置）

新年新气象,在2016年的第一天,我入手了人生中第一台自己的电脑(大一时好友赠送的电脑在一次无意中烧坏了主板,此后便不断借用别人的或者网站的).macbook air,身上已无分文...接下来半年的房租都不知道该怎么半了,都怪消费太冲动. 不过,眼下需要解决的不是房租问题,而是在新电脑上搭建开发环境,正好在搭建的时候总结一下: 1.FQ工具:lantern 地址:https://github.com/getlantern/lantern 2.命令行工具:term2 官网:http://www.i

【小程序分享篇一】开发了个JAVA小程序，用于清除内存卡或者U盘里的垃圾文件非常有用

有一种场景, 手机内存卡空间被用光了,但又不知道哪个文件占用了太大,一个个文件夹去找又太麻烦,所以我开发了个小程序把手机所有文件(包括路径下所有层次子文件夹下的文件)进行一个排序,这样你就可以找出哪个文件占用了内存太大了. 使用例子如下,用JAVA 运行Sort 1, 输入你要排序的文件路径 , 如例子是对H:\下的文件和它所有子文件夹下的文件进行排序 2, 输入需要进行排序显示的最新大小,如例子是对10M 大小以上的文件进行排序 3,从大到小排序后按文件路径\文件名-------大小

Npm包的开发

个人开发包的目录结构 ├── coverage //istanbul测试覆盖率生成的文件 ├── index.js //入口文件 ├── introduce.md //说明文件 ├── lib │ └── node-cnblogs-spider.js //主要文件 ├── node_modules //第三方包 ├── package.json ├── README.md └── test //单元测试文件 └── node-cnblogs-spider.test.js 开发步骤注册 np

python开发编译器

引言最近刚刚用python写完了一个解析protobuf文件的简单编译器,深感ply实现词法分析和语法分析的简洁方便.乘着余热未过,头脑清醒,记下一点总结和心得,方便各位pythoner参考使用. ply使用简介如果你不是从事编译器或者解析器的开发工作,你可能从未听说过ply.ply是基于python的lex和yacc,而它的作者就是大名鼎鼎Python Cookbook, 3rd Edition的作者.可能有些朋友就纳闷了,我一个业务开发怎么需要自己写编译器呢,各位编程大牛说过,中央决定

Angular企业级开发(5)-项目框架搭建

1.AngularJS Seed项目目录结构 AngularJS官方网站提供了一个angular-phonecat项目,另外一个就是Angular-Seed项目.所以大多数团队会基于Angular-Seed项目来开发,本文首先分析angular-seed项目的目录结构.以及AngularJS团队为我们做了什么事情,提供了我们真实开发最需要的框架结构. 这个项目仅仅是一个典型的AngularJS网络应用程序的应用程序骨架. 您可以使用它来快速引导您的Angular webapp项目和搭建开发环境.

singlespa是谁开发的

热门专题