Codefest 2013, HTML5, нативные, гибридные мобильные приложения

Разработка мобильных приложений: PhoneGap, чистый HTML5, нативные, гибридные. За чем будущее?

Юрий Пляхин, Константин Лихтер

Intel

Copyright© 2012, Intel Corporation. All rights reserved. *Other brands and names are the property of their respective owners.

• PhoneGap*

• HTML5 API vs. PhoneGap*

• WebRTC*

• Удалённая отладка

• HTML5 Game development

• Facebook* app

• Тренды

2

3/30/2013


Что выгоднее (дешевле производить, легче продавать, поддерживать): нативные приложения или HTML5?

Какие технологии будут доминировать в ближайшие 5 лет для разработки мобильных приложений?

3

3/30/2013


4

3/30/2013

http://www.centerblog.net/journal-intime/154960-5622579-la-dispute-entre-la-voisine-et-le-locataire-ppffff-#


5

3/30/2013

PhoneGap*

6

3/30/2013


7

3/30/2013

Web App

Runtime

Зависимости

Кроссплатформенность

Отладка

Поддержка многих версий платформы

Язык программирования

Браузер

Реализация стандартов

Да (почти )

В меру сложная

Требуется для устаревших браузеров

HTML5 + JS + CSS


8

3/30/2013

Native App

Runtime



Отладка



ОС

ОС

Нет

«Простая»

«Простая»

Нет единого


9

3/30/2013

PhoneGap* App

Runtime



Отладка



ОС ОС WebView

ОС ОС PhoneGap API

ОС ОС Да

ОС ОС В меру сложная

ОС ОС «Простая»

ОС ОС HTML5 + JS + CSS


Возможности PhoneGap*

Accelerometer

Camera

Capture

Compass

Connection

Contacts

Device

Events

File

Geolocation

Globalization

InAppBrowser

Media

Notification

Splashscreen

Storage

10

3/30/2013



Camera

camera.getPicture

Capture

capture.captureAudio

capture.captureImage

capture.captureVideo

11

3/30/2013



Connection

connection.type

// UNKNOWN, ETHERNET, WIFI, CELL_2G, CELL_3G,

CELL_4G, NONE

12

3/30/2013



Device

device.name

device.cordova

device.platform

device.uuid

device.version

device.model

13

3/30/2013



Events

deviceready, pause, resume, online, offline,

backbutton, batterycritical, batterylow,

batterystatus, menubutton, searchbutton,

startcallbutton, endcallbutton,

volumedownbutton, volumeupbutton

14

3/30/2013



Globalization

globalization.getPreferredLanguage

globalization.getLocaleName

globalization.dateToString

globalization.stringToDate

globalization.getDatePattern

globalization.getDateNames

globalization.isDayLightSavingsTime

globalization.getFirstDayOfWeek

globalization.numberToString

globalization.stringToNumber

globalization.getNumberPattern

globalization.getCurrencyPattern

15

3/30/2013



Notification

notification.alert

notification.confirm

notification.beep

notification.vibrate

16

3/30/2013


17

3/30/2013


Использование PhoneGap* для разработки мультиплатформенных мобильных приложений

Можно ли отказаться от нативных приложений в пользу гибридных?

18

3/30/2013



Достаточно ли производительности?

19

3/30/2013



Мультиплатформенность: правда или миф?

20

3/30/2013



Альтернативные решения?

21

3/30/2013


Задание

Поддержка кросс-платформенного приложения на 5 платформах

22

3/30/2013

HTML5 API vs. PhoneGap*

23

3/30/2013


HTML5 Device API vs PhoneGap*

24

3/30/2013

Feature S/iOS Android Chrome BB IE OM FF

Geolocation

Multimedia

Motion Sensors

Touch Events

Network Information API

File API

getUserMedia

Full Screen API

Capture

http://mobilehtml5.org/


HTML5 Device API vs PhoneGap*

25

3/30/2013


26

3/30/2013


27

3/30/2013

WebRTC*

28

3/30/2013


Web Real Time Communication

• Передача и обработка аудио и видео в реальном времени

• Не нужны плагины

• Маскировка потери пакетов, погашение эха, адаптируется к пропускной способности канала, шумоподавление для звука и изображения

• Работает с NAT, Proxy, …

• Пример: Видео чат

29

3/30/2013


WebRTC*

DEMO

http://www.soundstep.com/blog/experiments/jsdetection/

30

3/30/2013








Удалённая отладка

31

3/30/2013


Удаленная отладка

Google Chrome*

Weinre*

32

3/30/2013

HTML5 Game development

33

3/30/2013


Разработка игр на HTML5

Проблемы:

• Производительность

• Поддержка звука и WebGL

• Отладка

• Безопасность

34

3/30/2013



DEMO

http://www.kevs3d.co.uk/dev/asteroidsbench/

35

3/30/2013

http://hexgl.bkcore.com/









2D Canvas – достаточно ли производительности?

36

3/30/2013



CSS3 Hardware Acceleration

Некоторые трансформации могут исполняться на GPU

Например:

Все 3D трансформации (transform: translateZ(0);)

37

3/30/2013



CSS3 Hardware Acceleration опыт использования?

38

3/30/2013



DEMO


http://www.findyourwaytooz.com/

http://carvisualizer.plus360degrees.com/threejs/

39

3/30/2013















3D Canvas: WebGL, three.js*, OpenGL native wrappers

40

3/30/2013



Web Audio API

Обработка и синтез звука

Фильтрация и микс

http://aikelab.net/websynth/

Поддержка:

Google Chrome*, Safari*

41

3/30/2013





Поддержка звука Web Audio API

42

3/30/2013



Game Engines: Impact*, LimeJS*, TWEENJS*, Squire* framework, Crafty*,

three.js*, Quintus*, Construct 2*, GameMaker: Studio™*, playcanvas*

43

3/30/2013

Facebook* App

44

3/30/2013


Mark Zuckerberg: Biggest Mistake Was Betting Too Much On HTML5 "When I'm introspective about the last few years I think the biggest mistake that we made, as a company, is betting too much on HTML5 as opposed to native... because it just wasn't there. And it's not that HTML5 is bad. I'm actually, on long-term, really excited about it. One of the things that's interesting is we actually have more people on a daily basis using mobile Web Facebook than we have using our iOS or Android apps combined. So mobile Web is a big thing for us.“

--Mark Zuckerberg, Disrupt SF, September 2012.

45

3/30/2013

From http://lists.w3.org/Archives/Public/public-coremob/2012Sep/0015.html


Опыт мобильного приложения Facebook*

Video

http://vimeo.com/55486684

46

3/30/2013



Тренды

47

3/30/2013


Тренды

Что выгоднее (дешевле производить, легче продавать, поддерживать): нативные приложения или HTML5?

48

3/30/2013


Тренды

Какие технологии будут доминировать в ближайшие 5 лет для разработки мобильных приложений?

49

3/30/2013


50

3/30/2013

http://blogs.perficient.com/spark/2012/10/03/html5-trough-of-disillusionment/

А сколько стоит?

51

3/30/2013


http://blog.darwinapps.com/post/36041399961/appcostscar Фото автомобиля – drom.ru

52

3/30/2013

Honda Civic 1994, $1-5K

Мне нужно рабочее приложение: • Простое • Несколько страниц на одной плаформе • Могу нанять фрилансера

http://blog.darwinapps.com/post/36041399961/appcostscar



http://blog.darwinapps.com/post/36041399961/appcostscar Фото автомобиля – drom.ru

53

3/30/2013

BMW 335i 2007, $20-25K

Мне нужно приложение, хорошо работающее на одной платформе




http://blog.darwinapps.com/post/36041399961/appcostscar Фото автомобиля – cargurus.com

54

3/30/2013

Audi Q7, $50-75K

Мне нужно приложение, работающее везде




http://blog.darwinapps.com/post/36041399961/appcostscar Фото автомобиля – www.hdwallpapers.in

55

3/30/2013

Lamborghini Aventador, $400K+

Мне нужно лучшее в своем классе приложение




Links

http://software.intel.com/en-us/html5

http://www.html5rocks.com/en/mobile/nativedebate/

http://www.html5rocks.com/en/tutorials/webrtc/basics/

http://www.html5gamedevelopment.org/StateofHTML5GameDevelopment

56

3/30/2013













Спасибо!

57

Юрий Пляхин [email protected]

Константин Лихтер [email protected]

@likhter

http://software.intel.com/en-us/html5


INFORMATION IN THIS DOCUMENT IS PROVIDED “AS IS”. NO LICENSE, EXPRESS OR IMPLIED, BY ESTOPPEL OR OTHERWISE, TO ANY INTELLECTUAL PROPERTY RIGHTS IS GRANTED BY THIS DOCUMENT. INTEL ASSUMES NO LIABILITY WHATSOEVER AND INTEL DISCLAIMS ANY EXPRESS OR IMPLIED WARRANTY, RELATING TO THIS INFORMATION INCLUDING LIABILITY OR WARRANTIES RELATING TO FITNESS FOR A PARTICULAR PURPOSE, MERCHANTABILITY, OR INFRINGEMENT OF ANY PATENT, COPYRIGHT OR OTHER INTELLECTUAL PROPERTY RIGHT. Software and workloads used in performance tests may have been optimized for performance only on Intel microprocessors. Performance tests, such as SYSmark and MobileMark, are measured using specific computer systems, components, software, operations and functions. Any change to any of those factors may cause the results to vary. You should consult other information and performance tests to assist you in fully evaluating your contemplated purchases, including the performance of that product when combined with other products. Copyright © , Intel Corporation. All rights reserved. Intel, the Intel logo, Xeon, Core, VTune, and Cilk are trademarks of Intel Corporation in the U.S. and other countries.

Optimization Notice

Intel’s compilers may or may not optimize to the same degree for non-Intel microprocessors for optimizations that are not unique to Intel microprocessors. These optimizations include SSE2, SSE3, and SSSE3 instruction sets and other optimizations. Intel does not guarantee the availability, functionality, or effectiveness of any optimization on microprocessors not manufactured by Intel. Microprocessor-dependent optimizations in this product are intended for use with Intel microprocessors. Certain optimizations not specific to Intel microarchitecture are reserved for Intel microprocessors. Please refer to the applicable product User and Reference Guides for more information regarding the specific instruction sets covered by this notice.

Notice revision #20110804

Legal Disclaimer & Optimization Notice


58

3/30/2013 58

Documents

Codefest 2013, HTML5, нативные, гибридные мобильные приложения