![Page 1: Embracing Performance in Today's Multi-Platform Macrocosm](https://reader038.vdocuments.mx/reader038/viewer/2022110118/554a1e61b4c905825d8b55ee/html5/thumbnails/1.jpg)
#bdconf
Embracing performance in today’s multi-platform macrocosm
![Page 2: Embracing Performance in Today's Multi-Platform Macrocosm](https://reader038.vdocuments.mx/reader038/viewer/2022110118/554a1e61b4c905825d8b55ee/html5/thumbnails/2.jpg)
#bdconf
BARBARA BERMESSenior Architect (Moblie Web)Digital OperationsCanadian Broadcasting Corporation (CBC)
bbinto
![Page 3: Embracing Performance in Today's Multi-Platform Macrocosm](https://reader038.vdocuments.mx/reader038/viewer/2022110118/554a1e61b4c905825d8b55ee/html5/thumbnails/3.jpg)
#bdconf
More����������� ������������������ info����������� ������������������ under����������� ������������������ follow-up����������� ������������������ blog����������� ������������������ post����������� ������������������ (URL����������� ������������������ at����������� ������������������ end����������� ������������������ of����������� ������������������ slides)
Before we get started...
![Page 4: Embracing Performance in Today's Multi-Platform Macrocosm](https://reader038.vdocuments.mx/reader038/viewer/2022110118/554a1e61b4c905825d8b55ee/html5/thumbnails/4.jpg)
#bdconf
CANADA!
![Page 5: Embracing Performance in Today's Multi-Platform Macrocosm](https://reader038.vdocuments.mx/reader038/viewer/2022110118/554a1e61b4c905825d8b55ee/html5/thumbnails/5.jpg)
Canadian Broadcasting Corporation
#bdconf
![Page 6: Embracing Performance in Today's Multi-Platform Macrocosm](https://reader038.vdocuments.mx/reader038/viewer/2022110118/554a1e61b4c905825d8b55ee/html5/thumbnails/6.jpg)
Canadian Broadcasting Corporation
National public radio and television broadcaster
#bdconf
![Page 7: Embracing Performance in Today's Multi-Platform Macrocosm](https://reader038.vdocuments.mx/reader038/viewer/2022110118/554a1e61b4c905825d8b55ee/html5/thumbnails/7.jpg)
Canadian Broadcasting Corporation
National public radio and television broadcaster
Kind of like the NPR
#bdconf
![Page 8: Embracing Performance in Today's Multi-Platform Macrocosm](https://reader038.vdocuments.mx/reader038/viewer/2022110118/554a1e61b4c905825d8b55ee/html5/thumbnails/8.jpg)
Canadian Broadcasting Corporation
National public radio and television broadcaster
Kind of like the NPR but not really - the CBC employs commercial advertising to supplement its federal funding
#bdconf
![Page 9: Embracing Performance in Today's Multi-Platform Macrocosm](https://reader038.vdocuments.mx/reader038/viewer/2022110118/554a1e61b4c905825d8b55ee/html5/thumbnails/9.jpg)
Canadian Broadcasting Corporation
National public radio and television broadcaster
Kind of like the NPR but not really - the CBC employs commercial advertising to supplement its federal funding
Large internal and external digital ecosystem
#bdconf
![Page 10: Embracing Performance in Today's Multi-Platform Macrocosm](https://reader038.vdocuments.mx/reader038/viewer/2022110118/554a1e61b4c905825d8b55ee/html5/thumbnails/10.jpg)
Canadian Broadcasting Corporation
National public radio and television broadcaster
Kind of like the NPR but not really - the CBC employs commercial advertising to supplement its federal funding
Large internal and external digital ecosystem
3 mobile websites
#bdconf
![Page 11: Embracing Performance in Today's Multi-Platform Macrocosm](https://reader038.vdocuments.mx/reader038/viewer/2022110118/554a1e61b4c905825d8b55ee/html5/thumbnails/11.jpg)
Canadian Broadcasting Corporation
National public radio and television broadcaster
Kind of like the NPR but not really - the CBC employs commercial advertising to supplement its federal funding
Large internal and external digital ecosystem
3 mobile websites11 iOS, 3 Android, 5 Blackberry, 3 Windows apps
#bdconf
![Page 12: Embracing Performance in Today's Multi-Platform Macrocosm](https://reader038.vdocuments.mx/reader038/viewer/2022110118/554a1e61b4c905825d8b55ee/html5/thumbnails/12.jpg)
Canadian Broadcasting Corporation
National public radio and television broadcaster
Kind of like the NPR but not really - the CBC employs commercial advertising to supplement its federal funding
Desktop site page views ~5Mio/day
Large internal and external digital ecosystem
3 mobile websites11 iOS, 3 Android, 5 Blackberry, 3 Windows apps
#bdconf
![Page 13: Embracing Performance in Today's Multi-Platform Macrocosm](https://reader038.vdocuments.mx/reader038/viewer/2022110118/554a1e61b4c905825d8b55ee/html5/thumbnails/13.jpg)
Canadian Broadcasting Corporation
National public radio and television broadcaster
Kind of like the NPR but not really - the CBC employs commercial advertising to supplement its federal funding
Desktop site page views ~5Mio/day
Mobile Touch site page views ~ 500K/day
Large internal and external digital ecosystem
3 mobile websites11 iOS, 3 Android, 5 Blackberry, 3 Windows apps
#bdconf
![Page 14: Embracing Performance in Today's Multi-Platform Macrocosm](https://reader038.vdocuments.mx/reader038/viewer/2022110118/554a1e61b4c905825d8b55ee/html5/thumbnails/14.jpg)
Canadian Broadcasting Corporation
National public radio and television broadcaster
Kind of like the NPR but not really - the CBC employs commercial advertising to supplement its federal funding
Desktop site page views ~5Mio/day
Mobile Touch site page views ~ 500K/day
News app page views ~1Mio/day
Large internal and external digital ecosystem
3 mobile websites11 iOS, 3 Android, 5 Blackberry, 3 Windows apps
#bdconf
![Page 15: Embracing Performance in Today's Multi-Platform Macrocosm](https://reader038.vdocuments.mx/reader038/viewer/2022110118/554a1e61b4c905825d8b55ee/html5/thumbnails/15.jpg)
#bdconf
Embracing performance in today’s multi-platform macrocosm
![Page 16: Embracing Performance in Today's Multi-Platform Macrocosm](https://reader038.vdocuments.mx/reader038/viewer/2022110118/554a1e61b4c905825d8b55ee/html5/thumbnails/16.jpg)
#bdconf
PERFORMANCEWHY THE NEED FOR SPEED?
![Page 17: Embracing Performance in Today's Multi-Platform Macrocosm](https://reader038.vdocuments.mx/reader038/viewer/2022110118/554a1e61b4c905825d8b55ee/html5/thumbnails/17.jpg)
#bdconf
![Page 18: Embracing Performance in Today's Multi-Platform Macrocosm](https://reader038.vdocuments.mx/reader038/viewer/2022110118/554a1e61b4c905825d8b55ee/html5/thumbnails/18.jpg)
#bdconf
Overestimating wait times for rides
Hidden lineups
![Page 19: Embracing Performance in Today's Multi-Platform Macrocosm](https://reader038.vdocuments.mx/reader038/viewer/2022110118/554a1e61b4c905825d8b55ee/html5/thumbnails/19.jpg)
#bdconf
S L O W
Perception of Speed
FAST
![Page 20: Embracing Performance in Today's Multi-Platform Macrocosm](https://reader038.vdocuments.mx/reader038/viewer/2022110118/554a1e61b4c905825d8b55ee/html5/thumbnails/20.jpg)
#bdconf
S L O W
Perception of Speed
Unpleasant
FAST
![Page 21: Embracing Performance in Today's Multi-Platform Macrocosm](https://reader038.vdocuments.mx/reader038/viewer/2022110118/554a1e61b4c905825d8b55ee/html5/thumbnails/21.jpg)
#bdconf
S L O W
Perception of Speed
Unpleasant
Unknown
FAST
![Page 22: Embracing Performance in Today's Multi-Platform Macrocosm](https://reader038.vdocuments.mx/reader038/viewer/2022110118/554a1e61b4c905825d8b55ee/html5/thumbnails/22.jpg)
#bdconf
S L O W
Perception of Speed
Unpleasant
Unknown
Boring
FAST
![Page 23: Embracing Performance in Today's Multi-Platform Macrocosm](https://reader038.vdocuments.mx/reader038/viewer/2022110118/554a1e61b4c905825d8b55ee/html5/thumbnails/23.jpg)
#bdconf
S L O W
Perception of Speed
Unpleasant
Unknown
Boring
Task is successful
FAST
![Page 24: Embracing Performance in Today's Multi-Platform Macrocosm](https://reader038.vdocuments.mx/reader038/viewer/2022110118/554a1e61b4c905825d8b55ee/html5/thumbnails/24.jpg)
#bdconf
S L O W
Perception of Speed
Unpleasant
Unknown
Boring
Task is successful
Responsive System
FAST
![Page 25: Embracing Performance in Today's Multi-Platform Macrocosm](https://reader038.vdocuments.mx/reader038/viewer/2022110118/554a1e61b4c905825d8b55ee/html5/thumbnails/25.jpg)
#bdconf
S L O W
Perception of Speed
Unpleasant
Unknown
Boring
Task is successful
Responsive System
FAST
Informed about progress
![Page 26: Embracing Performance in Today's Multi-Platform Macrocosm](https://reader038.vdocuments.mx/reader038/viewer/2022110118/554a1e61b4c905825d8b55ee/html5/thumbnails/26.jpg)
#bdconf
“Ultimately performance is about respect”
BRAD FROST
![Page 27: Embracing Performance in Today's Multi-Platform Macrocosm](https://reader038.vdocuments.mx/reader038/viewer/2022110118/554a1e61b4c905825d8b55ee/html5/thumbnails/27.jpg)
#bdconf
Embracing performance in today’s multi-platform macrocosm
![Page 28: Embracing Performance in Today's Multi-Platform Macrocosm](https://reader038.vdocuments.mx/reader038/viewer/2022110118/554a1e61b4c905825d8b55ee/html5/thumbnails/28.jpg)
#bdconf
Macrocosm
#bdconf
![Page 29: Embracing Performance in Today's Multi-Platform Macrocosm](https://reader038.vdocuments.mx/reader038/viewer/2022110118/554a1e61b4c905825d8b55ee/html5/thumbnails/29.jpg)
#bdconf
Macrocosm
Operating systems and platforms
#bdconf
![Page 30: Embracing Performance in Today's Multi-Platform Macrocosm](https://reader038.vdocuments.mx/reader038/viewer/2022110118/554a1e61b4c905825d8b55ee/html5/thumbnails/30.jpg)
#bdconf
Macrocosm
Operating systems and platforms
Browsers
#bdconf
![Page 31: Embracing Performance in Today's Multi-Platform Macrocosm](https://reader038.vdocuments.mx/reader038/viewer/2022110118/554a1e61b4c905825d8b55ee/html5/thumbnails/31.jpg)
#bdconf
Macrocosm
Operating systems and platforms
Browsers
Internet service providers
#bdconf
![Page 32: Embracing Performance in Today's Multi-Platform Macrocosm](https://reader038.vdocuments.mx/reader038/viewer/2022110118/554a1e61b4c905825d8b55ee/html5/thumbnails/32.jpg)
#bdconf
Macrocosm
Operating systems and platforms
Browsers
Internet service providers
Cellular providers
#bdconf
![Page 33: Embracing Performance in Today's Multi-Platform Macrocosm](https://reader038.vdocuments.mx/reader038/viewer/2022110118/554a1e61b4c905825d8b55ee/html5/thumbnails/33.jpg)
#bdconf
Macrocosm
Operating systems and platforms
Browsers
Internet service providers
Cellular providers Internet connections and speed
#bdconf
![Page 34: Embracing Performance in Today's Multi-Platform Macrocosm](https://reader038.vdocuments.mx/reader038/viewer/2022110118/554a1e61b4c905825d8b55ee/html5/thumbnails/34.jpg)
#bdconf
Macrocosm
Operating systems and platforms
Browsers
Internet service providers
Cellular providers Internet connections and speed
Devices
#bdconf
![Page 35: Embracing Performance in Today's Multi-Platform Macrocosm](https://reader038.vdocuments.mx/reader038/viewer/2022110118/554a1e61b4c905825d8b55ee/html5/thumbnails/35.jpg)
#bdconf
We are multi-screeners in amulti-platform macrocosm where context drives our device choice
![Page 36: Embracing Performance in Today's Multi-Platform Macrocosm](https://reader038.vdocuments.mx/reader038/viewer/2022110118/554a1e61b4c905825d8b55ee/html5/thumbnails/36.jpg)
#bdconf
CBC’s MOBILE REALITYAND JOURNEY
![Page 37: Embracing Performance in Today's Multi-Platform Macrocosm](https://reader038.vdocuments.mx/reader038/viewer/2022110118/554a1e61b4c905825d8b55ee/html5/thumbnails/37.jpg)
#bdconf
FACTS & WISHLIST
• Maintenance of several different code bases
• Slow news app
• Device and OS fragmentation
• Every content area wants to build their own app
• News broadcaster: Be able to push new features to apps as soon as possible (without review process)
![Page 38: Embracing Performance in Today's Multi-Platform Macrocosm](https://reader038.vdocuments.mx/reader038/viewer/2022110118/554a1e61b4c905825d8b55ee/html5/thumbnails/38.jpg)
#bdconf
• Maintenance of several different code bases
• Slow news app
• Device and OS fragmentation
• Every content area wants to build their own app
• News broadcaster: Be able to push new features to apps as soon as possible (without review process)
Faster����������� ������������������ load����������� ������������������ time
More����������� ������������������ frequent����������� ������������������ releases
Many����������� ������������������ apps����������� ������������������ with����������� ������������������
limited����������� ������������������ budget
FACTS & WISHLIST
![Page 39: Embracing Performance in Today's Multi-Platform Macrocosm](https://reader038.vdocuments.mx/reader038/viewer/2022110118/554a1e61b4c905825d8b55ee/html5/thumbnails/39.jpg)
#bdconf
Foster the idea ofbuild once publish to many
Many����������� ������������������ apps����������� ������������������ with����������� ������������������ limited����������� ������������������ budget
![Page 40: Embracing Performance in Today's Multi-Platform Macrocosm](https://reader038.vdocuments.mx/reader038/viewer/2022110118/554a1e61b4c905825d8b55ee/html5/thumbnails/40.jpg)
#bdconf
HOW?
![Page 41: Embracing Performance in Today's Multi-Platform Macrocosm](https://reader038.vdocuments.mx/reader038/viewer/2022110118/554a1e61b4c905825d8b55ee/html5/thumbnails/41.jpg)
#bdconf
HTML5 vs. Native(Not again....!)
It depends...
![Page 42: Embracing Performance in Today's Multi-Platform Macrocosm](https://reader038.vdocuments.mx/reader038/viewer/2022110118/554a1e61b4c905825d8b55ee/html5/thumbnails/42.jpg)
#bdconf
HTML5 vs. Native
“Comparing an HTML5 application’s performance with a native App is comparing a tailored suit with one bought in a shop”
Chris Heilmann
![Page 43: Embracing Performance in Today's Multi-Platform Macrocosm](https://reader038.vdocuments.mx/reader038/viewer/2022110118/554a1e61b4c905825d8b55ee/html5/thumbnails/43.jpg)
#bdconf
HTML5 + NATIVE = HYBRID
![Page 44: Embracing Performance in Today's Multi-Platform Macrocosm](https://reader038.vdocuments.mx/reader038/viewer/2022110118/554a1e61b4c905825d8b55ee/html5/thumbnails/44.jpg)
#bdconf
HTML5 + NATIVE = HYBRIDMarriage of web technology and native execution
![Page 45: Embracing Performance in Today's Multi-Platform Macrocosm](https://reader038.vdocuments.mx/reader038/viewer/2022110118/554a1e61b4c905825d8b55ee/html5/thumbnails/45.jpg)
#bdconf
HTML5 + NATIVE = HYBRIDMarriage of web technology and native execution
Downloadable app, stored on the device
![Page 46: Embracing Performance in Today's Multi-Platform Macrocosm](https://reader038.vdocuments.mx/reader038/viewer/2022110118/554a1e61b4c905825d8b55ee/html5/thumbnails/46.jpg)
#bdconf
HTML5 + NATIVE = HYBRIDMarriage of web technology and native execution
Downloadable app, stored on the device
Runs all or some of its user interface in an embedded browser component
![Page 47: Embracing Performance in Today's Multi-Platform Macrocosm](https://reader038.vdocuments.mx/reader038/viewer/2022110118/554a1e61b4c905825d8b55ee/html5/thumbnails/47.jpg)
#bdconf
WEBSITEWITH NATIVE WRAPPER
GOAL
More����������� ������������������ frequent����������� ������������������ releases
![Page 48: Embracing Performance in Today's Multi-Platform Macrocosm](https://reader038.vdocuments.mx/reader038/viewer/2022110118/554a1e61b4c905825d8b55ee/html5/thumbnails/48.jpg)
#bdconf
BEFORE THE HYBRID JOURNEY BEGINS
![Page 49: Embracing Performance in Today's Multi-Platform Macrocosm](https://reader038.vdocuments.mx/reader038/viewer/2022110118/554a1e61b4c905825d8b55ee/html5/thumbnails/49.jpg)
#bdconf
SET EXPECTATIONS AND RULES
![Page 50: Embracing Performance in Today's Multi-Platform Macrocosm](https://reader038.vdocuments.mx/reader038/viewer/2022110118/554a1e61b4c905825d8b55ee/html5/thumbnails/50.jpg)
#bdconf
RULES OF THUMB
NATIVE AS A PROGRESSIVEENHANCEMENT STRATEGY
![Page 51: Embracing Performance in Today's Multi-Platform Macrocosm](https://reader038.vdocuments.mx/reader038/viewer/2022110118/554a1e61b4c905825d8b55ee/html5/thumbnails/51.jpg)
#bdconf
1. Perfect Ratio
2. Admit web is not native
3. Be flexible
4. Learn from others
5. Follow native design guidelines
6. Define supported devices
7. Setup performance budgets
8. Web performance
RULES OF THUMB
![Page 52: Embracing Performance in Today's Multi-Platform Macrocosm](https://reader038.vdocuments.mx/reader038/viewer/2022110118/554a1e61b4c905825d8b55ee/html5/thumbnails/52.jpg)
#bdconf
WITH NATIVE WRAPPERWEBSITE
GOAL
![Page 53: Embracing Performance in Today's Multi-Platform Macrocosm](https://reader038.vdocuments.mx/reader038/viewer/2022110118/554a1e61b4c905825d8b55ee/html5/thumbnails/53.jpg)
#bdconf
FOCUS ON MAKING (MOBILE) WEB FASTWITH NATIVE WRAPPER
GOAL
Faster����������� ������������������ load����������� ������������������ time
![Page 54: Embracing Performance in Today's Multi-Platform Macrocosm](https://reader038.vdocuments.mx/reader038/viewer/2022110118/554a1e61b4c905825d8b55ee/html5/thumbnails/54.jpg)
#bdconf
PERFORMANCE ON MOBILE
![Page 55: Embracing Performance in Today's Multi-Platform Macrocosm](https://reader038.vdocuments.mx/reader038/viewer/2022110118/554a1e61b4c905825d8b55ee/html5/thumbnails/55.jpg)
#bdconf
Battery-driven
PERFORMANCE ON MOBILE
![Page 56: Embracing Performance in Today's Multi-Platform Macrocosm](https://reader038.vdocuments.mx/reader038/viewer/2022110118/554a1e61b4c905825d8b55ee/html5/thumbnails/56.jpg)
#bdconf
Battery-driven Small CPU/GPU
PERFORMANCE ON MOBILE
![Page 57: Embracing Performance in Today's Multi-Platform Macrocosm](https://reader038.vdocuments.mx/reader038/viewer/2022110118/554a1e61b4c905825d8b55ee/html5/thumbnails/57.jpg)
#bdconf
Battery-driven Small CPU/GPU
Network connectivity and latency
PERFORMANCE ON MOBILE
![Page 58: Embracing Performance in Today's Multi-Platform Macrocosm](https://reader038.vdocuments.mx/reader038/viewer/2022110118/554a1e61b4c905825d8b55ee/html5/thumbnails/58.jpg)
#bdconf
Battery-driven Small CPU/GPU
Network connectivity and latency
Data usage
PERFORMANCE ON MOBILE
![Page 59: Embracing Performance in Today's Multi-Platform Macrocosm](https://reader038.vdocuments.mx/reader038/viewer/2022110118/554a1e61b4c905825d8b55ee/html5/thumbnails/59.jpg)
#bdconf
REDUCE HTTP REQUESTS
![Page 60: Embracing Performance in Today's Multi-Platform Macrocosm](https://reader038.vdocuments.mx/reader038/viewer/2022110118/554a1e61b4c905825d8b55ee/html5/thumbnails/60.jpg)
#bdconf
EACH HTTP REQUEST COSTS AROUND 200MS
![Page 61: Embracing Performance in Today's Multi-Platform Macrocosm](https://reader038.vdocuments.mx/reader038/viewer/2022110118/554a1e61b4c905825d8b55ee/html5/thumbnails/61.jpg)
#bdconf
• Reduce HTTP requests
• Avoid latency issues as much as possible
• Only load what is needed
CONCEPT
![Page 62: Embracing Performance in Today's Multi-Platform Macrocosm](https://reader038.vdocuments.mx/reader038/viewer/2022110118/554a1e61b4c905825d8b55ee/html5/thumbnails/62.jpg)
#bdconf
TECHNIQUES
![Page 63: Embracing Performance in Today's Multi-Platform Macrocosm](https://reader038.vdocuments.mx/reader038/viewer/2022110118/554a1e61b4c905825d8b55ee/html5/thumbnails/63.jpg)
#bdconf
CONCATENATE AND MINIFY ASSETS
HTTP REQUESTS TECHNIQUES
![Page 64: Embracing Performance in Today's Multi-Platform Macrocosm](https://reader038.vdocuments.mx/reader038/viewer/2022110118/554a1e61b4c905825d8b55ee/html5/thumbnails/64.jpg)
#bdconf
MAKE USE OF DATA URI FOR IMAGES
HTTP REQUESTS TECHNIQUES
![Page 65: Embracing Performance in Today's Multi-Platform Macrocosm](https://reader038.vdocuments.mx/reader038/viewer/2022110118/554a1e61b4c905825d8b55ee/html5/thumbnails/65.jpg)
#bdconf
USE ASYNCHRONOUS MODULE DEFINITION (AMD)
HTTP REQUESTS TECHNIQUES
![Page 66: Embracing Performance in Today's Multi-Platform Macrocosm](https://reader038.vdocuments.mx/reader038/viewer/2022110118/554a1e61b4c905825d8b55ee/html5/thumbnails/66.jpg)
#bdconf
SINGLE PAGE APPRELOAD ONLY PIECES OF PAGE
HTTP REQUESTS TECHNIQUES
![Page 67: Embracing Performance in Today's Multi-Platform Macrocosm](https://reader038.vdocuments.mx/reader038/viewer/2022110118/554a1e61b4c905825d8b55ee/html5/thumbnails/67.jpg)
#bdconf
FOCUS ON MAKING (MOBILE) WEB FASTWITH NATIVE WRAPPER
GOAL
![Page 68: Embracing Performance in Today's Multi-Platform Macrocosm](https://reader038.vdocuments.mx/reader038/viewer/2022110118/554a1e61b4c905825d8b55ee/html5/thumbnails/68.jpg)
#bdconf
FAST SINGLE PAGE APPWITH NATIVE WRAPPER
GOAL
![Page 69: Embracing Performance in Today's Multi-Platform Macrocosm](https://reader038.vdocuments.mx/reader038/viewer/2022110118/554a1e61b4c905825d8b55ee/html5/thumbnails/69.jpg)
#bdconf
HYBRID ARCHITECTURE
In����������� ������������������ Development
![Page 70: Embracing Performance in Today's Multi-Platform Macrocosm](https://reader038.vdocuments.mx/reader038/viewer/2022110118/554a1e61b4c905825d8b55ee/html5/thumbnails/70.jpg)
#bdconf
Native Layer (Java, Objective C, ...)
Hybrid Layer (communication between native and web)
Web Layer (HTML5, CSS, JS, MVC frameworks, custom libraries)
Backend LayerServer, CDN (ESI, SSI, Java, Apache, CGI, Perl, PHP)
![Page 71: Embracing Performance in Today's Multi-Platform Macrocosm](https://reader038.vdocuments.mx/reader038/viewer/2022110118/554a1e61b4c905825d8b55ee/html5/thumbnails/71.jpg)
#bdconf
Native Layer (Java, Objective C, ...)
Hybrid Layer (communication between native and web)
Web Layer (HTML5, CSS, JS, MVC frameworks, custom libraries)
Backend LayerServer, CDN (ESI, SSI, Java, Apache, CGI, Perl, PHP)
Fo
cus
on
Pe
rfo
rma
nce
Fo
cus o
n P
erfo
rma
nce
![Page 72: Embracing Performance in Today's Multi-Platform Macrocosm](https://reader038.vdocuments.mx/reader038/viewer/2022110118/554a1e61b4c905825d8b55ee/html5/thumbnails/72.jpg)
#bdconf
Native Layer (Java, Objective C, ...)
Hybrid Layer (communication between native and web)
Web Layer (HTML5, CSS, JS, MVC frameworks, custom libraries)
Backend LayerServer, CDN (ESI, SSI, Java, Apache, CGI, Perl, PHP)
Fo
cus
on
Pe
rfo
rma
nce
Fo
cus o
n P
erfo
rma
nce
![Page 73: Embracing Performance in Today's Multi-Platform Macrocosm](https://reader038.vdocuments.mx/reader038/viewer/2022110118/554a1e61b4c905825d8b55ee/html5/thumbnails/73.jpg)
#bdconf
• JSON feeds (content source and configuration)
• Using content delivery network (CDN)
• Edge Side Include & SSI (device, native/web detection)
• PHP (server-side ads implementation)
BACKEND LAYER
![Page 74: Embracing Performance in Today's Multi-Platform Macrocosm](https://reader038.vdocuments.mx/reader038/viewer/2022110118/554a1e61b4c905825d8b55ee/html5/thumbnails/74.jpg)
#bdconf
Native Layer (Java, Objective C, ...)
Hybrid Layer (communication between native and web)
Web Layer (HTML5, CSS, JS, MVC frameworks, custom libraries)
Backend LayerServer, CDN (ESI, SSI, Java, Apache, CGI, Perl, PHP)
Fo
cus
on
Pe
rfo
rma
nce
Fo
cus o
n P
erfo
rma
nce
![Page 75: Embracing Performance in Today's Multi-Platform Macrocosm](https://reader038.vdocuments.mx/reader038/viewer/2022110118/554a1e61b4c905825d8b55ee/html5/thumbnails/75.jpg)
#bdconf
WEB LAYER
jQuery
can.JS(MVC)
Modernizr (AMD)
CBC libscomtower
Other libs e.g.Detectizr, FTscroll
Data URIs SASS
![Page 76: Embracing Performance in Today's Multi-Platform Macrocosm](https://reader038.vdocuments.mx/reader038/viewer/2022110118/554a1e61b4c905825d8b55ee/html5/thumbnails/76.jpg)
#bdconf
conditional����������� ������������������ styling
conditionallibrary����������� ������������������ loading
concatenation����������� ������������������ and����������� ������������������ minification
concatenation����������� ������������������ and����������� ������������������ minification
AMD AND MORE
![Page 77: Embracing Performance in Today's Multi-Platform Macrocosm](https://reader038.vdocuments.mx/reader038/viewer/2022110118/554a1e61b4c905825d8b55ee/html5/thumbnails/77.jpg)
#bdconf
data����������� ������������������ uri����������� ������������������ encoded
data����������� ������������������ uri����������� ������������������ encoded
DATA URI IMAGES
![Page 78: Embracing Performance in Today's Multi-Platform Macrocosm](https://reader038.vdocuments.mx/reader038/viewer/2022110118/554a1e61b4c905825d8b55ee/html5/thumbnails/78.jpg)
#bdconf
Native Layer (Java, Objective C, ...)
Hybrid Layer (communication between native and web)
Web (Frontend) Layer (HTML5, CSS, JS, MVC frameworks, custom libraries)
Backend LayerServer, CDN (ESI, SSI, Java, Apache, CGI, Perl, PHP)
Fo
cus
on
Pe
rfo
rma
nce
Fo
cus o
n P
erfo
rma
nce
![Page 79: Embracing Performance in Today's Multi-Platform Macrocosm](https://reader038.vdocuments.mx/reader038/viewer/2022110118/554a1e61b4c905825d8b55ee/html5/thumbnails/79.jpg)
#bdconf
• Communication protocol between native to web (bi-directional)
• Inspired by communication + CN Tower = ComTower
• JavaScript sending messages to native app inside iFrame as “the window to the app”
• App executing JavaScript functions inside the webpage
COMTOWER
![Page 80: Embracing Performance in Today's Multi-Platform Macrocosm](https://reader038.vdocuments.mx/reader038/viewer/2022110118/554a1e61b4c905825d8b55ee/html5/thumbnails/80.jpg)
#bdconf
Startup:HTTP Header set via native app
$(HTTP_CBC_COMTOWER) =TRUE
comtower call
JavaScript callback
1
e.g. native sharing
e.g. app version
Web<iframe/>
2
NativeComTowerDelegate
3
![Page 81: Embracing Performance in Today's Multi-Platform Macrocosm](https://reader038.vdocuments.mx/reader038/viewer/2022110118/554a1e61b4c905825d8b55ee/html5/thumbnails/81.jpg)
#bdconf
Native Layer (Java, Objective C, ...)
Hybrid Layer (communication between native and web)
Web (Frontend) Layer (HTML5, CSS, JS, MVC frameworks, custom libraries)
Backend LayerServer, CDN (ESI, SSI, Java, Apache, CGI, Perl, PHP)
Fo
cus
on
Pe
rfo
rma
nce
Fo
cus o
n P
erfo
rma
nce
![Page 83: Embracing Performance in Today's Multi-Platform Macrocosm](https://reader038.vdocuments.mx/reader038/viewer/2022110118/554a1e61b4c905825d8b55ee/html5/thumbnails/83.jpg)
#bdconf
HOW DO WE BUILD?
![Page 84: Embracing Performance in Today's Multi-Platform Macrocosm](https://reader038.vdocuments.mx/reader038/viewer/2022110118/554a1e61b4c905825d8b55ee/html5/thumbnails/84.jpg)
#bdconf
BUILD WEB APPImplementation of framework
Common elements (CSS, JS)
Platform specific CSS and JS
Framework
App specific widgets (not shared with other apps)
App specific styles
App
concatenated, minified, compiled
Maven build + SVN externalspulling in files from both modules
![Page 85: Embracing Performance in Today's Multi-Platform Macrocosm](https://reader038.vdocuments.mx/reader038/viewer/2022110118/554a1e61b4c905825d8b55ee/html5/thumbnails/85.jpg)
#bdconf
FOCUS ON PERFORMANCE OPTIMIZATION DURING BUILD
![Page 86: Embracing Performance in Today's Multi-Platform Macrocosm](https://reader038.vdocuments.mx/reader038/viewer/2022110118/554a1e61b4c905825d8b55ee/html5/thumbnails/86.jpg)
#bdconf
Maven and Plugins
AUTOMATED BUILT-IN PERFORMANCE OPTIMIZATION
• Closure Compiler (Google)
• Minify-maven-plugin
• HTMLCompressor for html
• Integrated performance checks
• Confess based on Phantom JS
• compass for data URI
![Page 87: Embracing Performance in Today's Multi-Platform Macrocosm](https://reader038.vdocuments.mx/reader038/viewer/2022110118/554a1e61b4c905825d8b55ee/html5/thumbnails/87.jpg)
#bdconf
Compiled to point to hybrid URL
BUILD NATIVE APP
![Page 88: Embracing Performance in Today's Multi-Platform Macrocosm](https://reader038.vdocuments.mx/reader038/viewer/2022110118/554a1e61b4c905825d8b55ee/html5/thumbnails/88.jpg)
#bdconf
NEWS APPRATIO IOS
![Page 89: Embracing Performance in Today's Multi-Platform Macrocosm](https://reader038.vdocuments.mx/reader038/viewer/2022110118/554a1e61b4c905825d8b55ee/html5/thumbnails/89.jpg)
#bdconf
Navigation (Menu and horizontal sub navigation)Pull to Refresh
Push Notifications
Sharing Tools
Send your News
70:30
Offline
FavoritesMore...
WEB NATIVE Lineups
Stories and story swiping
Photo Galleries
Video & AudioBreaking News Ticker
Business Ticker
Weather
Tracking
Ads
IOS
??? ???
![Page 90: Embracing Performance in Today's Multi-Platform Macrocosm](https://reader038.vdocuments.mx/reader038/viewer/2022110118/554a1e61b4c905825d8b55ee/html5/thumbnails/90.jpg)
#bdconf
NEWS APPRATIO ANDROID
![Page 91: Embracing Performance in Today's Multi-Platform Macrocosm](https://reader038.vdocuments.mx/reader038/viewer/2022110118/554a1e61b4c905825d8b55ee/html5/thumbnails/91.jpg)
#bdconf
100:0 App launcher
WEB NATIVE Lineups
Stories and story swiping
Photo Galleries
Video & AudioBreaking News Ticker
Business Ticker
Weather
Tracking
Ads
ANDROID
More...
![Page 92: Embracing Performance in Today's Multi-Platform Macrocosm](https://reader038.vdocuments.mx/reader038/viewer/2022110118/554a1e61b4c905825d8b55ee/html5/thumbnails/92.jpg)
#bdconf
WEB ONLY
Weather
Ads
Lineups
Galleries
COMMON AND NEWS SPECIFIC ELEMENTS
![Page 93: Embracing Performance in Today's Multi-Platform Macrocosm](https://reader038.vdocuments.mx/reader038/viewer/2022110118/554a1e61b4c905825d8b55ee/html5/thumbnails/93.jpg)
#bdconf
WEB AND NATIVE
Web����������� ������������������ fed����������� ������������������ by����������� ������������������
menu����������� ������������������ JSON
Native����������� ������������������ fed����������� ������������������
by����������� ������������������ same����������� ������������������
menu����������� ������������������ JSON
NAVIGATION
![Page 94: Embracing Performance in Today's Multi-Platform Macrocosm](https://reader038.vdocuments.mx/reader038/viewer/2022110118/554a1e61b4c905825d8b55ee/html5/thumbnails/94.jpg)
#bdconf
CHALLENGES
![Page 95: Embracing Performance in Today's Multi-Platform Macrocosm](https://reader038.vdocuments.mx/reader038/viewer/2022110118/554a1e61b4c905825d8b55ee/html5/thumbnails/95.jpg)
#bdconf
• New technologies
• New CMS (re-thinking content)
• 3rd party content supported but NOT optimized
• Mobile ads and tracking strategy
• Balance between supporting and optimizing different browsers (Android fragmentation)
• Testing
CHALLENGES
![Page 96: Embracing Performance in Today's Multi-Platform Macrocosm](https://reader038.vdocuments.mx/reader038/viewer/2022110118/554a1e61b4c905825d8b55ee/html5/thumbnails/96.jpg)
#bdconf
• New technologies
• New CMS (re-thinking content)
• 3rd party content supported but NOT optimized
• Mobile ads and tracking strategy
• Balance between supporting and optimizing different browsers (Android fragmentation)
• Testing
CHALLENGES
It’s����������� ������������������ hard!
![Page 97: Embracing Performance in Today's Multi-Platform Macrocosm](https://reader038.vdocuments.mx/reader038/viewer/2022110118/554a1e61b4c905825d8b55ee/html5/thumbnails/97.jpg)
#bdconf
IOS WRAPPER APP Things to watch out for
![Page 98: Embracing Performance in Today's Multi-Platform Macrocosm](https://reader038.vdocuments.mx/reader038/viewer/2022110118/554a1e61b4c905825d8b55ee/html5/thumbnails/98.jpg)
#bdconf
WEBKIT CSSbody { /* Disables the default callout shown when you touch and hold a touch target */ -webkit-touch-callout: none;
/* Overrides the highlight color shown when the user taps a link */ -webkit-tap-highlight-color: rgba(0,0,0,0);}
![Page 99: Embracing Performance in Today's Multi-Platform Macrocosm](https://reader038.vdocuments.mx/reader038/viewer/2022110118/554a1e61b4c905825d8b55ee/html5/thumbnails/99.jpg)
#bdconf
COMTOWER DROPPING CALLS
![Page 100: Embracing Performance in Today's Multi-Platform Macrocosm](https://reader038.vdocuments.mx/reader038/viewer/2022110118/554a1e61b4c905825d8b55ee/html5/thumbnails/100.jpg)
#bdconf
COMTOWER DROPPING CALLSQUEUE
![Page 101: Embracing Performance in Today's Multi-Platform Macrocosm](https://reader038.vdocuments.mx/reader038/viewer/2022110118/554a1e61b4c905825d8b55ee/html5/thumbnails/101.jpg)
#bdconf
JAVASCRIPT ENGINE INSIDE IOS WEBVIEW IS SLOWER THAN DEFAULT SAFARI
BUMMER!
![Page 102: Embracing Performance in Today's Multi-Platform Macrocosm](https://reader038.vdocuments.mx/reader038/viewer/2022110118/554a1e61b4c905825d8b55ee/html5/thumbnails/102.jpg)
#bdconf
0
1000
2000
3000
4000
5000
6000
7000
8000
IE9/Win 7
Chrome24/Win 7
Firefox 18/Win 7
Opera11.61/Win 7
Safari/iOS 5/iPad 3
Safari/iOS 6/iPhone 4S
Chrome 24/Android 4.2.1/Nexus 4
Silk/KindleFire
IE 8/Win 7
WebView/iOS 6/iPhone 4s
WebView/iOS 5/iPad 3
tim
e (m
s)
Bad
Good
JAVASCRIPT PERFORMANCE ON VARIOUS PLATFORMS
![Page 103: Embracing Performance in Today's Multi-Platform Macrocosm](https://reader038.vdocuments.mx/reader038/viewer/2022110118/554a1e61b4c905825d8b55ee/html5/thumbnails/103.jpg)
#bdconf
TAKE AWAYSPERFORMANCE MULTI-PLATFORM
![Page 104: Embracing Performance in Today's Multi-Platform Macrocosm](https://reader038.vdocuments.mx/reader038/viewer/2022110118/554a1e61b4c905825d8b55ee/html5/thumbnails/104.jpg)
#bdconf
• Performance is especially important for battery-driven, smaller CPU devices
TAKE AWAYSPERFORMANCE MULTI-PLATFORM
![Page 105: Embracing Performance in Today's Multi-Platform Macrocosm](https://reader038.vdocuments.mx/reader038/viewer/2022110118/554a1e61b4c905825d8b55ee/html5/thumbnails/105.jpg)
#bdconf
• Performance is especially important for battery-driven, smaller CPU devices
• Each HTTP request costs around 200ms
TAKE AWAYSPERFORMANCE MULTI-PLATFORM
![Page 106: Embracing Performance in Today's Multi-Platform Macrocosm](https://reader038.vdocuments.mx/reader038/viewer/2022110118/554a1e61b4c905825d8b55ee/html5/thumbnails/106.jpg)
#bdconf
• Performance is especially important for battery-driven, smaller CPU devices
• Each HTTP request costs around 200ms
• Automate performance optimization
TAKE AWAYSPERFORMANCE MULTI-PLATFORM
![Page 107: Embracing Performance in Today's Multi-Platform Macrocosm](https://reader038.vdocuments.mx/reader038/viewer/2022110118/554a1e61b4c905825d8b55ee/html5/thumbnails/107.jpg)
#bdconf
• Performance is especially important for battery-driven, smaller CPU devices
• Each HTTP request costs around 200ms
• Automate performance optimization
• Use AMD for conditional loading based on features and devices
TAKE AWAYSPERFORMANCE MULTI-PLATFORM
![Page 108: Embracing Performance in Today's Multi-Platform Macrocosm](https://reader038.vdocuments.mx/reader038/viewer/2022110118/554a1e61b4c905825d8b55ee/html5/thumbnails/108.jpg)
#bdconf
• Performance is especially important for battery-driven, smaller CPU devices
• Each HTTP request costs around 200ms
• Automate performance optimization
• Use AMD for conditional loading based on features and devices
• Native = tailored suitHTML5 = one bought in a shop
TAKE AWAYSPERFORMANCE MULTI-PLATFORM
![Page 109: Embracing Performance in Today's Multi-Platform Macrocosm](https://reader038.vdocuments.mx/reader038/viewer/2022110118/554a1e61b4c905825d8b55ee/html5/thumbnails/109.jpg)
#bdconf
• Performance is especially important for battery-driven, smaller CPU devices
• Each HTTP request costs around 200ms
• Automate performance optimization
• Use AMD for conditional loading based on features and devices
• Native = tailored suitHTML5 = one bought in a shop
• Hybrid
TAKE AWAYSPERFORMANCE MULTI-PLATFORM
![Page 110: Embracing Performance in Today's Multi-Platform Macrocosm](https://reader038.vdocuments.mx/reader038/viewer/2022110118/554a1e61b4c905825d8b55ee/html5/thumbnails/110.jpg)
#bdconf
• Performance is especially important for battery-driven, smaller CPU devices
• Each HTTP request costs around 200ms
• Automate performance optimization
• Use AMD for conditional loading based on features and devices
• Native = tailored suitHTML5 = one bought in a shop
• Hybrid
• Native components as progressive enhancement strategy
TAKE AWAYSPERFORMANCE MULTI-PLATFORM
![Page 111: Embracing Performance in Today's Multi-Platform Macrocosm](https://reader038.vdocuments.mx/reader038/viewer/2022110118/554a1e61b4c905825d8b55ee/html5/thumbnails/111.jpg)
#bdconf
• Performance is especially important for battery-driven, smaller CPU devices
• Each HTTP request costs around 200ms
• Automate performance optimization
• Use AMD for conditional loading based on features and devices
• Native = tailored suitHTML5 = one bought in a shop
• Hybrid
• Native components as progressive enhancement strategy
• Set expectations and rules when going hybrid
TAKE AWAYSPERFORMANCE MULTI-PLATFORM
![Page 112: Embracing Performance in Today's Multi-Platform Macrocosm](https://reader038.vdocuments.mx/reader038/viewer/2022110118/554a1e61b4c905825d8b55ee/html5/thumbnails/112.jpg)
#bdconf
• Performance is especially important for battery-driven, smaller CPU devices
• Each HTTP request costs around 200ms
• Automate performance optimization
• Use AMD for conditional loading based on features and devices
• Native = tailored suitHTML5 = one bought in a shop
• Hybrid
• Native components as progressive enhancement strategy
• Set expectations and rules when going hybrid
• Strict focus on mobile web performance
TAKE AWAYSPERFORMANCE MULTI-PLATFORM
![Page 113: Embracing Performance in Today's Multi-Platform Macrocosm](https://reader038.vdocuments.mx/reader038/viewer/2022110118/554a1e61b4c905825d8b55ee/html5/thumbnails/113.jpg)
#bdconf
THANK YOUQUESTIONS?http://bit.ly/bdconf-perf-macrocosm
More����������� ������������������ info����������� ������������������ under����������� ������������������ follow-up����������� ������������������ blog����������� ������������������ post����������� ������������������ (including����������� ������������������ slides)