20

ATD10 - WinJS izlazi na globalnu pozornicu

Embed Size (px)

DESCRIPTION

Najbitnija novost u WinJS 3.0 je podrška za najpopularnije desktop i mobilne preglednike. Sva ljepota i elegancija WinJSa donedavno ograničena samo na Windows ekosustav, sada postaje dostupna posvuda, pa čak i u hibridnim aplikacijama izrađenim pomoću Apache Cordove. Predefinirane kontrole su bitno poboljšane i prilagođene različitim veličinama ekrana, a kad se tome još pribroji nova modularizacija koda za lakše održavanje i bolje performanse, stvarno nema isprike da vaša iduća web aplikacija ne koristi WinJS. Na početku predavanja će biti kratak uvod u WinJS i novosti u verziji 3.0 nakon čega će se kroz više demoa pokazati kako sve to funkcionira u praksi i na različitim uređajima.

Citation preview

Page 1: ATD10 - WinJS izlazi na globalnu pozornicu
Page 2: ATD10 - WinJS izlazi na globalnu pozornicu

WinJS izlazi na globalnupozornicu

Matija Šmalcelj

Sr. SDE

RealNetworks

Page 3: ATD10 - WinJS izlazi na globalnu pozornicu
Page 4: ATD10 - WinJS izlazi na globalnu pozornicu

WinJS

• HTML / CSS / JavaScript

• v1.0 za Windows 8

• v2.0 za Windows 8.1, v1.0 za Xbox, v2.1 za Windows Phone

• open source: https://github.com/winjs/winjs

<link href="WinJS/css/ui-dark.css" rel="stylesheet" />

<script src="WinJS/js/base.js"></script>

<script src="WinJS/js/ui.js"></script>

Page 5: ATD10 - WinJS izlazi na globalnu pozornicu
Page 6: ATD10 - WinJS izlazi na globalnu pozornicu

WinJS

• Core (klase, promisi, namespaces)

• App model

• Data binding

• Preko 20 kontrola spremnih za korištenje

• Predefinirani CSS

• Animacije

• Utility klase

Page 7: ATD10 - WinJS izlazi na globalnu pozornicu

WinJS• Podržava druge biblioteke, npr. jQuery, AngularJS

• Dizajniran za dodir

• Svijetla i tamna shema boja

Page 8: ATD10 - WinJS izlazi na globalnu pozornicu

Promisi

WinJS.xhr(options).then(

)

function completed(request) {return doSomethingElse(request.result);

}, null,function progress(request) {

// osvjezi progress bar}

.done(function(result) {// sve gotovo

}, function(error) // doslo je do greske

});

Page 9: ATD10 - WinJS izlazi na globalnu pozornicu

WinJS 3.0

• Podržani svi važniji preglednici

• Modularizacija koda

• Ujednačen izgled na različitim platformama

Page 10: ATD10 - WinJS izlazi na globalnu pozornicu

Ujednačen izgled

Page 11: ATD10 - WinJS izlazi na globalnu pozornicu

Ujednačen izgled

Page 12: ATD10 - WinJS izlazi na globalnu pozornicu

DEMO

Page 13: ATD10 - WinJS izlazi na globalnu pozornicu

Cross-…

• …browser

• …platform

• Podrška za Apache Cordova biblioteku

Page 14: ATD10 - WinJS izlazi na globalnu pozornicu

Apache Crodova (PhoneGap)

Page 15: ATD10 - WinJS izlazi na globalnu pozornicu

DEMO

Page 16: ATD10 - WinJS izlazi na globalnu pozornicu

Modularizacija

Page 17: ATD10 - WinJS izlazi na globalnu pozornicu

Resursi

• http://try.buildwinjs.com/

• https://github.com/winjs/winjs

• Programming Windows Store Apps with HTML, CSS, and JavaScript, Second Edition

Page 18: ATD10 - WinJS izlazi na globalnu pozornicu

I za kraj…

Page 19: ATD10 - WinJS izlazi na globalnu pozornicu

Pitanja?

Page 20: ATD10 - WinJS izlazi na globalnu pozornicu

Hvala ;)

[email protected]

matija.smalcelj