您对 RhoMobile 的体验如何? JqueryMobile +淘汰赛?

发布于 2024-12-28 01:47:38 字数 332 浏览 4 评论 0原文

我和我的团队一直致力于使用 RhoMobile + JqueryMobile + KnockoutJS 为我们的组织构建多个跨平台(BlackBerry、Android、iOS)移动应用程序。考虑到当今跨平台移动应用程序开发的状态,开发体验是可以接受的。当在移动设备本身上使用该应用程序时,挫败感开始出现。性能问题是我们目前的首要痛点。我不想让这成为一种咆哮,但我想知道其他人做了什么来缓解性能问题。具体来说,黑莓设备上的性能问题。我已尝试RhoMobile 文档中推荐的解决方案。也许社区还可以提供其他提示。感谢您提供的任何反馈。

My team and I have been engaged in building several cross-platform (BlackBerry, Android, iOS) mobile apps for our organization using RhoMobile + JqueryMobile + KnockoutJS. The development experience is acceptable considering the state of cross-platform mobile application development today. The frustration starts to come when using the application on the mobile devices themselves. Performance issues are the number one pain point for us at this time. I don't want this to be a rant but I would like to know what others have done to alleviate performance problems. Specifically, performance issues on BlackBerry devices. I've tried the solutions recommended in the RhoMobile docs. Perhaps there are other hints the community can offer. I appreciate any feedback you can provide.

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(2

梦开始←不甜 2025-01-04 01:47:38

我只有 Jquery mobile 的经验,虽然我喜欢它所带来的快节奏开发,但如果有时间,我总是会编写一个本机应用程序。由于 Safari 的 CSS3 支持,Jquery 移动应用程序在 iOS 设备上运行效果最佳。幻灯片等动画在 Android 浏览器上非常不稳定,在黑莓浏览器上则完全劣质。

除此之外,Jquery mobile 的工作方式基本上是从不切换页面。每次您请求一个新页面(通过超链接或其他方式)时,它都会通过 AJAX 请求获取该页面并将其插入到当前页面的 DOM 中(您可以显式请求这种情况不要发生,但您不能“滑动”到另一个页面)页)。这种形式的导航在经过较长的导航链后会导致问题。更不用说,您必须非常小心,整个应用程序中不能有两个元素共享相同的 id。

我制作了这个 Jquery 移动应用程序作为学校项目的演示,因此它满足了我所需的目的:快速开发,并作为概念证明。

然而,对于我自己公司的产品,我们正在开发移动应用程序,除了本机应用程序之外,我永远不会选择任何其他应用程序。开发确实需要更长的时间,所以这取决于您的要求。

对您的评论的补充:

Jquery Mobile 所做的一切都是 Jquery 无法单独完成的。但是,使用 jquery,如果添加 CSS3 动画、使用单 DOM 导航样式等,您将遇到同样的问题。问题不在于 Jquery mobile。问题是,很少有移动浏览器可以处理 Jq mobile 使用的效果。就像我说的,iPhone 做得很好。这部分是因为 Safari 3 的 CSS 3 实现,主要是因为 iOS 优先考虑 UI 线程高于后台工作线程。

I only have experience with Jquery mobile, and while I loved the fast paced development it makes possible, if I had the time, I would always code a native app. Jquery mobile apps work best on iOS devices due to Safari's CSS3 support. Animations like slide etc are quite choppy on Android browser and downright shoddy on Blackberry's browser.

Apart from that, Jquery mobile works by basically never switching pages. Every time you request a new page (via a hyperlink or whatever), it fetches the page via an AJAX request and inserts it into the current page's DOM (you can explicitly request this not to happen, but then you cannot 'slide' to another page). This form of navigation causes problems after a long-ish chain of navigations. Not to mention, you have to be very careful no two elements across your entire application share the same id.

I made this Jquery mobile app as a demo for a school project, so it served the purposes I needed: fast development and it served as a proof of concept.

However, for my own company's product, we are developing mobile apps, and I would never go with anything but native apps for that. It does take a lot longer to develop, so it depends on your requirement.

Addition to your comment:

Nothing that Jquery Mobile does cannot be done by Jquery alone. But, using jquery, if you add the CSS3 animations, use the single-DOM navigation style etc., you'll suffer the same issues. The problem isn't with Jquery mobile. The problem is, few mobile browsers can handle the effects Jq mobile employs. Like I said, iPhone does good. This is partly because of Safari 3's CSS 3 implementation, and mostly because the iOS prioritizes UI threads above background workers.

故事与诗 2025-01-04 01:47:38
  1. 从 CSS 中删除 box-shadowtext-shadow,它会使页面变慢。
  2. 您还可以将 -hover-down 类设置为与其派生类相同,以便浏览器在您点击某个元素时不必重绘页面(就像 listview 链接)在滚动时(这使得在我的 Android 2.3 设备上滚动更加顺畅)。

要删除阴影:

.ui-shadow,
.ui-btn-up-a,
.ui-btn-hover-a,
.ui-btn-down-a,
.ui-body-b,
.ui-btn-up-b,
.ui-btn-hover-b,
.ui-btn-down-b,
.ui-bar-c,
.ui-body-c,
.ui-btn-up-c,
.ui-btn-hover-c,
.ui-btn-down-c,
.ui-bar-c,
.ui-body-d,
.ui-btn-up-d,
.ui-btn-hover-d,
.ui-btn-down-d,
.ui-bar-d,
.ui-body-e,
.ui-btn-up-e,
.ui-btn-hover-e,
.ui-btn-down-e,
.ui-bar-e,
.ui-overlay-shadow,
.ui-shadow,
.ui-btn-active,
.ui-body-a,
.ui-bar-a {
    text-shadow: none;
    box-shadow: none;
    -webkit-box-shadow: none;
}

要使 -hover 类相同,您需要更改样式,如下所示:

.ui-btn-hover-a {
    border: 1px solid       #000 ;
    background:             #444444 ;
    font-weight: bold;
    color:                  #fff ;
    text-shadow: 0  -1px  1px  #000 ;
    background-image: -webkit-gradient(linear, left top, left bottom, from( #666 ), to( #444 )); 
    background-image: -webkit-linear-gradient( #666 , #444 ); 
    background-image:    -moz-linear-gradient( #666 , #444 ); 
    background-image:     -ms-linear-gradient( #666 , #444 ); 
    background-image:      -o-linear-gradient( #666 , #444 ); 
    background-image:         linear-gradient( #666 , #444 );
}

与其派生类相同(在本例中为 .ui-btn- up-a):

.ui-btn-hover-a {
    border: 1px solid       #222 ;
    background:             #333333 ;
    font-weight: bold;
    color:                  #fff ;
    text-shadow: 0  -1px  1px  #000 ;
    background-image: -webkit-gradient(linear, left top, left bottom, from( #555 ), to( #333 )); 
    background-image: -webkit-linear-gradient( #555 , #333 ); 
    background-image:    -moz-linear-gradient( #555 , #333 ); 
    background-image:     -ms-linear-gradient( #555 , #333 ); 
    background-image:      -o-linear-gradient( #555 , #333 ); 
    background-image:         linear-gradient( #555 , #333 );
}

您还可以对 -down 类执行此操作,这些类在元素上发生 tap 事件时触发:

.ui-btn-down-a {
    border: 1px solid       #222 ;
    background:             #333333 ;
    font-weight: bold;
    color:                  #fff ;
    text-shadow: 0  -1px  1px  #000 ;
    background-image: -webkit-gradient(linear, left top, left bottom, from( #555 ), to( #333 )); 
    background-image: -webkit-linear-gradient( #555 , #333 ); 
    background-image:    -moz-linear-gradient( #555 , #333 ); 
    background-image:     -ms-linear-gradient( #555 , #333 ); 
    background-image:      -o-linear-gradient( #555 , #333 ); 
    background-image:         linear-gradient( #555 , #333 );
}

以下是指向的链接jQuery Mobile 的非缩小版本1.0 CSS 样式表: http://code.jquery.com/mobile/latest /jquery.mobile.css

  1. Remove box-shadow and text-shadow from the CSS, it makes the pages quite a bit slower.
  2. You can also set the -hover and -down classes to be the same as their derivatives so that the browser doesn't have to redraw the page when you tap an element (like a listview link) when scrolling (this made scrolling on my Android 2.3 device a lot smoother).

To remove shadows:

.ui-shadow,
.ui-btn-up-a,
.ui-btn-hover-a,
.ui-btn-down-a,
.ui-body-b,
.ui-btn-up-b,
.ui-btn-hover-b,
.ui-btn-down-b,
.ui-bar-c,
.ui-body-c,
.ui-btn-up-c,
.ui-btn-hover-c,
.ui-btn-down-c,
.ui-bar-c,
.ui-body-d,
.ui-btn-up-d,
.ui-btn-hover-d,
.ui-btn-down-d,
.ui-bar-d,
.ui-body-e,
.ui-btn-up-e,
.ui-btn-hover-e,
.ui-btn-down-e,
.ui-bar-e,
.ui-overlay-shadow,
.ui-shadow,
.ui-btn-active,
.ui-body-a,
.ui-bar-a {
    text-shadow: none;
    box-shadow: none;
    -webkit-box-shadow: none;
}

To make the -hover classes the same you will need to change styles like this:

.ui-btn-hover-a {
    border: 1px solid       #000 ;
    background:             #444444 ;
    font-weight: bold;
    color:                  #fff ;
    text-shadow: 0  -1px  1px  #000 ;
    background-image: -webkit-gradient(linear, left top, left bottom, from( #666 ), to( #444 )); 
    background-image: -webkit-linear-gradient( #666 , #444 ); 
    background-image:    -moz-linear-gradient( #666 , #444 ); 
    background-image:     -ms-linear-gradient( #666 , #444 ); 
    background-image:      -o-linear-gradient( #666 , #444 ); 
    background-image:         linear-gradient( #666 , #444 );
}

To be the same as it's derivative (in this case that would be .ui-btn-up-a):

.ui-btn-hover-a {
    border: 1px solid       #222 ;
    background:             #333333 ;
    font-weight: bold;
    color:                  #fff ;
    text-shadow: 0  -1px  1px  #000 ;
    background-image: -webkit-gradient(linear, left top, left bottom, from( #555 ), to( #333 )); 
    background-image: -webkit-linear-gradient( #555 , #333 ); 
    background-image:    -moz-linear-gradient( #555 , #333 ); 
    background-image:     -ms-linear-gradient( #555 , #333 ); 
    background-image:      -o-linear-gradient( #555 , #333 ); 
    background-image:         linear-gradient( #555 , #333 );
}

You can also do this for the -down classes which are triggered when a tap event occurs on an element:

.ui-btn-down-a {
    border: 1px solid       #222 ;
    background:             #333333 ;
    font-weight: bold;
    color:                  #fff ;
    text-shadow: 0  -1px  1px  #000 ;
    background-image: -webkit-gradient(linear, left top, left bottom, from( #555 ), to( #333 )); 
    background-image: -webkit-linear-gradient( #555 , #333 ); 
    background-image:    -moz-linear-gradient( #555 , #333 ); 
    background-image:     -ms-linear-gradient( #555 , #333 ); 
    background-image:      -o-linear-gradient( #555 , #333 ); 
    background-image:         linear-gradient( #555 , #333 );
}

Here is a link to the non-minified version of the jQuery Mobile 1.0 CSS style-sheet: http://code.jquery.com/mobile/latest/jquery.mobile.css

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文