We read every piece of feedback, and take your input very seriously.
To see all available qualifiers, see our documentation.
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
文章在2019年写的,从内部转载公布于此
经过几年的努力,阿里妈妈所有基于magix技术开发的管理系统、运营平台、营销页面等,均被统一成了[magix运行环境]+[各自的业务view],在整个推进过程中,magix-cli功不可没
magix
view
magix-cli
运行环境包括以下几个部分
web components
各业务线为了完成自己的业务需求而实现的自己的view
因为有了magix-cli,各系统、平台、营销页面之间,除了业务view不同外,magix的运行环境是一致的,这也给接下来的magix项目间加载打下了基础
项目间的加载在技术上没有难点,更多的是在业务上,比如有些view是登录后才能访问的,有些view可能挂载一些特定的权限等,因此我们除了技术外,在项目中约定了一些规则。
prepare
更详细的约定可以参考这里:https://thx.github.io/magix-cli-book/#/crossProjectView
当我们完成了这些约定后,项目间的渲染即可以顺利进行,目前在阿里妈妈的后台项目中,如钻展、信息流、直通车等均使用了该技术进行加载其它项目中的view
如何把magix中的view渲染到React中?
React
根据前面的说明,基于magix项目,目前[magix运行环境]是统一的,即大家都是同样的magix版本,同样的模块加载,同样的基础通用库等,只是为了方便管理和减少互相影响,[magix运行环境]是在每个项目中安装了一份。
如果要把任意一个基于magix技术的业务view渲染到别的技术栈里,我们需要先加载这份[magix运行环境],加载完成后即可把任意业务view渲染出来。
这份[magix运行环境]我做了提取,仓库在这里:(内部地址,外部不展示) magix-ports中只包括运行业务view所需要的模块加载器、基础类库、magix核心代码、组件等
magix-ports
有了magix-ports这个运行环境还是不够的,前面我们提到为了方便处理业务view是否需要登录、权限等,我们做了一些约定,因此我们要加载完magix-ports环境后,还需要根据约定把这些业务上的事情也要处理一遍。同时为了方便各技术栈的引用,magix这边应该提供相应技术栈的组件供对方使用,比如我们实现的
magix-ports-react:(内部地址,外部不展示)
就是方便把magix的view渲染到react技术栈里
在magix-ports-react内部我们做了前述的业务约定处理,方便react使用
目前该实现已经在adc项目中实施
adc
技术细节可参考这里:#97
Q:目前基于magix项目均是[magix运行环境]+[各自的业务view],而magix-ports其实就是[magix运行环境],那以后会不会把各项目中的[magix运行环境]替换成magix-ports这一份而不是各自维护? A:这个目前有这样的倾向,统一后更方便项目间互相渲染及跨技术栈渲染,但也会带来调试、链路变长等问题。我们会先把跨技术栈渲染这个事情做稳定,组件切换到web components上,然后再根据情况切换[magix运行环境]到magix-ports上
Q:如何把其它技术栈的组件渲染到magix项目中? A:需要其它技术栈提供方案
Q:除react外,还有其它技术栈方便使用吗 A:我们提供了magix-ports-vanilla用于支持任何环境,当然,为了某些技术栈使用方便,我们可以快速提供相应技术栈的组件
magix-ports-vanilla
The text was updated successfully, but these errors were encountered:
No branches or pull requests
前言
经过几年的努力,阿里妈妈所有基于
magix
技术开发的管理系统、运营平台、营销页面等,均被统一成了[magix运行环境]+[各自的业务view
],在整个推进过程中,magix-cli
功不可没magix运行环境
magix
核心代码magix
组件库web components
组件业务view
各业务线为了完成自己的业务需求而实现的自己的view
magix项目间的互相加载与渲染
项目间的加载在技术上没有难点,更多的是在业务上,比如有些
view
是登录后才能访问的,有些view
可能挂载一些特定的权限等,因此我们除了技术外,在项目中约定了一些规则。view
需要继承自己的基类view
,在基类view
中完成如请求、挂载等事情prepare
预处理文件,用于处理自己的登录等前置事情view
所需要的组件由宿主提供更详细的约定可以参考这里:https://thx.github.io/magix-cli-book/#/crossProjectView
当我们完成了这些约定后,项目间的渲染即可以顺利进行,目前在阿里妈妈的后台项目中,如钻展、信息流、直通车等均使用了该技术进行加载其它项目中的
view
magix与其它技术栈
根据前面的说明,基于magix项目,目前[magix运行环境]是统一的,即大家都是同样的
magix
版本,同样的模块加载,同样的基础通用库等,只是为了方便管理和减少互相影响,[magix运行环境]是在每个项目中安装了一份。如果要把任意一个基于
magix
技术的业务view
渲染到别的技术栈里,我们需要先加载这份[magix运行环境],加载完成后即可把任意业务view
渲染出来。这份[magix运行环境]我做了提取,仓库在这里:(内部地址,外部不展示)
magix-ports
中只包括运行业务view
所需要的模块加载器、基础类库、magix
核心代码、组件等magix-ports-react
有了magix-ports这个运行环境还是不够的,前面我们提到为了方便处理业务
view
是否需要登录、权限等,我们做了一些约定,因此我们要加载完magix-ports
环境后,还需要根据约定把这些业务上的事情也要处理一遍。同时为了方便各技术栈的引用,magix
这边应该提供相应技术栈的组件供对方使用,比如我们实现的magix-ports-react:(内部地址,外部不展示)
就是方便把magix的view渲染到react技术栈里
在magix-ports-react内部我们做了前述的业务约定处理,方便react使用
prepare
目前该实现已经在
adc
项目中实施技术细节可参考这里:#97
未来
Q:目前基于magix项目均是[magix运行环境]+[各自的业务
view
],而magix-ports其实就是[magix运行环境],那以后会不会把各项目中的[magix运行环境]替换成magix-ports这一份而不是各自维护?A:这个目前有这样的倾向,统一后更方便项目间互相渲染及跨技术栈渲染,但也会带来调试、链路变长等问题。我们会先把跨技术栈渲染这个事情做稳定,组件切换到
web components
上,然后再根据情况切换[magix运行环境]到magix-ports上Q:如何把其它技术栈的组件渲染到magix项目中?
A:需要其它技术栈提供方案
Q:除react外,还有其它技术栈方便使用吗
A:我们提供了
magix-ports-vanilla
用于支持任何环境,当然,为了某些技术栈使用方便,我们可以快速提供相应技术栈的组件The text was updated successfully, but these errors were encountered: