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

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

fwdays
March 05, 2013

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

fwdays

March 05, 2013
Tweet

More Decks by fwdays

Other Decks in Programming

Transcript

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

    View Slide

  2. А поговорить?

    Мобильные веб приложения

    Серверная часть

    Клиентская часть

    Инструментарий

    Книжная полка

    View Slide

  3. Мобильные приложения

    Native - iOS, Android, Blackberry

    Hybrid - PhoneGap, Appcelerator

    Plugin - AIR, Silverlight

    Web - HTML5

    View Slide

  4. Пример

    View Slide

  5. Особенности

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

    Скорость сети

    Скорость выполнения JavaScript

    View Slide

  6. Сервер

    CDN

    GZip/BZip/Deflate

    HTTP Headers (CORS, E-tags)

    JSON

    View Slide

  7. Клиент

    Application cache

    Web storage

    CSS3

    Touch events

    ViewPort:

    MDN, Safari Dev Network, More

    View Slide

  8. Клиент

    SASS/SCSS

    Underscore -> LoDash

    Zepto.JS

    Require.JS

    Backbone.JS

    View Slide

  9. Actung, minen!

    Bootstrapping

    JSON

    Assets embedding

    Banners

    Tracking systems

    Assets - fonts, images, audio, video

    View Slide

  10. Отладка

    View Slide

  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)

    View Slide

  12. Templates






    data-md=”{color:’#35ADFE’,opacity:0.5,rel:{x:5,y:-5}}”>

    View Slide

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

    View Slide

  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)
    }
    }
    }
    })

    View Slide

  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)
    }
    }
    }
    })

    View Slide

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

    View Slide

  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"

    View Slide

  18. Bootstrapping data


    <br/>//Data setup<br/>Window.INITIAL = [];<br/>

    <br/>If (window.initial) {<br/>App.data.reset(window.initial)<br/>} else {<br/>App.data.fetch()<br/>}<br/>


    View Slide

  19. Bootstrapping code


    <br/>/*(funciton(){codeGoesHere()})()*/<br/>

    <br/>Var el = Document.getElementById(“module1”);<br/>eval(strip(el.innerHTML));<br/>


    View Slide

  20. XML, please

    jQuery selectors

    SAX

    http://code.google.com/p/jssaxparser/

    https://github.com/isaacs/sax-js

    XPath

    DOM API

    View Slide

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

    View Slide

  22. Книженции онлайн

    Patterns for Large-Scale JS apps

    Backbone fundamentals

    Backbone patterns

    More of backbone

    View Slide

  23. Презентации

    Оптимизация энергопотребления

    Оптимизация скорости загрузки

    Особенности разработки под мобильные
    устройства

    View Slide

  24. Ресурсы

    Mobile safari

    View Slide

  25. Вопросы?

    View Slide