Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

Dd3f18c87b851137000c7427d7bd5d32?s=47 fwdays
March 05, 2013

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

Dd3f18c87b851137000c7427d7bd5d32?s=128

fwdays

March 05, 2013
Tweet

More Decks by fwdays

Other Decks in Programming

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. Вопросы?