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

Transcript

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

   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