SlideShare a Scribd company logo
1 of 47
Download to read offline
Саша Косс
                        Фронт-енд разработчик




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




Tuesday, June 7, 2011
Tuesday, June 7, 2011
Существует ли проблема?




Tuesday, June 7, 2011
Сильные стороны
                 нативных приложений



Tuesday, June 7, 2011
Мгновенная отдача




Tuesday, June 7, 2011
Оффлайн




Tuesday, June 7, 2011
Интерфейс




Tuesday, June 7, 2011
ОС




Tuesday, June 7, 2011
Сильные стороны
                        веб-приложений



Tuesday, June 7, 2011
Доступ с любого
                           девайса *




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




Tuesday, June 7, 2011
Данные в
                        облаках


Tuesday, June 7, 2011
Things Cloud Sync




Tuesday, June 7, 2011
Совместный доступ




Tuesday, June 7, 2011
Веб FTW




Tuesday, June 7, 2011
Современные
                          браузеры




Tuesday, June 7, 2011
Оффлайн
                                  10.6+

                        3.5+      2.1+

                        4+        2+

                        5+



Tuesday, June 7, 2011
Кэш манифест


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

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

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




Tuesday, June 7, 2011
rack-offline
                        https://github.com/wycats/rack-offline




Tuesday, June 7, 2011
jquery.offline.js
                        https://github.com/wycats/jquery-offline




Tuesday, June 7, 2011
Хранение данных с
                             сервера

                              localStorage




Tuesday, June 7, 2011
localStorage
                        8+        10.5+

                        3.5+      2+

                        4+        2+

                        4+



Tuesday, June 7, 2011
localStorage




Tuesday, June 7, 2011
5 мегабайт
                        хватит всем!




Tuesday, June 7, 2011
store.js
                        https://github.com/marcuswestin/store.js
                        IE6+, Firefox 3+, Safari 4+, Chrome 5+, Opera 10+, iOS 2+, Android 2+




Tuesday, June 7, 2011
Amplify Store
                                  http://amplifyjs.com/api/store
                        IE5+, Firefox 2+, Safari 4+, Chrome 5+, Opera 10.5+, iOS 2+, Android 2+




Tuesday, June 7, 2011
JavaScript
                        шаблонизация

                            JS шаблоны




Tuesday, June 7, 2011
Handlebars
                        http://handlebars.strobeapp.com/




Tuesday, June 7, 2011
handlebars-rails gem
                 https://github.com/jamesarosen/handlebars-rails




                           app/views/blogs/show.html.hbs




Tuesday, June 7, 2011
templates gem
                        https://github.com/kossnocorp/templates




                                          localStorage

                                          Шаблоны

                                        Данные в JSON




Tuesday, June 7, 2011
pushState

                        4+          4.3+

                        5+

                        8+



Tuesday, June 7, 2011
pushState




Tuesday, June 7, 2011
history.js
                        https://github.com/balupton/history.js
                        IE6+, Firefox 3+, Safari 4+, Chrome 5+, Opera 10+, iOS, Android




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



Tuesday, June 7, 2011
Утопия
                                   localStorage

                                    Данные

                                   Шаблоны
                         Оффлайн




Tuesday, June 7, 2011
Tuesday, June 7, 2011
Что ещё?




Tuesday, June 7, 2011
Веб-сокеты
                                 11+

                        4+       4.2+

                        5+

                        4+



Tuesday, June 7, 2011
Веб-воркеры
                                 10.6+

                         3.5+    ✔

                         ✔       ✔

                         ✔



Tuesday, June 7, 2011
Доступ к ФС
                                 12+

                         4+

                         6       3

                         6+



Tuesday, June 7, 2011
http://www.html5rocks.com/


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




Tuesday, June 7, 2011
Backbone.js
                        http://documentcloud.github.com/backbone/




Tuesday, June 7, 2011
MVC2




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




Tuesday, June 7, 2011
CoffeeScript
                        http://jashkenas.github.com/coffee-script/




Tuesday, June 7, 2011
RIA?

                        Cappuccino

                        SproutCore

                        ExtJS




Tuesday, June 7, 2011
Что это нам даёт?




Tuesday, June 7, 2011
Как со мной связаться?

            @kossnocorp
            kossnocorp@gmail.com
            http://koss.nocorp.me




Tuesday, June 7, 2011

More Related Content

Similar to How to Win the War Between Web and Native Apps

Inspiratiemiddag_Vincent_Everts_Finalist generatie_einstein_komt_eraan_07042011
Inspiratiemiddag_Vincent_Everts_Finalist generatie_einstein_komt_eraan_07042011Inspiratiemiddag_Vincent_Everts_Finalist generatie_einstein_komt_eraan_07042011
Inspiratiemiddag_Vincent_Everts_Finalist generatie_einstein_komt_eraan_07042011Finalist - open IT oplossingen
 
Supporting STEM Skills with Scratch
Supporting STEM Skills with ScratchSupporting STEM Skills with Scratch
Supporting STEM Skills with ScratchWesley Fryer
 
Opera Mobile HTML5 CSS3 Standards
Opera Mobile HTML5 CSS3 StandardsOpera Mobile HTML5 CSS3 Standards
Opera Mobile HTML5 CSS3 StandardsZi Bin Cheah
 
Discussing Java's Future
Discussing Java's FutureDiscussing Java's Future
Discussing Java's FutureRay Gauss
 
Desenvolvimento Indolor com JQuery Mobile
Desenvolvimento Indolor com JQuery MobileDesenvolvimento Indolor com JQuery Mobile
Desenvolvimento Indolor com JQuery MobileBruno Oliveira
 
Mobility in the financial industry
Mobility in the financial industryMobility in the financial industry
Mobility in the financial industryVincent Everts
 
Javascript Views, Client-side or Server-side with NodeJS
Javascript Views, Client-side or Server-side with NodeJSJavascript Views, Client-side or Server-side with NodeJS
Javascript Views, Client-side or Server-side with NodeJSSylvain Zimmer
 
Sean coates fifty things and tricks, confoo 2011
Sean coates fifty things and tricks, confoo 2011Sean coates fifty things and tricks, confoo 2011
Sean coates fifty things and tricks, confoo 2011Bachkoutou Toutou
 
You're doing it wrong
You're doing it wrongYou're doing it wrong
You're doing it wrongAdam Goucher
 
とりあえずTwitterで日本語を集めてみよう
とりあえずTwitterで日本語を集めてみようとりあえずTwitterで日本語を集めてみよう
とりあえずTwitterで日本語を集めてみようs_wool
 
iPhone Python love affair
iPhone Python love affairiPhone Python love affair
iPhone Python love affairAnna Callahan
 
Node js techtalksto
Node js techtalkstoNode js techtalksto
Node js techtalkstoJason Diller
 
Javascript Unit Testting (PHPBenelux 2011-05-04)
Javascript Unit Testting (PHPBenelux 2011-05-04)Javascript Unit Testting (PHPBenelux 2011-05-04)
Javascript Unit Testting (PHPBenelux 2011-05-04)Tom Van Herreweghe
 
The Fast, The Slow and the Lazy
The Fast, The Slow and the LazyThe Fast, The Slow and the Lazy
The Fast, The Slow and the LazyMaurício Linhares
 
The Many Hats of Building and Launching a Web Startup
The Many Hats of Building and Launching a Web Startup The Many Hats of Building and Launching a Web Startup
The Many Hats of Building and Launching a Web Startup Tracy Osborn
 
Can Metadata Keep Libraries Relevant?
Can Metadata Keep Libraries Relevant?Can Metadata Keep Libraries Relevant?
Can Metadata Keep Libraries Relevant?Richard Wallis
 

Similar to How to Win the War Between Web and Native Apps (20)

Inspiratiemiddag_Vincent_Everts_Finalist generatie_einstein_komt_eraan_07042011
Inspiratiemiddag_Vincent_Everts_Finalist generatie_einstein_komt_eraan_07042011Inspiratiemiddag_Vincent_Everts_Finalist generatie_einstein_komt_eraan_07042011
Inspiratiemiddag_Vincent_Everts_Finalist generatie_einstein_komt_eraan_07042011
 
Supporting STEM Skills with Scratch
Supporting STEM Skills with ScratchSupporting STEM Skills with Scratch
Supporting STEM Skills with Scratch
 
Opera Mobile HTML5 CSS3 Standards
Opera Mobile HTML5 CSS3 StandardsOpera Mobile HTML5 CSS3 Standards
Opera Mobile HTML5 CSS3 Standards
 
Discussing Java's Future
Discussing Java's FutureDiscussing Java's Future
Discussing Java's Future
 
MILOFest 2010
MILOFest 2010MILOFest 2010
MILOFest 2010
 
Desenvolvimento Indolor com JQuery Mobile
Desenvolvimento Indolor com JQuery MobileDesenvolvimento Indolor com JQuery Mobile
Desenvolvimento Indolor com JQuery Mobile
 
Mobility in the financial industry
Mobility in the financial industryMobility in the financial industry
Mobility in the financial industry
 
Javascript Views, Client-side or Server-side with NodeJS
Javascript Views, Client-side or Server-side with NodeJSJavascript Views, Client-side or Server-side with NodeJS
Javascript Views, Client-side or Server-side with NodeJS
 
Sean coates fifty things and tricks, confoo 2011
Sean coates fifty things and tricks, confoo 2011Sean coates fifty things and tricks, confoo 2011
Sean coates fifty things and tricks, confoo 2011
 
You're doing it wrong
You're doing it wrongYou're doing it wrong
You're doing it wrong
 
とりあえずTwitterで日本語を集めてみよう
とりあえずTwitterで日本語を集めてみようとりあえずTwitterで日本語を集めてみよう
とりあえずTwitterで日本語を集めてみよう
 
Namesmatter
NamesmatterNamesmatter
Namesmatter
 
iPhone Python love affair
iPhone Python love affairiPhone Python love affair
iPhone Python love affair
 
Node js techtalksto
Node js techtalkstoNode js techtalksto
Node js techtalksto
 
Javascript Unit Testting (PHPBenelux 2011-05-04)
Javascript Unit Testting (PHPBenelux 2011-05-04)Javascript Unit Testting (PHPBenelux 2011-05-04)
Javascript Unit Testting (PHPBenelux 2011-05-04)
 
Web Operations Career
Web Operations CareerWeb Operations Career
Web Operations Career
 
Beyond Page Objects
Beyond Page ObjectsBeyond Page Objects
Beyond Page Objects
 
The Fast, The Slow and the Lazy
The Fast, The Slow and the LazyThe Fast, The Slow and the Lazy
The Fast, The Slow and the Lazy
 
The Many Hats of Building and Launching a Web Startup
The Many Hats of Building and Launching a Web Startup The Many Hats of Building and Launching a Web Startup
The Many Hats of Building and Launching a Web Startup
 
Can Metadata Keep Libraries Relevant?
Can Metadata Keep Libraries Relevant?Can Metadata Keep Libraries Relevant?
Can Metadata Keep Libraries Relevant?
 

How to Win the War Between Web and Native Apps