#IOING. Frameworks introduction IOING. Frameworks Is the world's most advanced mobile application development framework open source HTML5,It helps developers to use HTML, CSS and Javascript as the core language quickly build applications,It proposes a new development model, which can make your development experience becomes more simple, if you advance into the era HTML6,The most important is that it has very excellent performance, comparable to a real native applications even beyond native application.
##Features
- Modular Development
- Module sandboxed : sandbox, shadowRoot, embed
- Clever CSS Advanced syntax expand
- Parallel DOM Advanced syntax expand
- List-based GPU-accelerated large high-performance memory controller to scroll
- Asynchronous component to expand
- Frosted glass effect to achieve real-time dynamic HTML5 framework ios blur header
#IOING. Frameworks 简介
IOING. Frameworks 是全球最先进的HTML5开源移动应用程序开发框架之一，它可以帮助开发者使用HTML、CSS 和Javascript做为核心语言快速搭建应用程序。它提出一套全新的开发模式，这能让你的开发体验变的更简，仿佛提前把你带入HTML6时代。最重要的是它拥有无比出色的性能，真正的媲美原生应用甚至超越原生应用。
##特点
- 模块化开发
- 模块沙箱化 : 三种隔离机制(sandbox, shadowRoot, embed)
- Clever CSS 高级语法拓展
- Parallel DOM 高级语法拓展
- 基于GPU加速的大List内存控制高性能滚动
- 异步组件拓展 Web Components 及高级组件开发与管理
- 全球唯一实现实时动态毛玻璃效果的HTML5框架 实时动态毛玻璃 blur header
##原理详解
上图为框架的简化原理图，从右向左是整个视图呈现的基本过程，它们依次为 资源加载－编译CSS和编译DOM－沙箱化－镜像，资源载入让模块间资源引用变的简单，同时方便维护管理，Clever CSS 让CSS变的灵活，你可以使用全新的CSS语法而不必要考虑它的兼容问题，Parallel DOM 让HTML标签变的更强大，你可以使用新的HTML语法来构建你的应用。
###打破传统开发模式
传统的开发模式在面对多人应用开发上不能有效的规范和管理项目，因此开发者需要一个创新的开发模式，能够有效的规范开发流程，有一套能够自动规避耦合性问题的体系方案。
###传统页面切换的弊端
传统使用url跳转的方式切换页面时浏览器在跳转的过程中会失去当前页面所有的DOM结构、样式、状态、存储变量等，且在页面呈现上也不能进行过渡动画的处理，由于DOM的重建也会出现瞬间的白屏画面。
###关于重设viewport
viewport的初衷是为了解决web页面在手机中的呈现问题，而页也带来了一些问题(参考：“为什么要支持dp？”)，viewport的存在让高dpi的设备无法显示真实的一像素值，让线条看起来变的粗糙了，尤其在当下ios发际线效果(UINavigationBar 1px bottom line)很流行时却让viewport的存在变的尤其尴尬。
###关于滚动控件scrollView
区域滚动到现在依旧是移动端设备上浏览器的先天硬伤，目前多数移动设备浏览器对此支持仍不理想，甚至很多设备的浏览器还不支持区域滚动，或部分支持但内容过多时性能也会急剧下降，且不支持弹性、事件、惯性、加速度等特性。面对区域滚动的问题重重，body上的默认滚动也并不理想，虽然body上的滚动性能良好，但是面对大列表视图依然能力有限，同时由于其只存在于body上的特殊性导致其难以实现复杂的应用结构，因而需要更智能的滚动控件来代替(了解滚动控件)。
##快速入门
让开发变的简单是IOING.不变的信念，根据下面指导能让你在短时间内快速掌握。
###学习步骤- 了解框架的基本原理
- 从Demo入手，深入实践，学习创建模块
- 参照文档尝试书写Clever CSS
- 参照文档尝试使用Parallel DOM
- 学习使用滚动控件来构建页面
- 学习使用Web Components
###准备
下载并解压缩到电脑。
###创建模块目录解压后可以看到 index.html frameworks modules components 等几个文件，接下来打开 modules 文件夹，会发现里面包含一个预置的模块：frameworks 即主视图模块
在 modules 文件夹中新建一个命名为 demo 的文件夹，demo 就是一个新的模块目录了。
###创建模块配置在 demo 模块文件夹下创建一个 config.js 的空javascript文件，将下面的配置复制后粘贴进入后保存。
```javascript define({ resources : { source: { test: "index.html", }, layout: { common: "frameworks::common", main: "main.css" }, data: { hello: { "text" : "Hello world" } } }, config : { complex: true, layout : ["common", "main"], source: ["test"], data : ["home"], sandbox : true, mirroring: { clip: [60,0,60,0] } } }) ``` ###创建模块HTML模版在 demo 模块文件夹下创建一个 index.html 的空html文件，将下面的模版代码复制后粘贴进入后保存。
```html ``` ###创建模块CSS模版 ```css body { color: blue; } ```了解更多关于 Clever CSS语法拓展的用法。
###注册默认模块
打开frameworks模块文件夹中的config.js把config中的 'index' 属性改为模块名，如下示例：
```javascript define({ resources : { script: { }, source: { index: "index.html" }, style: { common: "css/common.css", main: "css/main.css" }, data: { lang: "./lang/zh-CN.json" } }, config : { index : "test", //设定默认模块为test模块 style : ["common", "main"], script :[], source: ["index"], data : ["lang"], iframe : false, update : false } }) ``` ###恭喜完成！请打开你的 "web server" 服务，比如"http://localhost/你的项目目录"，到此一个简单的webapp demo就完成了，更多使用方法请详细阅读文档。
##关于性能
性能问题分为两个方面，以webGL或canvas绘图为主的应用主要性能问题可能是javascript运算速度，而对于以DOM结构为主的应用的性能问题多数都是和视图重绘以及内存不足有关。
HTML能够形象的创建视图，同时它也需要一个强大聪明的大脑，这就是浏览器复杂的解释过程，这个过程比起其它语言的视图解释都要复杂得多，因此不是HTML不够快，而是很多时候我们被强大的解释器惯坏了，使用了不合理的布局方案。
关于如何提升性能框架给出了沙箱以及无限滚动的解决方案，但开发在开发过程中依旧应该注意合理使用布局以及CSS3动画，更多提升性能的开发注意事项可查看社区专栏。
##关于发布
IOING.Framework并不包含打包工具，开发者可根据使用自己熟悉的打包工具进行封装。
封装也可以分为两种方案，一种方案是将所有文件放在服务器，客户端需要一个等待主界面，需要增加appcache文件支持，程序只需要第一次从服务器载入以后可以进行离线访问，同时也方便日后直接在服务端对软件直接升级，第二种方案是将所有应用代码直接打到包中，直接访问内部链接(由于phoneGap等都会去除程序跨域限制，不需要考虑跨域问题)。
尽管IOING.Framework 的性能卓越，但速度是没有上限的，对于低版本浏览器推荐使用打包chrome核心的方法，能提高至少一倍的速度体验。