Rike klienter i HTML 5

Sondre BjellåsSenior løsningsarkitektDeepmind AS

HTML 5

Rike klienter

Fremtiden

Hvor gikk vi feil?

«Denne siden krever Internet Explorer 6.0 eller nyere»

http://www.flickr.com/photos/fireflythegreat/2845637227/

Bruk av nettlesere oktober 2011 (Wikimedia)

I.E. 34.2 %

FireFox 23.6 %

Chrome 20.6 %

Safari 11.2 %

Opera 5.0 %

Andoid 1.9 % Andre 3.5 %

I.E. FireFox Chrome Safari Opera Andoid Andre

Mobile enheter blir størst i 2014

• Morgan Stanley laget en rapport i 2010 med konklusjonen at det vil være flere brukere på nettet som bruker mobile enheter, enn PC (i 2014).

• Mer dramatisk økning enn Internett var for PCer.

... dette er, og blir større, enn de fleste kan tenke seg!

HTML? Virkelig?

• Teknologi opprinnelig skapt for å vise tekst på sider linket sammen med «hyperlinker».• Perfekt for moderne applikasjoner (som ikke lengre

er vindus-baserte).

• Rykte for å være gammelt og ikke konstruert for oppgaven å drive rike applikasjoner.• Men sannheten er at det fungerer utmerket til

oppgaven!

HTML 5

= HTML + CSS + JS

HTML 5

• Nye muligheter, mer funksjonalitet.

• Hva som tidligere trengte biblioteker, er nå innebygd.

• Vektorgrafikk og film.

• Offline og Storage

There is a library for that!

• Slik Apple har revolusjonert distribusjon av programvare og gjort «apps» til dagligtale, har det i de senere årene kommet JavaScript biblioteker av høy kvalitet som løser mange utfordringer for utviklere.

jQuery

http://jquery.com/

Rike klienter

Hva er en rik klient?

• En rik klient er en applikasjon som har tilgang på lokale ressurser, som f.eks. printer, filsystemet, m.m.

• En rik klient har databehandling på klienten, ikke avhengig av tjenere (server)

• Fungerer i noen tilfeller uten å ha kobling mot nettet («offline»)

Distribusjon av rike klienter

• Vanlige webløsninger som kjører i nettleseren har ikke tilgang på lokale ressurser

• Rike klienter må derfor distribueres med en mekanisme for lokal installasjon

Din applikasjon (HTML 5)

HTML motor (f.eks. WebKit)

Kjøremiljø (f.eks. Adobe AIR)

OS

Alternativer for rike web klienter

• Adobe AIR• Inkluderer nettlesermotoren WebKit (samme som Chrome og

Safari)• Innebygde mekanismer for installasjon og automatiske

oppdateringer• JavaScript bibliotek for tilgang på lokale ressurser

• Microsoft .NET• Bruker nettleseren Internet Explorer• Må lage egen kode for tilgang på lokale ressurser• Flere valg for installasjon og automatiske oppdateringer (Click-

Once)

• ++ (f.eks. Silverlight)

App Manifest

• Definisjonsfilen for en web applikasjon

• Beskriver ikoner, startside, m.m.

• Det lille «ekstra» som må til for å gjøre din «webside» om til en «app»

Flickr Downloadr

• Verktøy for nedlasting av bilder fra bildetjenesten Flickr.com

• Skrevet fullstendig i HTML 5

• Distribueres ved hjelp av Adobe AIR

• http://flickrdownloadr.codeplex.com/

InTheBoks

• Organisering av ting, som filmer, bøker, musikk, m.m.

• Distribueres rett nettleseren på enheten, krever ikke lokal maskintilgang

• Full mobil støtte, kan installeres som web-applikasjon

• http://www.intheboks.com/

Fremtiden

Fortiden...

Konsekvensen?

Alt må gjøres minst 3 ganger.

Apps på PCen

• Chrome Web Store (Google Chrome)

• Mozilla Labs Apps project (FireFox)

• Mac App Store

• Windows 8 Marketplace

... spill i HTML 5?

Angry Birds

• Det ekstremt populære Angry Birds kan spilles i HTML 5

• http://chrome.angrybirds.com

Cut The Rope

• Populært mobilspill konvertert til HTML 5

• Portet fra Objective C på iOS til JavaScript

• http://www.cuttherope.ie

Onslaught! Arena

• HTML 5 basert spill

• Tilgjengelig på Android Market, Mac App Store, iTunes («App Store») og Chrome Web Store

• http://www.lostdecadegames.com/onslaught_arena/

Hvordan distribuere man en demo av et spill? Rett i nettleseren ;-)

Windows 8 – HTML 5 i førersetet

• Allerede fra første annonsering av Windows 8, ble det kommunisert tydelig at HTML 5 ville komme i førersetet

• Alle Windows APIer er tilgjengelig i JavaScript

• Ikke lengre nødvendig med egne kjøremiljøer for rike HTML 5 applikasjoner

Din applikasjon (HTML 5)

WinRT

OS

HTML 5: Write once, run everywhere

• Endelig begynner drømmen om å skrive kode én gang, å bli realisert

• Markedet av enheter er enormt, vokser daglig!

• Brukere ikke lengre fornøyd med løsninger som kun fungerer på én enhet.

Aftenposten: «I mars (2011) var nær 90 prosent av alle solgte mobiler gjennom NetComs salgskanaler en smarttelefon»

Hvorfor HTML 5?

• Enkelhet• Én teknologi for alle plattformer, inkludert smarte telefoner,

nettbrett og PCer.• Standard• Basert på åpne standarder fra W3C og ECMA, leverandør

uavhengig.• Frihet• Ingen innlåsing på plattform, du kan distribuere dine apps

fritt slik du ønsker.• Rekkevidde• Du kan nå millioner av nye brukere.

HTML 5

Rike klienter

Fremtiden

God gammel teknologi som fortsatt er høyst gjeldende og moderne.

Gjenbruk av eksisterende kunnskaper og erfaringer.

HTML 5 for apps til både PC og mobile enheter.

Takk for meg!

Sondre BjellåsSenior løsningsarkitekt

Deepmind ASsb@deepmind.no

Ressurser

• http://www.smashingmagazine.com/2011/10/28/useful-coding-workflow-tools-for-web-designers-developers/

• https://en.wikipedia.org/wiki/Comparison_of_JavaScript_frameworks• http://www.html5rocks.com• Morgan Stanley rapport:

http://gigaom.com/2010/04/12/mary-meeker-mobile-internet-will-soon-overtake-fixed-internet/

• http://www.aftenposten.no/digital/nyheter/9-av-10-solgte-mobiler-er-en-smarttelefon-6279888.html