很多开发者一年来通过Basecamp写了很多JavaScript,但是并没有用它来创建现代意义上的“JavaScript应用程序”。所有的应用程序都以服务器端呈现的HTML为核心,然后添加一些JavaScript来使其看起来更棒。

当然,并不是说单页JavaScript应用程序的激增没有什么好处。主要的是更快,更流畅的接口让整页快速刷新。我们希望所有应用程序用客户端渲染重写所有东西,或者在移动设备上完全原生。

这个愿望可以得到一种解决方案:Turbolinks和Stimulus。

Turbolinks从GitHub上一种叫做pjax的方法开始,基本概念保持不变。整页刷新通常感觉慢,因为浏览器必须处理从服务器发送的一堆HTML。浏览器很快,而且在大多数情况下,HTML有效载荷往往比JSON有效载荷更大(特别是使用gzip),原因是CSS和JavaScript必须重新初始化并重新应用到页面。无论文件本身是否被缓存,如果你有相当多的CSS和JavaScript,这可能会很慢。

为了避免这种重新初始化,Turbolinks像单页面应用程序一样保持一个持续的过程,它拦截链接并通过Ajax加载新页面,服务器仍然返回完整的HTML文档。

单凭这一策略就可以使大多数应用程序中的操作变得快速(如果能够在100-200ms内返回服务器响应,这对于高速缓存来说是非常可能的)。

Stimulus计划将最佳模式汇集到一个适度的小型框架中,围绕着三个主要概念:控制,目标和动作属性。

Stimulus是一个谦虚但雄心壮志的JavaScript框架。它并不试图接管整个前端-事实上,它根本不关心HTML渲染。相反,它的设计是为了让HTML有足够多的行为。Stimulus不会自动创建HTML,而是将其附加到现有HTML文档。Stimulus与Turbolinks配对可以最小的努力为快速,引人注目的应用提供完整的解决方案。

它是如何工作的呢?用控制器,目标和动作属性来丰富HTML:

代码示范

然后写一个兼容控制器。Stimulus使其自动生效:

代码示范

Stimulus可以不断刷新页面,只要属性出现或消失,就会踢入页面。 它适用于DOM的任何更新,无论是整页加载,Turbolinks页面更改还是Ajax请求,Stimulus可以管理整个生命周期。

开发者可以根据Stimulus手册花费五分钟的时间写下一个控制器。

安装Stimulus

Stimulus与webpack资产包装器集成,以自动从应用程序中的文件夹加载控制器文件。

开发者也可以使用Stimulus与其他资产包装系统。而且,如果不需要构建步骤,只需在页面上放置一个<script>标记,就可以轻松完成业务。

感兴趣的用户可以自行在Github上搜索,欢迎交流使用体验!

JS开源框架Stimulus:让web应用在移动端达到原生体验!相关推荐

  1. Driver.js - 开源无依赖的 web 新手交互引导工具库,功能强大、高度可定制

    可以快速实现新手引导效果,自带动画,体验优秀,而且还能高度定制. 关于 Driver.js Driver.js 是一个可以轻松实现新手指引交互的 javascript 工具库,主要的作用是为刚接触应用 ...

  2. iPhone / iPod Touch 文件传输解决方案 – 开源框架:Cocoa Web Resource Project

    到目前为止,也就是iPhone SDK 2.2 ,苹果仍然没有为开发者提供一个文件传输的解决方案.如果一个应用需要为用户提供往iPhone上传文件的功能,大抵会采用下面几种方法之一: 通过一个链接从网 ...

  3. 10个最好的 Node.js MVC 框架

    Node.js 是最流行的 JavaScript 服务端平台,它允许建立可扩展的 Web 应用程序.Node.js 包含不同类型的框架,如 MVC 框架.全栈框架.REST API  以及大量的服务器 ...

  4. 微信小程序好用的开源框架

    这是最近看到的一篇都是干货的文章,特此分享给大家 特别说明:这是我目前在接触过和使用过的,自认为是最好用的一个小程序开源框架库.小程序到底有多火,看看目前推出的开源框架以及组件库就知道了.由于小程序开 ...

  5. JS验证框架的使用方法

    今天着重介绍的是JS验证框架在Java Web项目中的应用, JSValidation要去http://cosoft.org.cn/projects/jsvalidation中下载最新版本. JSVa ...

  6. 阿里P7架构师要求:Web核心+开源框架+大型网站架构!含面试题目!

    阿里P7技能(一):数据结构和算法: 常用数据结构:链表.堆与栈.哈希表等,常用的排序等. 掌握:精通 阿里P7技能(二):java高级 java相关的高级特性:JVM.多线程高并发.网络等. 掌握: ...

  7. Web前端开发必不可少的10个开源框架

    作为一名前端开发人员,持续学习是必备的技能之一.随着新技术的不断涌现,前端开发框架越来越多,各种框架现.版本的更新此起彼伏. 前端领域的技术不断更迭,让人眼花缭乱.面对这么多框架,我们应该如何选择?接 ...

  8. web开源框架大汇总

    博客地址:http://blog.csdn.net/chow__zh/article/details/51194817 Struts 项目简介信息 Struts是一个基于Sun J2EE平台的MVC框 ...

  9. OSC 十月新增开源项目:号称最快的 Node.js 应用框架来了

    立冬已过,人们认为这是夏天的终结,冬天的开始.立,建始也:冬,终也,万物收藏也.不过在开源的世界里,开发者并不畏惧寒冷,对技术的不懈追求也未曾终结. 开源的世界总是精彩纷呈,十月份,开源中国社区总共收 ...

最新文章

  1. 2D图片3秒变立体,Adobe实习生的智能景深算法,登上顶级期刊
  2. Successor,Fesible Successor,FD,AD,eigrp
  3. 1516. 棋盘上的车[组合数学][状态压缩]
  4. 深度好文:Linux操作系统内存
  5. flowable6.4.2流程审批后涉及到的表
  6. 让我们来比较C#,C++和Java之间重写虚函数的区别
  7. 在计算机系统中使用加载器,在个人计算机系统中从软盘加载基本输入/输出系统的设备和方法...
  8. 自动定位失败_自动化测试01
  9. 190107每日一句
  10. IDEA 2019 修改中文字体
  11. python将小数转化为二进制_Python实现的十进制小数与二进制小数相互转换功能
  12. php 路径解析,ThinkPHP 5 结构与路径解析
  13. JavaScript智能填写续写版(QQ邮箱地址栏简化版)
  14. php 发送带附件邮件
  15. 微博个人信息多维度详解
  16. ABP VNext学习日记20
  17. 使用命令行,下载网络m3u8文件为mp4视频,保存m3u视频
  18. 影像组学matlab,【影像组学】影像组学研究进展介绍
  19. 天池赛:淘宝用户购物行为数据可视化分析
  20. Python学习坑——init

热门文章

  1. linux监控命令详解
  2. Android动画之Property属性动画
  3. 08.self关键字
  4. Extjs 动态改变列名
  5. 华思视频 CCNA 听而思
  6. JSTL EL对Map集合的支持
  7. linux平滑升级nginx,Nginx的平滑重启和平滑升级,nginx
  8. Nginx的rewrite之rewrite_log指令
  9. MyBatis 插件原理与自定义插件-代理和拦截是怎么实现的?
  10. MyBatis 实际使用案例-编程式使用