JAVASCRIPT WITH A VIEW Jordan Knight Solution Architect Xamling SESSION CODE: WEB305 (c) 2011...
20
-
Upload
trevor-kelly -
Category
Documents
-
view
216 -
download
0
Transcript of JAVASCRIPT WITH A VIEW Jordan Knight Solution Architect Xamling SESSION CODE: WEB305 (c) 2011...
(c) 2011 Microsoft. All rights reserved.
JAVASCRIPT WITH A VIEW
Jordan KnightSolution ArchitectXamling
SESSION CODE: WEB305
(c) 2011 Microsoft. All rights reserved.
Hello!
► @jakkaj► Solution Architect – Xamling– www.xamling.net
► [email protected]► 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.
JavaScriptSimultaneously 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– www.knockoutjs.com
(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 NAVIGATIONDEMO
(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– www.knockoutjs.com
► 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
Enrol in Microsoft Virtual Academy TodayWhy 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?
www.microsoftvirtualacademy.com
Then tell us what you think. [email protected]
www.msteched.com/Australia
Sessions On-Demand & Community
http:// technet.microsoft.com/en-au
Resources for IT Professionals
http://msdn.microsoft.com/en-au
Resources for Developers
www.microsoft.com/australia/learning
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.
