单页应用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代表一个前端开发体系,如果需要进一步了解与学习,这个官方示例还有很多东西可以挖掘。

 
分类: Nodejs

单页应用Scrat实践的更多相关文章

  1. Nodejs in Visual Studio Code 12.构建单页应用Scrat实践

    1.开始 随着前端工程化深入研究,前端工程师现在碉堡了,甚至搞了个自己的前端网站http://div.io/需要邀请码才能注册,不过里面的技术确实牛.距离顶级的前端架构,目前博主应该是far away ...

  2. Nodejs in Visual Studio Code 13.构建单页应用Scrat示例挖一挖

    1.开始 Scrat作者说要搞个很碉堡的示例,果然就搞出来了,如果要学习并使用Scrat,可以从官方示例开始,简直太方便了. 2.Scrat示例 目录 component_modules : 公共组件 ...

  3. 移动Web单页应用开发实践——实现Pull to Request(上/下拉请求操作)

    在单页应用开发中,无论是页面结构化,还是Pull to Request,都离不开一个技术——页面局部滚动.当下的移动web技术,主要使用下面两种方式实现局部区域的滚动: 基于IScroll组件,也有很 ...

  4. 【转】移动Web单页应用开发实践——页面结构化

    1. 前言 在开发面向现代智能手机的移动Web应用的时候,无法避免一个事实,就是需要开发单页应用(Single Page WebApp).对于不同的系统需求,单页应用的粒度会不同,可能是整个系统都使用 ...

  5. 移动Web单页应用开发实践——页面结构化

    1. 前言 在开发面向现代智能手机的移动Web应用的时候,无法避免一个事实,就是需要开发单页应用(Single Page WebApp).对于不同的系统需求,单页应用的粒度会不同,可能是整个系统都使用 ...

  6. React + Node 单页应用「二」OAuth 2.0 授权认证 & GitHub 授权实践

    关于项目 项目地址 预览地址 记录最近做的一个 demo,前端使用 React,用 React Router 实现前端路由,Koa 2 搭建 API Server, 最后通过 Nginx 做请求转发. ...

  7. 单页应用SPA开发最佳实践

    最近用vue+vue-router做了个单页应用的项目,页面大概有15个左右.积累了一些开发经验在此做一些记录.本文主要从可维护性方面来考虑SPA的开发实践 全站的颜色定义放在一个less或者scss ...

  8. html5手机Web单页应用实践--起点移动阅读

    一开始以hybrid形式做了一个android的小说阅读客户端,叫4G阅读.而后由于业务需求,要迅速实现纯手机html5 版的,所以就直接在原先客户端内内嵌的网页进行改版,快速实现以后在优化的过程中发 ...

  9. vue单页(spa)前端git工程拆分实践

    背景 随着项目的成长,单页spa逐渐包含了许多业务线 商城系统 售后系统 会员系统 ... 当项目页面超过一定数量(150+)之后,会产生一系列的问题 可扩展性 项目编译的时间(启动server,修改 ...

随机推荐

  1. Steve Yegge:Google面试秘籍

    我憋了很长时间想写点关于去Google面试的秘籍.不过我总是推迟,因为写出来的东西会让你抓狂.很可能是这样.如果按统计规律来定义"你"的话,这文章很可能让你不爽. 为啥呢?因为啊- ...

  2. 知识普及:iOS7搭载新定位技术iBeacon

    摘自:http://iphone.91.com/tutorial/jcjc/131023/21619035.html 在2013年六月举行的WWDC上,作为iOS 7中最重要的新特性之一,苹果正式对外 ...

  3. WCF技术剖析之二十四: ServiceDebugBehavior服务行为是如何实现异常的传播的?

    原文:WCF技术剖析之二十四: ServiceDebugBehavior服务行为是如何实现异常的传播的? 服务端只有抛出FaultException异常才能被正常地序列化成Fault消息,并实现向客户 ...

  4. oracle 表复制

    1. 复制表结构及其数据: create table table_name_new as select * from table_name_old 2. 只复制表结构: ; 或者 create tab ...

  5. 京东金融集团BD部门招聘 BD经理

    新标签页http://74.55.154.136/ 互联网招聘_cnBeta.COM 北京 / 全职 / 20k-30k / 经验3-5年 / 本科及以上 / 1天前发布 职位诱惑 : 五险一金 职位 ...

  6. ESRI Shapefiles (SHP)

    ESRI Shapefiles (SHP) Also known as ESRI ArcView Shapefiles or ESRI Shapefiles. ESRI is the company ...

  7. HDU-1664-Different Digits(BFS)

    Problem Description Given a positive integer n, your task is to find a positive integer m, which is ...

  8. JS乘法口诀表(一行代码)

    (function(c){for(i=1;i<=9;i++){var s='';for(j=1;j<=i;j++){s+=i+'X'+j+'='+i*j+'\t';}c.debug(s); ...

  9. 总线接口与计算机通信(三)UART起止式异步通用串行数据总线

    串口简介 1. 什么是串口? 串口是计算机上一种非常通用的设备通信的协议.串口通信的概念非常简单,串口按位(bit) 发送和接收字节.尽管比按字节(byte)的并行通信慢,但是串口可以在使用一根线发送 ...

  10. Windows Phone 8初学者开发—第23部分:测试并向应用商店提交

    第23部分: 测试并向应用商店提交 原文地址:http://channel9.msdn.com/Series/Windows-Phone-8-Development-for-Absolute-Begi ...