1. Angelo Chan Kamran Bilgrami

2. Agenda ● WinJS - What and Why ● Modern Apps ● WinRT Architecture ● Demos o Controls o Data Bindings o Program LifeCycle Management (PLM)

3. What is WinJS? ● Windows Library for JavaScript ● Used for creating Windows Store Apps ● Rapidly Evolving o Universal Windows Apps (UWAs)  Can target Tablet, Desktop, Phone, XBox o Open Source (in Beta). Can be used across Browsers.  http://try.buildwinjs.com/ http://try.buildwinjs.com/

4. What does WinJS offer ● Coding Patterns o Promises, Mixins, Modules ● Navigation Framework ● Utilities o Animations, DOM Selector ● Rich Library of Controls ● XHR API (Ajax)

5. Why bother to learn WinJS? ● Two primary advantages o Optimized for Microsoft Design Guidelines o Available out of box ● You can use other JS frameworks for creating Windows store Apps o Will require more work to comply Modern Apps Design guidelines

6. Why bother to learn WinJS? ● Microsoft putting lot of weight behind it ● Not many 3rd party Apps built using WinJS yet ● A separate MCSD track for JS developers

7. Requirements ● Windows 8.1 o Download built-in VMs for various OS http://goo.gl/hhxz0V http://goo.gl/hhxz0V ● Visual Studio 2013 o Express Edition is a free download o You need Update 2 RC for UWAs

8. What are Modern Apps ●Previously known as “Metro style apps” ●Focus is Content consumption ●Content before Chrome ●Follows Modern Design Guidelines ●Use new Windows Runtime (WinRT) ●Follows Program Life Cycle Management (PLM)

9. Legacy Apps

10. Modern Apps

11. What is WinRT

12. Visual Studio Templates Introduction to Simulator

13. WinJS Controls

14. ● Consists of a container element o Typically a div element ● Set type of control using data-win-control ● Set any options using data-win-options ● WinJS.UI.processAll() to instantiate controls ● Two ways of creation o Declarative o Programmatic

15. WinJS Controls

16. WinJS Data Bindings ● Mechanism to connect JS data source to HTML elements o Allows separation of view and model ● data-win-bind attribute is used to connect source to target ● WinJS.Binding.processAll ties UI element with data ● UI elements could be notified of any data changes by using observable objects

17. WinJS Data Bindings

18. Program Lifecycle Management

20. Apps Activations

21. PLM - Activation Kinds LaunchprotocolcontactPicker SearchfileOpenPickerdevice shareTargetfileSavePicker printTaskSettings file cachedFileUpdater cameraSettings

22. PLM – Execution States CosedByUser Running NotRunning Suspended Terminated

23. Program LifeCycle Management

24. Key Differences ● Stateful ● Not a typical http client server architecture ● Different life cycle management ● Cannot use any browser based functions. ● Debugging differnces o No View Source or F12 Developer Tools ● Native device Access