•advances in tvmlkitdevstreaming-cdn.apple.com/videos/wwdc/...data binding provide data using...
TRANSCRIPT
![Page 1: •Advances in TVMLKitdevstreaming-cdn.apple.com/videos/wwdc/...Data binding Provide data using dataItem property // Parse JSON text. let data = parseFromJSON(json); // Attach data](https://reader033.vdocument.in/reader033/viewer/2022043022/5f3de00bd48edd42325a0848/html5/thumbnails/1.jpg)
#WWDC17
© 2017 Apple Inc. All rights reserved. Redistribution or public display not permitted without written permission from Apple.
Trevor Cortez, Localization Engineer Parry Panesar, tvOS Engineer Jeremy Foo, tvOS Engineer
•Advances in TVMLKit • Session 202
App Frameworks
![Page 2: •Advances in TVMLKitdevstreaming-cdn.apple.com/videos/wwdc/...Data binding Provide data using dataItem property // Parse JSON text. let data = parseFromJSON(json); // Attach data](https://reader033.vdocument.in/reader033/viewer/2022043022/5f3de00bd48edd42325a0848/html5/thumbnails/2.jpg)
•Right-to-left languages •Template optimizations •Development using Web Inspector
![Page 3: •Advances in TVMLKitdevstreaming-cdn.apple.com/videos/wwdc/...Data binding Provide data using dataItem property // Parse JSON text. let data = parseFromJSON(json); // Attach data](https://reader033.vdocument.in/reader033/viewer/2022043022/5f3de00bd48edd42325a0848/html5/thumbnails/3.jpg)
Trevor Cortez, Localization Engineer
•Right-to-Left Languages
![Page 4: •Advances in TVMLKitdevstreaming-cdn.apple.com/videos/wwdc/...Data binding Provide data using dataItem property // Parse JSON text. let data = parseFromJSON(json); // Attach data](https://reader033.vdocument.in/reader033/viewer/2022043022/5f3de00bd48edd42325a0848/html5/thumbnails/4.jpg)
Right-to-Left Languages
Arabic and Hebrew new in tvOS 11
![Page 5: •Advances in TVMLKitdevstreaming-cdn.apple.com/videos/wwdc/...Data binding Provide data using dataItem property // Parse JSON text. let data = parseFromJSON(json); // Attach data](https://reader033.vdocument.in/reader033/viewer/2022043022/5f3de00bd48edd42325a0848/html5/thumbnails/5.jpg)
Right-to-Left Languages
Arabic and Hebrew new in tvOS 11
400 million speakers worldwide
![Page 6: •Advances in TVMLKitdevstreaming-cdn.apple.com/videos/wwdc/...Data binding Provide data using dataItem property // Parse JSON text. let data = parseFromJSON(json); // Attach data](https://reader033.vdocument.in/reader033/viewer/2022043022/5f3de00bd48edd42325a0848/html5/thumbnails/6.jpg)
![Page 7: •Advances in TVMLKitdevstreaming-cdn.apple.com/videos/wwdc/...Data binding Provide data using dataItem property // Parse JSON text. let data = parseFromJSON(json); // Attach data](https://reader033.vdocument.in/reader033/viewer/2022043022/5f3de00bd48edd42325a0848/html5/thumbnails/7.jpg)
![Page 8: •Advances in TVMLKitdevstreaming-cdn.apple.com/videos/wwdc/...Data binding Provide data using dataItem property // Parse JSON text. let data = parseFromJSON(json); // Attach data](https://reader033.vdocument.in/reader033/viewer/2022043022/5f3de00bd48edd42325a0848/html5/thumbnails/8.jpg)
![Page 9: •Advances in TVMLKitdevstreaming-cdn.apple.com/videos/wwdc/...Data binding Provide data using dataItem property // Parse JSON text. let data = parseFromJSON(json); // Attach data](https://reader033.vdocument.in/reader033/viewer/2022043022/5f3de00bd48edd42325a0848/html5/thumbnails/9.jpg)
![Page 10: •Advances in TVMLKitdevstreaming-cdn.apple.com/videos/wwdc/...Data binding Provide data using dataItem property // Parse JSON text. let data = parseFromJSON(json); // Attach data](https://reader033.vdocument.in/reader033/viewer/2022043022/5f3de00bd48edd42325a0848/html5/thumbnails/10.jpg)
Right-to-Left Languages
Arabic and Hebrew new in tvOS 11
400 million speakers worldwide
Built in support in TVMLKit
![Page 11: •Advances in TVMLKitdevstreaming-cdn.apple.com/videos/wwdc/...Data binding Provide data using dataItem property // Parse JSON text. let data = parseFromJSON(json); // Attach data](https://reader033.vdocument.in/reader033/viewer/2022043022/5f3de00bd48edd42325a0848/html5/thumbnails/11.jpg)
Right-to-Left Languages Adding support
Add Arabic or Hebrew in your Project Settings
Localizing with Xcode 9 Tuesday 10:20AM
![Page 12: •Advances in TVMLKitdevstreaming-cdn.apple.com/videos/wwdc/...Data binding Provide data using dataItem property // Parse JSON text. let data = parseFromJSON(json); // Attach data](https://reader033.vdocument.in/reader033/viewer/2022043022/5f3de00bd48edd42325a0848/html5/thumbnails/12.jpg)
Right-to-Left Languages
Layout
Text alignment
Images
![Page 13: •Advances in TVMLKitdevstreaming-cdn.apple.com/videos/wwdc/...Data binding Provide data using dataItem property // Parse JSON text. let data = parseFromJSON(json); // Attach data](https://reader033.vdocument.in/reader033/viewer/2022043022/5f3de00bd48edd42325a0848/html5/thumbnails/13.jpg)
Right-to-Left Languages Layout
New context aware values for tv-align and tv-position
leading, trailing resolve to right and left at runtime
NEW
![Page 14: •Advances in TVMLKitdevstreaming-cdn.apple.com/videos/wwdc/...Data binding Provide data using dataItem property // Parse JSON text. let data = parseFromJSON(json); // Attach data](https://reader033.vdocument.in/reader033/viewer/2022043022/5f3de00bd48edd42325a0848/html5/thumbnails/14.jpg)
Right-to-Left Languages Layout
New context aware values for tv-align and tv-position
leading, trailing resolve to right and left at runtime
NEW
.collectionListLockupImage { tv-position: right; } .sectionHeaderTitle { tv-align: left; }
![Page 15: •Advances in TVMLKitdevstreaming-cdn.apple.com/videos/wwdc/...Data binding Provide data using dataItem property // Parse JSON text. let data = parseFromJSON(json); // Attach data](https://reader033.vdocument.in/reader033/viewer/2022043022/5f3de00bd48edd42325a0848/html5/thumbnails/15.jpg)
New context aware values for tv-align and tv-position
leading, trailing resolve to right and left at runtime
Right-to-Left Languages Layout
NEW
.collectionListLockupImage { tv-position: right; } .sectionHeaderTitle { tv-align: left; }
![Page 16: •Advances in TVMLKitdevstreaming-cdn.apple.com/videos/wwdc/...Data binding Provide data using dataItem property // Parse JSON text. let data = parseFromJSON(json); // Attach data](https://reader033.vdocument.in/reader033/viewer/2022043022/5f3de00bd48edd42325a0848/html5/thumbnails/16.jpg)
New context aware values for tv-align and tv-position
leading, trailing resolve to right and left at runtime
Right-to-Left Languages Layout
NEW
.collectionListLockupImage { tv-position: right; } .sectionHeaderTitle { tv-align: left; }
.collectionListLockupImage { tv-position: trailing; } .sectionHeaderTitle { tv-align: leading; }
![Page 17: •Advances in TVMLKitdevstreaming-cdn.apple.com/videos/wwdc/...Data binding Provide data using dataItem property // Parse JSON text. let data = parseFromJSON(json); // Attach data](https://reader033.vdocument.in/reader033/viewer/2022043022/5f3de00bd48edd42325a0848/html5/thumbnails/17.jpg)
Adjust value inside media query for Layout Direction
•Margin
•Padding
Right-to-Left Languages Layout
NEW
![Page 18: •Advances in TVMLKitdevstreaming-cdn.apple.com/videos/wwdc/...Data binding Provide data using dataItem property // Parse JSON text. let data = parseFromJSON(json); // Attach data](https://reader033.vdocument.in/reader033/viewer/2022043022/5f3de00bd48edd42325a0848/html5/thumbnails/18.jpg)
@media (layout-direction: ltr) { .my_interesting_image { margin: 0 12 0 0; } } @media (layout-direction: rtl) { .my_interesting_image { margin: 0 0 0 12; } }
Adjust value inside media query for Layout Direction
•Margin
•Padding
Right-to-Left Languages Layout
NEW
![Page 19: •Advances in TVMLKitdevstreaming-cdn.apple.com/videos/wwdc/...Data binding Provide data using dataItem property // Parse JSON text. let data = parseFromJSON(json); // Attach data](https://reader033.vdocument.in/reader033/viewer/2022043022/5f3de00bd48edd42325a0848/html5/thumbnails/19.jpg)
Adjust value inside media query for Layout Direction
•Margin
•Padding
Right-to-Left Languages Layout
@media (layout-direction: ltr) { .my_interesting_image { margin: 0 12 0 0; } } @media (layout-direction: rtl) { .my_interesting_image { margin: 0 0 0 12; } }
NEW
![Page 20: •Advances in TVMLKitdevstreaming-cdn.apple.com/videos/wwdc/...Data binding Provide data using dataItem property // Parse JSON text. let data = parseFromJSON(json); // Attach data](https://reader033.vdocument.in/reader033/viewer/2022043022/5f3de00bd48edd42325a0848/html5/thumbnails/20.jpg)
Adjust value inside media query for Layout Direction
•Margin
•Padding
Right-to-Left Languages Layout
@media (layout-direction: ltr) { .my_interesting_image { margin: 0 12 0 0; } } @media (layout-direction: rtl) { .my_interesting_image { margin: 0 0 0 12; } }
NEW
![Page 21: •Advances in TVMLKitdevstreaming-cdn.apple.com/videos/wwdc/...Data binding Provide data using dataItem property // Parse JSON text. let data = parseFromJSON(json); // Attach data](https://reader033.vdocument.in/reader033/viewer/2022043022/5f3de00bd48edd42325a0848/html5/thumbnails/21.jpg)
Left Center Right
Lorem Ipsum Lorem Ipsum Lorem Ipsum
أبجد هوز حطي أبجد هوز حطي أبجد هوز حطي
Right-to-Left Languages Text alignment
![Page 22: •Advances in TVMLKitdevstreaming-cdn.apple.com/videos/wwdc/...Data binding Provide data using dataItem property // Parse JSON text. let data = parseFromJSON(json); // Attach data](https://reader033.vdocument.in/reader033/viewer/2022043022/5f3de00bd48edd42325a0848/html5/thumbnails/22.jpg)
Left Center Right
Lorem Ipsum Lorem Ipsum Lorem Ipsum
أبجد هوز حطي أبجد هوز حطي أبجد هوز حطي
Right-to-Left Languages Text alignment
![Page 23: •Advances in TVMLKitdevstreaming-cdn.apple.com/videos/wwdc/...Data binding Provide data using dataItem property // Parse JSON text. let data = parseFromJSON(json); // Attach data](https://reader033.vdocument.in/reader033/viewer/2022043022/5f3de00bd48edd42325a0848/html5/thumbnails/23.jpg)
Left Center Right Natural
Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum
أبجد هوز حطي أبجد هوز حطي أبجد هوز حطي أبجد هوز حطي
Right-to-Left Languages Text alignment
![Page 24: •Advances in TVMLKitdevstreaming-cdn.apple.com/videos/wwdc/...Data binding Provide data using dataItem property // Parse JSON text. let data = parseFromJSON(json); // Attach data](https://reader033.vdocument.in/reader033/viewer/2022043022/5f3de00bd48edd42325a0848/html5/thumbnails/24.jpg)
Right-to-Left Languages Images
![Page 25: •Advances in TVMLKitdevstreaming-cdn.apple.com/videos/wwdc/...Data binding Provide data using dataItem property // Parse JSON text. let data = parseFromJSON(json); // Attach data](https://reader033.vdocument.in/reader033/viewer/2022043022/5f3de00bd48edd42325a0848/html5/thumbnails/25.jpg)
Right-to-Left Languages Resource images
For Resource images use asset catalogs
Specify dedicated images or mirror for RTL
![Page 26: •Advances in TVMLKitdevstreaming-cdn.apple.com/videos/wwdc/...Data binding Provide data using dataItem property // Parse JSON text. let data = parseFromJSON(json); // Attach data](https://reader033.vdocument.in/reader033/viewer/2022043022/5f3de00bd48edd42325a0848/html5/thumbnails/26.jpg)
For server-side images, use layout direction media queries to load direction-specific assets
Right-to-Left Languages Remote images
<img srcset=“url1 (layout-direction:ltr), url2 (layout-direction:rtl)” ... />
NEW
![Page 27: •Advances in TVMLKitdevstreaming-cdn.apple.com/videos/wwdc/...Data binding Provide data using dataItem property // Parse JSON text. let data = parseFromJSON(json); // Attach data](https://reader033.vdocument.in/reader033/viewer/2022043022/5f3de00bd48edd42325a0848/html5/thumbnails/27.jpg)
For server-side images, use layout direction media queries to load direction-specific assets
Right-to-Left Languages Remote images
<img srcset=“url1 (layout-direction:ltr), url2 (layout-direction:rtl)” ... />
NEW
![Page 28: •Advances in TVMLKitdevstreaming-cdn.apple.com/videos/wwdc/...Data binding Provide data using dataItem property // Parse JSON text. let data = parseFromJSON(json); // Attach data](https://reader033.vdocument.in/reader033/viewer/2022043022/5f3de00bd48edd42325a0848/html5/thumbnails/28.jpg)
For server-side images, use layout direction media queries to load direction-specific assets
Right-to-Left Languages Remote images
<img srcset=“url1 (layout-direction:ltr), url2 (layout-direction:rtl)” ... />
NEW
![Page 29: •Advances in TVMLKitdevstreaming-cdn.apple.com/videos/wwdc/...Data binding Provide data using dataItem property // Parse JSON text. let data = parseFromJSON(json); // Attach data](https://reader033.vdocument.in/reader033/viewer/2022043022/5f3de00bd48edd42325a0848/html5/thumbnails/29.jpg)
•Demo
![Page 30: •Advances in TVMLKitdevstreaming-cdn.apple.com/videos/wwdc/...Data binding Provide data using dataItem property // Parse JSON text. let data = parseFromJSON(json); // Attach data](https://reader033.vdocument.in/reader033/viewer/2022043022/5f3de00bd48edd42325a0848/html5/thumbnails/30.jpg)
Recap
Leading and trailing values for layout
Media queries for margin and padding
Natural text alignment
Alternate image assets as necessary
Test with RTL pseudolocalization language
![Page 31: •Advances in TVMLKitdevstreaming-cdn.apple.com/videos/wwdc/...Data binding Provide data using dataItem property // Parse JSON text. let data = parseFromJSON(json); // Attach data](https://reader033.vdocument.in/reader033/viewer/2022043022/5f3de00bd48edd42325a0848/html5/thumbnails/31.jpg)
Auto Layout with leading/trailing constraints
effectiveLayoutDirection when managing frames
Right-to-Left Languages Handling custom views
Internationalization Best Practices WWDC 2016
What's New in International User Interfaces WWDC 2016
![Page 32: •Advances in TVMLKitdevstreaming-cdn.apple.com/videos/wwdc/...Data binding Provide data using dataItem property // Parse JSON text. let data = parseFromJSON(json); // Attach data](https://reader033.vdocument.in/reader033/viewer/2022043022/5f3de00bd48edd42325a0848/html5/thumbnails/32.jpg)
Parry Panesar, tvOS Engineer
•Template Optimizations
![Page 33: •Advances in TVMLKitdevstreaming-cdn.apple.com/videos/wwdc/...Data binding Provide data using dataItem property // Parse JSON text. let data = parseFromJSON(json); // Attach data](https://reader033.vdocument.in/reader033/viewer/2022043022/5f3de00bd48edd42325a0848/html5/thumbnails/33.jpg)
![Page 34: •Advances in TVMLKitdevstreaming-cdn.apple.com/videos/wwdc/...Data binding Provide data using dataItem property // Parse JSON text. let data = parseFromJSON(json); // Attach data](https://reader033.vdocument.in/reader033/viewer/2022043022/5f3de00bd48edd42325a0848/html5/thumbnails/34.jpg)
<grid>
![Page 35: •Advances in TVMLKitdevstreaming-cdn.apple.com/videos/wwdc/...Data binding Provide data using dataItem property // Parse JSON text. let data = parseFromJSON(json); // Attach data](https://reader033.vdocument.in/reader033/viewer/2022043022/5f3de00bd48edd42325a0848/html5/thumbnails/35.jpg)
<lockup>
![Page 36: •Advances in TVMLKitdevstreaming-cdn.apple.com/videos/wwdc/...Data binding Provide data using dataItem property // Parse JSON text. let data = parseFromJSON(json); // Attach data](https://reader033.vdocument.in/reader033/viewer/2022043022/5f3de00bd48edd42325a0848/html5/thumbnails/36.jpg)
<title>
<img>
![Page 37: •Advances in TVMLKitdevstreaming-cdn.apple.com/videos/wwdc/...Data binding Provide data using dataItem property // Parse JSON text. let data = parseFromJSON(json); // Attach data](https://reader033.vdocument.in/reader033/viewer/2022043022/5f3de00bd48edd42325a0848/html5/thumbnails/37.jpg)
![Page 38: •Advances in TVMLKitdevstreaming-cdn.apple.com/videos/wwdc/...Data binding Provide data using dataItem property // Parse JSON text. let data = parseFromJSON(json); // Attach data](https://reader033.vdocument.in/reader033/viewer/2022043022/5f3de00bd48edd42325a0848/html5/thumbnails/38.jpg)
Scalability IssuesTi
me
Number of Items
![Page 39: •Advances in TVMLKitdevstreaming-cdn.apple.com/videos/wwdc/...Data binding Provide data using dataItem property // Parse JSON text. let data = parseFromJSON(json); // Attach data](https://reader033.vdocument.in/reader033/viewer/2022043022/5f3de00bd48edd42325a0848/html5/thumbnails/39.jpg)
Scalability Issues
Parsing overhead • Data to DOM • DOM to views
![Page 40: •Advances in TVMLKitdevstreaming-cdn.apple.com/videos/wwdc/...Data binding Provide data using dataItem property // Parse JSON text. let data = parseFromJSON(json); // Attach data](https://reader033.vdocument.in/reader033/viewer/2022043022/5f3de00bd48edd42325a0848/html5/thumbnails/40.jpg)
Scalability Issues
Parsing overhead • Data to DOM • DOM to views
Large memory footprint
![Page 41: •Advances in TVMLKitdevstreaming-cdn.apple.com/videos/wwdc/...Data binding Provide data using dataItem property // Parse JSON text. let data = parseFromJSON(json); // Attach data](https://reader033.vdocument.in/reader033/viewer/2022043022/5f3de00bd48edd42325a0848/html5/thumbnails/41.jpg)
Template Optimizations
Prototypes and Data Binding
Pagination
NEW
![Page 42: •Advances in TVMLKitdevstreaming-cdn.apple.com/videos/wwdc/...Data binding Provide data using dataItem property // Parse JSON text. let data = parseFromJSON(json); // Attach data](https://reader033.vdocument.in/reader033/viewer/2022043022/5f3de00bd48edd42325a0848/html5/thumbnails/42.jpg)
Template Optimizations
{ “objects” : [
{ “url” : “url1”, “title” : “Title 1”
},
{ “url” : “url2”, “title” : “Title 2”
},
.
.
.
. ]
}
<grid>
</grid>
Data Template
JavaScript XML
</section>
<section>
![Page 43: •Advances in TVMLKitdevstreaming-cdn.apple.com/videos/wwdc/...Data binding Provide data using dataItem property // Parse JSON text. let data = parseFromJSON(json); // Attach data](https://reader033.vdocument.in/reader033/viewer/2022043022/5f3de00bd48edd42325a0848/html5/thumbnails/43.jpg)
{ “objects” : [
{ “url” : “url1”, “title” : “Title 1”
},
{ “url” : “url2”, “title” : “Title 2”
},
.
.
.
. ]
}
Template Optimizations
</section>
<grid>
</grid>
JavaScript XML
Data Template
<section>
![Page 44: •Advances in TVMLKitdevstreaming-cdn.apple.com/videos/wwdc/...Data binding Provide data using dataItem property // Parse JSON text. let data = parseFromJSON(json); // Attach data](https://reader033.vdocument.in/reader033/viewer/2022043022/5f3de00bd48edd42325a0848/html5/thumbnails/44.jpg)
{ “objects” : [
{ “url” : “url1”, “title” : “Title 1”
},
{ “url” : “url2”, “title” : “Title 2”
},
.
.
.
. ]
}
Template Optimizations
</section>
<grid>
</grid>
JavaScript XML
<lockup> <img src=“url2” width=“308” height=“308”/> <title>Title 2</title>
</lockup>
<lockup> <img src=“url1” width=“308” height=“308”/> <title>Title 1</title>
</lockup>
.
.
.
.
Data Template
<section>
![Page 45: •Advances in TVMLKitdevstreaming-cdn.apple.com/videos/wwdc/...Data binding Provide data using dataItem property // Parse JSON text. let data = parseFromJSON(json); // Attach data](https://reader033.vdocument.in/reader033/viewer/2022043022/5f3de00bd48edd42325a0848/html5/thumbnails/45.jpg)
Template Optimizations
</section>
<grid>
</grid>
Template
XML
<lockup> <img src=“url2” width=“308” height=“308”/> <title>Title 2</title>
</lockup>
<lockup> <img src=“url1” width=“308” height=“308”/> <title>Title 1</title>
</lockup>
.
.
.
.
<section>
![Page 46: •Advances in TVMLKitdevstreaming-cdn.apple.com/videos/wwdc/...Data binding Provide data using dataItem property // Parse JSON text. let data = parseFromJSON(json); // Attach data](https://reader033.vdocument.in/reader033/viewer/2022043022/5f3de00bd48edd42325a0848/html5/thumbnails/46.jpg)
Template Optimizations
</section>
<grid>
</grid>
Template
XML
<lockup> <img src=“url2” width=“308” height=“308”/> <title>Title 2</title>
</lockup>
<lockup> <img src=“url1” width=“308” height=“308”/> <title>Title 1</title>
</lockup>
.
.
.
.
<section>
![Page 47: •Advances in TVMLKitdevstreaming-cdn.apple.com/videos/wwdc/...Data binding Provide data using dataItem property // Parse JSON text. let data = parseFromJSON(json); // Attach data](https://reader033.vdocument.in/reader033/viewer/2022043022/5f3de00bd48edd42325a0848/html5/thumbnails/47.jpg)
<section>
</section>
<grid>
</grid>
Template
<lockup> <img width=“308” height=“308”/> <title></title>
</lockup>
.
.
.
.
Template OptimizationsXML
<lockup> <img width=“308” height=“308”/> <title></title>
</lockup>
![Page 48: •Advances in TVMLKitdevstreaming-cdn.apple.com/videos/wwdc/...Data binding Provide data using dataItem property // Parse JSON text. let data = parseFromJSON(json); // Attach data](https://reader033.vdocument.in/reader033/viewer/2022043022/5f3de00bd48edd42325a0848/html5/thumbnails/48.jpg)
<section>
</section>
<grid>
</grid>
Template
<lockup> <img width=“308” height=“308”/> <title></title>
</lockup>
.
.
.
.
Template OptimizationsXML
<lockup> <img width=“308” height=“308”/> <title></title>
</lockup>
![Page 49: •Advances in TVMLKitdevstreaming-cdn.apple.com/videos/wwdc/...Data binding Provide data using dataItem property // Parse JSON text. let data = parseFromJSON(json); // Attach data](https://reader033.vdocument.in/reader033/viewer/2022043022/5f3de00bd48edd42325a0848/html5/thumbnails/49.jpg)
Template Optimizations
Template
XML
</section>
<grid>
</grid>
<section>
<lockup> <img width=“308” height=“308”/> <title></title>
</lockup>
![Page 50: •Advances in TVMLKitdevstreaming-cdn.apple.com/videos/wwdc/...Data binding Provide data using dataItem property // Parse JSON text. let data = parseFromJSON(json); // Attach data](https://reader033.vdocument.in/reader033/viewer/2022043022/5f3de00bd48edd42325a0848/html5/thumbnails/50.jpg)
Template Optimizations
Template
XML
</section>
<prototypes>
</prototypes>
<grid>
</grid>
<section>
<lockup> <img width=“308” height=“308”/> <title></title>
</lockup>
![Page 51: •Advances in TVMLKitdevstreaming-cdn.apple.com/videos/wwdc/...Data binding Provide data using dataItem property // Parse JSON text. let data = parseFromJSON(json); // Attach data](https://reader033.vdocument.in/reader033/viewer/2022043022/5f3de00bd48edd42325a0848/html5/thumbnails/51.jpg)
Template Optimizations Prototype
Defines layout
Facilitates partial DOM authoring
![Page 52: •Advances in TVMLKitdevstreaming-cdn.apple.com/videos/wwdc/...Data binding Provide data using dataItem property // Parse JSON text. let data = parseFromJSON(json); // Attach data](https://reader033.vdocument.in/reader033/viewer/2022043022/5f3de00bd48edd42325a0848/html5/thumbnails/52.jpg)
Template Optimizations
{ “objects” : [
{ “url” : “url1”, “title” : “Title 1”
},
{ “url” : “url2”, “title” : “Title 2”
},
.
.
.
. ]
}
Data Template
JavaScript XML
</section>
<lockup> <img width=“308” height=“308”/> <title></title>
</lockup>
<prototypes>
</prototypes>
<grid>
</grid>
<section>
![Page 53: •Advances in TVMLKitdevstreaming-cdn.apple.com/videos/wwdc/...Data binding Provide data using dataItem property // Parse JSON text. let data = parseFromJSON(json); // Attach data](https://reader033.vdocument.in/reader033/viewer/2022043022/5f3de00bd48edd42325a0848/html5/thumbnails/53.jpg)
Template Optimizations
{ “objects” : [
{ “url” : “url1”, “title” : “Title 1”
},
{ “url” : “url2”, “title” : “Title 2”
},
.
.
.
. ]
}
Data Template
JavaScript XML
</section>
<section binding=“items : {objects};”>
<lockup> <img binding=“@src : {url};” width=“308” height=“308”/> <title binding=“textContent : {title};”></title>
</lockup>
<prototypes>
</prototypes>
<grid>
</grid>
![Page 54: •Advances in TVMLKitdevstreaming-cdn.apple.com/videos/wwdc/...Data binding Provide data using dataItem property // Parse JSON text. let data = parseFromJSON(json); // Attach data](https://reader033.vdocument.in/reader033/viewer/2022043022/5f3de00bd48edd42325a0848/html5/thumbnails/54.jpg)
Template Optimizations
{ “objects” : [
{ “url” : “url1”, “title” : “Title 1”
},
{ “url” : “url2”, “title” : “Title 2”
},
.
.
.
. ]
}
Data Template
JavaScript XML
<lockup> <img binding=“@src : {url};” width=“308” height=“308”/> <title binding=“textContent : {title};”></title>
</lockup>
<prototypes>
<grid>
</prototypes>
</grid>
<section binding=“items : {objects};”>
</section>
![Page 55: •Advances in TVMLKitdevstreaming-cdn.apple.com/videos/wwdc/...Data binding Provide data using dataItem property // Parse JSON text. let data = parseFromJSON(json); // Attach data](https://reader033.vdocument.in/reader033/viewer/2022043022/5f3de00bd48edd42325a0848/html5/thumbnails/55.jpg)
Template Optimizations
{ “objects” : [
{ “url” : “url1”, “title” : “Title 1”
},
{ “url” : “url2”, “title” : “Title 2”
},
.
.
.
. ]
}
Data Template
JavaScript XML
<lockup> <img binding=“@src : {url};” width=“308” height=“308”/> <title binding=“textContent : {title};”></title>
</lockup>
<prototypes>
<grid>
</prototypes>
</grid>
<section binding=“items : {objects};”>
</section>
![Page 56: •Advances in TVMLKitdevstreaming-cdn.apple.com/videos/wwdc/...Data binding Provide data using dataItem property // Parse JSON text. let data = parseFromJSON(json); // Attach data](https://reader033.vdocument.in/reader033/viewer/2022043022/5f3de00bd48edd42325a0848/html5/thumbnails/56.jpg)
Template Optimizations
{ “objects” : [
{ “url” : “url1”, “title” : “Title 1”
},
{ “url” : “url2”, “title” : “Title 2”
},
.
.
.
. ]
}
Data Template
JavaScript XML
<lockup> <img binding=“@src : {url};” width=“308” height=“308”/> <title binding=“textContent : {title};”></title>
</lockup>
<prototypes>
<grid>
</prototypes>
</grid></section>
<section binding=“items : {objects};”>
![Page 57: •Advances in TVMLKitdevstreaming-cdn.apple.com/videos/wwdc/...Data binding Provide data using dataItem property // Parse JSON text. let data = parseFromJSON(json); // Attach data](https://reader033.vdocument.in/reader033/viewer/2022043022/5f3de00bd48edd42325a0848/html5/thumbnails/57.jpg)
Associates data to element
Declared through binding attribute • @<attr> • textContent • items
Template Optimizations Data binding
![Page 58: •Advances in TVMLKitdevstreaming-cdn.apple.com/videos/wwdc/...Data binding Provide data using dataItem property // Parse JSON text. let data = parseFromJSON(json); // Attach data](https://reader033.vdocument.in/reader033/viewer/2022043022/5f3de00bd48edd42325a0848/html5/thumbnails/58.jpg)
Template Optimizations Data binding
Provide data using dataItem property
// Parse JSON text. let data = parseFromJSON(json);
// Attach data to section element. let section = document.createElement(“section”); section.dataItem = data;
![Page 59: •Advances in TVMLKitdevstreaming-cdn.apple.com/videos/wwdc/...Data binding Provide data using dataItem property // Parse JSON text. let data = parseFromJSON(json); // Attach data](https://reader033.vdocument.in/reader033/viewer/2022043022/5f3de00bd48edd42325a0848/html5/thumbnails/59.jpg)
Template Optimizations Data binding
Provide data using dataItem property
// Parse JSON text. let data = parseFromJSON(json);
// Attach data to section element. let section = document.createElement(“section”); section.dataItem = data;
![Page 60: •Advances in TVMLKitdevstreaming-cdn.apple.com/videos/wwdc/...Data binding Provide data using dataItem property // Parse JSON text. let data = parseFromJSON(json); // Attach data](https://reader033.vdocument.in/reader033/viewer/2022043022/5f3de00bd48edd42325a0848/html5/thumbnails/60.jpg)
Template Optimizations Data binding
Provide data using dataItem property
// Parse JSON text. let data = parseFromJSON(json);
// Attach data to section element. let section = document.createElement(“section”); section.dataItem = data;
![Page 61: •Advances in TVMLKitdevstreaming-cdn.apple.com/videos/wwdc/...Data binding Provide data using dataItem property // Parse JSON text. let data = parseFromJSON(json); // Attach data](https://reader033.vdocument.in/reader033/viewer/2022043022/5f3de00bd48edd42325a0848/html5/thumbnails/61.jpg)
Template Optimizations Data binding
Provide data using dataItem property
// Parse JSON text. let data = parseFromJSON(json);
// Attach data to section element. let section = document.createElement("section"); section.dataItem = data;
![Page 62: •Advances in TVMLKitdevstreaming-cdn.apple.com/videos/wwdc/...Data binding Provide data using dataItem property // Parse JSON text. let data = parseFromJSON(json); // Attach data](https://reader033.vdocument.in/reader033/viewer/2022043022/5f3de00bd48edd42325a0848/html5/thumbnails/62.jpg)
Template Optimizations Data binding
Provide data using dataItem property
// Parse JSON text. let data = parseFromJSON(json);
// Attach data to section element. let section = document.createElement("section"); section.dataItem = data;
![Page 63: •Advances in TVMLKitdevstreaming-cdn.apple.com/videos/wwdc/...Data binding Provide data using dataItem property // Parse JSON text. let data = parseFromJSON(json); // Attach data](https://reader033.vdocument.in/reader033/viewer/2022043022/5f3de00bd48edd42325a0848/html5/thumbnails/63.jpg)
Append using needsmore • shelf, grid, list, stackTemplate • Invoked towards the end
Template Optimizations Pagination
![Page 64: •Advances in TVMLKitdevstreaming-cdn.apple.com/videos/wwdc/...Data binding Provide data using dataItem property // Parse JSON text. let data = parseFromJSON(json); // Attach data](https://reader033.vdocument.in/reader033/viewer/2022043022/5f3de00bd48edd42325a0848/html5/thumbnails/64.jpg)
Template Optimizations Pagination
Append using needsmore • shelf, grid, list, stackTemplate • Invoked towards the end
Requires observable objects
![Page 65: •Advances in TVMLKitdevstreaming-cdn.apple.com/videos/wwdc/...Data binding Provide data using dataItem property // Parse JSON text. let data = parseFromJSON(json); // Attach data](https://reader033.vdocument.in/reader033/viewer/2022043022/5f3de00bd48edd42325a0848/html5/thumbnails/65.jpg)
// Map item objects into DataItem objects let dataItems = objects.map((object) => { let dataItem = new DataItem("MyObject", object.id); dataItem.url = object.url; dataItem.title = object.title; return dataItem; });
// Create a data item for the grid. let sectionDataItem = new DataItem(); sectionDataItem.objects = dataItems;
// Provide data through DOM let sectionElement = document.createElement("section"); sectionElement.dataItem = sectionDataItem;
![Page 66: •Advances in TVMLKitdevstreaming-cdn.apple.com/videos/wwdc/...Data binding Provide data using dataItem property // Parse JSON text. let data = parseFromJSON(json); // Attach data](https://reader033.vdocument.in/reader033/viewer/2022043022/5f3de00bd48edd42325a0848/html5/thumbnails/66.jpg)
// Map item objects into DataItem objects let dataItems = objects.map((object) => { let dataItem = new DataItem("MyObject", object.id); dataItem.url = object.url; dataItem.title = object.title; return dataItem; });
// Create a data item for the grid. let sectionDataItem = new DataItem(); sectionDataItem.objects = dataItems;
// Provide data through DOM let sectionElement = document.createElement("section"); sectionElement.dataItem = sectionDataItem;
![Page 67: •Advances in TVMLKitdevstreaming-cdn.apple.com/videos/wwdc/...Data binding Provide data using dataItem property // Parse JSON text. let data = parseFromJSON(json); // Attach data](https://reader033.vdocument.in/reader033/viewer/2022043022/5f3de00bd48edd42325a0848/html5/thumbnails/67.jpg)
// Map item objects into DataItem objects let dataItems = objects.map((object) => { let dataItem = new DataItem("MyObject", object.id); dataItem.url = object.url; dataItem.title = object.title; return dataItem; });
// Create a data item for the grid. let sectionDataItem = new DataItem(); sectionDataItem.objects = dataItems;
// Provide data through DOM let sectionElement = document.createElement("section"); sectionElement.dataItem = sectionDataItem;
![Page 68: •Advances in TVMLKitdevstreaming-cdn.apple.com/videos/wwdc/...Data binding Provide data using dataItem property // Parse JSON text. let data = parseFromJSON(json); // Attach data](https://reader033.vdocument.in/reader033/viewer/2022043022/5f3de00bd48edd42325a0848/html5/thumbnails/68.jpg)
// Map item objects into DataItem objects let dataItems = objects.map((object) => { let dataItem = new DataItem("MyObject", object.id); dataItem.url = object.url; dataItem.title = object.title; return dataItem; });
// Create a data item for the grid. let sectionDataItem = new DataItem(); sectionDataItem.objects = dataItems;
// Provide data through DOM let sectionElement = document.createElement("section"); sectionElement.dataItem = sectionDataItem;
![Page 69: •Advances in TVMLKitdevstreaming-cdn.apple.com/videos/wwdc/...Data binding Provide data using dataItem property // Parse JSON text. let data = parseFromJSON(json); // Attach data](https://reader033.vdocument.in/reader033/viewer/2022043022/5f3de00bd48edd42325a0848/html5/thumbnails/69.jpg)
// Map item objects into DataItem objects let dataItems = objects.map((object) => { let dataItem = new DataItem("MyObject", object.id); dataItem.url = object.url; dataItem.title = object.title; return dataItem; });
// Create a data item for the grid. let sectionDataItem = new DataItem(); sectionDataItem.objects = dataItems;
// Provide data through DOM let sectionElement = document.createElement("section"); sectionElement.dataItem = sectionDataItem;
![Page 70: •Advances in TVMLKitdevstreaming-cdn.apple.com/videos/wwdc/...Data binding Provide data using dataItem property // Parse JSON text. let data = parseFromJSON(json); // Attach data](https://reader033.vdocument.in/reader033/viewer/2022043022/5f3de00bd48edd42325a0848/html5/thumbnails/70.jpg)
// Map item objects into DataItem objects let dataItems = objects.map((object) => { let dataItem = new DataItem("MyObject", object.id); dataItem.url = object.url; dataItem.title = object.title; return dataItem; });
// Create a data item for the grid. let sectionDataItem = new DataItem(); sectionDataItem.objects = dataItems;
// Provide data through DOM let sectionElement = document.createElement("section"); sectionElement.dataItem = sectionDataItem;
![Page 71: •Advances in TVMLKitdevstreaming-cdn.apple.com/videos/wwdc/...Data binding Provide data using dataItem property // Parse JSON text. let data = parseFromJSON(json); // Attach data](https://reader033.vdocument.in/reader033/viewer/2022043022/5f3de00bd48edd42325a0848/html5/thumbnails/71.jpg)
// Map item objects into DataItem objects let dataItems = objects.map((object) => { let dataItem = new DataItem("MyObject", object.id); dataItem.url = object.url; dataItem.title = object.title; return dataItem; });
// Create a data item for the grid. let sectionDataItem = new DataItem(); sectionDataItem.objects = dataItems;
// Provide data through DOM let sectionElement = document.createElement("section"); sectionElement.dataItem = sectionDataItem;
![Page 72: •Advances in TVMLKitdevstreaming-cdn.apple.com/videos/wwdc/...Data binding Provide data using dataItem property // Parse JSON text. let data = parseFromJSON(json); // Attach data](https://reader033.vdocument.in/reader033/viewer/2022043022/5f3de00bd48edd42325a0848/html5/thumbnails/72.jpg)
// needsmore event handler. stackTemplate.addEventListener("needsmore", (event) => { // Fetch next batch of items. fetchNextBatch((objects) => {
...
// Append to existing data items. Array.prototype.push.apply(sectionElement.dataItem.objects, dataItems); sectionElement.dataItem.touchPropertyPath("objects"); });
}
![Page 73: •Advances in TVMLKitdevstreaming-cdn.apple.com/videos/wwdc/...Data binding Provide data using dataItem property // Parse JSON text. let data = parseFromJSON(json); // Attach data](https://reader033.vdocument.in/reader033/viewer/2022043022/5f3de00bd48edd42325a0848/html5/thumbnails/73.jpg)
// needsmore event handler. stackTemplate.addEventListener("needsmore", (event) => { // Fetch next batch of items. fetchNextBatch((objects) => {
...
// Append to existing data items. Array.prototype.push.apply(sectionElement.dataItem.objects, dataItems); sectionElement.dataItem.touchPropertyPath("objects"); });
}
![Page 74: •Advances in TVMLKitdevstreaming-cdn.apple.com/videos/wwdc/...Data binding Provide data using dataItem property // Parse JSON text. let data = parseFromJSON(json); // Attach data](https://reader033.vdocument.in/reader033/viewer/2022043022/5f3de00bd48edd42325a0848/html5/thumbnails/74.jpg)
// needsmore event handler. stackTemplate.addEventListener(‘needsmore’, (event) => { // Fetch next batch of items. fetchNextBatch((objects) => {
...
// Append to existing data items. Array.prototype.push.apply(sectionElement.dataItem.objects, dataItems); sectionElement.dataItem.touchPropertyPath("objects"); });
}
![Page 75: •Advances in TVMLKitdevstreaming-cdn.apple.com/videos/wwdc/...Data binding Provide data using dataItem property // Parse JSON text. let data = parseFromJSON(json); // Attach data](https://reader033.vdocument.in/reader033/viewer/2022043022/5f3de00bd48edd42325a0848/html5/thumbnails/75.jpg)
// needsmore event handler. stackTemplate.addEventListener(‘needsmore’, (event) => { // Fetch next batch of items. fetchNextBatch((objects) => {
...
// Append to existing data items. Array.prototype.push.apply(sectionElement.dataItem.objects, dataItems); sectionElement.dataItem.touchPropertyPath("objects"); });
}
![Page 76: •Advances in TVMLKitdevstreaming-cdn.apple.com/videos/wwdc/...Data binding Provide data using dataItem property // Parse JSON text. let data = parseFromJSON(json); // Attach data](https://reader033.vdocument.in/reader033/viewer/2022043022/5f3de00bd48edd42325a0848/html5/thumbnails/76.jpg)
•Demo
![Page 77: •Advances in TVMLKitdevstreaming-cdn.apple.com/videos/wwdc/...Data binding Provide data using dataItem property // Parse JSON text. let data = parseFromJSON(json); // Attach data](https://reader033.vdocument.in/reader033/viewer/2022043022/5f3de00bd48edd42325a0848/html5/thumbnails/77.jpg)
Recap
Created template with prototypes
Specified data binding
Associated data to DOM
Implemented pagination
![Page 78: •Advances in TVMLKitdevstreaming-cdn.apple.com/videos/wwdc/...Data binding Provide data using dataItem property // Parse JSON text. let data = parseFromJSON(json); // Attach data](https://reader033.vdocument.in/reader033/viewer/2022043022/5f3de00bd48edd42325a0848/html5/thumbnails/78.jpg)
Template OptimizationsTi
me
Number of Items
![Page 79: •Advances in TVMLKitdevstreaming-cdn.apple.com/videos/wwdc/...Data binding Provide data using dataItem property // Parse JSON text. let data = parseFromJSON(json); // Attach data](https://reader033.vdocument.in/reader033/viewer/2022043022/5f3de00bd48edd42325a0848/html5/thumbnails/79.jpg)
Tim
e
Number of Items
Template Optimizations
![Page 80: •Advances in TVMLKitdevstreaming-cdn.apple.com/videos/wwdc/...Data binding Provide data using dataItem property // Parse JSON text. let data = parseFromJSON(json); // Attach data](https://reader033.vdocument.in/reader033/viewer/2022043022/5f3de00bd48edd42325a0848/html5/thumbnails/80.jpg)
Jeremy Foo, tvOS Engineer
•Development Using Web Inspector
![Page 81: •Advances in TVMLKitdevstreaming-cdn.apple.com/videos/wwdc/...Data binding Provide data using dataItem property // Parse JSON text. let data = parseFromJSON(json); // Attach data](https://reader033.vdocument.in/reader033/viewer/2022043022/5f3de00bd48edd42325a0848/html5/thumbnails/81.jpg)
![Page 82: •Advances in TVMLKitdevstreaming-cdn.apple.com/videos/wwdc/...Data binding Provide data using dataItem property // Parse JSON text. let data = parseFromJSON(json); // Attach data](https://reader033.vdocument.in/reader033/viewer/2022043022/5f3de00bd48edd42325a0848/html5/thumbnails/82.jpg)
![Page 83: •Advances in TVMLKitdevstreaming-cdn.apple.com/videos/wwdc/...Data binding Provide data using dataItem property // Parse JSON text. let data = parseFromJSON(json); // Attach data](https://reader033.vdocument.in/reader033/viewer/2022043022/5f3de00bd48edd42325a0848/html5/thumbnails/83.jpg)
Development Cycle
Speculative fixes
![Page 84: •Advances in TVMLKitdevstreaming-cdn.apple.com/videos/wwdc/...Data binding Provide data using dataItem property // Parse JSON text. let data = parseFromJSON(json); // Attach data](https://reader033.vdocument.in/reader033/viewer/2022043022/5f3de00bd48edd42325a0848/html5/thumbnails/84.jpg)
Development Cycle
Speculative fixes
Build-and-run cycle
![Page 85: •Advances in TVMLKitdevstreaming-cdn.apple.com/videos/wwdc/...Data binding Provide data using dataItem property // Parse JSON text. let data = parseFromJSON(json); // Attach data](https://reader033.vdocument.in/reader033/viewer/2022043022/5f3de00bd48edd42325a0848/html5/thumbnails/85.jpg)
Development Cycle
Speculative fixes
Build-and-run cycle
Loss of context
![Page 86: •Advances in TVMLKitdevstreaming-cdn.apple.com/videos/wwdc/...Data binding Provide data using dataItem property // Parse JSON text. let data = parseFromJSON(json); // Attach data](https://reader033.vdocument.in/reader033/viewer/2022043022/5f3de00bd48edd42325a0848/html5/thumbnails/86.jpg)
Web Inspector
Visual debugging
Network analysis
Local and Session storage
JavaScript debugging
Console logging
Performance analysis
![Page 87: •Advances in TVMLKitdevstreaming-cdn.apple.com/videos/wwdc/...Data binding Provide data using dataItem property // Parse JSON text. let data = parseFromJSON(json); // Attach data](https://reader033.vdocument.in/reader033/viewer/2022043022/5f3de00bd48edd42325a0848/html5/thumbnails/87.jpg)
Web Inspector
Visual debugging
Network analysis
Local and Session storage
JavaScript debugging
Console logging
Performance analysis
Please note I updated the “S” in JavaScript
![Page 88: •Advances in TVMLKitdevstreaming-cdn.apple.com/videos/wwdc/...Data binding Provide data using dataItem property // Parse JSON text. let data = parseFromJSON(json); // Attach data](https://reader033.vdocument.in/reader033/viewer/2022043022/5f3de00bd48edd42325a0848/html5/thumbnails/88.jpg)
Web Inspector
Visual debugging
Network analysis
Local and Session storage
JavaScript debugging
Console logging
Performance analysis
NEW
![Page 89: •Advances in TVMLKitdevstreaming-cdn.apple.com/videos/wwdc/...Data binding Provide data using dataItem property // Parse JSON text. let data = parseFromJSON(json); // Attach data](https://reader033.vdocument.in/reader033/viewer/2022043022/5f3de00bd48edd42325a0848/html5/thumbnails/89.jpg)
Visual DebuggingNEW
![Page 90: •Advances in TVMLKitdevstreaming-cdn.apple.com/videos/wwdc/...Data binding Provide data using dataItem property // Parse JSON text. let data = parseFromJSON(json); // Attach data](https://reader033.vdocument.in/reader033/viewer/2022043022/5f3de00bd48edd42325a0848/html5/thumbnails/90.jpg)
Visual Debugging Visualize elements
NEW
![Page 91: •Advances in TVMLKitdevstreaming-cdn.apple.com/videos/wwdc/...Data binding Provide data using dataItem property // Parse JSON text. let data = parseFromJSON(json); // Attach data](https://reader033.vdocument.in/reader033/viewer/2022043022/5f3de00bd48edd42325a0848/html5/thumbnails/91.jpg)
Visual Debugging Real-time DOM editing
Edit XML
NEW
![Page 92: •Advances in TVMLKitdevstreaming-cdn.apple.com/videos/wwdc/...Data binding Provide data using dataItem property // Parse JSON text. let data = parseFromJSON(json); // Attach data](https://reader033.vdocument.in/reader033/viewer/2022043022/5f3de00bd48edd42325a0848/html5/thumbnails/92.jpg)
Visual Debugging Real-time DOM editing
Edit XML
NEW
![Page 93: •Advances in TVMLKitdevstreaming-cdn.apple.com/videos/wwdc/...Data binding Provide data using dataItem property // Parse JSON text. let data = parseFromJSON(json); // Attach data](https://reader033.vdocument.in/reader033/viewer/2022043022/5f3de00bd48edd42325a0848/html5/thumbnails/93.jpg)
Edit XML
Reorder/delete nodes
Visual Debugging Real-time DOM editing
NEW
![Page 94: •Advances in TVMLKitdevstreaming-cdn.apple.com/videos/wwdc/...Data binding Provide data using dataItem property // Parse JSON text. let data = parseFromJSON(json); // Attach data](https://reader033.vdocument.in/reader033/viewer/2022043022/5f3de00bd48edd42325a0848/html5/thumbnails/94.jpg)
Edit XML
Reorder/delete nodes
Visual Debugging Real-time DOM editing
NEW
![Page 95: •Advances in TVMLKitdevstreaming-cdn.apple.com/videos/wwdc/...Data binding Provide data using dataItem property // Parse JSON text. let data = parseFromJSON(json); // Attach data](https://reader033.vdocument.in/reader033/viewer/2022043022/5f3de00bd48edd42325a0848/html5/thumbnails/95.jpg)
Edit XML
Reorder/delete nodes
Modify attributes
Visual Debugging Real-time DOM editing
NEW
![Page 96: •Advances in TVMLKitdevstreaming-cdn.apple.com/videos/wwdc/...Data binding Provide data using dataItem property // Parse JSON text. let data = parseFromJSON(json); // Attach data](https://reader033.vdocument.in/reader033/viewer/2022043022/5f3de00bd48edd42325a0848/html5/thumbnails/96.jpg)
Edit XML
Reorder/delete nodes
Modify attributes
Visual Debugging Real-time DOM editing
NEW
![Page 97: •Advances in TVMLKitdevstreaming-cdn.apple.com/videos/wwdc/...Data binding Provide data using dataItem property // Parse JSON text. let data = parseFromJSON(json); // Attach data](https://reader033.vdocument.in/reader033/viewer/2022043022/5f3de00bd48edd42325a0848/html5/thumbnails/97.jpg)
Edit XML
Reorder/delete nodes
Modify attributes
Copy XML
Visual Debugging Real-time DOM editing
NEW
![Page 98: •Advances in TVMLKitdevstreaming-cdn.apple.com/videos/wwdc/...Data binding Provide data using dataItem property // Parse JSON text. let data = parseFromJSON(json); // Attach data](https://reader033.vdocument.in/reader033/viewer/2022043022/5f3de00bd48edd42325a0848/html5/thumbnails/98.jpg)
Per node basis
Visual Debugging Inspect and modify styles
NEW
![Page 99: •Advances in TVMLKitdevstreaming-cdn.apple.com/videos/wwdc/...Data binding Provide data using dataItem property // Parse JSON text. let data = parseFromJSON(json); // Attach data](https://reader033.vdocument.in/reader033/viewer/2022043022/5f3de00bd48edd42325a0848/html5/thumbnails/99.jpg)
Per node basis
Visual Debugging Inspect and modify styles
NEW
![Page 100: •Advances in TVMLKitdevstreaming-cdn.apple.com/videos/wwdc/...Data binding Provide data using dataItem property // Parse JSON text. let data = parseFromJSON(json); // Attach data](https://reader033.vdocument.in/reader033/viewer/2022043022/5f3de00bd48edd42325a0848/html5/thumbnails/100.jpg)
Per node basis
Cascade ordering
Visual Debugging Inspect and modify styles
NEW
![Page 101: •Advances in TVMLKitdevstreaming-cdn.apple.com/videos/wwdc/...Data binding Provide data using dataItem property // Parse JSON text. let data = parseFromJSON(json); // Attach data](https://reader033.vdocument.in/reader033/viewer/2022043022/5f3de00bd48edd42325a0848/html5/thumbnails/101.jpg)
Per node basis
Cascade ordering
Media queries
Visual Debugging Inspect and modify styles
NEW
![Page 102: •Advances in TVMLKitdevstreaming-cdn.apple.com/videos/wwdc/...Data binding Provide data using dataItem property // Parse JSON text. let data = parseFromJSON(json); // Attach data](https://reader033.vdocument.in/reader033/viewer/2022043022/5f3de00bd48edd42325a0848/html5/thumbnails/102.jpg)
Visual Debugging Inspect and modify styles
Per node basis
Cascade ordering
Media queries
Default rules
NEW
![Page 103: •Advances in TVMLKitdevstreaming-cdn.apple.com/videos/wwdc/...Data binding Provide data using dataItem property // Parse JSON text. let data = parseFromJSON(json); // Attach data](https://reader033.vdocument.in/reader033/viewer/2022043022/5f3de00bd48edd42325a0848/html5/thumbnails/103.jpg)
Computed styles
NEWVisual Debugging Inspect and modify styles
![Page 104: •Advances in TVMLKitdevstreaming-cdn.apple.com/videos/wwdc/...Data binding Provide data using dataItem property // Parse JSON text. let data = parseFromJSON(json); // Attach data](https://reader033.vdocument.in/reader033/viewer/2022043022/5f3de00bd48edd42325a0848/html5/thumbnails/104.jpg)
Computed styles
NEWVisual Debugging Inspect and modify styles
![Page 105: •Advances in TVMLKitdevstreaming-cdn.apple.com/videos/wwdc/...Data binding Provide data using dataItem property // Parse JSON text. let data = parseFromJSON(json); // Attach data](https://reader033.vdocument.in/reader033/viewer/2022043022/5f3de00bd48edd42325a0848/html5/thumbnails/105.jpg)
Web Inspector Reload
NEW
![Page 106: •Advances in TVMLKitdevstreaming-cdn.apple.com/videos/wwdc/...Data binding Provide data using dataItem property // Parse JSON text. let data = parseFromJSON(json); // Attach data](https://reader033.vdocument.in/reader033/viewer/2022043022/5f3de00bd48edd42325a0848/html5/thumbnails/106.jpg)
•Demo
![Page 107: •Advances in TVMLKitdevstreaming-cdn.apple.com/videos/wwdc/...Data binding Provide data using dataItem property // Parse JSON text. let data = parseFromJSON(json); // Attach data](https://reader033.vdocument.in/reader033/viewer/2022043022/5f3de00bd48edd42325a0848/html5/thumbnails/107.jpg)
Recap
Visualize elements
Real time editing
Reload
![Page 108: •Advances in TVMLKitdevstreaming-cdn.apple.com/videos/wwdc/...Data binding Provide data using dataItem property // Parse JSON text. let data = parseFromJSON(json); // Attach data](https://reader033.vdocument.in/reader033/viewer/2022043022/5f3de00bd48edd42325a0848/html5/thumbnails/108.jpg)
Network AnalysisNEW
![Page 109: •Advances in TVMLKitdevstreaming-cdn.apple.com/videos/wwdc/...Data binding Provide data using dataItem property // Parse JSON text. let data = parseFromJSON(json); // Attach data](https://reader033.vdocument.in/reader033/viewer/2022043022/5f3de00bd48edd42325a0848/html5/thumbnails/109.jpg)
Network AnalysisNEW
Per request timing information
![Page 110: •Advances in TVMLKitdevstreaming-cdn.apple.com/videos/wwdc/...Data binding Provide data using dataItem property // Parse JSON text. let data = parseFromJSON(json); // Attach data](https://reader033.vdocument.in/reader033/viewer/2022043022/5f3de00bd48edd42325a0848/html5/thumbnails/110.jpg)
Network AnalysisNEW
Per request timing information
![Page 111: •Advances in TVMLKitdevstreaming-cdn.apple.com/videos/wwdc/...Data binding Provide data using dataItem property // Parse JSON text. let data = parseFromJSON(json); // Attach data](https://reader033.vdocument.in/reader033/viewer/2022043022/5f3de00bd48edd42325a0848/html5/thumbnails/111.jpg)
Network AnalysisNEW
Per request timing information
Request properties
![Page 112: •Advances in TVMLKitdevstreaming-cdn.apple.com/videos/wwdc/...Data binding Provide data using dataItem property // Parse JSON text. let data = parseFromJSON(json); // Attach data](https://reader033.vdocument.in/reader033/viewer/2022043022/5f3de00bd48edd42325a0848/html5/thumbnails/112.jpg)
Network AnalysisNEW
Per request timing information
Request properties
![Page 113: •Advances in TVMLKitdevstreaming-cdn.apple.com/videos/wwdc/...Data binding Provide data using dataItem property // Parse JSON text. let data = parseFromJSON(json); // Attach data](https://reader033.vdocument.in/reader033/viewer/2022043022/5f3de00bd48edd42325a0848/html5/thumbnails/113.jpg)
Network Analysis
Per request timing information
Request properties
Headers
NEW
![Page 114: •Advances in TVMLKitdevstreaming-cdn.apple.com/videos/wwdc/...Data binding Provide data using dataItem property // Parse JSON text. let data = parseFromJSON(json); // Attach data](https://reader033.vdocument.in/reader033/viewer/2022043022/5f3de00bd48edd42325a0848/html5/thumbnails/114.jpg)
Network Analysis
Per request timing information
Request properties
Headers
NEW
![Page 115: •Advances in TVMLKitdevstreaming-cdn.apple.com/videos/wwdc/...Data binding Provide data using dataItem property // Parse JSON text. let data = parseFromJSON(json); // Attach data](https://reader033.vdocument.in/reader033/viewer/2022043022/5f3de00bd48edd42325a0848/html5/thumbnails/115.jpg)
NEWLocal and Session Storage Inspection
![Page 116: •Advances in TVMLKitdevstreaming-cdn.apple.com/videos/wwdc/...Data binding Provide data using dataItem property // Parse JSON text. let data = parseFromJSON(json); // Attach data](https://reader033.vdocument.in/reader033/viewer/2022043022/5f3de00bd48edd42325a0848/html5/thumbnails/116.jpg)
NEWLocal and Session Storage Inspection
![Page 117: •Advances in TVMLKitdevstreaming-cdn.apple.com/videos/wwdc/...Data binding Provide data using dataItem property // Parse JSON text. let data = parseFromJSON(json); // Attach data](https://reader033.vdocument.in/reader033/viewer/2022043022/5f3de00bd48edd42325a0848/html5/thumbnails/117.jpg)
TVMLKit+
![Page 118: •Advances in TVMLKitdevstreaming-cdn.apple.com/videos/wwdc/...Data binding Provide data using dataItem property // Parse JSON text. let data = parseFromJSON(json); // Attach data](https://reader033.vdocument.in/reader033/viewer/2022043022/5f3de00bd48edd42325a0848/html5/thumbnails/118.jpg)
TVMLKit+
![Page 119: •Advances in TVMLKitdevstreaming-cdn.apple.com/videos/wwdc/...Data binding Provide data using dataItem property // Parse JSON text. let data = parseFromJSON(json); // Attach data](https://reader033.vdocument.in/reader033/viewer/2022043022/5f3de00bd48edd42325a0848/html5/thumbnails/119.jpg)
Summary
Supports RTL for default templates
Use data binding/prototypes for large data sets
Web Inspector reduces development cycle
![Page 120: •Advances in TVMLKitdevstreaming-cdn.apple.com/videos/wwdc/...Data binding Provide data using dataItem property // Parse JSON text. let data = parseFromJSON(json); // Attach data](https://reader033.vdocument.in/reader033/viewer/2022043022/5f3de00bd48edd42325a0848/html5/thumbnails/120.jpg)
More Informationhttps://developer.apple.com/wwdc17/202
![Page 121: •Advances in TVMLKitdevstreaming-cdn.apple.com/videos/wwdc/...Data binding Provide data using dataItem property // Parse JSON text. let data = parseFromJSON(json); // Attach data](https://reader033.vdocument.in/reader033/viewer/2022043022/5f3de00bd48edd42325a0848/html5/thumbnails/121.jpg)
Related Sessions
Localizing with Xcode 9 Tuesday 10:20AM
What’s new in tvOS Grand Ballroom B Wednesday 10:00AM
Focus Interaction in tvOS 11 Grand Ballroom A Thursday 9:00AM
Developing tvOS Apps Using TVMLKit: Part 1 WWDC2016
Developing tvOS Apps Using TVMLKit: Part 2 WWDC2016
Internationalization Best Practices WWDC2016
What's New in International User Interfaces WWDC2016
![Page 122: •Advances in TVMLKitdevstreaming-cdn.apple.com/videos/wwdc/...Data binding Provide data using dataItem property // Parse JSON text. let data = parseFromJSON(json); // Attach data](https://reader033.vdocument.in/reader033/viewer/2022043022/5f3de00bd48edd42325a0848/html5/thumbnails/122.jpg)
Labs
tvOS Lab Technology Lab I Tuesday 12:00-13:50
tvOS Lab Technology Lab H Wednesday 11:00-14:00
tvOS Lab Technology Lab I Thursday 11:00-13:00
Internationalization Lab Technology Lab I Tuesday 13:50-16:10
Internationalization Lab Technology Lab I Friday 9:00-11:00
![Page 123: •Advances in TVMLKitdevstreaming-cdn.apple.com/videos/wwdc/...Data binding Provide data using dataItem property // Parse JSON text. let data = parseFromJSON(json); // Attach data](https://reader033.vdocument.in/reader033/viewer/2022043022/5f3de00bd48edd42325a0848/html5/thumbnails/123.jpg)