Опыт разработки мобильного веб приложения с использованием Backbone.js, Require.js, Zepto.js

Опыт разработки мобильного веб приложения Павел Юрийчук GlobalLogic Skype: pavlo_yuriychuck
Twitter: pavlo_yuriychuk Email: [email protected]

А поговорить?  Мобильные веб приложения  Серверная часть 
Клиентская часть  Инструментарий  Книжная полка

Мобильные приложения  Native - iOS, Android, Blackberry  Hybrid
- PhoneGap, Appcelerator  Plugin - AIR, Silverlight  Web - HTML5

Пример

Особенности  Качество картинок и шрифтов не так важно 
Скорость сети  Скорость выполнения JavaScript

Сервер  CDN  GZip/BZip/Deflate  HTTP Headers (CORS, E-tags)
 JSON

Клиент  Application cache  Web storage  CSS3 
Touch events  ViewPort: • MDN, Safari Dev Network, More 

Клиент  SASS/SCSS  Underscore -> LoDash  Zepto.JS 
Require.JS  Backbone.JS

Actung, minen!  Bootstrapping  JSON  Assets embedding 
Banners  Tracking systems  Assets - fonts, images, audio, video

Отладка

Отладка Var Logger = (function($){ var messages = []; function
log() { messages.push(Array.prototype.splice.apply(arguments).join(“”)) } setInterval(function(){ $.ajax({ Method:’post’, Url:url, data:messages.join(‘\n’) }); Messages = []; }); return { log:log } })(jQuery)

Templates <section data-type=”related” data-view=”list” data-limit=”1,5”> </section> <section data-type=”credentials”> </section> <section
data-type=”banner” data-url=”super-banner.jpg”> </section> <section data-type=”banner” data-md=”{color:’#35ADFE’,opacity:0.5,rel:{x:5,y:-5}}”> </section>

Builder $(‘section[data-type]’).each(function() { var klass = $(this).attr(‘data-type’), instance; Klass =
Mapper.getClassByAlias(klass); Instance = new Klass({$el : $(this)}); })

WebStorage Var Model = Backbone.Model.extend({ Prefix: “articles”, save: function() {
localStorage.setItem(“articles-” + this.id, this.toJSON().toString()) }, fetch: function() { Var data = localStorage.getItem(“articles-” + this.id); If (_.isString(data)) { Try { Data = JSON.parse(data); } catch (e) { Data = {} } finally { This.set(data) } } } })

WebStorage Var Collection = Backbone.Collection.extend({ Prefix: “articles”, save: function() {
localStorage.setItem(“articles”, this.toJSON().toString()) }, fetch: function() { Var data = localStorage.getItem(“articles-” + this.id); If (_.isString(data)) { Try { Data = JSON.parse(data); } catch (e) { Data = {} } finally { This.reset(data) } } } })

PageView Var PageViewA = PageView.extend({ initialize: function() { PageView.prototype.initialize.apply(this, arguments);
}, CustomMethod: funciton() { // } })

Multi-part response HTTP/1.1 200 OK Date: Thu, 24 Nov 2011
10:03:25 GMT Server: Foo/1.0 Content-Type: multipart/form-data; boundary=xYzZY --xYzZY Content-Type: text/plain; charset=UTF-8 Content-Disposition: form-data; name="name" John Doe --xYzZY Content-Type: text/plain; charset=UTF-8 Content-Disposition: form-data; name="note"

Bootstrapping data <html> <body> <script> //Data setup Window.INITIAL = [];
</script> … <script> If (window.initial) { App.data.reset(window.initial) } else { App.data.fetch() } </script> </body> </html>

Bootstrapping code <html> <body> <script id=”module1”> /*(funciton(){codeGoesHere()})()*/ </script> … <script>
Var el = Document.getElementById(“module1”); eval(strip(el.innerHTML)); </script> </body> </html>

XML, please  jQuery selectors  SAX  http://code.google.com/p/jssaxparser/ 
https://github.com/isaacs/sax-js  XPath  DOM API

Книги http://shop.oreilly.com/product/0636920025344.do

Книженции онлайн  Patterns for Large-Scale JS apps  Backbone
fundamentals  Backbone patterns  More of backbone

Презентации  Оптимизация энергопотребления  Оптимизация скорости загрузки  Особенности
разработки под мобильные устройства

Ресурсы  Mobile safari

Вопросы?

Опыт разработки мобильного веб приложения с использованием Backbone.js, Require.js, Zepto.js

Опыт разработки мобильного веб приложения с использованием Backbone.js, Require.js, Zepto.js

fwdays

More Decks by fwdays

Other Decks in Programming

Featured

Transcript

Опыт разработки мобильного веб приложения Павел Юрийчук GlobalLogic Skype: pavlo_yuriychuck

А поговорить?  Мобильные веб приложения  Серверная часть 

Мобильные приложения  Native - iOS, Android, Blackberry  Hybrid

Пример

Особенности  Качество картинок и шрифтов не так важно 

Сервер  CDN  GZip/BZip/Deflate  HTTP Headers (CORS, E-tags)

Клиент  Application cache  Web storage  CSS3 

Клиент  SASS/SCSS  Underscore -> LoDash  Zepto.JS 

Actung, minen!  Bootstrapping  JSON  Assets embedding 

Отладка

Отладка Var Logger = (function($){ var messages = []; function

Templates <section data-type=”related” data-view=”list” data-limit=”1,5”> </section> <section data-type=”credentials”> </section> <section

Builder $(‘section[data-type]’).each(function() { var klass = $(this).attr(‘data-type’), instance; Klass =

WebStorage Var Model = Backbone.Model.extend({ Prefix: “articles”, save: function() {

WebStorage Var Collection = Backbone.Collection.extend({ Prefix: “articles”, save: function() {

PageView Var PageViewA = PageView.extend({ initialize: function() { PageView.prototype.initialize.apply(this, arguments);

Multi-part response HTTP/1.1 200 OK Date: Thu, 24 Nov 2011

Bootstrapping data <html> <body> <script> //Data setup Window.INITIAL = [];

Bootstrapping code <html> <body> <script id=”module1”> /(funciton(){codeGoesHere()})()/ </script> … <script>

XML, please  jQuery selectors  SAX  http://code.google.com/p/jssaxparser/ 

Книги http://shop.oreilly.com/product/0636920025344.do

Книженции онлайн  Patterns for Large-Scale JS apps  Backbone

Презентации  Оптимизация энергопотребления  Оптимизация скорости загрузки  Особенности

Ресурсы  Mobile safari

Вопросы?