Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
The Modern JavaScript Application
Search
Andy Appleton
October 16, 2012
Technology
5
620
The Modern JavaScript Application
A talk at FOWA London
Andy Appleton
October 16, 2012
Tweet
Share
More Decks by Andy Appleton
See All by Andy Appleton
Done is better than perfect
appltn
0
570
Rage against the state machine
appltn
1
480
Modular UI with (Angular || Ember)
appltn
0
120
Building web apps with Express
appltn
4
490
Object Creation Pattern Performance
appltn
1
780
Introducing Mint Source
appltn
1
400
Other Decks in Technology
See All in Technology
会社もクラウドも違うけど 通じたコスト削減テクニック/Cost optimization strategies effective regardless of company or cloud provider
aeonpeople
2
150
M365アカウント侵害時の初動対応
lhazy
6
4.5k
Talk to Someone At Delta Airlines™️ USA Contact Numbers
travelcarecenter
0
170
CSPヘッダー導入で実現するWebサイトの多層防御:今すぐ試せる設定例と運用知見
llamakko
1
160
All About Sansan – for New Global Engineers
sansan33
PRO
1
1.2k
公開初日に個人環境で試した Gemini CLI 体験記など / Gemini CLI実験レポート
you
PRO
3
310
20250718_ITSurf_“Bet AI”を支える文化とコストマネジメント
helosshi
1
210
TypeScript 上達の道
ysknsid25
4
460
Expertise as a Service via MCP
yodakeisuke
1
140
Microsoft Fabric ガバナンス設計の一歩目を考える
ryomaru0825
1
260
RapidPen: AIエージェントによる高度なペネトレーションテスト自動化の研究開発
laysakura
1
380
経験がないことを言い訳にしない、 AI時代の他領域への染み出し方
parayama0625
0
110
Featured
See All Featured
How STYLIGHT went responsive
nonsquared
100
5.6k
RailsConf 2023
tenderlove
30
1.2k
The Invisible Side of Design
smashingmag
301
51k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
50
5.5k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.4k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
Done Done
chrislema
184
16k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
53
2.9k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
How to Think Like a Performance Engineer
csswizardry
25
1.8k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
126
53k
Transcript
The Modern JavaScript Application Andy Appleton @appltn http://appleton.me
JS is growing up we are doing more and more
with it and we need more robust tools
$(function(){ $('.thing').on('click', function(ev){ ev.preventDefault(); var $link = $(this) $.get($link.attr('href'), function(data)
{ $link.fadeOut(function(){ $('body').append(data); }); }); }); });
We can do better other languages have rich sets of
tools and patterns, we can too!
None
None
None
Models var Person = Backbone.Model.extend({ sayName: function(){ return this.get('name'); }
}); var andy = new Person({ name: 'Andy' }); andy.sayName(); // => 'Andy'
Collections var People = Backbone.Collection.extend({ sayNames: function(){ return this.map(function(model){ return
model.get('name'); }).join(', '); } });
Views var PersonView = Backbone.view.extend({ render: function(){ this.el.innerHTML = this.model.get('name');
} });
Tools
None
None
Modules defined chunks of code which list their own dependencies
Our Model From Earlier define(['path/to/dependency'], function(dependency){ return Backbone.Model.extend({ // Adding
methods and properties }); });
Alternative Syntax define(function(require){ var dependency = require('path/to/dep'); return Backbone.Model.extend({ //
Adding methods and properties }); });
Structure & Conventions Split each module into a separate file
None
The Requests!
The Requests! The Humanity!
r.js The RequireJS build tool
$ node r.js -o config.js Concatenate & minify JS into
a single file Concatenate & minify CSS via @import
None
Templating
None
http://handlebarsjs.com/
var input = '<h1>{{ name }}</h1>'; var templateFn = Handlebars.compile(input);
var output = templateFn({ name: 'Andy' }); // => '<h1>Andy</h1>'
var input = ' <article>\ <header>\ <h1>{{title}}</h1>\ by {{author}} on
{{date}}\ </header>\ {{content}}\ </article>\ ';
index.html <script type="text/template" id="tpl-name"> <article> <header> <h1>{{title}}</h1> ...etc </script> my-view.js
var input = $('#tpl-name').text(); // ...compile etc
https://github.com/SlexAxton/require-handlebars-plugin
my-view.js define(function(require){ var templateFn = require('hbs!path/to/tpl'); // View now has
access to compiled template // function }); post-template.hbs <article> <header> <h1>{{title}}</h1> ...etc
my-view.js define(function(require){ var templateFn = require('hbs!path/to/tpl'); // View now has
access to compiled template // function }); post-template.hbs <article> <header> <h1>{{title}}</h1> ...etc
Handy Patterns
Mediator A central object to publish and subscribe to global
events
var mediator = _.clone(Backbone.Events); mediator.on('eventname', function(args){ console.log(args); }); mediator.trigger('eventname', 'sausages');
// => 'sausages' mediator.off('eventname');
Model Caching sharing model instances across views
define(function(require){ var _cache = {}, Model = Backbone.Model.extend(); Model.create =
function(opts) { if (opts.id && !_cache[opts.id]) { _cache[opts.id] = new Model(opts); } return _cache[opts.id]; }; return Model; });
define(function(require){ var _cache = {}, Model = Backbone.Model.extend(); Model.create =
function(opts) { if (opts.id && !_cache[opts.id]) { _cache[opts.id] = new Model(opts); } return _cache[opts.id]; }; return Model; });
define(function(require){ var _cache = {}, Model = Backbone.Model.extend(); Model.create =
function(opts) { if (opts.id && !_cache[opts.id]) { _cache[opts.id] = new Model(opts); } return _cache[opts.id]; }; return Model; });
Unit Testing
None
http://pivotal.github.com/jasmine/
var Person = Backbone.Model.extend({ sayName: function(){ return this.get('name'); } });
Our Model From Earlier (again)
describe('Person model', function(){ describe('#sayName', function(){ it('returns `name` attribute', function(){ var
person = new Person({ name: 'Andy' }); expect(person.sayName()).toEqual('Andy'); }); }); });
None
Automation
Grunt JS command line build tool http://gruntjs.com/
None
+ http://phantomjs.org/
None
None
None
https://github.com/mrappleton/jasmine-examples
None
Andy Appleton @appltn http://appleton.me