M4: Animations, Custom Controls, and Globalization Michael Palermo Microsoft Technical Evangelist Jeremy Foster Microsoft Developer Evangelist

Jump Start Target Agenda Advanced Windows 8 Apps Using JavaScript Module 1: Background Tasks and Components Module 2: Hardware and Sensors Module 3: Printing and PlayTo MEAL BREAK Module 4: Animations, Custom Controls, and Globalization Module 5: Data, Files, and Encryption Module 6: Deployment

Module Agenda Design for and implement UI responsiveness ˃ Design for and implement UI responsiveness Implement animations and transitions Create custom controls Design apps for globalization and localization

The 5 y’s of good UI responsiveness Don’t fetch data needlessly Add image scaling correctly Cache data intelligently Implement asynchrony Do things simultaneously

demo CODESHOW: SCALING

demo CODESHOW: promises

demo CODESHOW: WEB WORKER

One more tip for performance Use Reactive Extensions

CODESHOW: rx canvas paint demo CODESHOW: rx canvas paint

Module Agenda Design for and implement UI responsiveness Implement animations and transitions Create custom controls Design apps for globalization and localization ˃

CSS3 Animations & Transitions Animations – to enhance user experience Transitions – when visual state changes

CODESHOW: Animations, Transitions demo CODESHOW: Animations, Transitions

WinJS.UI.Animation API to handle desirable animations & transitions

Msdn Sample: html animation library demo Msdn Sample: html animation library

Module Agenda Design for and implement UI responsiveness Implement animations and transitions Create custom controls Design apps for globalization and localization ˃

When to use a custom control… When you find yourself repeating repeating yourself When you want to share a UI component

CODESHOW: CUSTOM CONTROL demo CODESHOW: CUSTOM CONTROL

Module Agenda Design for and implement UI responsiveness Implement animations and transitions Create custom controls Design apps for globalization and localization ˃

Multilingual App Toolkit Tools | Extensions and Updates Multilingual App Toolkit

Msdn SAMPLE: globalization preferences demo Msdn SAMPLE: globalization preferences

Msdn SAMPLE: application resources and localization demo Msdn SAMPLE: application resources and localization

Summary Design for and implement UI responsiveness Implement animations and transitions Create custom controls Design apps for globalization and localization