Extreme Mobile App Performance: Native to Web

•

0 likes•444 views

The document discusses techniques for achieving extreme mobile app performance when building apps using web technologies. It covers challenges like large amounts of dynamic data, unknown item sizes and the need for 60fps scrolling. Solutions discussed include recycling DOM elements, prioritizing elements, compositing layers, deferred image loading, and sandboxing content into iframes. Frameworks help address cross-browser issues and connect these performance techniques.

Technology

Extreme Mobile App Performance:

Native to Web
Jacky Nguyen
Chief Mobile Architect - Sencha Inc.

jacky@sencha.com @nktpro

Wednesday, April 3, 13

“Our biggest mistake was
betting too much on HTML5”
Mark Zuckerberg - TechCrunch Disrupt 2012

Wednesday, April 3, 13

Fear

Doubt

Bashing

Wednesday, April 3, 13

Talk Talk Talk

Talk
Talk Talk

Talk
Talk

Talk
Talk

Talk

Wednesday, April 3, 13

Talk Talk Talk

Talk
Talk Talk

Talk
Talk

Talk
Talk
DO!
Talk

Wednesday, April 3, 13

The challenging parts

Wednesday, April 3, 13

The challenging parts
Constraints
•Lots of data
•Variety of content
•Unknown item sizes

Wednesday, April 3, 13

The challenging parts
Constraints
•Lots of data
•Variety of content
•Unknown item sizes

Requirements
•60fps scrolling
•Fast data loading
•Fast rendering
Wednesday, April 3, 13

Under the hood

UIWebView

UIWebView

Wednesday, April 3, 13

The problems

“So while utilizing web technology [...], people expect a fast,
reliable experience and our iOS app was falling short.”

Wednesday, April 3, 13

2

3

4

5

Web page approach
Wednesday, April 3, 13

Page vs app model
Web page Web app

Payload Huge, raw HTML Minimal data

State Stateless Stateful

Memory Increasing Constant

Performance Degrading Constant

Prioritization No Yes

Wednesday, April 3, 13

Shut up and code!

Wednesday, April 3, 13

Shut up and code!

•Pure web (HTML + CSS + JavaScript)
•Cross-platform
•Using Facebook’s own APIs
•Build on top of Sencha Touch 2
•1 engineer, 1 manager, 3 weeks

Wednesday, April 3, 13

Inﬁnite List techniques

Wednesday, April 3, 13

Inﬁnite List techniques

•Recycling
•Prioritizing
•Sandboxing

Wednesday, April 3, 13

Inﬁnite list - unknown item sizes

1

2

3

4

Wednesday, April 3, 13

Inﬁnite list - unknown item sizes

2

3

4

1

Wednesday, April 3, 13

Inﬁnite list - unknown item sizes

2

3

4

5

Wednesday, April 3, 13

Inﬁnite list - unknown item sizes

2

3

4

5 x

Wednesday, April 3, 13

Animation 101

A B

Wednesday, April 3, 13

Scroll Positioning

Wednesday, April 3, 13

Compositing for Inﬁnite List

Wednesday, April 3, 13

Compositing for Inﬁnite List
•Composite each item and the container independently
•Translate the container for every frame
•Translate each item once per re-rendering cycle

Wednesday, April 3, 13

Compositing

1

2

3

4

Wednesday, April 3, 13

Batch DOM read / write separately

1

2
3

4

5

Wednesday, April 3, 13

1

2
3

4
translate inner composite

5

Wednesday, April 3, 13

1

3 2

4
translate inner composite

5

Wednesday, April 3, 13

6

7
3

4
translate inner composite

5 render 6, 7 write

Wednesday, April 3, 13

6

7
3

4
translate inner composite

5 render 6, 7 write
read 6, 7 heights read - layout

Wednesday, April 3, 13

3

4
translate inner composite

5 render 6, 7 write
read 6, 7 heights read - layout
6
translate 6, 7 composite
7

Wednesday, April 3, 13

Style recalculation
Layout
Compositing

16.7ms Painting
Network requests
Image decoding
Data processing

Wednesday, April 3, 13

Style recalculation
Layout
Compositing

100ms Painting
Network requests
Image decoding
Data processing

Wednesday, April 3, 13

16ms
12ms
13ms Style recalculation
60ms
15ms Layout
13ms Compositing
16ms
40ms Painting
16ms Network requests
17ms
15ms Image decoding
55ms Data processing
14ms
17ms
35ms
Wednesday, April 3, 13

The AnimationQueue

60fps

Wednesday, April 3, 13

The AnimationQueue
Animation
Touch events
60fps

Image loading
Data loading

Image rendering

Wednesday, April 3, 13

Buffered rendering
Progressive Buffered

Wednesday, April 3, 13

Delayed image rendering

Wednesday, April 3, 13

Combined techniques

Wednesday, April 3, 13

Scalability problem

60fps

Wednesday, April 3, 13

Scalability problem

50fps 50fps

Wednesday, April 3, 13

Scalability problem

40fps 40fps 40fps

Wednesday, April 3, 13

Scalability problem

8ms layout cost
Wednesday, April 3, 13

Scalability problem

40ms layout cost
Wednesday, April 3, 13

By making it fast, I make it slow...

Wednesday, April 3, 13

document

IFRAME IFRAME IFRAME

60fps 60fps 60fps
Wednesday, April 3, 13

Extreme beneﬁts, frameworks required

•Bridge all events, remap coordinates
•Copy stylesheets dynamically
•Connect layouts
•Workaround browser bugs

Wednesday, April 3, 13

Stop reinventing the wheel

https://www.sencha.com/store/sencha-touch-bundle
Wednesday, April 3, 13

The document discusses how personalization and dynamic content are becoming increasingly important on websites. It notes that 52% of marketers see content personalization as critical and 75% of consumers like it when brands personalize their content. However, personalization can create issues for search engine optimization as dynamic URLs and content are more difficult for search engines to index than static pages. The document provides tips for SEOs to help address these personalization and SEO challenges, such as using static URLs when possible and submitting accurate sitemaps.

Lightning Talk #9: How UX and Data Storytelling Can Shape Policy by Mika Aldaba

ux singapore

How can we take UX and Data Storytelling out of the tech context and use them to change the way government behaves? Showcasing the truth is the highest goal of data storytelling. Because the design of a chart can affect the interpretation of data in a major way, one must wield visual tools with care and deliberation. Using quantitative facts to evoke an emotional response is best achieved with the combination of UX and data storytelling.

Succession “Losers”: What Happens to Executives Passed Over for the CEO Job?

Stanford GSB Corporate Governance Research Initiative

This document summarizes a study of CEO succession events among the largest 100 U.S. corporations between 2005-2015. The study analyzed executives who were passed over for the CEO role ("succession losers") and their subsequent careers. It found that 74% of passed over executives left their companies, with 30% eventually becoming CEOs elsewhere. However, companies led by succession losers saw average stock price declines of 13% over 3 years, compared to gains for companies whose CEO selections remained unchanged. The findings suggest that boards generally identify the most qualified CEO candidates, though differences between internal and external hires complicate comparisons.

THE MISSING MANUAL FOR DATA SCIENCE: REMIX. RESUSE. REPRODUCE from Structure:...

Gigaom

Piccolo coding dojo (milano xpug 2013-04-11)

Andrea Francia

The document summarizes a presentation on Test Driven Development (TDD) given on April 10, 2013. It includes an agenda with a review of TDD, practice with TDD, and retrospective. It discusses the core concept of TDD - writing a test, seeing it fail, making it pass, and repeating. Examples are provided for a calculator and file name extension. The three rules of TDD and how refactoring fits into the process are also outlined.

Building Lean, talk for #IWDevs

Benjamin Dyer

The document discusses intellectual property and copyright. It notes that all original creative works are automatically copyrighted upon creation. It describes what copyright gives the creator control over, including reproduction, derivatives, distribution, public performance, and digital transmission. The document outlines exceptions to copyright restrictions such as works in the public domain, fair use, Creative Commons, and GNU/Linux works. It provides guidance on determining what constitutes fair use based on factors like the purpose of the use, amount used, and commercial effects. The document also notes that modern authorship is often collaborative, distributed, and involves assembling preexisting information in new ways.

Identity and the Scholar, 2009 Allen Press Seminar, April 2009, Washington DC

Crossref

The document appears to be a presentation by Carol Anne Meyer about CrossRef and issues relating to digital identity for scholars. The presentation covers CrossRef's mission to enable identification and use of electronic content, challenges around digital identity including authentication, name variations and disambiguation, and potential solutions involving DOIs, contributor IDs and profiles. It also references further resources on digital identity and CrossRef's role in linking content and ensuring integrity.

unplug c^r

Jordan Presnick

Blog wars 2

Markaki- Markoulaki Language School

This document is a presentation about blogging in English language teaching. It discusses introducing blogging to students, how to set up blogs for classes, activities teachers can assign using blogs, and ways to assess student blog posts. Examples are provided of student blog work, showing benefits like creativity, additional practice at home, and communication with readers. Teachers are encouraged to promote blogging to increase student motivation and engagement with English.

Redesigning UBC Library

jtcchan

John Chan presented on redesigning the UBC Library website. The document provided a history of website redesigns from 1997 to 2011. It discussed the library's focus on improving its value proposition, homepage sections, and navigation clarity. The library received feedback that past redesigns involved too little consultation and testing. In response, the new redesign process includes a dedicated working group, internal feedback sessions, early project launch, and better communication. The presentation explored what constitutes a complete user experience design and emphasized the need for a holistic, team-based approach.

RSC Future of Technology in Education

Miles Metcalfe

Ravensbourne College is a small higher education institution specializing in design and communication. The document discusses trends in technology in education, including increased use of social software, cloud applications, mobile devices, and struggles with virtual learning environments. It also covers skills needed by IT professionals like network design, procurement, and digital literacy support. Challenges include managing applications as services, empowering innovation, and adapting Web 2.0 tools for education.

CSS3 and jQuery for Designers

lomalogue

The document outlines a presentation on CSS3 and jQuery for designers. It introduces the topics to be covered, which include new HTML5 features, CSS3 properties like colors, fonts, transforms and animations, and jQuery concepts like selecting elements, events, and animations. The presentation provides examples of how to use CSS3 and jQuery and recommends tools like Modernizr, Sass, CoffeeScript, and Codekit.

Email by the Numbers

Emma

Theres a rabbit on my symfony

Alvaro Videla

Mutation Testing for Task-Oriented Chatbots

Pablo Gómez Abajo

Conversational agents, or chatbots, are increasingly used to access all sorts of services using natural language. While open-domain chatbots - like ChatGPT - can converse on any topic, task-oriented chatbots - the focus of this paper - are designed for specific tasks, like booking a flight, obtaining customer support, or setting an appointment. Like any other software, task-oriented chatbots need to be properly tested, usually by defining and executing test scenarios (i.e., sequences of user-chatbot interactions). However, there is currently a lack of methods to quantify the completeness and strength of such test scenarios, which can lead to low-quality tests, and hence to buggy chatbots. To fill this gap, we propose adapting mutation testing (MuT) for task-oriented chatbots. To this end, we introduce a set of mutation operators that emulate faults in chatbot designs, an architecture that enables MuT on chatbots built using heterogeneous technologies, and a practical realisation as an Eclipse plugin. Moreover, we evaluate the applicability, effectiveness and efficiency of our approach on open-source chatbots, with promising results.

Fueling AI with Great Data with Airbyte Webinar

Zilliz

Nordic Marketo Engage User Group_June 13_ 2024.pptx

MichaelKnudsen27

Northern Engraving | Nameplate Manufacturing Process - 2024

Northern Engraving

Manufacturing custom quality metal nameplates and badges involves several standard operations. Processes include sheet prep, lithography, screening, coating, punch press and inspection. All decoration is completed in the flat sheet with adhesive and tooling operations following. The possibilities for creating unique durable nameplates are endless. How will you create your brand identity? We can help!

Main news related to the CCS TSI 2023 (2023/1695)

Jakub Marek

An English 🇬🇧 translation of a presentation to the speech I gave about the main changes brought by CCS TSI 2023 at the biggest Czech conference on Communications and signalling systems on Railways, which was held in Clarion Hotel Olomouc from 7th to 9th November 2023 (konferenceszt.cz). Attended by around 500 participants and 200 on-line followers. The original Czech 🇨🇿 version of the presentation can be found here: https://www.slideshare.net/slideshow/hlavni-novinky-souvisejici-s-ccs-tsi-2023-2023-1695/269688092 . The videorecording (in Czech) from the presentation is available here: https://youtu.be/WzjJWm4IyPk?si=SImb06tuXGb30BEH .

Apps Break Data

Ivo Velitchkov

How information systems are built or acquired puts information, which is what they should be about, in a secondary place. Our language adapted accordingly, and we no longer talk about information systems but applications. Applications evolved in a way to break data into diverse fragments, tightly coupled with applications and expensive to integrate. The result is technical debt, which is re-paid by taking even bigger "loans", resulting in an ever-increasing technical debt. Software engineering and procurement practices work in sync with market forces to maintain this trend. This talk demonstrates how natural this situation is. The question is: can something be done to reverse the trend?

Christine's Supplier Sourcing Presentaion.pptx

christinelarrosa

Introduction of Cybersecurity with OSS at Code Europe 2024

Hiroshi SHIBATA

I develop the Ruby programming language, RubyGems, and Bundler, which are package managers for Ruby. Today, I will introduce how to enhance the security of your application using open-source software (OSS) examples from Ruby and RubyGems. The first topic is CVE (Common Vulnerabilities and Exposures). I have published CVEs many times. But what exactly is a CVE? I'll provide a basic understanding of CVEs and explain how to detect and handle vulnerabilities in OSS. Next, let's discuss package managers. Package managers play a critical role in the OSS ecosystem. I'll explain how to manage library dependencies in your application. I'll share insights into how the Ruby and RubyGems core team works to keep our ecosystem safe. By the end of this talk, you'll have a better understanding of how to safeguard your code.

Freshworks Rethinks NoSQL for Rapid Scaling & Cost-Efficiency

ScyllaDB

High performance Serverless Java on AWS- GoTo Amsterdam 2024

Vadym Kazulkin

Java is for many years one of the most popular programming languages, but it used to have hard times in the Serverless community. Java is known for its high cold start times and high memory footprint, comparing to other programming languages like Node.js and Python. In this talk I'll look at the general best practices and techniques we can use to decrease memory consumption, cold start times for Java Serverless development on AWS including GraalVM (Native Image) and AWS own offering SnapStart based on Firecracker microVM snapshot and restore and CRaC (Coordinated Restore at Checkpoint) runtime hooks. I'll also provide a lot of benchmarking on Lambda functions trying out various deployment package sizes, Lambda memory settings, Java compilation options and HTTP (a)synchronous clients and measure their impact on cold and warm start times.

Overcoming the PLG Trap: Lessons from Canva's Head of Sales & Head of EMEA Da...

saastr

"Frontline Battles with DDoS: Best practices and Lessons Learned", Igor Ivaniuk

Fwdays

At this talk we will discuss DDoS protection tools and best practices, discuss network architectures and what AWS has to offer. Also, we will look into one of the largest DDoS attacks on Ukrainian infrastructure that happened in February 2022. We'll see, what techniques helped to keep the web resources available for Ukrainians and how AWS improved DDoS protection for all customers based on Ukraine experience

[OReilly Superstream] Occupy the Space: A grassroots guide to engineering (an...

Jason Yip

The typical problem in product engineering is not bad strategy, so much as “no strategy”. This leads to confusion, lack of motivation, and incoherent action. The next time you look for a strategy and find an empty space, instead of waiting for it to be filled, I will show you how to fill it in yourself. If you’re wrong, it forces a correction. If you’re right, it helps create focus. I’ll share how I’ve approached this in the past, both what works and lessons for what didn’t work so well.

Similar to Extreme Mobile App Performance: Native to Web

Intellectual property basics

Krista Kennedy

Identity and the Scholar, 2009 Allen Press Seminar, April 2009, Washington DC

Crossref

unplug c^r

Jordan Presnick

Blog wars 2

Markaki- Markoulaki Language School

Redesigning UBC Library

jtcchan

RSC Future of Technology in Education

Miles Metcalfe

CSS3 and jQuery for Designers

lomalogue

Email by the Numbers

Emma

Theres a rabbit on my symfony

Alvaro Videla

Similar to Extreme Mobile App Performance: Native to Web (9)

Intellectual property basics

Identity and the Scholar, 2009 Allen Press Seminar, April 2009, Washington DC

unplug c^r

Blog wars 2

Redesigning UBC Library

RSC Future of Technology in Education

CSS3 and jQuery for Designers

Email by the Numbers

Theres a rabbit on my symfony

Recently uploaded

Mutation Testing for Task-Oriented Chatbots

Pablo Gómez Abajo

Fueling AI with Great Data with Airbyte Webinar

Zilliz

Nordic Marketo Engage User Group_June 13_ 2024.pptx

MichaelKnudsen27

Northern Engraving | Nameplate Manufacturing Process - 2024

Northern Engraving

Main news related to the CCS TSI 2023 (2023/1695)

Jakub Marek

Apps Break Data

Ivo Velitchkov

Christine's Supplier Sourcing Presentaion.pptx

christinelarrosa

Introduction of Cybersecurity with OSS at Code Europe 2024

Hiroshi SHIBATA

Freshworks Rethinks NoSQL for Rapid Scaling & Cost-Efficiency

ScyllaDB

High performance Serverless Java on AWS- GoTo Amsterdam 2024

Vadym Kazulkin

Overcoming the PLG Trap: Lessons from Canva's Head of Sales & Head of EMEA Da...

saastr

"Frontline Battles with DDoS: Best practices and Lessons Learned", Igor Ivaniuk

Fwdays

[OReilly Superstream] Occupy the Space: A grassroots guide to engineering (an...

Jason Yip

Astute Business Solutions | Oracle Cloud Partner |

AstuteBusiness

Your One-Stop Shop for Python Success: Top 10 US Python Development Providers

akankshawande

Y-Combinator seed pitch deck template PP

c5vrf27qcz

Taking AI to the Next Level in Manufacturing.pdf

ssuserfac0301

Read Taking AI to the Next Level in Manufacturing to gain insights on AI adoption in the manufacturing industry, such as: 1. How quickly AI is being implemented in manufacturing. 2. Which barriers stand in the way of AI adoption. 3. How data quality and governance form the backbone of AI. 4. Organizational processes and structures that may inhibit effective AI adoption. 6. Ideas and approaches to help build your organization's AI strategy.

"$10 thousand per minute of downtime: architecture, queues, streaming and fin...

Fwdays

Direct losses from downtime in 1 minute = $5-$10 thousand dollars. Reputation is priceless. As part of the talk, we will consider the architectural strategies necessary for the development of highly loaded fintech solutions. We will focus on using queues and streaming to efficiently work and manage large amounts of data in real-time and to minimize latency. We will focus special attention on the architectural patterns used in the design of the fintech system, microservices and event-driven architecture, which ensure scalability, fault tolerance, and consistency of the entire system.

A Deep Dive into ScyllaDB's Architecture

ScyllaDB

Must Know Postgres Extension for DBA and Developer during Migration

Mydbops

Mydbops Opensource Database Meetup 16 Topic: Must-Know PostgreSQL Extensions for Developers and DBAs During Migration Speaker: Deepak Mahto, Founder of DataCloudGaze Consulting Date & Time: 8th June | 10 AM - 1 PM IST Venue: Bangalore International Centre, Bangalore Abstract: Discover how PostgreSQL extensions can be your secret weapon! This talk explores how key extensions enhance database capabilities and streamline the migration process for users moving from other relational databases like Oracle. Key Takeaways: * Learn about crucial extensions like oracle_fdw, pgtt, and pg_audit that ease migration complexities. * Gain valuable strategies for implementing these extensions in PostgreSQL to achieve license freedom. * Discover how these key extensions can empower both developers and DBAs during the migration process. * Don't miss this chance to gain practical knowledge from an industry expert and stay updated on the latest open-source database trends. Mydbops Managed Services specializes in taking the pain out of database management while optimizing performance. Since 2015, we have been providing top-notch support and assistance for the top three open-source databases: MySQL, MongoDB, and PostgreSQL. Our team offers a wide range of services, including assistance, support, consulting, 24/7 operations, and expertise in all relevant technologies. We help organizations improve their database's performance, scalability, efficiency, and availability. Contact us: info@mydbops.com Visit: https://www.mydbops.com/ Follow us on LinkedIn: https://in.linkedin.com/company/mydbops For more details and updates, please follow up the below links. Meetup Page : https://www.meetup.com/mydbops-databa... Twitter: https://twitter.com/mydbopsofficial Blogs: https://www.mydbops.com/blog/ Facebook(Meta): https://www.facebook.com/mydbops/

Recently uploaded (20)

Mutation Testing for Task-Oriented Chatbots

Fueling AI with Great Data with Airbyte Webinar

Nordic Marketo Engage User Group_June 13_ 2024.pptx

Northern Engraving | Nameplate Manufacturing Process - 2024

Main news related to the CCS TSI 2023 (2023/1695)

Apps Break Data

Christine's Supplier Sourcing Presentaion.pptx

Introduction of Cybersecurity with OSS at Code Europe 2024

Freshworks Rethinks NoSQL for Rapid Scaling & Cost-Efficiency

High performance Serverless Java on AWS- GoTo Amsterdam 2024

Overcoming the PLG Trap: Lessons from Canva's Head of Sales & Head of EMEA Da...

"Frontline Battles with DDoS: Best practices and Lessons Learned", Igor Ivaniuk

[OReilly Superstream] Occupy the Space: A grassroots guide to engineering (an...

Astute Business Solutions | Oracle Cloud Partner |

Your One-Stop Shop for Python Success: Top 10 US Python Development Providers

Y-Combinator seed pitch deck template PP

Taking AI to the Next Level in Manufacturing.pdf

"$10 thousand per minute of downtime: architecture, queues, streaming and fin...

A Deep Dive into ScyllaDB's Architecture

Must Know Postgres Extension for DBA and Developer during Migration

Extreme Mobile App Performance: Native to Web

1. Extreme Mobile App Performance: Native to Web Jacky Nguyen Chief Mobile Architect - Sencha Inc. jacky@sencha.com @nktpro Wednesday, April 3, 13

2. vs. Wednesday, April 3, 13

3. “Our biggest mistake was betting too much on HTML5” Mark Zuckerberg - TechCrunch Disrupt 2012 Wednesday, April 3, 13

4. Fear Doubt Bashing Wednesday, April 3, 13

5. Talk Talk Talk Talk Talk Talk Talk Talk Talk Talk Talk Wednesday, April 3, 13

6. Talk Talk Talk Talk Talk Talk Talk Talk Talk Talk DO! Talk Wednesday, April 3, 13

7. The challenging parts Wednesday, April 3, 13

8. The challenging parts Constraints •Lots of data •Variety of content •Unknown item sizes Wednesday, April 3, 13

9. The challenging parts Constraints •Lots of data •Variety of content •Unknown item sizes Requirements •60fps scrolling •Fast data loading •Fast rendering Wednesday, April 3, 13

10. Under the hood Wednesday, April 3, 13

11. Under the hood UIWebView UIWebView Wednesday, April 3, 13

12. The problems “So while utilizing web technology [...], people expect a fast, reliable experience and our iOS app was falling short.” Wednesday, April 3, 13

13. 1 2 3 Wednesday, April 3, 13

14. 1 2 3 4 Wednesday, April 3, 13

15. 2 3 4 5 Wednesday, April 3, 13

16. 2 3 4 5 Web page approach Wednesday, April 3, 13

17. Page vs app model Web page Web app Payload Huge, raw HTML Minimal data State Stateless Stateful Memory Increasing Constant Performance Degrading Constant Prioritization No Yes Wednesday, April 3, 13

18. Shut up and code! Wednesday, April 3, 13

19. Shut up and code! •Pure web (HTML + CSS + JavaScript) •Cross-platform •Using Facebook’s own APIs •Build on top of Sencha Touch 2 •1 engineer, 1 manager, 3 weeks Wednesday, April 3, 13

20. Shut up and code! Wednesday, April 3, 13

21. Shut up and code! Wednesday, April 3, 13

22. Inﬁnite List techniques Wednesday, April 3, 13

23. Inﬁnite List techniques •Recycling •Prioritizing •Sandboxing Wednesday, April 3, 13

24. DOM recycling Wednesday, April 3, 13

25. Inﬁnite list - unknown item sizes 1 2 3 4 Wednesday, April 3, 13

26. Inﬁnite list - unknown item sizes 1 2 3 4 Wednesday, April 3, 13

27. Inﬁnite list - unknown item sizes 2 3 4 1 Wednesday, April 3, 13

28. Inﬁnite list - unknown item sizes 2 3 4 5 Wednesday, April 3, 13

29. Inﬁnite list - unknown item sizes 2 3 4 5 x Wednesday, April 3, 13

30. Animation 101 A B Wednesday, April 3, 13

31. CSS Positioning Wednesday, April 3, 13

32. CSS Positioning Wednesday, April 3, 13

33. Scroll Positioning Wednesday, April 3, 13

34. Scroll Positioning Wednesday, April 3, 13

35. Compositing Wednesday, April 3, 13

36. Compositing Wednesday, April 3, 13

37. Compositing for Inﬁnite List Wednesday, April 3, 13

38. Compositing for Inﬁnite List •Composite each item and the container independently •Translate the container for every frame •Translate each item once per re-rendering cycle Wednesday, April 3, 13

39. Compositing Wednesday, April 3, 13

40. Compositing Wednesday, April 3, 13

41. Compositing 1 2 3 4 Wednesday, April 3, 13

42. 1 2 3 4 Wednesday, April 3, 13

43. 2 3 4 1 5 Wednesday, April 3, 13

44. Batch DOM read / write separately 1 2 3 4 5 Wednesday, April 3, 13

45. 1 2 3 4 translate inner composite 5 Wednesday, April 3, 13

46. 1 3 2 4 translate inner composite 5 Wednesday, April 3, 13

47. 6 7 3 4 translate inner composite 5 render 6, 7 write Wednesday, April 3, 13

48. 6 7 3 4 translate inner composite 5 render 6, 7 write read 6, 7 heights read - layout Wednesday, April 3, 13

49. 3 4 translate inner composite 5 render 6, 7 write read 6, 7 heights read - layout 6 translate 6, 7 composite 7 Wednesday, April 3, 13

50. Wednesday, April 3, 13

51. Prioritizing Wednesday, April 3, 13

52. 16.7ms Wednesday, April 3, 13

53. Style recalculation Layout Compositing 16.7ms Painting Network requests Image decoding Data processing Wednesday, April 3, 13

54. Style recalculation Layout Compositing 100ms Painting Network requests Image decoding Data processing Wednesday, April 3, 13

55. 16ms 12ms 13ms Style recalculation 60ms 15ms Layout 13ms Compositing 16ms 40ms Painting 16ms Network requests 17ms 15ms Image decoding 55ms Data processing 14ms 17ms 35ms Wednesday, April 3, 13

56. The AnimationQueue 60fps Wednesday, April 3, 13

57. The AnimationQueue Animation Touch events 60fps Image loading Data loading Image rendering Wednesday, April 3, 13

58. Buffered rendering Progressive Buffered Wednesday, April 3, 13

59. Buffered rendering Progressive Buffered Wednesday, April 3, 13

60. Delayed image rendering Wednesday, April 3, 13

61. Combined techniques Wednesday, April 3, 13

62. Demo Wednesday, April 3, 13

63. Scalability problem 60fps Wednesday, April 3, 13

64. Scalability problem 60fps Wednesday, April 3, 13

65. Scalability problem 50fps 50fps Wednesday, April 3, 13

66. Scalability problem 40fps 40fps 40fps Wednesday, April 3, 13

67. Scalability problem 8ms layout cost Wednesday, April 3, 13

68. Scalability problem 40ms layout cost Wednesday, April 3, 13

69. By making it fast, I make it slow... Wednesday, April 3, 13

70. Sandboxing Wednesday, April 3, 13

71. Sandboxing Wednesday, April 3, 13

72. Sandboxing Wednesday, April 3, 13

73. Sandboxing Wednesday, April 3, 13

74. document IFRAME IFRAME IFRAME 60fps 60fps 60fps Wednesday, April 3, 13

75. Demo Wednesday, April 3, 13

76. Extreme beneﬁts, frameworks required •Bridge all events, remap coordinates •Copy stylesheets dynamically •Connect layouts •Workaround browser bugs Wednesday, April 3, 13

77. Extreme beneﬁts, frameworks required •Bridge all events, remap coordinates •Copy stylesheets dynamically •Connect layouts •Workaround browser bugs That’s what frameworks are for! Wednesday, April 3, 13

78. Stop reinventing the wheel https://www.sencha.com/store/sencha-touch-bundle Wednesday, April 3, 13

79. Sum it up Wednesday, April 3, 13

80. Wednesday, April 3, 13

Extreme Mobile App Performance: Native to Web

Recommended

Recommended

More Related Content

Similar to Extreme Mobile App Performance: Native to Web

Similar to Extreme Mobile App Performance: Native to Web (9)

Recently uploaded

Recently uploaded (20)

Extreme Mobile App Performance: Native to Web