专栏首页企鹅号快讯Stimulus:让web应用在移动端达到原生体验

Stimulus:让web应用在移动端达到原生体验

【IT168 资讯】很多开发者一年来通过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与其他资产包装系统。而且,如果不需要构建步骤,只需在页面上放置一个标记,就可以轻松完成业务。

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

本文来自企鹅号 - IT168媒体

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Web前端开发的四个阶段

    第一阶段:HTML的学习 超文本标记语言(HyperText Mark-up Language 简称HTML)是一个网页的骨架,无论是静态网页还是动态网页,最终...

    企鹅号小编
  • 前端学习自学笔记:day01

    在这里要跟大家说声抱歉,本人拖更太久啦.现在在自学前端,我每天会把自己的总结笔记发上来分享给大家,希望对大家有帮助. 在此之前先为大家显示下前端工程师的路线图:...

    企鹅号小编
  • 渗透技巧——从Admin权限切换到System权限

    0x00 前言 在渗透测试中,某些情况下需要用到system权限,例如操作注册表HKEY_LOCAL_MACHINE\SAM\SAM 恰巧最近看到了一篇文章介绍...

    企鹅号小编
  • HTML是什么?HTML版本发展

     参考链接:http://www.w3cwhy.com/css-html/w3c-html.html

    黑泽君
  • 学习纲要:HTML 基础概念

    Joel
  • 【前端】初识HTML

    刚开始接触HTML的时候,对一些名词多少会有点疑问。在学习之前,不如先弄清楚它们是什么,以及他们之间的关系。

    Gavin-ZYX
  • 01.HTML教程/简介/基础

    01.HTML教程/简介/基础 HTML 教程- (HTML5 标准) 超文本标记语言(英语:HyperText Markup Language,简称:HTML...

    Java帮帮
  • SpringBoot系列之日志框架介绍及其原理简介

    版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。 ...

    SmileNicky
  • HTML JS DOM

      当网页被加载时,浏览器会创建页面的文档对象模型(Document Object Model)。HTML DOM 模型被构造为对象的树。

    饮水思源为名
  • 学习纲要:常见标签和属性

    Joel

扫码关注云+社区

领取腾讯云代金券