apps on html5 - why, how, and beyond

36
$SSV RQ +70/ :K\ KRZ DQG EH\RQG 7LP &KLHQ WLPGUHDP#PR]LOODFRP! :RUOG 'HYHORSHU 6XPPLW 0DUFK WK +RQJ .RQJ

Upload: timothy-chien

Post on 12-May-2015

2.353 views

Category:

Technology


0 download

DESCRIPTION

Presentation given in WIDS 2012, Hong Kong.http://www.isoc.hk/wids/In this talk, Tim Chien from Mozilla Taiwan will given an overview on 2 things: 1) why it is important to bring you applications to the Web, and 2) the HTML5 technologies that can be leveraged to bring the so-called "native" experience to the web apps. We will have further discussion on the application ecosystem of the web, and the Mozilla's role within to continuing nurturing the web.

TRANSCRIPT

Page 1: Apps on HTML5 - Why, how, and beyond

$SSV�RQ�+70/���:K\��KRZ��DQG�EH\RQG7LP�&KLHQ��WLPGUHDP#PR]LOOD�FRP!

�:RUOG�'HYHORSHU�6XPPLW

0DUFK��WK��������+RQJ�.RQJ

Page 2: Apps on HTML5 - Why, how, and beyond

⡆㻌ෙᗞ

7LP�&KLHQ

Page 3: Apps on HTML5 - Why, how, and beyond

,QVSHFW��WKH�ZHE��RQH�SDJH�DW�D�WLPH

)URQW�HQG�'HYHORSHU

Page 4: Apps on HTML5 - Why, how, and beyond
Page 5: Apps on HTML5 - Why, how, and beyond
Page 6: Apps on HTML5 - Why, how, and beyond

ᣎⅆ≴ᩍ䠛

:KDW�LV�0R]LOOD"

Page 7: Apps on HTML5 - Why, how, and beyond

0R]LOOD�LV�D�JOREDO��QRQSURILW�RUJDQL]DWLRQ�GHGLFDWHG�WR�PDNLQJ�WKH�:HE�EHWWHU�

2IILFLDO�([SODQDWLRQ�䚣

Page 8: Apps on HTML5 - Why, how, and beyond

㠀⇯⤌⧊

QRQ�SURILW

Page 9: Apps on HTML5 - Why, how, and beyond

3XUSRVH

Page 10: Apps on HTML5 - Why, how, and beyond
Page 11: Apps on HTML5 - Why, how, and beyond

��<HDUV�$JR

�7KH�%URZVHU�

Page 12: Apps on HTML5 - Why, how, and beyond

7RGD\

Page 13: Apps on HTML5 - Why, how, and beyond

RQ�WKH�2SHQ�:HE�3ODWIRUP

+70/��:HE�$SSV

Page 14: Apps on HTML5 - Why, how, and beyond

,VQW�BBBB�LV�JRRG�HQRXJK"

:K\�WKH�:HE"

Page 15: Apps on HTML5 - Why, how, and beyond

$GYDQWDJH�RI�:HE�$SSV

Ɣ 1R�,QVWDOODWLRQƔ 5HDFKDELOLW\Ɣ 6HDPOHVV�8SGDWHƔ (PEHGGDEOH�DQG�OLQNDEOH��

Page 16: Apps on HTML5 - Why, how, and beyond

7KH�³$SS´�([SHULHQFH

�� 2IIOLQH�$FFHVV�� ,QVWDQW�RQ�� $GRSWLYH�ORRN�DQG�IHHO�� 6XUUXQGLQJ�DZDUHQHVV�� ,QVWDOODEOH

Page 17: Apps on HTML5 - Why, how, and beyond

2IIOLQH�$FFHVV

Ɣ 2IIOLQH�$SS&DFKHż 6WDWLF�ILOHV�DQG�DVVHWV

Ɣ /RFDO6WRUDJHż 6LPSOH�NH\�YDOXH�VWRUDJH��UHSODFHPHQW�IRU�FRRNLHV

Ɣ ,QGH[HG'%ż )XOO�IHDWXUHG�GDWDEDVH�VWRUDJH

��

Page 18: Apps on HTML5 - Why, how, and beyond

2IIOLQH�,PDJH�(GLWRU

'HPR

Page 19: Apps on HTML5 - Why, how, and beyond

2IIOLQH�$SS&DFKH

Ɣ 5HIHUHQFH�WKH�PDQLIHVW�LQ�WKH�ZHE�SDJH���Ɣ 7KH��DSSFDFKH�ILOH�PXVW�VHUYHG�ZLWK�WKLV�

0,0(�W\SH

�KWPO�PDQLIHVW �VLWH�DSSFDFKH�!

WH[W�FDFKH�PDQLIHVW

Page 20: Apps on HTML5 - Why, how, and beyond

2IIOLQH�$SS&DFKH�0DQLIHVW

� &$&+(�0$1,)(67��YHUVLRQ�����G�D���&$&+(�LPDJHV�VRXQG�LFRQ�SQJLPDJHV�EDFNJURXQG�SQJ)$//%$&.����RIIOLQH�KWPO1(7:25.� ��

Page 21: Apps on HTML5 - Why, how, and beyond

,QVWDQW�RQ

Ɣ %RQXV�IURP�HQDEOLQJ�2IIOLQH�$SS&DFKHƔ 8VHU�VHHV�WKH�FDFKHG�YHUVLRQ�RI�\RXU�VLWH�

ILUVW��DQ�EH�SURPSWHG�ZKHQ�WKH�XSGDWHG�YHUVLRQ�LV�UHDG\

/RDG�IURP�RIIOLQH�FDFKH

%DFNJURXQG�FKHFNLQJ�GRZQORDG

)LUH��XSGDWHUHDG\��(YHQW��SURPSW�XVHU�WR�UHORDG

Page 22: Apps on HTML5 - Why, how, and beyond

�XSGDWHUHDG\��(YHQW

� ZLQGRZ�DSSOLFDWLRQ&DFKH�DGG(YHQW/LVWHQHU���XSGDWHUHDG\���IXQFWLRQ�H��^����YDU�UHORDG� �ZLQGRZ�FRQILUP����������LI��UHORDG��������ZLQGRZ�ORFDWLRQ�UHORDG�����`���IDOVH��

Page 23: Apps on HTML5 - Why, how, and beyond

$GRSW�/RRN�DQG�)HHO

Ɣ :HE�OLYHV�RQ�QHDU�LQILQLWH�GHYLFHVƔ 7KH�5HVSRQVLYH�'HVLJQ�DSSURDFKƔ &66��0HGLD�4XHULHV�KHOSV�\RX�VZLWFKLQJ�

VW\OH�EDVH�RQ�GLVSOD\�SURSHUWLHVƔ 3URSHU�)HDWXUH�'HWHFWLRQ�DOVR�KHOSV

Page 24: Apps on HTML5 - Why, how, and beyond

&66��&KHUU\�%ORVVRPUHVSRQVLYH�LV

'HPR

Page 25: Apps on HTML5 - Why, how, and beyond

&66��0HGLD�4XHULHV

� #PHGLD�VFUHHQ�^��DVLGH�^����IORDW��ULJKW���``�#PHGLD�VFUHHQ�DQG��PD[�ZLGWK�����S[��^��DVLGH�^����IORDW��QRQH���``

Page 26: Apps on HTML5 - Why, how, and beyond

)HDWXUH�'HWHFWLRQ

� YDU�VXSSRUW7RXFK� ����RQWRXFKVWDUW�LQ�ZLQGRZ��__���ZLQGRZ�'RFXPHQW7RXFK�����GRFXPHQW�LQVWDQFHRI�'RFXPHQW7RXFK��__��ZLQGRZ�PDWFK0HGLD���PR]�WRXFK�HQDEOHG����LI��VXSSRUW7RXFK��^��GRFXPHQW�ERG\�FODVV1DPH�� ��KDV7RXFK�`�

Page 27: Apps on HTML5 - Why, how, and beyond

6XUUXQGLQJ�$ZDUHQHVV

Ɣ $ZDUH�RI�LQIRUPDWLRQ�RWKHU�WKDQ�XVHU�LQSXWV�Ɣ *HRORFDWLRQ�$3,Ɣ 'HYLFH�2ULHQWDWLRQ�

Page 28: Apps on HTML5 - Why, how, and beyond

'HYLFH�2ULHQWDWLRQ*RRJOH�0DSV

'HPR

Page 29: Apps on HTML5 - Why, how, and beyond

Ɣ *UHDW�SODWIRUP�VXSSRUW�DOUHDG\�H[LVWVƔ 0R]LOOD�ZDQW�WR�GR�PRUH�ZLWK�2SHQ�:HE�

$SS�SURMHFW

,QVWDOODWLRQ�'HOLYHU\

Page 30: Apps on HTML5 - Why, how, and beyond

&XUUHQW�ZHE�DSS�SODWIRUPV

Ɣ 3URSULHWDU\�SDFNDJLQJ�IRUPDWƔ 'HWDFK�ZHE�WHFK�IURP�WKH�ZHEƔ 6HFRQG�FODVV�FLWL]HQ�RQ�VLQJOH�YHQGRU�

SODWIRUPVƔ &HQWUDOL]HG�GLVWULEXWLRQ�FKDQQHO��VLQJOH�

RSWLRQ�RI�XVHU�LGHQWLW\�PRQHWL]DWLRQ

Page 31: Apps on HTML5 - Why, how, and beyond

6R�ZH�FDPH�XS�VRPH�QHZ�SURMHFWV�WR�IXOILOO�RXU�SXUSRVH

$W�0R]LOOD��ZH�ZDQW�WR�VHW�WKH�ZHE�IUHH�

Page 32: Apps on HTML5 - Why, how, and beyond

7KH�1HZ�0R]LOOD

2SHQ�:HE�$SSV

%RRW�WR�*HFNR

%URZVHU,'

Page 33: Apps on HTML5 - Why, how, and beyond

2SHQ�:HE�$SS�3URMHFW

Ɣ 'HOLYHU�\RXU�PRELOH�DSS�RQ�WKH�ZHE�HIIHFWLYHO\�ZLWKRXW�ORVLQJ�IUHHGRP

Ɣ 127�MXVW�DQRWKHU�PDUNHWSODFH�IRU�ZHE�DSSV

Page 34: Apps on HTML5 - Why, how, and beyond

%URZVHU,'

Ɣ 'HFHQWUDOL]HG�,GHQWLW\�6\VWHPƔ 8VHU�LV�LGHQWLILHG�ZLWK�WKHLU�(�PDLO�DGGUHVV�

VHFXUHO\�XVLQJ�EURZVHU�$3,�VXSSRUWƔ 1R�WKLUG�SDUW\�LQYROYHG��1R�XVHU�WUDFNLQJ�

QDYLJDWRU�LG�JHW�JRW$VVHUWLRQ&DOOEDFN��

Page 35: Apps on HTML5 - Why, how, and beyond

%RRW�WR�*HFNR��%�*�

Ɣ 0RELOH�2SHUDWLQJ�6\VWHP�IRU�WKH�:HEƔ :HE�$SS�DV�ILUVW�FODVV�FLWL]HQƔ 1HZ�:HE�$3,V�DQG�3ULYLOHJH�PRGHO�IRU�ZHE�

WHFKQRORJLHV�WR�UXQ�D�SKRQHż 7HOHSKRQ\��606��:HE86%��HWF�

Page 36: Apps on HTML5 - Why, how, and beyond

/HWV�PDNH�VRPH�NLFN�DVV�ZHE�DSSV�

0R]LOODV�PLVVLRQ�LV�WR�SURPRWH�RSHQQHVV��LQQRYDWLRQ�DQG�RSSRUWXQLW\�RQ�WKH�ZHE�