单页应用Scrat实践
单页应用Scrat实践
1.开始
随着前端工程化深入研究,前端工程师现在碉堡了,甚至搞了个自己的前端网站http://div.io/需要邀请码才能注册,不过里面的技术确实牛。距离顶级的前端架构,目前博主应该是far away,幸运的是现在有很多前端大神积极的分享自己的经验,比如百度这位https://github.com/fouber/blog/issues/4。
将iframe项目使用多页HTML与FIS重构以后,前端已经得到了极大的优化,然而多页HTML带来的状态丢失(登录信息,菜单信息),仍然对优化造成阻碍。
单页应用可以很好的解决多页HTML面临状态丢失的尴尬,感觉单页HTML与iframe十分像,只有一个HTML页面,所有Contents内容动态加载进来。
名词解释
Scrat : https://github.com/scrat-team/scrat
AMD,CMD : 两种编程规范,不是指CPU。。,AMD可以参考requirejs。
Combo :聚合服务,现在互联网带宽这么大,如果合并多个HTTP请求为单一HTTP请求将极大提升效率,如果使用AMD规范编程,那么可以找到js模块之间的互相依赖,比如a.js依赖b.js,c.js,那么客户端通过框架(如scrat.js)将会自动发起Combo?b.js,c.js,a.js这个请求,服务器在一个请求之内把这三个JS都返回回来,显然效率上要比请求三个JS高得多。
2.Scrat构建单页HTML的实践
为什么需要构建单页HTML?
如果你还在使用iframe作为前端框架,那么是时候放弃了,现在有多种成熟的单页HTML框架应用于一些小型中型项目并取得了成功,Scrat就是其中之一。
然而对于一些大中型网站比如说猎娉网、京东之类的仍然使用多页HTML的SEO技术,为毛我的项目就一定要用单页HTML呢?
我的理解是,多页HTML已经能够解决大多数问题了,但是当我们开发移动APP或者企业应用时,一个需要为流量考虑,一个与用户状态强相关,在这个时候单页HTML技术是最优的选择之一。
然而单页HTML这个叫法不太拉风,我更喜欢称之为Blink技术。想象一下一眨眼系统就加载好了,这估计就是单页HTML的最终目标吧。
总之为了性能也好,为了XX也罢,我就这么开始学习Blink技术了。
iframe就像在守家的近卫,多页HTML就像逼高的天灾拥有巨大的优势,如果将iframe升级成单页HTML,那就是近卫潮汐出了把跳刀,突然Blink出去完虐天灾一波打出优势,奠定胜果。
Blink与Combo?
潮汐跳大后后面酱油连招要接好,必然能赢且看起来也是赏心悦目,如果接不好Combo,这,我去.....
Combo服务(HTTP请求聚合)并不是必备的,主要是一堆.Net程序员,突然多出个Node.js服务各种恐慌,使用Scrat构建的单页系统可以在配置中关闭Combo,这样构建的项目将是一个仅包含静态文件的纯前端项目。(可以先学习blink搞懂核心,后面再学Combo)
如何构建纯前端单页?
首先下载示例代码
1
|
git clone https: //github .com /scrat-team/scrat-site .git |
修改scrat/components/menu.js
修改scrat/components/menu.handlebars
以上两个修改就是去掉/#!/最前面的斜杠/,将绝对地址变成相对地址方便发布。
打开CMD,进入Scrat目录执行命令
1
|
scrat release -mod .. /output |
打开output输出目录查看public文件夹下文件,自动完成了静态文件指纹,关闭了Combo服务。
将public目录发布在IIS中
打开浏览器输入http://localhost/public/scrat-site/0.1.0/index.html,这就是我的第一个Blink单页
整个页面只有一个入口index.html,所有其他模块都是使用ajax技术异步加载,纯前端。
3.结束
scrat代表一个前端开发体系,如果需要进一步了解与学习,这个官方示例还有很多东西可以挖掘。
单页应用Scrat实践的更多相关文章
- Nodejs in Visual Studio Code 12.构建单页应用Scrat实践
1.开始 随着前端工程化深入研究,前端工程师现在碉堡了,甚至搞了个自己的前端网站http://div.io/需要邀请码才能注册,不过里面的技术确实牛.距离顶级的前端架构,目前博主应该是far away ...
- Nodejs in Visual Studio Code 13.构建单页应用Scrat示例挖一挖
1.开始 Scrat作者说要搞个很碉堡的示例,果然就搞出来了,如果要学习并使用Scrat,可以从官方示例开始,简直太方便了. 2.Scrat示例 目录 component_modules : 公共组件 ...
- 移动Web单页应用开发实践——实现Pull to Request(上/下拉请求操作)
在单页应用开发中,无论是页面结构化,还是Pull to Request,都离不开一个技术——页面局部滚动.当下的移动web技术,主要使用下面两种方式实现局部区域的滚动: 基于IScroll组件,也有很 ...
- 【转】移动Web单页应用开发实践——页面结构化
1. 前言 在开发面向现代智能手机的移动Web应用的时候,无法避免一个事实,就是需要开发单页应用(Single Page WebApp).对于不同的系统需求,单页应用的粒度会不同,可能是整个系统都使用 ...
- 移动Web单页应用开发实践——页面结构化
1. 前言 在开发面向现代智能手机的移动Web应用的时候,无法避免一个事实,就是需要开发单页应用(Single Page WebApp).对于不同的系统需求,单页应用的粒度会不同,可能是整个系统都使用 ...
- React + Node 单页应用「二」OAuth 2.0 授权认证 & GitHub 授权实践
关于项目 项目地址 预览地址 记录最近做的一个 demo,前端使用 React,用 React Router 实现前端路由,Koa 2 搭建 API Server, 最后通过 Nginx 做请求转发. ...
- 单页应用SPA开发最佳实践
最近用vue+vue-router做了个单页应用的项目,页面大概有15个左右.积累了一些开发经验在此做一些记录.本文主要从可维护性方面来考虑SPA的开发实践 全站的颜色定义放在一个less或者scss ...
- html5手机Web单页应用实践--起点移动阅读
一开始以hybrid形式做了一个android的小说阅读客户端,叫4G阅读.而后由于业务需求,要迅速实现纯手机html5 版的,所以就直接在原先客户端内内嵌的网页进行改版,快速实现以后在优化的过程中发 ...
- vue单页(spa)前端git工程拆分实践
背景 随着项目的成长,单页spa逐渐包含了许多业务线 商城系统 售后系统 会员系统 ... 当项目页面超过一定数量(150+)之后,会产生一系列的问题 可扩展性 项目编译的时间(启动server,修改 ...
随机推荐
- C++部分术语(Terms)
翻译自msdn,如有不妥当的地方,欢迎指正. 声明(Declaration):声明引入了一个名字以及其类型进入程序中,并没有定义一个相关的对象或者函数.然而,很多声明都作为定义使用. 定义(def ...
- HEVC码率控制浅析——HM代码阅读之一
HM的码率控制提案主要参考如下三篇:K0103,M0036,M0257.本文及后续文章将基于HM12.0进行讨论,且首先仅讨论K0103对应的代码,之后再陆续补充M0036,M0257对应的代码分析, ...
- css sprites 图片精灵自动生成 插件
grunt-spritesmith https://www.npmjs.com/package/grunt-spritesmith
- C# - Environment类,获取桌面的路径
private void button1_Click(object sender, EventArgs e) { string Path = Environment.GetFolderPath(Env ...
- BZOJ 2588: Spoj 10628. Count on a tree( LCA + 主席树 )
Orz..跑得还挺快的#10 自从会树链剖分后LCA就没写过倍增了... 这道题用可持久化线段树..点x的线段树表示ROOT到x的这条路径上的权值线段树 ----------------------- ...
- CCIE路由实验(9) -- IPv6
1.IPv6地址的各种情况2.配置通过DHCP-PD方式分配前缀信息3.IPv6路由基本配置4.IPv6路由--RIPng5.IPv6路由--EIGRPv66.IPv6路由--OSPFv37.IPv6 ...
- Ansi,UTF8,Unicode,ASCII编码的差别
近日须要不同的编码,关于上述编码,一直迷迷糊糊,查了些资料,总算大致了解了,以下全是从网上搜来的: 1. ASCII和Ansi编码 字符内码(charcter code)指的是用来代表字符的内 ...
- linux下编译qt5.6.0静态库——configure配置(超详细,有每一个模块的说明)(乌合之众)
linux下编译qt5.6.0静态库 linux下编译qt5.6.0静态库 configure生成makefile 安装选项 Configure选项 第三方库: 附加选项: QNX/Blackberr ...
- myeclispe启动后报错 Subclipse talks to Subversion via a Java API that requires access to native libraries.
myeclispe 中SVN插件常遇到的异常: Subclipse talks to Subversion via a Java API that requires access to native ...
- tomcat 后台启动设置
如果你环境变量配置对了且保证tomcat的bin目录下有如下三个文件,则你只需在cmd中运行 service install tomcat即可将tomcat添加的服务项中,然后在设置开机自动启动,则以 ...