Koss, How to make desktop caliber browser apps

47
Саша Косс Фронт-енд разработчик Tuesday, June 7, 2011

Transcript of Koss, How to make desktop caliber browser apps

Page 1: Koss, How to make desktop caliber browser apps

Саша КоссФронт-енд разработчик

Tuesday, June 7, 2011

Page 2: Koss, How to make desktop caliber browser apps

Как выиграть в войне веб-приложений против нативных

Tuesday, June 7, 2011

Page 3: Koss, How to make desktop caliber browser apps

Tuesday, June 7, 2011

Page 4: Koss, How to make desktop caliber browser apps

Существует ли проблема?

Tuesday, June 7, 2011

Page 5: Koss, How to make desktop caliber browser apps

Сильные стороны нативных приложений

Tuesday, June 7, 2011

Page 6: Koss, How to make desktop caliber browser apps

Мгновенная отдача

Tuesday, June 7, 2011

Page 7: Koss, How to make desktop caliber browser apps

Оффлайн

Tuesday, June 7, 2011

Page 8: Koss, How to make desktop caliber browser apps

Интерфейс

Tuesday, June 7, 2011

Page 9: Koss, How to make desktop caliber browser apps

ОС

Tuesday, June 7, 2011

Page 10: Koss, How to make desktop caliber browser apps

Сильные сторонывеб-приложений

Tuesday, June 7, 2011

Page 11: Koss, How to make desktop caliber browser apps

Доступ с любого девайса *

* подключенного к интернету

Tuesday, June 7, 2011

Page 12: Koss, How to make desktop caliber browser apps

Данные в облаках

Tuesday, June 7, 2011

Page 13: Koss, How to make desktop caliber browser apps

Things Cloud Sync

Tuesday, June 7, 2011

Page 14: Koss, How to make desktop caliber browser apps

Совместный доступ

Tuesday, June 7, 2011

Page 15: Koss, How to make desktop caliber browser apps

Веб FTW

Tuesday, June 7, 2011

Page 16: Koss, How to make desktop caliber browser apps

Современные браузеры

Tuesday, June 7, 2011

Page 17: Koss, How to make desktop caliber browser apps

Оффлайн

3.5+

4+

5+

10.6+

2.1+

2+

Tuesday, June 7, 2011

Page 18: Koss, How to make desktop caliber browser apps

Кэш манифест

CACHE: что кэшируем

FALLBACK: если файла нет в кэше

NETWORK: что только онлайн

Tuesday, June 7, 2011

Page 19: Koss, How to make desktop caliber browser apps

rack-offlinehttps://github.com/wycats/rack-offline

Tuesday, June 7, 2011

Page 20: Koss, How to make desktop caliber browser apps

jquery.offline.jshttps://github.com/wycats/jquery-offline

Tuesday, June 7, 2011

Page 21: Koss, How to make desktop caliber browser apps

Хранение данных с сервера

localStorage

Tuesday, June 7, 2011

Page 22: Koss, How to make desktop caliber browser apps

localStorage

8+

3.5+

4+

4+

10.5+

2+

2+

Tuesday, June 7, 2011

Page 23: Koss, How to make desktop caliber browser apps

localStorage

Tuesday, June 7, 2011

Page 24: Koss, How to make desktop caliber browser apps

5 мегабайт хватит всем!

Tuesday, June 7, 2011

Page 25: Koss, How to make desktop caliber browser apps

https://github.com/marcuswestin/store.js

store.js

IE6+, Firefox 3+, Safari 4+, Chrome 5+, Opera 10+, iOS 2+, Android 2+

Tuesday, June 7, 2011

Page 26: Koss, How to make desktop caliber browser apps

http://amplifyjs.com/api/store

Amplify Store

IE5+, Firefox 2+, Safari 4+, Chrome 5+, Opera 10.5+, iOS 2+, Android 2+

Tuesday, June 7, 2011

Page 27: Koss, How to make desktop caliber browser apps

JavaScript шаблонизация

JS шаблоны

Tuesday, June 7, 2011

Page 28: Koss, How to make desktop caliber browser apps

Handlebarshttp://handlebars.strobeapp.com/

Tuesday, June 7, 2011

Page 29: Koss, How to make desktop caliber browser apps

handlebars-rails gemhttps://github.com/jamesarosen/handlebars-rails

app/views/blogs/show.html.hbs

Tuesday, June 7, 2011

Page 30: Koss, How to make desktop caliber browser apps

templates gemhttps://github.com/kossnocorp/templates

Данные в JSON

Шаблоны

localStorage

Tuesday, June 7, 2011

Page 31: Koss, How to make desktop caliber browser apps

pushState

4+

5+

8+

4.3+

Tuesday, June 7, 2011

Page 32: Koss, How to make desktop caliber browser apps

pushState

Tuesday, June 7, 2011

Page 33: Koss, How to make desktop caliber browser apps

history.jshttps://github.com/balupton/history.jsIE6+, Firefox 3+, Safari 4+, Chrome 5+, Opera 10+, iOS, Android

http://example.com/#posts/42 http://example.com/posts/42

Tuesday, June 7, 2011

Page 34: Koss, How to make desktop caliber browser apps

Утопия

Шаблоны

Данные

Оффлайн

localStorage

Tuesday, June 7, 2011

Page 35: Koss, How to make desktop caliber browser apps

Tuesday, June 7, 2011

Page 36: Koss, How to make desktop caliber browser apps

Что ещё?

Tuesday, June 7, 2011

Page 37: Koss, How to make desktop caliber browser apps

Веб-сокеты

4+

5+

4+

11+

4.2+

Tuesday, June 7, 2011

Page 38: Koss, How to make desktop caliber browser apps

Веб-воркеры

3.5+

10.6+

Tuesday, June 7, 2011

Page 39: Koss, How to make desktop caliber browser apps

Доступ к ФС

4+

6

6+

12+

3

Tuesday, June 7, 2011

Page 40: Koss, How to make desktop caliber browser apps

http://www.html5rocks.com/

Tuesday, June 7, 2011

Page 41: Koss, How to make desktop caliber browser apps

Как выжить?При таком количестве JS кода?

Tuesday, June 7, 2011

Page 42: Koss, How to make desktop caliber browser apps

Backbone.jshttp://documentcloud.github.com/backbone/

Tuesday, June 7, 2011

Page 43: Koss, How to make desktop caliber browser apps

MVC2

МодельМодельМодель

КоллекцияВью

Tuesday, June 7, 2011

Page 44: Koss, How to make desktop caliber browser apps

CoffeeScripthttp://jashkenas.github.com/coffee-script/

Tuesday, June 7, 2011

Page 45: Koss, How to make desktop caliber browser apps

Cappuccino

SproutCore

ExtJS

RIA?

Tuesday, June 7, 2011

Page 46: Koss, How to make desktop caliber browser apps

Что это нам даёт?

Tuesday, June 7, 2011

Page 47: Koss, How to make desktop caliber browser apps

@kossnocorp

[email protected]

http://koss.nocorp.me

Как со мной связаться?

Tuesday, June 7, 2011