Windows 8 - The JavaScript Story

  • 490 views
Uploaded on

With the release of Windows 8, Microsoft has delivered a rich client application platform that is both powerful and approachable. Apps on this platform install easily and uninstall cleanly. They run …

With the release of Windows 8, Microsoft has delivered a rich client application platform that is both powerful and approachable. Apps on this platform install easily and uninstall cleanly. They run in a single window that fills the entire screen by default. They automatically work with a variety of input sources, including touch, pen, mouse, and keyboard. Instead of static icons, they use live tiles that can display notifications. Best of all, these apps can be written using HTML5, CSS, and JavaScript.

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
490
On Slideshare
0
From Embeds
0
Number of Embeds
2

Actions

Shares
Downloads
4
Comments
0
Likes
1

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide
  • What you’ve seen is Windows Reimagined.Let me explain what Windows re-imagined means:A new UI where touch is a first-class citizen along with full mouse-and-keyboard supportSupports a new range of scenarios from traditional computing to mobileBased on the new Microsoft design principlesdo more with less, be fast and fluid, authentically digitalDesigned from the chipset up for multiple form-factors, including tablets, laptops, desktops & all-in-onesRe-architected from the chipset up for both Intel and ARMWindows Store on every device with full payments support and flexibility It has everything you would expect from a modern app store, including a curated experience, full commerce experience, and installation on every devicePlus it supports a wide range of business models with flexible payment options and the best economicsTalk more later in the deckNew development models built on WinRT, including native support for HTML/CSS/JS, C#/XAML, C++/DirectXEnables many developers to leverage the skills and assets they already know and haveEmphasize HTML/JS as a truly native option, separate from the hybrid model used in other platforms. On W8 HTML/JS == native.
  • You are here !! The focus will be HTML/JS… Click… But do remember WInRT is helping.. And is available to provide infrastructure.. We will see a little bit of WinRT in action in some demos
  • Demonstratecontoso recipes application Show the use of the module pattern in javascript… Show the use of a promise.. Show the navigation Show the WinJS.application object To see all of these, it is trivial to do a search on the solution for //DEMO:WinJS and you will be able to see areas to set breakpoints for discussion..
  • Demonstratecontoso recipes application Show the use of the module pattern in javascript… Show the use of a promise.. Show the navigation Show the WinJS.application object To see all of these, it is trivial to do a search on the solution for //DEMO:WinJS and you will be able to see areas to set breakpoints for discussion..
  • If you prefer to use your own library, you can. As long as your app is compliant with Metro SDK, you will be fine.. At build, we explicitly wrote a sample (finance) using jQuery… It works very well.. If you are bringing your own library, here is the advice that I can give you:Mix & Match works fine. WinJS does a lot of things well, such as simplifying the object model, wrappers for file system, implementing the promise pattern, etc.. Use WinJS for all of that.. Use your favorite library for everything else, but do try to adhere to the Metro UI and the Windows personality. Your users will appreciate it if you do..
  • When your app moves out of the foreground, Windows waits for a few seconds to allow quick switching back to the app, then tries to suspend the app. Your app must be registered for the suspending or checkpoint (JavaScript) events, which it receives when Windows wants to suspend it. This is an important time for your app; use this opportunity to save app data that must be kept in persistent storage. Usually, your app is resumed as is, and you won’t need your persisted data because they are still in memory. But you need to store this data in case Windows terminates your app to free system resources. Save enough app data to bring users back to the place in your app where they were when the app was suspended. This way, your customers perceive your app as always alive and running.
  • Demonstratecontoso recipes application Show the use of the module pattern in javascript… Show the use of a promise.. Show the navigation Show the WinJS.application object To see all of these, it is trivial to do a search on the solution for //DEMO:WinJS and you will be able to see areas to set breakpoints for discussion..
  • Demonstratecontoso recipes application Show the use of the module pattern in javascript… Show the use of a promise.. Show the navigation Show the WinJS.application object To see all of these, it is trivial to do a search on the solution for //DEMO:WinJS and you will be able to see areas to set breakpoints for discussion..

Transcript

  • 1. Designed from the chipset up so people can choose and seamlessly use the devices they love – whether it’s a portable tablet or an amazing all-in-oneWindows Store on every device creates customerconfidence in apps, new opportunity for developers
  • 2. Windows Store Apps: Apps Take Center StageUsers can search within your app from anywhere
  • 3. App Container + Signed & Validated code
  • 4. demo
  • 5. WinJS.ErrorFro WinJS Element Semantic Zoom ViewBox WinJS.xhr HTML/DOM Utils Localized String Data-win-res mName Attributes Utilities processing ListView Element Logging Utils Selection/ Keyboard Key Flyout SettingsFlyout WinJS.Promise Enumeration WinJS Querying Support for WinJS Custom Layout Validation WinJS.PromiseStat Coordinate Menu GridLayout ListLayout declarative model Menu Interface WinJS eMachine Conversion (supportedForProc Command essing) Support for Controls Class definition Namespace declarative model Utilities ( and inheritance definition utilities (processAll) setOptions) IZoomableView AppBar WinJS.Class WinJS.Namespace IListDataAdapte IListNotification IListBinding IListDataSourceFragment loading r Handler and rendering FlipViewWinJS.UI.Fragments WinJS.UI. StorageDataSo VirtualizedData Animation DataSourceStatus Error handling Animation urce Source Library helpers Data Binding (as, bind) Mixins Animation System Management WinJS.Binding. List Conversions Application local Events (storage) Support for Light StyleSheet Dark StyleSheet List Projections Tooltip Rating TabContainer declarative WinJS. databinding roaming Application. (storage) WinJS.UI.Pages. sessionState WinJS.UI.Pages. IPageControlM PageControl TimePicker DatePicker ToggleSwitch embersWinJS.Navigation temp Functions (storage) WinJS.Binding. Template HTMLControl
  • 6. demo
  • 7. Feature Local context Web contextWindows Runtime Yes NoWindows Library for JavaScript Yes PartialJavaScript No YesURIs(attribute="javascript:code")Data URIs ("data:" ) for fonts No YesExternal script references (<script No Yessrc="http://*" /> )window.close Yes NoCross-domain XHR requests Yes No
  • 8. <div id=“contenthost” … /> < div id=“appbar” … />
  • 9. demo
  • 10. demo
  • 11. http://clint.ms/NextGenerationAppshttp://code.msdn.microsoft.com/windowsappshttp://www.typescriptlang.org/