about:me Rich Dudley Technical Evangelist richd@componentone.com - - PDF document

▶
about me
SMART_READER_LITE
LIVE PREVIEW

about:me Rich Dudley Technical Evangelist richd@componentone.com - - PDF document

Jan 08, 2024 478 likes •586 views

5/2/2012 Windows 8 Metro Apps with HTML & jQuery about:me Rich Dudley Technical Evangelist richd@componentone.com @rj_dudley c1.ms/richd 1 5/2/2012 $(this).baked(not); Its the first beta Many, many months from RTM

slide-1
SLIDE 1

5/2/2012 1

Windows 8 Metro Apps with HTML & jQuery

about:me

Rich Dudley

Technical Evangelist

richd@componentone.com @rj_dudley c1.ms/richd

slide-2
SLIDE 2

5/2/2012 2

$(this).baked(‘not’);

  • It’s the first beta
  • Many, many months from RTM
  • Don’t draw any conclusions from what

you see

  • Dev platform could all change tomorrow
  • Or not
slide-3
SLIDE 3

5/2/2012 3

$(‘metro’).choose();

  • x86/x64 and ARM compatibility
  • Windows Store (inc. trial API)
  • Inter-app communication (“contracts”)
  • Better touch support
  • Cloud sync with Live API
  • Windows Phone 8 = Windows 8?

$(‘runtime’).toggle();

  • Two different runtimes – WinRT or Win32
  • WinRT apps are sandboxed
  • XAML + C/C++/C#/VB.NET or HTML + JS
  • Not a different .NET – “profiled”
  • Metro apps (even HTML/JS) are native

WinRT apps

  • HTML/JS are IE 10 only
slide-4
SLIDE 4

5/2/2012 4

$(‘buzzwords’).getList()

  • Charms
  • Tailored
  • Immersive
  • Connected
  • Fluid
  • Touch-first
  • Interactive
  • User multitasking

$(‘tools’).get();

  • Windows 8 Consumer Preview
  • VS 11 Beta, Express or better
  • Blend 5 for HTML
  • New templates and controls
slide-5
SLIDE 5

5/2/2012 5

$(‘dev’).how();

  • HTML is UI, JS is like code behind
  • Single-page apps
  • More like writing user controls—only a

portion of the HTML page is used

  • Have to put HTML and JS code in special

containers

  • Unsafe scripts security

$(‘winRt’).context();

  • Local

– Full access to WinRT – Limited web access – Scripts must be packaged

  • Web

– No access to WinRT – Can make arbitrary web calls – Scripts from CDN

slide-6
SLIDE 6

5/2/2012 6

$(‘data’).access();

  • No direct SQL Server drivers!
  • Asynchronous communication only
  • services + $.ajax()
  • Isolated Storage
  • IndexedDB
  • Local libraries and devices

$(‘metro’).design()

  • 8 Traits of Great Metro Style Apps

http://channel9.msdn.com/Events/BUILD /BUILD2011/BPS-1004

  • Build for app scaling/resizing

– CSS3 media queries – CSS grids (960.gs) + flexible controls – SVG or pre-scaled images – Snap!

slide-7
SLIDE 7

5/2/2012 7

$.navigateTo();

  • Single page applications
  • iFrame or WinJS fragments
  • Context affects behavior of iFrame

$(‘appState’).preserve();

  • DOMContentLoaded
  • “Activated”
  • Window.load
  • “Suspending”
  • “Resuming”
slide-8
SLIDE 8

5/2/2012 8

$(‘bugs’).find();

  • IE10 only
  • No developer tools (F12)
  • No view source
  • Primarily VS debugger
  • Simulator target
  • MessageDialog

$(‘demo’).show();

slide-9
SLIDE 9

5/2/2012 9

$(‘.resources’).use();

  • Developing basic Metro style apps

(JavaScript) http://c1.ms/4f

  • UX guidelines for Metro style app

development http://c1.ms/3u

  • Recap post at http://c1.ms/richd

$(‘#video’).play();

  • http://channel9.msdn.com/Events/BUILD/BUILD

2011/TOOL-501T

  • http://channel9.msdn.com/Events/BUILD/BUILD

2011/TOOL-527C

  • http://channel9.msdn.com/Events/BUILD/BUILD

2011/APP-740T

  • http://channel9.msdn.com/Events/BUILD/BUILD

2011/TOOL-533T

  • http://channel9.msdn.com/Events/BUILD/BUILD

2011/PLAT-384P

  • http://channel9.msdn.com/Events/BUILD/BUILD

2011/APP-476T

slide-10
SLIDE 10

5/2/2012 10 EVERYTHING YOU NEED TO BUILD A BETTER WEB

Wijmo is a complete kit of over 40 jQuery UI widgets with everything from interactive menus to rich

  • charts. If you know jQuery, you

know Wijmo. Complete with documentation and professional support, every widget is hand- crafted and includes premium themes.

about:me

Rich Dudley

Technical Evangelist

richd@componentone.com @rj_dudley http://c1.ms/richd