最近有发现了一套dva过后的新的react应用框架--Umijs(当然也可叫做“优米”或者“五米”),
网址:https://umijs.org/zh-Hans/
github地址:https://github.com/umijs/umi
不知道,对UmiJs这套框架有所了解的小伙伴们,对这套框架有什么看法呢?请留言哦!
也是刚刚了解这套框架,那么废话少说我们来切入主题吧。umi 就是一套零配置,按最佳实践进行开发的前端框架。
1、高性能
PWA、按需加载、tree-shake、scope-hoist、智能提取公共文件、Critical css、preload、hash build、preact 等等,并且,你相同的代码会随着 umi 的改进而不断提升性能。
2、开箱即用
你只需一个依赖 umi 就可启动开发,而无需安装 react、preact、react-router、eslint、babel、jest 等。
3、多端
一键切换单页和多页,一份代码同时部署到 cdn、容器、云凤蝶等环境,详见部署文档。
4、扩展性
umi 的整个生命周期都是插件化的,甚至就是由大量插件组成,比如 http mock、service worker、layout、高清方案等,都是一个个的插件。
基于 create-react-app 实现更多体验上的优化,比如按需编译(不管有项目多大启动时间都不超过 10s)、dev server 断线重连、配置的校验、自动生效以及提示到行等。
安装方法:
用 npm 安装 umi :
npm i umi -g
或者用 yarn :
yarn global add umi
然后可以 umi -v 检查版本号:
umi -v
umi@1.0.0
创建应用:
创建应用并进入。
mkdir myapp
cd myapp
启动 dev 服务器:
umi dev
Compiled successfully!
You can now view Your App in the browser.
Local: http://localhost:8000/
Note that the development build is not optimized.
To create a production build, use npm run build.
创建我们第一个umi页面:
在 pages 目录里新建首页。
echo 'export default () => <div>Index Page</div>' > pages/index.js
如果你是 Window 系统,可以手动新建 pages/index.js,并填入:
export default () => <div>Index Page</div>;
然后在浏览器中打开 http://localhost:8000/,你会看到 Index Page 。
构建应用:
umi build
Compiled successfully.
File sizes after gzip:
52.09 KB static/umi.2b7e5e82.js
186 B static/__common-umi.6a75ebe1.async.js
构建产物会生成在 dist 目录:
tree ./dist
dist
├── index.html
└── static
├── __common-umi.6a75ebe1.async.js
└── umi.2b7e5e82.js
1 directory, 3 files
部署:
npm i serve -g
cd dist
serve
Serving!
- Local: http://localhost:5000
- On Your Network: http://{Your IP}:5000
Copied local address to clipboard!
这样UmiJS就可以算是上手了。
我们来看一下umi的目录结构:
.
├── dist/ // 构建产物目录
└── src/ // 源码目录,可选,把里面的内容直接移到外面即可
├── layouts/
│ └── index.js // 全局布局
├── pages/ // 页面目录,里面的文件即路由
├── .umi/ // dev 临时目录,需添加到 .gitignore
├── .umi-production/ // build 临时目录,会自动删除
├── document.ejs // html 模板
├── 404.js // 404 页面
├── page1.js // 页面 1,任意命名
└── page2.js // 页面 2,任意命名
├── global.css // 约定的全局样式文件,自动引入,也可以用 global.less
├── _routes.json // 路由配置,和文件路由二选一
├── test/ // 测试用例放这里
├── .umirc.js // umi 配置
├── .webpackrc // webpack 配置
└── package.json
一定要记得pages目录是强约定目录哦。小伙伴,有什么要说的呢?谈一下,大家对支付宝这套新出框架“五米”的感想吧?
Ionic 是一个高级的 HTML5 移动端应用框架,也是一个开发混合移动应用的前端框架,旨在让 Web 开发者更轻松地构建、测试、部署和监控跨平台应用。Ionic 基于 Angular 语法,之前一直不支持 Vue 和 React 。
Web框架(Web framework)是一种开发框架,用来支持动态网站、网络应用和网络服务的开发。这大多数的web框架提供了一套开发和部署网站的方式,也为web行为提供了一套通用的方法
Node.js 是基于 Chrome V8 javascript 引擎构建的开源、跨平台运行时环境。事件驱动的非阻塞I/O 模型使,NodeJS 能开发极其轻便且高效的 Web 应用程序。客户端 和 服务端 脚本中使用相同的语言
对于任何一个程序员来说,最关注的两个问题无非就是:时间复杂度和空间复杂度。第一部分介绍了 V8 为改进 JavaScript 执行时间所做的速度提升和优化,第二部分则将着重介绍内存管理方面的知识。
有一个流传较广的笑话,一个人在stackoverflow中提了一个问题,如何使用javascript实现一个数字与另外一个数字相加。最高票回答是你应该使用jQuery插件,jQuery插件可以做任何事情。 历史总是在重演,以前是jQuery,现在可能是react或vue。不同的框架有不同的应用场景,杀鸡不要用牛刀
要使用现代的前端框架,你需要下载开发环境和依赖,编译代码,然后在浏览器上运行。这个是好是坏?究竟是什么导致了这种不必要的复杂性?是因为我们构建的网站太复杂,还是因为框架本身就很复杂?
首先创建一个index.js,在里面引入相关的中间件,如果没有这些中间件,则需要在nodejs里进入index.js所在的文件夹安装这些模块,安装命令:npm install express express-static cookie cookie-session body-parser multer mysql
Linaria 是一个近似于 styled-components 和 emotion JSS 框架,不同点在于, styled-components 和 emotion 是一个 运行时 方案,而 Linaria 是一个 编译期 + 运行时 方案。
如果有人问你将在 2020 年选择哪种框架进行开发,你的答案将是什么?很明显,你主要有两个选择: React.Js 和 Vue.Js!但是,如果你需要选择一个怎么办?好吧,两个最受欢迎的框架 React Js 和 Vue.Js 之间的战斗是真实的
越来越多的人开始站队 Angular、Vue、React,仅仅围绕这些库或者框架进行前端技术讨论,这实在不是什么好的现象。其实我想基于我个人的经验聊下前端的演进和未来,希望可以贡献微薄的力量,消除一些我个人认为的前端社区不太好的风气。
内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!