认识Igaro App-可能是Web上最出色的SPA框架-CSDN博客

有人说网页应该以HTML开头，HTML被（或被认为是内容），并且功能应该在此之上加载（过滤等）。对还是错？由于现在动态生成了如此多的内容，也许是时候重新审视我们进行网站设计的方式了。不管您采用哪种方式，后端都将在很大程度上与十年前一样，但是要有一些部分服务和新协议支持。我们仍然面临着旧的问题：构建和呈现由多个片段组成的页面，并尝试不多次访问数据库服务器，这意味着需要仔细考虑数据如何通过代表它们的模块传递。在前端方面，即使用户从未加载过x和x/y ，也要尝试将状态放入/x/y/x URL的痛苦。

我一直认为必须有一种更好的方法，但是JavaScript或运行它的各种设备从来没有真正致力于将工作负载从后端转移到前端。是的，但不是全部。

然后他们是。

框架随之而来；骨干仍然在这里，但消失了，Polymer，下一件大事-去年，Angular爆炸-现在闷热，最近是Facebook的React。我觉得React与众不同，这告诉我网络终于朝着正确的方向前进。首先，它不使用模板，因此不需要两种方式的数据绑定。

真正的体系结构决策不是要使用哪种模板语言，还是根本不应该使用TypeScript还是要使用框架，而是是否应该在服务器端呈现任何内容。一年前它是强制性的，因为可能制造或破坏产品的服务GoogleBot无法处理Web应用程序。但是现在可以了，所以我必须问你一个问题，你在过去几年中多次问自己：“我应该通过Ajax重新加载页面的那一部分作为片段，还是用前端代码重新生成那部分？（又名React），或者使用前端代码修改DOM结构，或者只是重新加载页面？”

然后我再问你一个问题。是2015年。为什么我们仍然要问这个问题？

一年前，我走上了创建解决方案的道路。

引入Igaro App JavaScript框架

Igaro App是一个Web应用程序框架（又名SPA（单页应用程序）框架），但它与规范背道而驰。首先，它不使用HTML也不使用MVC 。它避免使用DOM查询选择器方法来尝试提高性能，因此没有模板引擎。相反，它使用路由来构建页面，并使用标准CSS进行样式和布局。

它是用纯JavaScript ES3 / 5/6（没有依赖项）编写的，旨在在所有方面，而不是在所有方面都超越和超越。这样做的目的是证明，通过在框外进行思考，有可能产生一个架构上精妙的基础，开发人员可以在此基础上使用他们喜欢的JavaScript进行编码，而不是抽象的，字符串分析的派生代码。

大胆的想法和大胆的主张，您应该持怀疑态度。当您首次查看Igaro App的网站时，您可能会想知道中心在哪里对齐了“像苹果一样”的销售页面，它的字体和基本图像都很大。这是固有的差异，因为网站是Web应用程序，也是可下载的存储库。它具有功能性和功能性，内置了所有文档和小部件。

继续并立即克隆它：

mkdir igaro 
git clone https://github.com/igaro/app.git igaro/git
npm install grunt-cli 
gem install compass 
cd igaro/git 
npm install 
grunt

克隆并运行后，用户即可使用开发环境。 Igaro编译为两种模式-调试和部署，并且可以分别在端口3006和3007上找到每种服务器的Web服务器。这些将在您工作时自动重新加载。修改“页面”或路线就像编辑包含的route.*文件一样简单。要查看哪个路由文件映射到哪个页面，或检查任何页面的源代码，只需单击标题部分中的花括号。 XHR小部件允许无缝JSON检索，并且可以通过检查任何包含的instance.*文件来创建跨多个页面的新小部件。

Igaro App的剖析

路由

如果您习惯于编写HTML并“连接”一个控制器，那么很难理解放弃MVC的想法。在Igaro App中，您必须考虑URL包含它们的路线或数据。根（ / ）是基本路由，其默认存储库具有不可导航的路由-标头，主（成为基本）和页脚。如果用户浏览/store此路径可能会从文件中加载，或者通过提供商定义的API加载。无论哪种方式，JavaScript都会创建视图，该视图将嵌入到父路径或基本路径中。下面显示了一个基本的“ hello world”路线示例。

//# sourceURL=route.main.helloworld.js
module.requires = [
    { name: 'route.main.helloworld.css' }
];
module.exports = function () {
    "use strict" ;
    return function (route) {
        var wrapper = route.wrapper,
            domMgr = route.managers.dom;
        domMgr.mk( 'p' ,wrapper, _tr( "Hello World" ));
    };
};

在这里，依赖模块（CSS）在路由可用之前被加载。使用路由上的管理器创建DOM元素，以便可以保留关系（销毁路由，销毁DOM元素）。当在Igaro中销毁了受祝福的对象（在下一节中将详细介绍）时，与之相关的所有内容都将被清理—事件，DOM元素，子对象和循环引用。

Igaro App为多个语言环境设置，并且_tr是默认的解析名称。

对象互动

Igaro App引入了一个名为bless的概念，该概念采用标准的JavaScript对象，并使用属性和助手来装饰它们。其中最重要的一个是对父对象的循环引用，这又意味着可以传播事件（不用担心，析构函数事件会自动清除这些循环引用）。最终结果是，无需复制和扩展对象即可继承其父对象的属性，因此显着提高了内存消耗和性能。

祝福的另一个特征是与管理人员的装饰。标准管理器是“ dom”（允许DOM元素链接到对象并自动删除），“ debug”和“ events”，而可选管理器（例如“ store”）允许任何对象在本地/远程保存/检索数据。。

值得一提的是，Igaro中的大多数函数都返回一个Promise，并且整个代码库都是无回调的。代码在可读的庄园中流动，该庄园可以自行记录。此处未使用JSDoc，而是在应用程序内置的手册中记录了每个函数及其参数。

外挂程式

Igaro App带有一个插件库，该插件库可能包括页面的小部件，并且可以根据需要从文件服务器或API加载。插件是标准的JavaScript OO沼泽，可以将它们布线在一起。该库目前在清单中包括XHR，存储，RTE（富文本数据输入），手风琴，幻灯片，验证，祝酒（弹出通知），页面消息，模式对话框，oauth2，导航和JSONP。以下示例显示了如何向路线添加可隐藏页面小部件。

route.managers. object .create( 'pagemessage' ,{
    container:wrapper,
    type: 'info' ,
    message: _tr( "Hide me and I'll not return." ),
    hideable: true ,
    id:route.path. join ( '.' )+ '.test01'
})

安全与认证

Igaro App没有公共变量，也不会将自身加载到window对象上，因此其他脚本无法访问它。

在随附的小部件集中包含一个Oauth2模块，该模块支持透明身份验证，而无需URL切换或重定向。文档中包含用于Google Oauth2的示例代码。对API的XHR调用不需要处理401，因为它将由Oauth2模块拾取，处理并在提供凭据后继续请求。您可以在Angular中通过注入中间件来做到这一点。在Igaro App中，没有中间件，所有事情都由事件完成。以下示例显示了如何向Google API发出请求。

return route.managers.object.create( 'xhr' ,{
    stash: { auth: 'google' }
}). get ({ res: 'https://www.googleapis.com/drive/v2/files' }).then( function (data) {
   // data here
});

Promise catch方法仅用于定制错误处理，否则返回Promise将允许在基本级别上处理错误。

建立与部署

Grunt用于工作流，并且（默认情况下）将Igaro App编译为两种模式：调试和部署。差异包括JSMinify和错误处理方式。在Igaro App中，所有错误都会得到处理，并以有意义的方式报告给用户。对于部署模式，可以将错误发送到远程服务器以进行进一步分析。两种模式的实时编译都是自动的。

测试中

提供了针对Web应用程序内提供的所有页面的测试套件。鉴于任何错误都会调用标准响应，因此很容易测试整个页面是否已正确加载。 Igaro App模块的单元测试正在进行中，并且需要进一步的覆盖，尽管在撰写本文时还没有发现错误。提供的Web应用程序没有DOM事件测试，但是使用Mocha ， Nightwatch和Selenium驱动程序后，创建自己的应用程序就很容易了。