• Save
Jsfwdays 2013-2
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

Jsfwdays 2013-2

on

  • 462 views

Slides of presentation performed on JS Framework Day conference

Slides of presentation performed on JS Framework Day conference

Statistics

Views

Total Views
462
Views on SlideShare
462
Embed Views
0

Actions

Likes
0
Downloads
0
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Jsfwdays 2013-2 Presentation Transcript

  • 1. Опыт разработкимобильного вебприложенияПавел ЮрийчукGlobalLogicSkype: pavlo_yuriychuckTwitter: pavlo_yuriychukEmail: 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. 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. 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. PageViewVar PageViewA = PageView.extend({ initialize: function() { PageView.prototype.initialize.apply(this, arguments); }, CustomMethod: funciton() { // }})
  • 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. 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. Вопросы?