Jsfwdays 2013-2

499 views

Published on

Slides of presentation performed on JS Framework Day conference

Published in: Education
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
499
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
0
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Jsfwdays 2013-2

  1. 1. Опыт разработкимобильного вебприложенияПавел ЮрийчукGlobalLogicSkype: pavlo_yuriychuckTwitter: pavlo_yuriychukEmail: pluccky@gmail.com
  2. 2. А поговорить? Мобильные веб приложения Серверная часть Клиентская часть Инструментарий Книжная полка
  3. 3. Мобильные приложения Native - iOS, Android, Blackberry Hybrid - PhoneGap, Appcelerator Plugin - AIR, Silverlight Web - HTML5
  4. 4. Пример
  5. 5. Особенности Качество картинок и шрифтов не так важно Скорость сети Скорость выполнения JavaScript
  6. 6. Сервер CDN GZip/BZip/Deflate HTTP Headers (CORS, E-tags) JSON
  7. 7. Клиент Application cache Web storage CSS3 Touch events ViewPort: ● MDN, Safari Dev Network, More
  8. 8. Клиент SASS/SCSS Underscore -> LoDash Zepto.JS Require.JS Backbone.JS
  9. 9. Actung, minen! Bootstrapping JSON Assets embedding Banners Tracking systems Assets - fonts, images, audio, video
  10. 10. Отладка
  11. 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. 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. 13. Builder$(‘section[data-type]’).each(function() { var klass = $(this).attr(‘data-type’), instance; Klass = Mapper.getClassByAlias(klass); Instance = new Klass({$el : $(this)});})
  14. 14. WebStorageVar 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. 15. WebStorageVar 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. 16. PageViewVar PageViewA = PageView.extend({ initialize: function() { PageView.prototype.initialize.apply(this, arguments); }, CustomMethod: funciton() { // }})
  17. 17. Multi-part responseHTTP/1.1 200 OKDate: Thu, 24 Nov 2011 10:03:25 GMTServer: Foo/1.0Content-Type: multipart/form-data; boundary=xYzZY--xYzZYContent-Type: text/plain; charset=UTF-8Content-Disposition: form-data; name="name"John Doe--xYzZYContent-Type: text/plain; charset=UTF-8Content-Disposition: form-data; name="note"
  18. 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. 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. 20. XML, please jQuery selectors SAX http://code.google.com/p/jssaxparser/ https://github.com/isaacs/sax-js XPath DOM API
  21. 21. Книги http://shop.oreilly.com/product/0636920025344.do
  22. 22. Книженции онлайн Patterns for Large-Scale JS apps Backbone fundamentals Backbone patterns More of backbone
  23. 23. Презентации Оптимизация энергопотребления Оптимизация скорости загрузки Особенности разработки под мобильные устройства
  24. 24. Ресурсы Mobile safari
  25. 25. Вопросы?

×