Мобильная веб-разработка

Ребров Андрей

2

Обо мне

Luxoft, 10 ЦСР

Разработка мобильных приложений в следующих сферах:• логистика; • перевозка пациентов;• поиск лекарств;• крупный сотовый оператор.

Блог: http://andrebrov.netТвиттер: @andrebrovПочта: ARebrov@luxoft.com

3

О семинаре

1. Почему стоит выбирать мобильный веб.

2. Как разрабатывать.

4

Решает ли мобильный веб все проблемы?

5

Решает ли мобильный веб все проблемы?

НЕТ!

6

Но на него стоит переходить уже сейчас?

7

ДА!

Но на него стоит переходить уже сейчас?

8

Когда телефоны были большими…

Сайты для них были:o унылые;o нефункциональные;o только WAP…

… или их вообще не было.

Хотя кто-то ставил Opera Mini и радовался жизни =)

9

Время шло и теперь… Различных мобильных устройств стало много..

… и даже слишком.

10

Так что имеем сейчас

• Полноценный компьютер в кармане• Малый размер экрана• Полноценный интернет (Wi-Fi)• Ряд ограничений (Flash, цена

интернета)• Геолокация и прочие встроенные

модули

11

Что изменилось еще

• Новые возможности в создании сайтов• Постепенный уход от десктопных

приложений• Выросла скорость интернета

12

Осталось сделать выбор

13

Разрушим ряд мифов!

14

Нативные приложения имеют больший функционал

15

Нативные приложения имеют больший функционал Myth busted

• Геолокация• Работа с файловой системой• Доступ к акселерометру и гироскопу• Работа с touch-событиями

16

Нативные приложения имеют большую производительность

• Аппаратное ускорение

• Мультипоточность

17

Нативные приложения имеют большую производительность Myth busted

http://stevesouders.com/mobileperf/

18

Нативные приложения проще разрабатывать

19

Нативные приложения проще разрабатывать Myth busted

• HTML• CSS• JS

20

Нативные приложения проще сделать с использованием родных стилей

21

Нативные приложения проще сделать с использованием родных стилей Myth busted

• Sencha Touch• jQTouch• jQuery Mobile• …

22

Нативные приложения проще найти (и купить)

• Apple Store

• Android market

• ...

23

Нативные приложения проще найти (и купить) Myth busted

24

Нативные приложения проще монетизировать

Единичная продажа

25

Нативные приложения проще монетизировать Myth busted

• Pay-per-use

• Advertise

• SaaS

26

Рынок мобильных приложений

27

PC vs Mobile

28

Мобильный интернет все более популярен

29

Конец первой части

30

Время разработки

31

Итак...

Вы все еще не пишите под мобильные устройства?

Тогда мы идем к вам!

32

Способы

• HTML+JS+CSS• Использовать фреймворк

33

HTML+JS+CSS

• Разные платформы• Разные экраны

Где то это уже было, да?

Но разбираться как это работает нужно, поэтому читаем «Building iPhone Apps with HTML, CSS, and JavaScript» http://ofps.oreilly.com/titles/9780596805784/

34

Будь проще и люди к тебе потянуться

Преимущество фреймворков:• Решается проблема кроссплатформенности• Решается проблема разных экранов• Готовые решения для native-like поведения

35

Многообразие выбора• jQTouch• jQueryMobile• Sencha Touch• XUI• …..

36

jQTouch

• Первый серьезный мобильный фреймворк

• Многое подарил jQuery Mobile и Sencha Touch

• Созданы native эффекты переходов между экранами

• Первый блин немножко комом

http://www.jqtouch.com/

37

jQTouch <div id="home" class="current">

<div class="toolbar"> <h1>jQTouch</h1> <a class="button slideup" id="infoButton" href="#about">About</a> </div> <ul class="rounded"> <li class="arrow">

<a href="#ui">User Interface</a> <small class="counter">4</small> </li>

</ul> <div class="info"> <p>Text</p> </div> </div>

38

jQuery Mobile

• Построен на jQuery• Поддержка всех платформ• Удобная работа с событиями• Поддержка HTML5• Удобная работа с темами

http://jquerymobile.com/

39

jQuery Mobile <div data-role="content">

<div data-role="fieldcontain"> <label for="name">Text Input:</label> <input type="text" name="name" id="name" value="" /> </div> <div data-role="fieldcontain"> <label for="textarea">Textarea:</label> <textarea cols="40" rows="8" name="textarea" id="textarea">

</textarea> </div> </div>

40

Sencha Touch

• Быстрое создание сложного интерфейса

• Простота в создание своих компонент• Удобная работа с данными• Проблема с производительностью

http://www.sencha.com/products/touch/

41

Sencha Touch var timeline = new Ext.Component({

title: 'Timeline',     tls: 'timeline', 

scroll: 'vertical',     tpl: [ 

'<tpl for=".">','<div class="tweet">','<div class="avatar">',

'<img src="{profile_image_url}"/>', '</div>', 

'<div class="tweet-content">','<h2>{from_user}</h2>', '<p>{text}</p>', '</div>','</div>','</tpl>'    ]  });

42

XUI

• Очень минималистичный• Отдельные сборки под платформы• Поддержка HTML

http://xuijs.com/

43

XUI x$('#foo').html('<p>sweet as honey</p>');

x$('#foo').outer('<p>free as a bird</p>');x$('#foo').top('<b>top of the pops</b>');x$('#foo').bottom('<span>bottom of the barrel</span>');x$('#foo').before('<pre>first in line</pre>');x$('#foo').after('<marquee>better late than never</marquee>');

44

Что еще?

• Wink toolkit• iUI• Dojo Mobile• DHTMLX Touch

+ Спойлер

45

Делаем нативным

• PhoneGap• MotherApp• Big5• Rhodes

46

Что почитать

• Курс лекций и материалов по мобильной веб-разработке и дизайну

http://goo.gl/hLJv1• Comparing Mobile Web Frameworks

http://goo.gl/L8Yh5• Сравнение фреймворков для создания native

приложений http://goo.gl/rNb4t

47

Вопросы?

Ребров АндрейLuxoft Professional

ARebrov@luxoft.comtwitter.com/andrebrovhttp://andrebrov.net