单页Web应用与传统Web对比

# 体验

• 普通的Web应用跳转受限于浏览器，它将会丢弃整个页面并重新加载一个新的页面，此时会出现短暂的页面空白，而单页Web应用通常在跳转时只更新部分模块的内容，既不会出现空白现象，还能达到更快的页面渲染速度，从而提供更流畅的体验。
• 普通Web应用在加载时显示的动画只能固定为浏览器的加载图，但单页应用的跳转是无刷新的，因此可以像桌面应用和App一样自定义加载数据时的等待样式，你可以编写一个有趣的加载等待动画，或是进度条等，让你的Web应用更加多姿多彩。

# 架构

单页Web应用通常不需要与服务器端代码混合，它们使用数据API进行通信，完全实现了前后端的分离，甚至前后端代码可以不在同一台服务器中，这也更加接近桌面应用和App的机制，这意味着你不用为Web应用单独开发一套服务端代码，而且为将前端代码放在CDN上提供了可能，这些在后端渲染的普通Web应用上是做不到的。

# 性能

不得不承认，单页Web应用在性能上也有它的瓶颈，相比于普通Web应用，因为它的模块视图通常是js动态创建的，并且视图和数据的请求也相互独立，所以单页Web应用在加载时往往需要更多的http请求次数，而且动态创建与数据请求是串行执行的，这其实也是单页Web应用不利于SEO的原因所在。但另一方面，正因为单页Web独有的代码级页面缓存，可以实现更快的页面渲染表现，而SEO也可以使用现有技术来消除。

谈谈单页Web应用的未来

# Web的天生优势

跨平台、响应式、免安装与易编写等，这些都是Web的天生优势，这些优势能让它快速蔓延并在任何场景下使用。微信为了利用这些优势，将它们与Native App进行结合推出了功能较全体验较好的小程序，Facebook为了统一Android、IOS与Web的编写方法创造了React Native，选择以HTML、JavaScript和CSS来生成两大移动端App的代码。

# 单页Web应用的机会

Google为了推进Web的发展也推出了PWA和AMP，让Web应用的体验更加接近Native App，可见，Native App与Web的发展趋势就像艺术一样相互融合，相互吸收，目的是为了不断提高应用的体验效果，和寻求一种更加开放统一的生产方式。单页Web应用也刚好符合这些趋势，这种技术完全有Web本身的优势，并且在提供了更好体验的同时，也在不断推进服务端API的统一。在未来，可能产生更多类型的终端，如VR、AR等，这意味着Web跨平台和自适应的优势会更加明显，而不仅限于PC和手机端。但目前来看，单页Web应用在技术实现和体验上还有更大的发展空间，而这就是 Amaple 所要推进的。

在 Amaple 上快速构建单页应用

日益强大的Web体系催生了 Amaple，它的定位是让单页Web应用体验更流畅，构建更简单，即使初级前端开发也能顺利掌握和使用，根据这些， Amaple 的设计有以下特点：

# 遵循Web的原生设计原则

降低学习成本的一个特点是沿用原生Web开发的标准，这样可以最大化符合具有一定基础的开发者的认知范围，这也是 Amaple 的设计原则之一。在 Amaple 单页应用中，依旧使用href属性跳转页面，使用<form>设置action属性提交表单，只是它们是浏览器无刷新的跳转，甚至可以创建像ShadowDOM那样的组件，在组件内使用特定子元素，看起来就像<video>和<source>、<select>和<option>的关系一样。Amaple 还推荐在DOM元素设置onclick属性绑定点击事件等

# 数据驱动

2005年Ajax的出现使Web与服务端的通信再也不用刷新页面，Web的体验也通过Ajax技术攀升了一个层次，但前端开发的工作却不断地复杂起来，他们必须更多地和DOM元素打交道，将服务端的数据更新到页面中，这催生了jQuery，它让DOM操作更加便捷，但其实本质没变。为了更好地解决这个问题，2010年出现了最早的MVVM框架knockout，它能屏蔽几乎所有的DOM操作，使开发者专注于业务数据，这也是业界承认的最佳界面开发方式。Amaple也提供了更简洁的动态模板引擎，支持开发者使用模板指令将数据绑定到视图，并通过数据驱动视图的自动更新。

# 模块化

【页面模块化】

单页Web应用的特点之一是将页面划分为多个模块，URL跳转时更新模块的内容。在 Amaple 中存在模块（Module）和组件（Component）两种模块化单位，模块是单页Web应用更新的最小单位，它管控URL跳转时的内容替换、参数更新等一系列变化，而且允许开发者定义任意层级的任意多个模块及子模块；而组件的定位是拥有特定功能的封装块，它有自己的独立视图、状态数据和组件行为。与其他单页库相比，它们的职责更清晰，也易于理解。

【编写模块化】

JavaScript的模块化远远不如服务端语言，直到AMD、CMD两种模块化规范的出现使模块化才得以逐渐发展。随后W3C在ES6中也启用了import关键字来推动原生的模块化发展，因浏览器厂商可怜的支持慢慢催生了nodejs平台的webpack、browserify、rollup等模块打包工具的诞生，这让JavaScript的模块化更加成熟，但同时也带来了更大的开发复杂度。 Amaple 为了解决这个问题，内嵌了模块化功能，它允许将模块文件、组件文件和插件文件单独编写并分类保存，这让不熟悉nodejs构建工具的开发者也能编写模块化的JavaScript，而对于熟悉nodejs构建工具的中高端开发者，你也完全可以使用webpack、babel、scss/less等工具辅助开发。

# 体验更流畅

Amaple 的另一个目的是构建体验更加流畅的单页Web应用，因此，Amaple 从以下三个方面的优化来保证更有体验感的单页Web应用：

【更流畅的动画效果】

随着移动终端配置的不断提高及操作系统的优化，让Web应用在移动端表现出更优秀的动画效果成为可能。
Amaple 也希望利用这一趋势提供更加高效便捷的解决方案，它允许你在不操作DOM元素的情况下实现模块的切换动画、组件动画，甚至可以像App那样实现复杂的动画及帧动画，你可以为你的单页应用挂上一个带有酷炫动画的Loading组件，也可以将所有可点击的按钮设计成Loading组件，触发http请求的按钮将启用Loading功能。

【使用更好的虚拟DOM】

相比其他带有虚拟DOM的库， Amaple 实现了性能更好的虚拟DOM，在元素移动的时候，它不再需要开发者为它提供识别的key标志，也能自动判断移动的元素，并自动计算出最优的移动步骤进行移动。

【更快的页面更新】

当前的单页Web应用存在预加载和懒加载两种形式，预加载在使用过程中较为流畅，但往往在首屏加载需要较长的时间，而懒加载更接近于普通的Web应用，每个页面的访问时间也较为平均。但是否能结合这两种形式的优点，在使用过程中既能更流畅，还能使首屏加载时间趋近于正常呢？这也是 Amaple 所要解决的。

开放式

和其他JavaScript框架或库相同， Amaple 也希望通过社区的力量来丰富自己，所以 Amaple
的插件模块除了支持自身的插件格式外，还支持符合AMD和iife规范的插件，这也就意味着你可以使用如lodash、socket.io等几乎所有工具类js库。同时还会推出一些辅助工具让开发者更方便发布自己的插件或组件。

无薪招募伙伴

如果你是一位热爱并具有丰富经验的Web前端工程师，那你一定希望创造一款优秀的JavaScript框架或库，因为这样才能凸显出你高超的编码设计能力，也为你的人生成绩单上重重地划上一笔，那刚好，现在就是你的机会，来成为 Amaple Team 的伙伴吧。
正如你所看到的，我们是无薪招募伙伴而非招聘员工，所以不需要你将所有时间都花在这，你照样可以继续你的本职工作，而我们希望加入我们的是真正热爱并希望致力于创造一个优秀js框架的人，当然，我们也不会让你一无所获：

• 专属荣誉，这是作为 Amaple Team 中的一员理应得到的，我们会在官网中公布所有成员并颁发专属徽章以示属于你的那份荣誉；
• 后期的盈利分红，虽然 Amaple 是开源的，但我们还是能利用它和团队的价值创造盈利，只要 Amaple 能提供足够多的价值；
• 了解更多JavaScript框架和库的核心算法与结识前端技术大牛，这对于你来说可能是更宝贵的一份财富。

我们此阶段的招募只有3个名额，如果你对此感兴趣，请发送邮件到jou@amaple.org，并具体回答以下几个问题：
1.姓名和年龄
2.当前职业和就职所在地
3.请尽量让我们明白你对JavaScript框架或库的经验丰富程度
4.为什么想要加入 Amaple Team

结尾

如果你对 Amaple 也有所期待，可以关注此专题获取最新信息，同时可在评论区打出你的期待分值（满分为5分）及期待的功能。

如果你想了解更多关于 Amaple 的相关信息，请移步：

• 点此查看Amaple框架更多详情
• Amaple官方QQ群：674036951