sorrycc / blog

💡
4.48k stars 325 forks source link

Hello!umi #58

Open sorrycc opened 6 years ago

sorrycc commented 6 years ago

一、

umi(中文名:五米)是我目前的工作重点,正在全力开发中,从写下第一行代码开始算起已有数月。但从闲聊和邮件中发现不少人还不能准备地理解 umi 是啥、能做啥,于是趁着代码写累了,聊聊 umi 的一些情况。

umi 是工具吗?是。但不仅仅是。我给 umi 的定位是开发框架,目前包含工具 + 路由,不包含数据和视图。 所以 umi[工具 + 路由] + dva[数据] + antd(-mobile)[视图],很配哦。另外,umi 目前基于 React,不支持 Vue 和其他框架或者无框架的开发方式。

前面说的目前,其实是精力有限。

 

二、

大家可能会觉得,umi 有啥特别的,工具用 webpack + webpack-dev-server + babel + postcss + ... ,路由用 react-router 不就完了吗?

这是上一代的使用方式,工具是工具,库是库,泾渭分明。而近来,我们发现工具和库其实可以糅合在一起,工具也是框架的一部分。 通过约定、自动生成和解析代码等方式来辅助开发,减少开发者要写的代码量。next.js 如此,umi 也如此,Compilers are the New Frameworks

 

三、

那么,为啥要把路由层做进去?

路由即页面,而页面是构成应用的单位。接管了路由层,意味着更多的可能性,可以管控每个页面的生成、切换、销毁等。框架能做的事情多了,才更有存在的意义。

比如:

 

四、

所以,umi 有啥?我为什么要用?

简单来说,有以下 4 点:

(没了?🏃🏃🏃 先别走,听我细细道来。。)

 

五、

开箱即用?那么箱子里有啥?

我们来对比下,以 roadhog 初始化一个项目为例。

roadhog:

  1. 安装构建工具依赖 roadhog
  2. 安装类库依赖,有 antd/antd-mobile、react + react-dom (或者 preact + preact-compat) 依赖
  3. 如果是 preact 项目,需要配 alias
  4. 如果需要路由,还需要安装 react-router
  5. 安装 babel 插件 babel-plugin-import,并按文档配置,但可能配出错(此块咨询非常多)
  6. 配置 webpack entry,打包多页

umi:

  1. 安装依赖 umi

只需一步,剩下的都不用做,因为在 umi 这个箱子里了。 不过很多东西虽然已经在了,但仍保留让用户选择的权利,比如选择 preact 还是 react,比如 antd(-mobile) 的版本,eslint 规则可覆盖可 merge 等等。

 

六、

umi 在性能上做了很多努力,这些对于开发者是无感知的。“你只管写业务代码,我会负责性能”,并且随着 umi 的迭代,我保证你的应用会越来越快。

主要有:

优化点很多,有些关乎尺寸,有些关乎执行效率,有些关乎首屏时间,有些关乎用户体验,细聊的话,能说上几个小时。大家根据关键字应该能猜个大概,这里就不展开了。

 

七、

umi 就是为多端而生的,这里的多端指的是 web + 各种容器,比如说我们需要同时把代码部署到支付宝钱包的离线包和在线服务器。

因为 umi 的产物是单页应用,同时单独访问每个页面又都有效,所以可以在容器模式里通过 ap 进行跳转,在线模式下又通过路由跳转。模式的自动切换,我们是借助 bridgex 进行实现。

 

八、

umi 在开发体验上也算得上是呕心沥血了。

首先,借助 create-react-app 的开源库,他的体验是我们的底线。像是 redbox 显示出错信息、HMR、出错点击后跳转到 IDE、ESLint 出错提示等等。

此外,umi 还做了更多:

 

九、

什么样的项目适合用 umi ?

umi 是通用方案,我能说什么类型的都适用吗?😆 好吧,我说说什么项目不适用吧。

 

十、

有点心动了,我该如何开始 Getting Started 呢?

先安装 umi

$ npm i umi -g

# 检查版本号
$ umi -v
umi@1.0.0-rc.1

然后新建目录并进入。

$ mkdir myapp
$ cd myapp

启动 umi 的 dev 服务器。

$ umi dev

新开个 terminal,在 pages 目录下新建 page component 。

$ echo 'export default () => <div>Index Page</div>' > pages/index.js

在浏览器中打开 http://localhost:8000/,你会看到 Index Page

简单吧!


最后,umi@1.0 将于 2 月初正式发布,敬请关注。


相关链接:

(完)

jeasonstudio commented 6 years ago

沙发, 👏👏👏

solarhell commented 6 years ago

试用下大大的新作再来编辑👍

abinnq commented 6 years ago

programmer-yang commented 6 years ago

👏👏👏 先mark再看

liuqipeng417 commented 6 years ago

建议单纯希望表达喜欢和支持的同学,点赞即可

mamba-1024 commented 6 years ago

继续关注

no13bus commented 6 years ago

期待正式发布,我们继续跟进

ToonoW commented 6 years ago

火钳刘明

riskers commented 6 years ago

同意,应该有这么一个编译框架,让开发人员少写配置文件

yangbin1994 commented 6 years ago

roadhog plus + router 基于约定的工具盒子,解放和束缚的博弈之战,感恩陈大🙏

andylei18 commented 6 years ago

持续关注

lkdghzh commented 6 years ago

持续关注+1

zhengqingxin commented 6 years ago

持续关注

Raincal commented 6 years ago

关注下~

JimmyLv commented 6 years ago

初次启动速度还是稍慢啊。

在没有写以下 Code 之前页面 Title 是 Error,添加之后依然显示 Error

$ echo 'export default () => <div>Index Page</div>' > pages/index.js
bailnl commented 6 years ago

你好,按需编译的实现思路是?

sorrycc commented 6 years ago

@JimmyLv

初次启动速度还是稍慢啊。

有几个原因:

  1. 有些优化还没做,比如 antd{,-mobile}、react{,-dom}、dva 等在 dev 时引 umd 包
  2. umi 做了按需编译,这个页面数多了才能看出对比

在没有写以下 Code 之前页面 Title 是 Error,添加之后依然显示 Error:

应该是 bug。

sorrycc commented 6 years ago

@bailnl

按需编译有几种实现思路,我找时间写篇文章解释下。

think2011 commented 6 years ago

(⊙o⊙)哦 看起来好棒,找个时间试用下

fongfai commented 5 years ago

follow

Carrie999 commented 5 years ago

有些工程师还停留在页面仔的层面,有些已经开始开发各种实现复杂但是用起来简单的工具、框架,我觉得未来甚至会产生"阶级固化",大量的人停留在框架、工具的流水线上,少部分人掌握着核心科技(阮老师的口气说。。。)

gaochundong commented 4 years ago

m

shayeLee commented 4 years ago

umi dev 页面多的时候启动慢啊,要一分钟

echoxyc commented 3 years ago

大大,想问一下:umi ssr是同构渲染吗?翻了很多资料都找不到这个解释

caoxiemeihao commented 3 years ago

umi dev 页面多的时候启动慢啊,要一分钟

想过没想过如何解决这个问题 😂 我打算用 Native 插件试试

caoxiemeihao commented 3 years ago

大大,想问一下:umi ssr是同构渲染吗?翻了很多资料都找不到这个解释

你是看了“某课网”视频的童鞋吧,所有 ssr 可以理解都是同构;无关框架