全新单页JavaScript框架Amaple

单页Web应用做为新一代Web模式，为用户提供了更流畅的体验知足感。早在Chrome五、IE8和Firefox3的年代就能够经过hash技术实现单页Web应用，而HTML5新history API的出现让单页Web应用从幕后迅速走向台前。 Amaple 做为一款体验优先的JavaScript单页框架，能够在不依赖其余工具的前提下快速开发单页Web应用，这也意味着那些只掌握了前端基础知识的开发者也能很容易上手开发。在开始具体聊Amaple单页框架前，咱们先聊聊单页Web应用自己，从简介绍，单页Web应用一般由一个主页面及若干个模块构成，在页面跳转或表单提交期间不会刷新浏览器（人为刷新除外），使用起来它更像桌面应用，导致许多著名的互联网公司都在不断地转向它，如Google、Twitter、Facebook，国内的有百度搜索、百度翻译、阿里巴巴淘宝网的商品列表页、阿里妈妈控制台等。

---

单页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