Upload
eugene-zharkov
View
316
Download
0
Tags:
Embed Size (px)
Citation preview
Big Bang Theory of JavaScript Metro Applications
Евгений ЖарковSilverlight MVP, EPAM
Агенда
• Обзор и основы платформы HTML5• Жизненный цикл приложений• Использование богатых возможностей JavaScript
и Windows Runtime• JavaScript шаблоны и WinJS помощники • Использование сторонних JavaScript библиотек• Безопасность контейнера приложения
Создавать Windows 8 приложения с помощью HTML, CSS и JavaScript
легко и просто
Windows 8 приложения с HTML5
Упаковка&
Runtime
Веб-платформ
а
Жизненный цикл
WINRT платформ
а
Упаковка и Runtime
От файлов до запуска
C:\Program Files\ Applications\...
HTML
CSS
JavaScript
Resources
Manifest App Container
HTML Host Process
App Code
App p
ack
age
Runnin
g a
pp
Упаковка & Runtime
Быстрое создание простого приложения• Анатомия HTML5 приложения • Контейнер приложения и среда
исполнения
демо
Windows 8 приложения с HTML5
Упаковка&
Runtime
Веб-платформ
а
Жизненный цикл
WINRT платформ
а
a
Веб-платформа
Платформа HTML-приложения
App Container
HTML Host Process
Internet Explorer
WebPlatform
TAB
App Code
Web Platform
WindowsRuntime
App Code
HTML, CSS, JavaScript
• HTML5• Indexed DB• App Cache• Web Workers• Canvas• SVG• FormData
• CSS3 animations & transitions
• XHR• FileAPI• Web Sockets• Geolocation• PostMessage
Простота платформы Windows для HTML5 приложений• Единственный HTML5 DOCTYPE
• Стандартизированый веб, без плагинов
• Одно окно
+ Доступ к Windows Runtime
Windows Library для JavaScript (WinJS)библиотека для создания новых приложений, используя JavaScript• Делайте ваши приложения понятными и удобными• Соответствие новому дизайну Windows приложений• Контроль общего пользовательского опыта• Разрабатка для сенсорного и традиционного управления• Масштабирование под разные форм-факторы
• Создавайте ваши приложения быстро и качественно• Веб-технологии, с которыми вы уже знакомы• Современные шаблоны для отзывчивых приложений• Используйте интерактивные средства проектирования
Windows 8 приложения с HTML5
Упаковка&
Runtime
Веб-платформ
а
Жизненный цикл
WINRT платформ
а
a a
Жизненный цикл
Переход состояний
RunningSuspend
ed
suspendingTerminat
edLow memory
Core runsNo code
runsNo
process
resuming
App has 5s to work after suspend
message
App is not notified when terminated
App is notified when resumed
Applaunch
Splash screen
Code runs
sessionState в Windows Library для JavaScript (WinJS) может помочь.
Используйте Windows.Storage.ApplicationData
для сохранения состояний
Активация
DOMContentLoaded
Load App Data, Setup Event Handlers, Initialize UI
Activated
Load Saved State, Handle
Activation Parameters
.onLoad
Finish Long Running Setup Activities
Splash Screen Displayed
www.buildwindows.com
Windows 8 приложения с HTML5
Упаковка&
Runtime
Веб-платформ
а
Жизненный цикл
WINRT платформ
а
a a a
Используйте возможности Windows
?
Blobs, streams & Windows runtime
function importFile() { var picker = new Windows.Storage.Pickers.FileOpenPicker(); picker.fileTypeFilter.replaceAll([".jpg", ".bmp", ".gif", ".png"]); picker.pickSingleFileAsync().then(function (file) {
//storage file from WinRT, stream of bytes var blobUrl = URL.createObjectURL(file);
img.src = blobUrl;}
XHR
File Picker
BLOB
Image Tag
Video Tag
Audio Tag
Share contract
Source App Target AppData Packa
ge
Windows 8 приложения с HTML5
Упаковка&
Runtime
Веб-платформ
а
Жизненный цикл
WINRT платформ
а
a a aa
Шаблоны JavaScript
Область видимости переменных
• JavaScript имеет:• Global scope• Function scope• Defaults to global
• Приложения используют единый контекст скриптов• Doesn’t do page navigation – scopes don’t reset• Each “page” will need different scripts• Global scope can get really busy• Note: CSS collides too
Управление областями видимости
• DON’T: Use globals without a plan• DON’T: Forget the “var” keyword
• DO: use the module pattern• DO: use namespaces to manage globals
The Module Pattern
(function () { var a = 10;
function somePrivateStuff() { a = 15; } WinJS.Navigation.navigate("/html/firstPage.html");})();
Objects as Namespaces
(function () { function somethingUseful() { }
window.MyNamespace = window.MyNamespace || {}; window.MyNamespace.somethingUseful = somethingUseful;
})();
MyNamespace.somethingUseful();
Helper For Namespaces
• In base.js• WinJS.Namespace.define• WinJS.Namespace.withParent
Objects as Namespaces With WinJS
WinJS.Namespace.define("MyNamespace", { somethingUseful: function () { }});
MyNamespace.somethingUseful();
Module + “Exports”
(function () {
function somethingPrivate() { }
function somethingUseful() { }
WinJS.Namespace.define("MyNamespace", { somethingUseful : somethingUseful });})();
Modules & Performance
• Use your module function’s parameters• Pass commonly used globals as parameters• Why• Clarity gain – you can see which globals you think you’re
using• Small perf gain – saves a lookup step
Using Module Parameters
a = 5;
(function (global, WinJS) { var q = WinJS.Utilities.query;
WinJS.UI.processAll().then(function () { q(".output").forEach(function (e) { e.innerText = a; }); });
})(window, WinJS);
Defining Objects
• DON’T: Define shared members in the object’s constructor
• DO: Define shared members on the object’s prototype
Defining Objects
// DON’T do this function MyThing() { this.method1 = function() { } }
// DO this function MyThing() { } MyThing.prototype.method1 = function(){}
Why?
• Memory savings• Pointer, function object used once instead of copied into
each instance• Perf improvements• Runtime optimizes name lookup based on prototypes
Helper for Defining Prototypes
• WinJS.Class.define(ctor, { members }, { statics });• Attaches members to the prototype• Attaches statics to the constructor function
Defining Objects with WinJS
var MyThing = WinJS.Class.define( function() { }, { method1: function() { } });
Reusing Code
• DON’T: Create deep prototype chains
• DO: Consider using mixins
Reusing Code
// DON’T do this function Ctor() { } Ctor.prototype.prototype = mixin;
// DO this function Ctor() { } Ctor.prototype.method1 = mixin.method1; Ctor.prototype.method2 = mixin.method2;
Why?
• Performance• Prototype chains slow down property access
• Clarity• Where’s that property coming from?
Helper for Mixins
• WinJS.Class.mix(ctor, mixin, mixin, …);
Example: Event mixinvar MyControl = WinJS.Class.mix( function (element, options) { this._domElement = element;
// your code here }, WinJS.UI.DOMEventMixin, WinJS.Utilities.createEventProperties({swizzle: 0, spin: 0}));
var c = new MyControl(element);c.onswizzle = function() { }c.addEventListener("spin", function () { }, false);
Сторонние JavaScript библиотеки
The JavaScript Ecosystem
• jQuery• ExtJS• YUI• MooTools• Prototype• Backbone• Underscore• Etc, etc, etc…
It just works! Except…
• XHR differences• Host Enforcement• Local vs. Web Context
jQuery, XHR, and the local context
• jQuery xhr now does a cross-domain check (new in 1.6)
• In local context, your origin is “ms-wwa://{something}”
• Cross domain check fails
• Workarounds• Use WinJS XHR• Tell jQuery to bypass the check• $.support.cors = true;• http://api.jquery.com/jQuery.support/
Knockout .js
<tbody data-bind="foreach: seats"> <tr> <td data-bind="text: name"></td> <td data-bind="text: meal().mealName"></td> <td data-bind="text: meal().price"></td> </tr> </tbody>
Knockout .js
function initialize() { // Activates knockout.js ko.applyBindings(new ReservationsViewModel()); }
document.addEventListener("DOMContentLoaded", initialize, false);})();
Knockout .js function SeatReservation(name, initialMeal) { var self = this; self.name = name; self.meal = ko.observable(initialMeal); } function ReservationsViewModel() { var self = this; self.availableMeals = [ { mealName: "Standard (sandwich)", price: 0 }, { mealName: "Premium (lobster)", price: 34.95 }, { mealName: "Ultimate (whole zebra)", price: 290 } ];}
CoffeeScript
Host Enforcement
• Prevents “bad” HTML from getting inserted• Script blocks, iframes, event handlers, etc.
• Kicks in when setting strings• innerHTML• outerHTML• setAdjacentHTML
• “data-” attributes in general not on the allowed list• WinJS specific ones are ok
Host Enforcement Escape Hatches
• Can work around when needed:• toStaticHTML method• Use DOM creation APIs• Use WinJS.Utilities.setInnerHTMLUnsafe (and company)• Use msWWA.execUnsafeLocalFunction
• DO A SECURITY REVIEW IF YOU BYPASS HOST ENFORCEMENT!
Host Enforcement
Local vs. Web Context
• We want access to the full features of Windows 8• WinRT• Sensors• File system• Etc.
• We want to pull data and logic from the web• Mashup apps (Bing maps)• External analytics• Advertising
• Web content may be evil
Local Context
• Full access to WinRT• Limited access to the web• Can’t navigate to arbitrary URLs• Can’t pull down external scripts
Web Context
• Full access to the web• Can navigate to arbitrary URLs• Can pull scripts from arbitrary URLs• No access to the WinRT
Controlling Your Context
• Depends on your URL scheme• http or https: Web Context• ms-wwa: Local Context• ms-wwa-web: Web Context
• Typically done using iframes• Can navigate your top level page too
Environment
Wrap up
• Use common JavaScript patterns to organize your code• Promotes maintainability• Improves performance
• Use the JavaScript libraries you already know and love• They mostly just work• Watch out for host enforcement, cross-domain checks,
local vs. web compartment differences
For More information
• Books on JavaScript Patterns• JavaScript: The Good Parts (O’Reilly)• JavaScript Patterns (O’Reilly)
• <Your Favorite JavaScript Library’s docs linked here>
Евгений Жарковt - @2j2ee - [email protected]