Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
The Modern JavaScript Application
Andy Appleton
October 16, 2012
Technology
5
500
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
390
Rage against the state machine
appltn
1
340
Modular UI with (Angular || Ember)
appltn
0
99
Building web apps with Express
appltn
5
440
Object Creation Pattern Performance
appltn
1
530
Introducing Mint Source
appltn
1
360
Other Decks in Technology
See All in Technology
約6年間運用したシステムをKubernetesに完全移行するまで/Kubernetes Novice Tokyo
isaoshimizu
5
850
スタートアップと技術選定と AWS
track3jyo
PRO
2
330
WACATE 2022 夏 ワークショップの目的
imtnd
0
120
データエンジニアと作るデータ文化
yuki_saito
4
1.6k
データ分析で切り拓け! エンジニアとしてのデータ分析職キャリア戦略
ksnt
0
120
Camp Digital 2022: tailored advice
kyliehavelock
0
150
Custom AppをIP制限ありのままで審査に通す方法
yusuga
0
680
OPENLOGI Company Profile
hr01
0
480
The application of formal methods in Kafka reliability engineering
line_developers
PRO
1
160
紙にまつわる苦しみを機能化してきた カミナシの歴史
kaminashi
0
1.1k
マネージャーからみたスクラムと自己管理化
shibe23
0
1k
Lessons Learned from Scaling Infrastructure as Code
joatmon08
0
790
Featured
See All Featured
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
151
13k
Faster Mobile Websites
deanohume
294
28k
Large-scale JavaScript Application Architecture
addyosmani
499
110k
Web Components: a chance to create the future
zenorocha
303
40k
A Modern Web Designer's Workflow
chriscoyier
689
180k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
39
13k
Teambox: Starting and Learning
jrom
123
7.7k
GraphQLとの向き合い方2022年版
quramy
16
8.3k
Principles of Awesome APIs and How to Build Them.
keavy
113
15k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
498
130k
A Philosophy of Restraint
colly
192
15k
Designing on Purpose - Digital PM Summit 2013
jponch
106
5.6k
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