Webinar 10/31/2012 - Front End UI Performance Optimizations

Version 3

     

    FRONT END UI OPTIMIZATIONS

    Over the past several weeks, we have been focused on performance related topics and assisting new users adopting RhoMobile Suite. We did an HTML5 performance overview webinar and also posted a blog on optimizing RhoElements configuration and another blog that included a performance patch for Windows Mobile.  In this webinar we focus on how rendering and CSS3 can cause performance issues, high CPU utilization and drain battery life on mobile devices. Watch the webinar to understand what a Reflow is, why they can be a problem, how to spot them and most importantly how to avoid them. Then we take a look at a simple list view and see how to make it more smooth when scrolling. You will see how to spot how certain CSS3 attributes like box-shadow, rgbA, and rounded corners can be a problem in mobile devices

     

    Some Questions asked during this webinar:

    (Jump to QA section of the webinar)

    Q: Is there a plugin or tool to 'see' the reflows in a page?

    Q: Can too much JS hurt performance? For e.g., if we overuse JQM, would it bloat the app size and would it affect performance? How about security?

    Q: How would it affect performance if, say in .erb file we include Ruby code, which at times, is inevitable, say, for outputting info based on certain logic

    Q: jQuery Mobile rather quickly without error on other Webkit based mobile devices (iOS, Android, WebKit) leveraging techniques like CSS3, reflow, rounded corners, etc. What's different about RhoElements that impacts performance on Windwos Mobile?

    Q: If you were just starting out, how would you set up your development environment and what tools are must haves?

    Q: What are your thoughts on using jqMobi over JQM?

    Q: Hi Rob. When you write One Single Page Applications (pages are divs), do you think the performance is better than pages in different files?

     

     

    RESOURCE OF THE WEEK - MUST FOLLOW - PAUL IRISH

    (Jump to this portion of the video) In the past few webinars we highliughted some tools to make our life easier, but this week we highlight someone that I think is a must follow if you are building HTML5 based mobile applications. Paul Irish is a front-end developer, a Google Chrome dev relations guy, a jQuery Team member, a lead developer of Modernizr, Yeoman,CSS3 Please and HTML5 Boilerplate, a curator of HTML5 Rocksand is involved in a myriad of projects related to HTML5. I recently saw him present at the HTML5 DevConf in San Francisco a few weeks back and took a lot of inspiration from his work to present the material in this webinar. He is very active in the developer community and often has many useful resources linked to his website http://paulirish.com

     

    SLIDES & WEBINAR MATERIAL

    Slides: https://docs.google.com/open?id=0BxNYkwbDiyxZRVhfazlycW5yU2c

    Scroll Test (attached)

    DOM Monster:http://mir.aculo.us/dom-monster/