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

Transcript

1. Опыт разработки мобильного веб приложения Павел Юрийчук GlobalLogic Skype: pavlo_yuriychuck Twitter: pavlo_yuriychuk Email: pluccky@gmail.com
2. А поговорить?  Мобильные веб приложения  Серверная часть  Клиентская часть  Инструментарий  Книжная полка
3. Мобильные приложения  Native - iOS, Android, Blackberry  Hybrid - PhoneGap, Appcelerator  Plugin - AIR, Silverlight  Web - HTML5
4. Пример
5. Особенности  Качество картинок и шрифтов не так важно  Скорость сети  Скорость выполнения JavaScript
6. Сервер  CDN  GZip/BZip/Deflate  HTTP Headers (CORS, E-tags)  JSON
7. Клиент  Application cache  Web storage  CSS3  Touch events  ViewPort: • MDN, Safari Dev Network, More 
8. Клиент  SASS/SCSS  Underscore -> LoDash  Zepto.JS  Require.JS  Backbone.JS
9. Actung, minen!  Bootstrapping  JSON  Assets embedding  Banners  Tracking systems  Assets - fonts, images, audio, video
10. Отладка
11. Отладка 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)
12. 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>
13. Builder $(‘section[data-type]’).each(function() { var klass = $(this).attr(‘data-type’), instance; Klass = Mapper.getClassByAlias(klass); Instance = new Klass({$el : $(this)}); })
14. 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) } } } })
15. 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) } } } })
16. PageView Var PageViewA = PageView.extend({ initialize: function() { PageView.prototype.initialize.apply(this, arguments); }, CustomMethod: funciton() { // } })
17. 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"
18. 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>
19. Bootstrapping code <html> <body> <script id=”module1”> /*(funciton(){codeGoesHere()})()*/ </script> … <script> Var el = Document.getElementById(“module1”); eval(strip(el.innerHTML)); </script> </body> </html>
20. XML, please  jQuery selectors  SAX  http://code.google.com/p/jssaxparser/  https://github.com/isaacs/sax-js  XPath  DOM API
21. Книги http://shop.oreilly.com/product/0636920025344.do
22. Книженции онлайн  Patterns for Large-Scale JS apps  Backbone fundamentals  Backbone patterns  More of backbone
23. Презентации  Оптимизация энергопотребления  Оптимизация скорости загрузки  Особенности разработки под мобильные устройства
24. Ресурсы  Mobile safari
25. Вопросы?