JAVASCRIPT WITH A VIEW Jordan Knight Solution Architect Xamling SESSION CODE: WEB305 (c) 2011 Microsoft. All rights reserved.

Hello! ► Solution Architect – Xamling – ► ► Silverlight MVP (c) 2011 Microsoft. All rights reserved.

The new black is HTML based apps ► One app – may devices – Extremely attractive for mobile projects ► Can run as if a native app – Upload to the various “app stores” – PhoneGap is great for this – Access contacts, GPS, camera – pretty much everything ► Most of the time users don’t even know it’s a HTML based app! (c) 2011 Microsoft. All rights reserved.

The rise of HTML5 JavaScript + CSS3 ► Can you build me a HTML5 app? – Sure, but it wont use much HTML5 ► HTML5 has some great stuff – But it’s not behind the current rise in advanced client apps to the extent perceived ► It’s all about how awesome CSS3 and JavaScript have become – Excellent CSS3 support + hardware acceleration – Fast JS engines (c) 2011 Microsoft. All rights reserved.

JavaScript Simultaneously the least and best known language on the planet ► Understood to so many differing levels in the wild – Every web developer knows JS inside out right? – Easy to master? ► Can be perceived as a toy language ► It’s not – far from it – It’s a functional dynamic language that is simply amazing – It’s incredibly powerful, with many ways to achieve the same goal ► But that’s the problem – too adaptable – It’s so dynamic, it’s easy to do stuff wrong (c) 2011 Microsoft. All rights reserved.

jQuery– the pattern breaker ► jQuery is fantastic – But it makes it so easy to fall in to bad coding practices – (JavaScript in general has this problem) ► $(“#someNode”).click = function() = BAD – As is $(“x”).animate,.css,.blah ► I’d even suggest that $(“selector”) does more bad than good – most the time – Your code should never know about the HTML! ► And that’s just the tip of the iceberg… (c) 2011 Microsoft. All rights reserved.

What to do then? ► The aim is to: – Make it really easy for developers to learn your codebase – Simplify and reduce code and mark-up – Code and design nicely separated – Get away from JSisms and other issues that commonly cause problems (c) 2011 Microsoft. All rights reserved.

All this equates to ► Separation of concerns ► Moving towards declarative mark-up ► State management – View state / animation ► View Selection – Including navigation and transitions (c) 2011 Microsoft. All rights reserved.

Model-View-ViewModel ► Declarative, Two-Way Data Binding ► Observes changes to data – Pushes updates from VM to View ► Works well with templates (client side) ► Knockout.js – (c) 2011 Microsoft. All rights reserved.

A QUICK LAP AROUND MVVM + KNOCKOUT DEMO (c) 2011 Microsoft. All rights reserved.

View Selection and Navigation ► Modern web apps have one page – No trips to the server to get more markup ► Need to navigate to different “views” – E.g. product detail view, login view ► A view displays the data exposed from a view-model – Need a mechanism for choosing what to show ► What would you navigate to? – The view of the view-model? (c) 2011 Microsoft. All rights reserved.

VIEW SELECTION AND NAVIGATION DEMO (c) 2011 Microsoft. All rights reserved.

View states ► It’s common for JavaScript to manipulate the state of the HTML – Add/remove CSS classes, move items around, animate etc. – This isn’t a fantastic idea ► States need to be maintainable and well known – … should be controlled from the ViewModel (go to state x) – … should be implemented in the View (e.g. HTML + CSS) ► In parallel workflow, states are paramount – Known states on both sides (design and develop) can really help move things along (c) 2011 Microsoft. All rights reserved.

VISUAL STATES DONE RIGHT! DEMO (c) 2011 Microsoft. All rights reserved.

Recap ► Knockout.js for MVVM – ► VM first navigation – Automatic template selection – Automatic transition / controlled by states + CSS – Easy history ► State management – Use a state manager style pattern – Push your view manipulation to where it should be - CSS (c) 2011 Microsoft. All rights reserved.

Thanks!! ► ► (c) 2011 Microsoft. All rights reserved.

Enrol in Microsoft Virtual Academy Today Why Enroll, other than it being free? The MVA helps improve your IT skill set and advance your career with a free, easy to access training portal that allows you to learn at your own pace, focusing on Microsoft technologies. What Do I get for enrolment? ► Free training to make you become the Cloud-Hero in my Organization ► Help mastering your Training Path and get the recognition ► Connect with other IT Pros and discuss The Cloud Where do I Enrol? Then tell us what you think.

Sessions On-Demand & Community technet.microsoft.com/en-au Resources for IT Professionals Resources for Developers Microsoft Certification & Training Resources Resources (c) 2011 Microsoft. All rights reserved.

© 2010 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries. The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION. (c) 2011 Microsoft. All rights reserved.