使用 React.js 和应用缓存构建快速同步应用程序

简介:

对大部分应用系统来说,在某种程度上,应用程序的快速加载和及时取得最新数据两个方面同样重要。倾向于积极使用缓存数据,可能会导致提供的数据陈旧;而倾向于及时获取最新数据,可能会牺牲加载时间。当然,也可以鱼与熊掌兼得,但是可能会需要更多的硬件,更复杂的软件,或两者都需要(意味着一个字:钱)。

如何权衡取决于特定的应用系统和业务要求,本文就是我们的团队使用React.js和应用缓存来解决这一问题的一个实例。

我们从哪里开始

标签是每当你在浏览器上打开一个标签去送出一份慈善捐助的好理由。这是一件很伟大的事——但事实上,我们仅仅点击了一个价值 100,000美元的里程碑来完成慈善捐助——但是,我们有一个疑问。

我们的应用也太慢了。大家都明白这点。当用户更换新的标签页时,他们需要得是速度与连贯性。而且,我们也没有宣布:载入页面的延迟成为了人们关闭标签的首选理由。

我们想让我们的页面除了更有用,还要更好地被接受。但随着我们向页面中加了些附加功能后, 我们的页面载入问题也越来越突出了。因为人们需要我们的 APP 能快速地提供内容信息。

我们正在用 Django 的模板系统做一个交互式服务器来召唤或服务一个页面。当使用者是在快速的网络环境中,而且我们的服务状态是健康的情况下,服务器响应时间是 ~65毫秒,还不是比较惨。然而,如果在你父母的房子*里打开一个标签,或者我们的数据库产生了一个短暂的停顿时,这可能会给你在对其的信任上,泼了一盆冷水。

比较让人烦恼,我应该承认我们所建立的 APP 并没有采用标准的前端框架,除了仅仅是使用了 JQuery。 考虑到我们的 APP 有太多的互动,而且太混乱了。在各种各样的代码类型上,我要怎么才能喜欢它。

我们需要去修改它。

  • 我爱你们,老妈、老爸!时代华纳有线电视, 没有太多什么了。
    明确我们的需求

当准备去处理这个问题时,我们必须决定优先处理哪些以及放弃哪此需求。在这里我们提出了一些建议:

页面必须能快速载入。这是没得讨价还价的。

我们的页面必须是非本地 URL。我们提高了 VIA 捐助广告的价格,网络在线广告需要去核识真实性来确保这些广告是够安全的。由于浏览器端的用户页面插件总是将我们的广告移除,以至于网络广告只能使用 http 或 https 协议。

我们希望页面中的内容是最新的,但不必是实时性的。我们通过设备对用户数据进行同步, 并保持完美的体验。我们以分页的形式显示出用户的反馈;例如,我们显示出新用户的统计数据;我们有时也要运行捐助设备来以滚动条的形式显示出 "募集资金" 量。虽然我们愿意去接收一定程度上稍旧的数据(就像页面展示后才提交数据),但理想得是在提交数据的瞬间发生。

我们要减少前端混乱的代码。将非优先权最高的代码肃清,这是一件让人兴奋的事。

文章转载自 开源中国社区 [http://www.oschina.net]

相关文章
|
7天前
|
设计模式 前端开发 JavaScript
【JavaScript 技术专栏】JavaScript 设计模式与实战应用
【4月更文挑战第30天】本文探讨JavaScript设计模式在提升开发效率和代码质量中的关键作用。涵盖单例、工厂、观察者、装饰器和策略模式,并通过实例阐述其在全局状态管理、复杂对象创建、实时数据更新、功能扩展和算法切换的应用。理解并运用这些模式能帮助开发者应对复杂项目,提升前端开发能力。
|
11天前
|
JavaScript 前端开发
js变量的作用域、作用域链、数据类型和转换应用案例
【4月更文挑战第27天】JavaScript 中变量有全局和局部作用域,全局变量在所有地方可访问,局部变量只限其定义的代码块。作用域链允许变量在当前块未定义时向上搜索父级作用域。语言支持多种数据类型,如字符串、数字、布尔值,可通过 `typeof` 检查类型。转换数据类型用 `parseInt` 或 `parseFloat`,将字符串转为数值。
17 1
|
28天前
|
JavaScript 前端开发 算法
JavaScript 中的 if 判断:深入理解、实战应用与进阶技巧
【4月更文挑战第7天】探索 JavaScript 中的 if 判断语句,它是构建逻辑清晰程序的基础。了解其概念、语法、应用示例及编程技巧,包括条件控制、else if 结构、三目运算符。注意条件表达式简洁性,避免 falsy 值陷阱,利用逻辑运算符优化,并减少 if 嵌套。实践这些技巧将提升编程能力和代码质量。
23 0
|
29天前
|
JavaScript 前端开发 算法
JavaScript 中算术操作符:全面解读、实战应用与最佳实践
【4月更文挑战第5天】本文探讨JavaScript中的算术操作符,包括加、减、乘、除、求余、自增、自减及复合赋值等,强调理解与熟练运用它们对提升编程效率和代码准确性的重要性。文中通过示例介绍了各种操作符的用法,同时提醒注意数据类型转换、浮点数精度、除以零错误以及利用短路求值优化逻辑等问题。通过学习,读者能更好地掌握算术操作符在不同场景的应用,提升编程技能。
23 1
|
1月前
|
JavaScript
使用Vue.js做一个简单的计时器应用,好玩实在哦
使用Vue.js做一个简单的计时器应用,好玩实在哦
|
1天前
|
数据采集 JavaScript 数据可视化
Node.js爬虫在租房信息监测与分析中的应用
Node.js爬虫在租房信息监测与分析中的应用
|
7天前
|
开发框架 JavaScript 前端开发
【JavaScript 与 TypeScript 技术专栏】TypeScript 在 Web 开发中的前沿应用
【4月更文挑战第30天】TypeScript在Web开发中日益重要,以其强大的类型系统提升代码质量,支持组件化开发,与React、Vue、Angular等框架良好集成。在大型项目管理中,TypeScript助于代码组织和优化,提高团队协作效率。此外,它提升开发体验,提供智能提示和错误检测。众多成功案例证明其前沿应用,未来将在Web开发领域持续发挥关键作用。
|
7天前
|
前端开发 JavaScript 网络协议
【JavaScript技术专栏】WebSockets在JavaScript中的应用
【4月更文挑战第30天】WebSocket是为解决HTTP协议在实时通信上的局限而诞生的技术,提供全双工、持久连接的通信方式,适合在线聊天、实时游戏等场景。JavaScript中的WebSocket API使浏览器与服务器能建立持久连接,通过事件处理连接、发送/接收数据及错误。相较于AJAX轮询和长轮询,WebSockets更高效、实时,是现代Web实时通信的优选。
|
7天前
|
移动开发 JavaScript 前端开发
【JavaScript技术专栏】Web Worker在JavaScript中的应用
【4月更文挑战第30天】HTML5的Web Worker API解决了JavaScript单线程性能瓶颈问题,允许在后台线程运行JS代码。本文介绍了Web Worker的基本概念、类型、用法和应用场景,如复杂计算、图像处理和数据同步。通过实例展示了搜索建议、游戏开发和实时数据分析等应用,并提醒注意其无法直接访问DOM、需消息传递通信以及移动端资源管理。Web Worker为前端开发提供了多线程能力,提升了Web应用性能和用户体验。
|
8天前
|
JSON 前端开发 JavaScript
使用JavaScript制作一个简单的天气应用
使用JavaScript制作一个简单的天气应用