Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
Опыт разработки мобильного веб приложения с использованием Backbone.js, Require.js, Zepto.js
fwdays
March 05, 2013
Programming
0
1.3k
Опыт разработки мобильного веб приложения с использованием Backbone.js, Require.js, Zepto.js
fwdays
March 05, 2013
Tweet
Share
More Decks by fwdays
See All by fwdays
Symfony best practices и не только Олег Зинченко
fwdays
0
1.7k
Beyond Testing Михаил Боднарчук
fwdays
0
560
Yii2 - на пути от Alpha до GA. Взгляд с практической стороны Александр Бордун
fwdays
0
1.5k
Laravel 4: простота во всем. Евгений Косинский
fwdays
0
760
Маленькая библиотека для большой компании. Антон Шевчук
fwdays
0
3.6k
Phalcon. Что нового? Александр Торош
fwdays
0
830
Выбираем поисковик умом головы. Андрей Аксенов
fwdays
0
1.1k
Past, Present, and Future: The Evolution of PHP Development. Nate Abele
fwdays
0
580
Функциональный тулчейн Nix
fwdays
1
310
Other Decks in Programming
See All in Programming
「混ぜるな危険」を推進する設計
minodriven
8
2.5k
Untangling Coroutine Testing (Droidcon Berlin 2022)
zsmb
1
480
10歳の minne から、これから長く続くプロダクトを作るすべての人へ
tsumichan
9
3.6k
Efficient UI testing in Android
alexzhukovich
1
120
Rector, time to refactor your code easily
guikingone
2
150
SGGとは
inoue2002
0
430
Edge Side Frontend という新領域
mizchi
22
10k
Atomic Design とテストの○○な話
takfjp
2
800
Pluggable Storage in PostgreSQL
sira
1
190
Google I/O 2022 Android関連概要 / Google I/O 2022 Android summary
phicdy
0
380
実践 SpiceDB - クライドネイティブ時代をサバイブできるパーミッション管理の実装を目指して / Practical SpiceDB
lmt_swallow
0
130
NestJS_meetup_atamaplus
atamaplus
0
210
Featured
See All Featured
Product Roadmaps are Hard
iamctodd
35
6.8k
The Brand Is Dead. Long Live the Brand.
mthomps
46
2.7k
KATA
mclloyd
7
8.8k
10 Git Anti Patterns You Should be Aware of
lemiorhan
638
52k
GraphQLとの向き合い方2022年版
quramy
16
8.4k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
498
130k
Building Your Own Lightsaber
phodgson
95
4.7k
Become a Pro
speakerdeck
PRO
3
900
A Philosophy of Restraint
colly
192
15k
5 minutes of I Can Smell Your CMS
philhawksworth
196
18k
Atom: Resistance is Futile
akmur
255
20k
Faster Mobile Websites
deanohume
294
28k
Transcript
Опыт разработки мобильного веб приложения Павел Юрийчук GlobalLogic Skype: pavlo_yuriychuck
Twitter: pavlo_yuriychuk Email: pluccky@gmail.com
А поговорить? Мобильные веб приложения Серверная часть
Клиентская часть Инструментарий Книжная полка
Мобильные приложения Native - iOS, Android, Blackberry Hybrid
- PhoneGap, Appcelerator Plugin - AIR, Silverlight Web - HTML5
Пример
Особенности Качество картинок и шрифтов не так важно
Скорость сети Скорость выполнения JavaScript
Сервер CDN GZip/BZip/Deflate HTTP Headers (CORS, E-tags)
JSON
Клиент Application cache Web storage CSS3
Touch events ViewPort: • MDN, Safari Dev Network, More
Клиент SASS/SCSS Underscore -> LoDash Zepto.JS
Require.JS Backbone.JS
Actung, minen! Bootstrapping JSON Assets embedding
Banners Tracking systems Assets - fonts, images, audio, video
Отладка
Отладка 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)
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>
Builder $(‘section[data-type]’).each(function() { var klass = $(this).attr(‘data-type’), instance; Klass =
Mapper.getClassByAlias(klass); Instance = new Klass({$el : $(this)}); })
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) } } } })
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) } } } })
PageView Var PageViewA = PageView.extend({ initialize: function() { PageView.prototype.initialize.apply(this, arguments);
}, CustomMethod: funciton() { // } })
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"
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>
Bootstrapping code <html> <body> <script id=”module1”> /*(funciton(){codeGoesHere()})()*/ </script> … <script>
Var el = Document.getElementById(“module1”); eval(strip(el.innerHTML)); </script> </body> </html>
XML, please jQuery selectors SAX http://code.google.com/p/jssaxparser/
https://github.com/isaacs/sax-js XPath DOM API
Книги http://shop.oreilly.com/product/0636920025344.do
Книженции онлайн Patterns for Large-Scale JS apps Backbone
fundamentals Backbone patterns More of backbone
Презентации Оптимизация энергопотребления Оптимизация скорости загрузки Особенности
разработки под мобильные устройства
Ресурсы Mobile safari
Вопросы?