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
610
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
470
Modular UI with (Angular || Ember)
appltn
0
110
Building web apps with Express
appltn
4
490
Object Creation Pattern Performance
appltn
1
770
Introducing Mint Source
appltn
1
400
Other Decks in Technology
See All in Technology
大手企業のAIツール導入の壁を越えて:サイバーエージェントのCursor活用戦略
gunta
19
5.4k
Oracle Base Database Service 技術詳細
oracle4engineer
PRO
8
65k
新卒から4年間、20年もののWebサービスと向き合って学んだソフトウェア考古学 - PHPカンファレンス新潟2025 / new graduate 4year software archeology
oguri
2
360
MCP で繋ぐ Figma とデザインシステム〜LLM を使った UI 実装のリアル〜
kimuson
2
1.3k
Java で学ぶ 代数的データ型
ysknsid25
1
530
Zero Data Loss Autonomous Recovery Service サービス概要
oracle4engineer
PRO
2
7.2k
実践Kafka Streams 〜イベント駆動型アーキテクチャを添えて〜
joker1007
0
460
MCP Clientを活用するための設計と実装上の工夫
yudai00
1
810
SmartHRの複数のチームにおけるMCPサーバーの活用事例と課題
yukisnow1823
2
1.2k
カンファレンスのつくりかた / The Conference Code: What Makes It All Work
tomzoh
8
930
障害を回避するHttpClient再入門 / Avoiding Failures HttpClient Reintroduction
uskey512
1
150
令和最新版TypeScriptでのnpmパッケージ開発
lycorptech_jp
PRO
0
110
Featured
See All Featured
Become a Pro
speakerdeck
PRO
28
5.4k
A Modern Web Designer's Workflow
chriscoyier
693
190k
Docker and Python
trallard
44
3.4k
[RailsConf 2023] Rails as a piece of cake
palkan
55
5.6k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
3.9k
RailsConf 2023
tenderlove
30
1.1k
4 Signs Your Business is Dying
shpigford
183
22k
Bash Introduction
62gerente
614
210k
The World Runs on Bad Software
bkeepers
PRO
68
11k
Designing Experiences People Love
moore
142
24k
Why Our Code Smells
bkeepers
PRO
336
57k
Into the Great Unknown - MozCon
thekraken
39
1.8k
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