Codefest 2013: PhoneGap, нативные приложения, гибридные. Константин Лихтер Юрий Пляхин Intel

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

2. • PhoneGap*
• HTML5 API vs. PhoneGap*
• WebRTC*
• Удалённая отладка
• HTML5 Game development
• Facebook* app
• Тренды
2
Copyright© 2012, Intel Corporation. All rights reserved.
3/30/2013 *Other brands and names are the property of their respective owners.

3. Что выгоднее (дешевле производить,
легче продавать, поддерживать):
нативные приложения или HTML5?
Какие технологии будут
доминировать в ближайшие 5 лет для
разработки мобильных приложений?
3
Copyright© 2012, Intel Corporation. All rights reserved.
3/30/2013 *Other brands and names are the property of their respective owners.

4. http://www.centerblog.net/journal-intime/154960-5622579-la-dispute-entre-la-voisine-et-le-locataire-ppffff-#
4
Copyright© 2012, Intel Corporation. All rights reserved.
3/30/2013 *Other brands and names are the property of their respective owners.

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

6. PhoneGap*
6
3/30/2013

7. Web App
Runtime Браузер
Зависимости Реализация стандартов
Кроссплатформенность Да (почти )
Отладка В меру сложная
Поддержка многих Требуется для устаревших
версий платформы браузеров
Язык программирования HTML5 + JS + CSS
7
Copyright© 2012, Intel Corporation. All rights reserved.
3/30/2013 *Other brands and names are the property of their respective owners.

8. Native App
Runtime ОС
Зависимости ОС
Кроссплатформенность Нет
Отладка «Простая»
Поддержка многих «Простая»
версий платформы
Язык программирования Нет единого
8
Copyright© 2012, Intel Corporation. All rights reserved.
3/30/2013 *Other brands and names are the property of their respective owners.

9. PhoneGap* App
Runtime ОС
WebView
ОС
Зависимости ОС
PhoneGap API
ОС
Кроссплатформенность ОС
Да
ОС
Отладка ОС
В меру ОС
сложная
Поддержка многих ОС
«Простая»
ОС
версий платформы
Язык программирования ОС
HTML5 + JS + CSS
ОС
9
Copyright© 2012, Intel Corporation. All rights reserved.
3/30/2013 *Other brands and names are the property of their respective owners.

10. Возможности PhoneGap*
Accelerometer File
Camera Geolocation
Capture Globalization
Compass InAppBrowser
Connection Media
Contacts Notification
Device Splashscreen
Events Storage
10
Copyright© 2012, Intel Corporation. All rights reserved.
3/30/2013 *Other brands and names are the property of their respective owners.

11. Возможности PhoneGap*
Camera
camera.getPicture
Capture
capture.captureAudio
capture.captureImage
capture.captureVideo
11
Copyright© 2012, Intel Corporation. All rights reserved.
3/30/2013 *Other brands and names are the property of their respective owners.

12. Возможности PhoneGap*
Connection
connection.type
// UNKNOWN, ETHERNET, WIFI, CELL_2G, CELL_3G,
CELL_4G, NONE
12
Copyright© 2012, Intel Corporation. All rights reserved.
3/30/2013 *Other brands and names are the property of their respective owners.

13. Возможности PhoneGap*
Device
device.name
device.cordova
device.platform
device.uuid
device.version
device.model
13
Copyright© 2012, Intel Corporation. All rights reserved.
3/30/2013 *Other brands and names are the property of their respective owners.

14. Возможности PhoneGap*
Events
deviceready, pause, resume, online, offline,
backbutton, batterycritical, batterylow,
batterystatus, menubutton, searchbutton,
startcallbutton, endcallbutton,
volumedownbutton, volumeupbutton
14
Copyright© 2012, Intel Corporation. All rights reserved.
3/30/2013 *Other brands and names are the property of their respective owners.

15. Возможности PhoneGap*
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
Copyright© 2012, Intel Corporation. All rights reserved.
3/30/2013 *Other brands and names are the property of their respective owners.

16. Возможности PhoneGap*
Notification
notification.alert
notification.confirm
notification.beep
notification.vibrate
16
Copyright© 2012, Intel Corporation. All rights reserved.
3/30/2013 *Other brands and names are the property of their respective owners.

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

18. Использование PhoneGap* для
разработки мультиплатформенных
мобильных приложений
Можно ли отказаться от нативных
приложений в пользу гибридных?
18
Copyright© 2012, Intel Corporation. All rights reserved.
3/30/2013 *Other brands and names are the property of their respective owners.

19. Использование PhoneGap* для
разработки мультиплатформенных
мобильных приложений
Достаточно ли
производительности?
19
Copyright© 2012, Intel Corporation. All rights reserved.
3/30/2013 *Other brands and names are the property of their respective owners.

20. Использование PhoneGap* для
разработки мультиплатформенных
мобильных приложений
Мультиплатформенность:
правда или миф?
20
Copyright© 2012, Intel Corporation. All rights reserved.
3/30/2013 *Other brands and names are the property of their respective owners.

21. Использование PhoneGap* для
разработки мультиплатформенных
мобильных приложений
Альтернативные решения?
21
Copyright© 2012, Intel Corporation. All rights reserved.
3/30/2013 *Other brands and names are the property of their respective owners.

22. Задание
Поддержка кросс-платформенного
приложения на 5 платформах
22
Copyright© 2012, Intel Corporation. All rights reserved.
3/30/2013 *Other brands and names are the property of their respective owners.

23. HTML5 API vs. PhoneGap*
23
3/30/2013

24. HTML5 Device API vs PhoneGap*
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/
24
Copyright© 2012, Intel Corporation. All rights reserved.
3/30/2013 *Other brands and names are the property of their respective owners.

25. HTML5 Device API vs PhoneGap*
25
Copyright© 2012, Intel Corporation. All rights reserved.
3/30/2013 *Other brands and names are the property of their respective owners.

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

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

28. WebRTC*
28
3/30/2013

29. Web Real Time Communication
• Передача и обработка аудио и видео в реальном
времени
• Не нужны плагины
• Маскировка потери пакетов, погашение эха,
адаптируется к пропускной способности канала,
шумоподавление для звука и изображения
• Работает с NAT, Proxy, …
• Пример: Видео чат
29
Copyright© 2012, Intel Corporation. All rights reserved.
3/30/2013 *Other brands and names are the property of their respective owners.

30. WebRTC*
DEMO
http://www.soundstep.com/blog/experiments/jsdete
ction/
30
Copyright© 2012, Intel Corporation. All rights reserved.
3/30/2013 *Other brands and names are the property of their respective owners.

31. Удалённая отладка
31
3/30/2013

32. Удаленная отладка
Google Chrome*
Weinre*
32
Copyright© 2012, Intel Corporation. All rights reserved.
3/30/2013 *Other brands and names are the property of their respective owners.

33. HTML5 Game development
33
3/30/2013

34. Разработка игр на HTML5
Проблемы:
• Производительность
• Поддержка звука и WebGL
• Отладка
• Безопасность
34
Copyright© 2012, Intel Corporation. All rights reserved.
3/30/2013 *Other brands and names are the property of their respective owners.

35. Разработка игр на HTML5
DEMO
http://www.kevs3d.co.uk/dev/asteroidsbench/
35
Copyright© 2012, Intel Corporation. All rights reserved.
3/30/2013 *Other brands and names are the property of their respective owners.

36. Разработка игр на HTML5
2D Canvas – достаточно ли
производительности?
36
Copyright© 2012, Intel Corporation. All rights reserved.
3/30/2013 *Other brands and names are the property of their respective owners.

37. Разработка игр на HTML5
CSS3 Hardware Acceleration
Некоторые трансформации могут исполняться на
GPU
Например:
Все 3D трансформации
(transform: translateZ(0);)
37
Copyright© 2012, Intel Corporation. All rights reserved.
3/30/2013 *Other brands and names are the property of their respective owners.

38. Разработка игр на HTML5
CSS3 Hardware Acceleration
опыт использования?
38
Copyright© 2012, Intel Corporation. All rights reserved.
3/30/2013 *Other brands and names are the property of their respective owners.

39. Разработка игр на HTML5
DEMO
http://hexgl.bkcore.com/
http://www.findyourwaytooz.com/
http://carvisualizer.plus360degrees.com/threejs/
39
Copyright© 2012, Intel Corporation. All rights reserved.
3/30/2013 *Other brands and names are the property of their respective owners.

40. Разработка игр на HTML5
3D Canvas: WebGL, three.js*, OpenGL
native wrappers
40
Copyright© 2012, Intel Corporation. All rights reserved.
3/30/2013 *Other brands and names are the property of their respective owners.

41. Разработка игр на HTML5
Web Audio API
Обработка и синтез звука
Фильтрация и микс
http://aikelab.net/websynth/
Поддержка:
Google Chrome*, Safari*
41
Copyright© 2012, Intel Corporation. All rights reserved.
3/30/2013 *Other brands and names are the property of their respective owners.

42. Разработка игр на HTML5
Поддержка звука
Web Audio API
42
Copyright© 2012, Intel Corporation. All rights reserved.
3/30/2013 *Other brands and names are the property of their respective owners.

43. Разработка игр на HTML5
Game Engines: Impact*, LimeJS*,
TWEENJS*, Squire* framework, Crafty*,
three.js*, Quintus*, Construct 2*,
GameMaker: Studio™*, playcanvas*
43
Copyright© 2012, Intel Corporation. All rights reserved.
3/30/2013 *Other brands and names are the property of their respective owners.

44. Facebook* App
44
3/30/2013

45. 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.
From http://lists.w3.org/Archives/Public/public-coremob/2012Sep/0015.html
45
Copyright© 2012, Intel Corporation. All rights reserved.
3/30/2013 *Other brands and names are the property of their respective owners.

46. Опыт мобильного приложения
Facebook*
Video
http://vimeo.com/55486684
46
Copyright© 2012, Intel Corporation. All rights reserved.
3/30/2013 *Other brands and names are the property of their respective owners.

47. Тренды
47
3/30/2013

48. Тренды
Что выгоднее (дешевле производить,
легче продавать, поддерживать):
нативные приложения или HTML5?
48
Copyright© 2012, Intel Corporation. All rights reserved.
3/30/2013 *Other brands and names are the property of their respective owners.

49. Тренды
Какие технологии будут
доминировать в ближайшие 5 лет для
разработки мобильных приложений?
49
Copyright© 2012, Intel Corporation. All rights reserved.
3/30/2013 *Other brands and names are the property of their respective owners.

50. http://blogs.perficient.com/spark/2012/10/03/html5-trough-of-disillusionment/
50
Copyright© 2012, Intel Corporation. All rights reserved.
3/30/2013 *Other brands and names are the property of their respective owners.

51. А сколько стоит?
51
3/30/2013

52. Honda Civic 1994, $1-5K
Мне нужно рабочее приложение:
• Простое
• Несколько страниц на одной плаформе
• Могу нанять фрилансера
http://blog.darwinapps.com/post/36041399961/appcostscar
Фото автомобиля – drom.ru
52
Copyright© 2012, Intel Corporation. All rights reserved.
3/30/2013 *Other brands and names are the property of their respective owners.

53. BMW 335i 2007, $20-25K
Мне нужно приложение, хорошо
работающее на одной платформе
http://blog.darwinapps.com/post/36041399961/appcostscar
Фото автомобиля – drom.ru
53
Copyright© 2012, Intel Corporation. All rights reserved.
3/30/2013 *Other brands and names are the property of their respective owners.

54. Audi Q7, $50-75K
Мне нужно приложение,
работающее везде
http://blog.darwinapps.com/post/36041399961/appcostscar
Фото автомобиля – cargurus.com
54
Copyright© 2012, Intel Corporation. All rights reserved.
3/30/2013 *Other brands and names are the property of their respective owners.

55. Lamborghini Aventador, $400K+
Мне нужно лучшее в своем классе
приложение
http://blog.darwinapps.com/post/36041399961/appcostscar
Фото автомобиля – www.hdwallpapers.in
55
Copyright© 2012, Intel Corporation. All rights reserved.
3/30/2013 *Other brands and names are the property of their respective owners.

56. 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/StateofHTML5GameDe
velopment
56
Copyright© 2012, Intel Corporation. All rights reserved.
3/30/2013 *Other brands and names are the property of their respective owners.

57. Спасибо!
Юрий Пляхин Константин Лихтер
yuri.plyakhin@intel.com konstantin.likhter@intel.com
@likhter
http://software.intel.com/en-us/html5
57

58. Legal Disclaimer & Optimization Notice
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
58
58
3/30/2013 Copyright© 2012, Intel Corporation. All rights reserved.
*Other brands and names are the property of their respective owners.