Advances in TVMLKit. App Frameworks #WWDC17. Trevor Cortez, Localization Engineer Parry Panesar, tvos Engineer Jeremy Foo, tvos Engineer

Transcription

1 Session App Frameworks #WWDC17 Advances in TVMLKit 202 Trevor Cortez, Localization Engineer Parry Panesar, tvos Engineer Jeremy Foo, tvos Engineer 2017 Apple Inc. All rights reserved. Redistribution or public display not permitted without written permission from Apple.

2 Right-to-left languages Template optimizations Development using Web Inspector

3 Right-to-Left Languages Trevor Cortez, Localization Engineer

4 Right-to-Left Languages Arabic and Hebrew new in tvos 11

5 Right-to-Left Languages Arabic and Hebrew new in tvos million speakers worldwide

6

7

8

9

10 Right-to-Left Languages Arabic and Hebrew new in tvos million speakers worldwide Built in support in TVMLKit

11 Right-to-Left Languages Adding support Add Arabic or Hebrew in your Project Settings Localizing with Xcode 9 Tuesday 10:20AM

12 Right-to-Left Languages Layout Text alignment Images

13 Right-to-Left Languages Layout NEW New context aware values for tv-align and tv-position leading, trailing resolve to right and left at runtime

14 Right-to-Left Languages Layout NEW New context aware values for tv-align and tv-position leading, trailing resolve to right and left at runtime.collectionlistlockupimage { tv-position: right; }.sectionheadertitle { tv-align: left; }

15 Right-to-Left Languages Layout NEW New context aware values for tv-align and tv-position leading, trailing resolve to right and left at runtime.collectionlistlockupimage { tv-position: right; }.sectionheadertitle { tv-align: left; }

16 Right-to-Left Languages Layout NEW New context aware values for tv-align and tv-position leading, trailing resolve to right and left at runtime.collectionlistlockupimage { tv-position: right; }.sectionheadertitle { tv-align: left; }.collectionlistlockupimage { tv-position: trailing; }.sectionheadertitle { tv-align: leading; }

17 Right-to-Left Languages Layout NEW Adjust value inside media query for Layout Direction Margin Padding

18 Right-to-Left Languages Layout NEW Adjust value inside media query for Layout Direction Margin (layout-direction: ltr) {.my_interesting_image { margin: ; } (layout-direction: rtl) {.my_interesting_image { margin: ; } }

19 Right-to-Left Languages Layout NEW Adjust value inside media query for Layout Direction Margin (layout-direction: ltr) {.my_interesting_image { margin: ; } (layout-direction: rtl) {.my_interesting_image { margin: ; } }

20 Right-to-Left Languages Layout NEW Adjust value inside media query for Layout Direction Margin (layout-direction: ltr) {.my_interesting_image { margin: ; } (layout-direction: rtl) {.my_interesting_image { margin: ; } }

21 Right-to-Left Languages Text alignment Left Center Right Lorem Ipsum Lorem Ipsum Lorem Ipsum أبجد هوز حطي أبجد هوز حطي أبجد هوز حطي

22 Right-to-Left Languages Text alignment Left Center Right Lorem Ipsum Lorem Ipsum Lorem Ipsum أبجد هوز حطي أبجد هوز حطي أبجد هوز حطي

23 Right-to-Left Languages Text alignment Left Center Right Natural Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum أبجد هوز حطي أبجد هوز حطي أبجد هوز حطي أبجد هوز حطي

24 Right-to-Left Languages Images

25 Right-to-Left Languages Resource images For Resource images use asset catalogs Specify dedicated images or mirror for RTL

26 Right-to-Left Languages Remote images NEW For server-side images, use layout direction media queries to load directionspecific assets <img srcset= url1 (layout-direction:ltr), url2 (layout-direction:rtl)... />

27 Right-to-Left Languages Remote images NEW For server-side images, use layout direction media queries to load directionspecific assets <img srcset= url1 (layout-direction:ltr), url2 (layout-direction:rtl)... />

28 Right-to-Left Languages Remote images NEW For server-side images, use layout direction media queries to load directionspecific assets <img srcset= url1 (layout-direction:ltr), url2 (layout-direction:rtl)... />

29 Demo

30 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

31 Right-to-Left Languages Handling custom views Auto Layout with leading/trailing constraints effectivelayoutdirection when managing frames Internationalization Best Practices WWDC 2016 What's New in International User Interfaces WWDC 2016

32 Template Optimizations Parry Panesar, tvos Engineer

33

34 <grid>

35 <lockup>

36 <img> <title>

37

38 Scalability Issues Time Number of Items

39 Scalability Issues Parsing overhead Data to DOM DOM to views

40 Scalability Issues Parsing overhead Data to DOM DOM to views Large memory footprint

41 Template Optimizations NEW Prototypes and Data Binding Pagination

42 Template Optimizations JavaScript XML { Data objects : [ <grid> <section> Template { url : url1, title : Title 1 }, { url : url2, title : Title 2 }, } ].... </section> </grid>

43 Template Optimizations JavaScript XML { Data objects : [ <grid> <section> Template { url : url1, title : Title 1 }, { url : url2, title : Title 2 }, } ].... </section> </grid>

44 Template Optimizations { JavaScript Data objects : [ { url : url1, title : Title 1 }, { url : url2, title : Title 2 }, XML Template <grid> <section> <lockup> <img src= url1 width= 308 height= 308 /> <title>title 1</title> </lockup> <lockup> <img src= url2 width= 308 height= 308 /> <title>title 2</title> </lockup> } ] </section> </grid>

45 Template Optimizations XML <grid> <section> Template </section> </grid> <lockup> <img src= url1 width= 308 height= 308 /> <title>title 1</title> </lockup> <lockup> <img src= url2 width= 308 height= 308 /> <title>title 2</title> </lockup>....

46 Template Optimizations XML <grid> <section> Template </section> </grid> <lockup> <img src= url1 width= 308 height= 308 /> <title>title 1</title> </lockup> <lockup> <img src= url2 width= 308 height= 308 /> <title>title 2</title> </lockup>....

47 Template Optimizations <grid> <section> </section> </grid> <lockup> <lockup> Template <img width= 308 height= 308 /> <title></title> </lockup>.... XML <img width= 308 height= 308 /> <title></title> </lockup>

48 Template Optimizations <grid> <section> </section> </grid> <lockup> <lockup> Template <img width= 308 height= 308 /> <title></title> </lockup>.... XML <img width= 308 height= 308 /> <title></title> </lockup>

49 Template Optimizations XML Template <grid> <section> <lockup> <img width= 308 height= 308 /> <title></title> </lockup> </section> </grid>

50 Template Optimizations XML Template <grid> <section> <prototypes> <lockup> <img width= 308 height= 308 /> <title></title> </lockup> </prototypes> </section> </grid>

51 Template Optimizations Prototype Defines layout Facilitates partial DOM authoring

52 Template Optimizations { JavaScript Data objects : [ XML Template } ] { url : url1, title : Title 1 }, { url : url2, title : Title 2 },.... <grid> <section> <prototypes> <lockup> <img width= 308 height= 308 /> <title></title> </lockup> </prototypes> </section> </grid>

53 Template Optimizations { JavaScript Data objects : [ XML Template { url : url1, title : Title 1 }, { url : url2, title : Title 2 }, <grid> <section binding= items : {objects}; > <prototypes> <lockup> <img : {url}; width= 308 height= 308 /> <title binding= textcontent : {title}; ></title> </lockup> } ].... </prototypes> </section> </grid>

54 Template Optimizations { JavaScript Data objects : [ XML Template { url : url1, title : Title 1 }, { url : url2, title : Title 2 }, <grid> <section binding= items : {objects}; > <prototypes> <lockup> <img : {url}; width= 308 height= 308 /> <title binding= textcontent : {title}; ></title> </lockup> } ].... </prototypes> </section> </grid>

55 Template Optimizations { JavaScript Data objects : [ XML Template { url : url1, title : Title 1 }, { url : url2, title : Title 2 }, <grid> <section binding= items : {objects}; > <prototypes> <lockup> <img : {url}; width= 308 height= 308 /> <title binding= textcontent : {title}; ></title> </lockup> } ].... </prototypes> </section> </grid>

56 Template Optimizations { JavaScript Data objects : [ XML Template { url : url1, title : Title 1 }, { url : url2, title : Title 2 }, <grid> <section binding= items : {objects}; > <prototypes> <lockup> <img : {url}; width= 308 height= 308 /> <title binding= textcontent : {title}; ></title> </lockup> } ].... </prototypes> </section> </grid>

57 Template Optimizations Data binding Associates data to element Declared through binding textcontent items

58 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;

59 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;

60 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;

61 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;

62 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;

63 Template Optimizations Pagination Append using needsmore shelf, grid, list, stacktemplate Invoked towards the end

64 Template Optimizations Pagination Append using needsmore shelf, grid, list, stacktemplate Invoked towards the end Requires observable objects

65 // 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;

66 // 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;

67 // 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;

68 // 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;

69 // 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;

70 // 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;

71 // 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;

72 // 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"); }

73 // 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"); }

74 // 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"); }

75 // 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"); }

76 Demo

77 Recap Created template with prototypes Specified data binding Associated data to DOM Implemented pagination

78 Template Optimizations Time Number of Items

79 Template Optimizations Time Number of Items

80 Development Using Web Inspector Jeremy Foo, tvos Engineer

81

82

83 Development Cycle Speculative fixes

84 Development Cycle Speculative fixes Build-and-run cycle

85 Development Cycle Speculative fixes Build-and-run cycle Loss of context

86 Web Inspector Visual debugging Network analysis Local and Session storage JavaScript debugging Console logging Performance analysis

87 Web Inspector Please note I updated the S in JavaScript Visual debugging Network analysis Local and Session storage JavaScript debugging Console logging Performance analysis

88 Web Inspector NEW Visual debugging Network analysis Local and Session storage JavaScript debugging Console logging Performance analysis

89 Visual Debugging NEW

90 Visual Debugging Visualize elements NEW

91 Visual Debugging Real-time DOM editing NEW Edit XML

92 Visual Debugging Real-time DOM editing NEW Edit XML

93 Visual Debugging Real-time DOM editing NEW Edit XML Reorder/delete nodes

94 Visual Debugging Real-time DOM editing NEW Edit XML Reorder/delete nodes

95 Visual Debugging Real-time DOM editing NEW Edit XML Reorder/delete nodes Modify attributes

96 Visual Debugging Real-time DOM editing NEW Edit XML Reorder/delete nodes Modify attributes

97 Visual Debugging Real-time DOM editing NEW Edit XML Reorder/delete nodes Modify attributes Copy XML

98 Visual Debugging Inspect and modify styles NEW Per node basis

99 Visual Debugging Inspect and modify styles NEW Per node basis

100 Visual Debugging Inspect and modify styles NEW Per node basis Cascade ordering

101 Visual Debugging Inspect and modify styles NEW Per node basis Cascade ordering Media queries

102 Visual Debugging Inspect and modify styles NEW Per node basis Cascade ordering Media queries Default rules

103 Visual Debugging Inspect and modify styles NEW Computed styles

104 Visual Debugging Inspect and modify styles NEW Computed styles

105 Web Inspector Reload NEW

106 Demo

107 Recap Visualize elements Real time editing Reload

108 Network Analysis NEW

109 Network Analysis NEW Per request timing information

110 Network Analysis NEW Per request timing information

111 Network Analysis NEW Per request timing information Request properties

112 Network Analysis NEW Per request timing information Request properties

113 Network Analysis NEW Per request timing information Request properties Headers

114 Network Analysis NEW Per request timing information Request properties Headers

115 Local and Session Storage Inspection NEW

116 Local and Session Storage Inspection NEW

117 + TVMLKit

118 + TVMLKit

119 Summary Supports RTL for default templates Use data binding/prototypes for large data sets Web Inspector reduces development cycle

120 More Information

121 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 Developing tvos Apps Using TVMLKit: Part 2 Internationalization Best Practices What's New in International User Interfaces WWDC2016 WWDC2016 WWDC2016 WWDC2016

122 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

123