Survive JavaScript - Strategies and Tricks

Survive JavaScript
Strategiesand Tricks
Juho Vepsäläinen
AgileJkl 2013

What's in Store?
Web Development Strategies
JavaScript Tricks
Conclusion
·
How Did We Get Here
Where Are We Now
Where Are We Headed
-
-
-
·
Node.js
Development Tools
Structuring Code
Finding Libraries
Testing
-
-
-
-
-
·

Strategy for Goldfishes
Source: HikingArtist.com (CC BY-NC-ND)

Ten Days to JavaScript
1995 - Brendan Eich's ten days → Mocha
Known as LiveScript till the marketing folks changed the
name
Even though has Java in name, completely different
Influence of Java 1.0 visible mainly in Math and Time
modules
Prototypal inheritance a lá Self
Dynamic, flexible, lambdas
Scheme in disguise - See The Little JavaScripter by
Crockford
·
·
·
·
·
·
·

A Bit of JavaScript
varhelloAgileJkl=hello.bind(undefined,'AgileJkl!');
helloAgileJkl();
functionhello(target){
console.log('Hello'+target);
}
//orcouldjust
console.log('HelloAgileJkl!');
//toavoidover-engineering!
JAVASCRIPT

Web - From Documents to Applications
Web as a Document Platform
Improved Interactivity
Web as an Application Platform
·
1995 - Brendan Eich's ten days
1999 - ES3 (modern baseline), Mozilla established
-
-
·
2005 - AJAX, dynamic loading (search for instance)
2008 - RIP ES4, parts of HTML5 emerge, Chrome (V8)
2009 - ES5, Chrome OS, Node.js
-
-
-
·
2012 - HTML5 well supported (interesting JS APIs)-
Source: Brendan Eich at Strange Loop '12

JavaScript Has Traction
Source: Redmonk

Crockford
Source: superfluity (CC BY-NC-SA)

The Good Parts vs. The Rest
Source: Oльга + Haфaн (CC BY)

Recap
JavaScript, an unlikely winner
Language of the web
More powerful than it seems
Web isn't just about documents, now applications too
·
·
·
·

CoffeeScript
CoffeeScript is a little language that compiles into JavaScript. Underneath that awkward
Java-esque patina, JavaScript has always had a gorgeous heart. CoffeeScript is an attempt to
expose the good parts of JavaScript in a simple way.
The golden rule of CoffeeScript is: "It's just JavaScript". The code compiles one-to-one into the
equivalent JS, and there is no interpretation at runtime. You can use any existing JavaScript library
seamlessly from CoffeeScript (and vice-versa). The compiled output is readable and pretty-printed,
passes through JavaScript Lint without warnings, will work in every JavaScript runtime, and tends
to run as fast or faster than the equivalent handwritten JavaScript.
Latest Version: 1.6.2
sudo npm install -g coffee-script
Overview
CoffeeScript on the left, compiled JavaScript output on the right.
# Assignment:
number = 42
opposite = true
var cubes, list, math, num, number, opposite, race, square,
__slice = [].slice;
TABLE OF CONTENTS TRY COFFEESCRIPT ANNOTATED SOURCE

Dart
(/)
Dart brings structure to web app
engineering with a new language,
libraries, and tools. Read about our
new M4 release!
(http://news.dartlang.org/2013/04/core-
libraries-stabilize-with-darts-
new.html)
News (http://news.dartlang.org/) TweetTweetSearch Docs Tools Resources Development

TypeScript
Get TypeScript Now
TypeScript is a language for application-scale JavaScript development.
TypeScript is a typed superset of JavaScript that compiles to plain
JavaScript.
Any browser. Any host. Any OS. Open Source.
Starts from JavaScript, Ends with
JavaScript
TypeScript starts from the syntax and semantics that millions of JavaScript developers know
today.
learn play get it run it join in

Jade
doctype 5
html(lang="en")
head
title= pageTitle
script(type='text/javascript')
if (foo) {
bar()
}
body
h1 Jade - node template engine
#container
if youAreUsingJade
<!DOCTYPE html>
<html lang="en">
<head>
<title>Jade</title>
<script type="text/javascript">
if (foo) {
bar()
}
</script>
</head>
<body>
<h1>Jade - node template engine</h1>
View Documentation
Node Template Engine

Mustache
}
Logic-less templates.
Available in Ruby, JavaScript, Python, Erlang, PHP, Perl, Objective-C, Java, .NET, Android, C++, Go, Lua, ooc, ActionScript, ColdFusion, Scala,
Clojure, Fantom, CoffeeScript, D, and for node.js.
Works great with TextMate, Vim, Emacs, and Coda.
The Manual: mustache(5) and mustache(1)
Demo

Handlebars
Handlebars provides the power necessary to let you build semantic templates
effectively with no frustration.
Mustache templates are compatible with Handlebars, so you can take a Mustache
template, import it into Handlebars, and start taking advantage of the extra Handlebars
features.
Download: 1.0.0-rc.3Download: 1.0.0-rc.3
Download: runtime-1.0.0-rc.3
Getting Started

Transparency
Examples
Assigning valuesAssigning values
Iterating over a listIterating over a list
Nested listsNested lists
Nested objectsNested objects
Transparency is a minimal template engine for jQuery. It maps JSONTransparency is a minimal template engine for jQuery. It maps JSON
objects to DOM elements with zero configuration.objects to DOM elements with zero configuration. Just call .render()Just call .render()
CoffeeScript JavaScript
hello=
hello:"Hello!"
hi: "<i>Hithere!</i>"
span: "Goodbye!"
$('.container').renderhello
Jade HTML
.container
#hello
.hi
span

LESS
Write some LESS:
@base: #f938ab;
.box-shadow(@style, @c) when (iscolor(@c)) {
box-shadow: @style @c;
-webkit-box-shadow: @style @c;
-moz-box-shadow: @style @c;
}
.box-shadow(@style, @alpha: 50%) when (isnumber(@alpha)) {
.box-shadow(@style, rgba(0, 0, 0, @alpha));
}
.box {
color: saturate(@base, 5%);
border-color: lighten(@base, 30%);
div { .box-shadow(0 0 5px, 30%) }
}
Compile to CSS:
npm install -g less
lessc styles.less styles.css
version 1.3.3
changelog
The dynamic stylesheet language.
LESS extends CSS with dynamic behavior such as
variables, mixins, operations and functions.
LESS runs on both the server-side (with Node.js
and Rhino) or client-side (modern browsers only).
overview usage language function reference source about try it now! FollowFollow

SASS
$ gem install sass
$ mv style.css style.scss
$ sass --watch style.scss:style.css
About Tutorial Documentation Blog Try Online
Latest Release: Media Mark (3.2.7)
What's New?
Download
Editor Support
Development
Sass makes CSS fun again. Sass is an extension of CSS3, adding nested rules, variables, mixins,
selector inheritance, and more. It’s translated to well-formatted, standard CSS using the command
line tool or a web-framework plugin.
Sass has two syntaxes. The most commonly used syntax is known as “SCSS” (for “Sassy CSS”), and is
a superset of CSS3’s syntax. This means that every valid CSS3 stylesheet is valid SCSS as well. SCSS
files use the extension .scss.
The second, older syntax is known as the indented syntax (or just “.sass”). Inspired by Haml’s
terseness, it’s intended for people who prefer conciseness over similarity to CSS. Instead of brackets

Twitter Bootstrap
Bootstrap (./index.html)
Bootstrap
Sleek, intuitive, and powerful front-end
framework for faster and easier web
development.
Download Bootstrap (assets/bootstrap.zip)

Zurb Foundation
Features (grid.php) Add-ons (templates.php) Case Studies (case-jacquelinewest.php) Docs (docs) Training (training.php)
Foundation (http://foundation.zurb.com)
Foundation
The most advanced responsive
front-end framework in the world.
Download Foundation 4 (download.php)
10.9k stargazers
(http://github.com/zurb/foundation)
@foundationzurb
(http://twitter.com/foundationzurb)

Data
Usually handled with a backend or external services
(Disqus for comments for example)
RESTful interfaces (client-side MVC)
Local caching (localStorage ie.)
Offline usage (replication, PouchDB)
·
·
·
·

Big Data
Source: infocux Technologies (CC BY-NC)

Recap
Logics are violet
Markups are blue
Styling is sweet
And so is data

Enlightenment
Source: michael.heiss (CC BY-NC-SA)

Source: Augie Schwer (CC BY-SA)

Source: letmehearyousaydeskomdeskom (CC BY-SA)

Shim
a thin often tapered piece of material (as wood, metal, or
stone) used to fill in space between things (as for support,
leveling, or adjustment of fit)
Source: Merriam-Webster, esagor (CC BY-NC)

caniuse.com
Index Tables
Can I use...
Compatibility tables for support of HTML5, CSS3, SVG and more in desktop and mobile browsers.
Latest update: Three new features added: Shadow DOM, WebP images & Intrinsic width & height (April 3, 2013)
Search:
border‑radius, WebGL, woff, etc
CSS
@fontface Web fonts
calc() as CSS unit value
2.1 selectors
Counters
Feature Queries
Filter Effects
Generated content
Gradients
Grid Layout
Hyphenation
inlineblock
Masks
min/maxwidth/height
outline
position:fixed
Regions
HTML5
Audio element
Canvas (basic support)
Color input type
contenteditable attribute (basic support)
Datalist element
dataset & data* attributes
Date/time input types
Details & Summary elements
Download attribute
Drag and Drop
Form validation
HTML5 form features
input placeholder attribute
New semantic elements
Number input type
Offline web applications
SVG
Inline SVG in HTML5
SVG (basic support)
SVG effects for HTML
SVG filters
SVG fonts
SVG fragment identifiers
SVG in CSS backgrounds
SVG in HTML img element
SVG SMIL animation
All SVG features
Other
async attribute for external scripts
TOP
Suggestions Feed Twitter
Import stats FAQ Resources Embed
564

Android
Source: San Diego Shooter (CC BY-NC-ND)

Source: Brian LeRoux (CC BY-NC-SA)

Native vs. HTML5
Native apps still have their advantages
JS is a good alternative for prototyping
Available technology keeps maturing
And we'll likely see better platform support
·
·
·
·

Other Considerations
What belongs to server, what to client and why (business
goals)
Client-side MVC is not a silver bullet
Basecamp's experiences (hint: pushState, aggressive
caching)
Synchronization, offline usage, skills, time, budget...
Fashion. Techs come and go
Up and coming? Mixed approaches. Examples: Meteor,
Derby, mojito, rendr
·
·
·
·
·
·

Recap
Web dev is as hard as you make it
Especially on the bleeding edge
Fortunately a bit of tape fixes anything
Mobile on the rise, native HTML5 apps not mainstream yet
Web architectures - from monoliths to distributed
·
·
·
·
·

Packages per Year
Python: 29,720 packages / 22 years = 1351 packages / year
Ruby: 54,385 packages / 18 years = 3022 packages / year
Node.js: 26,966 packages / 4 years = 6742 packages / year
·
·
·
Source: Gregg Gaines

Server Using Callbacks
varhttp=require('http');
http.createServer(
function(req,res){
res.writeHead(200,{'Content-Type':'text/plain'});
res.end('HelloAgileJkl!n');
}
).listen(8000);
JAVASCRIPT
Short and sweet
Express is very popular for more complex cases
·
·

Server Using EventStreams
varhttp=require('http');
vars=newhttp.Server();
s.on('request',function(req,res){
res.writeHead(200,{'Content-Type':'text/plain'});
res.end('HelloAgileJkl!n');
});
s.listen(8000);
JAVASCRIPT
Viable alternative to callbacks at times
More info at Node.js: Patterns and Opinions by @izs (the
Node guy)
·
·

Recap
Excellent for prototyping
Strong ecosystem thanks to NPM
Develops at a blistering pace
·
·
·

Vim, Emacs, Sublime Text, WebStorm...

Chrome Inspector
See also Firebug·
Source: Chrome DevTools

LiveReload
LiveReload 2 proudly presents…
The Web Developer Wonderland
(a happy land where browsers don't need a Refresh button)
CSS edits and image changes apply live.
CoffeeScript, SASS, LESS and others just work.
Citizenship is granted through the Mac App Store.
Windows permanent residency issues are being worked out,
temporary stay already allowed.

JSLint
clear
Read the instructions.
Set the options.
Enjoy The Good Parts.
Donate.
The JavaScript Code Quality Tool
Edition 2013-04-09
Source
// Paste quality code here
See also JSHint·

jsFiddle
Run Save TidyUp JSHint Login/Sign up
No‑Library (pure JS)
onLoad
Tip JSFiddle
Frameworks & Extensions
Fiddle Options
External Resources
Languages
Ajax Requests
Examples
Legal, Credits and Links
Gittip
Keyboard shortcuts?
1
1
1
HTML
JavaScript
CSS
Result
Others: jsbin, jsdo.it, ...·

Cloud9 IDE
Cloud9 IDE - Online IDE
Give us a shout out: Share on twitter Share on Google Share on facebook Share on email
Sign up
Sign out
Username or e‑mail Password Sign In
Keep me signed in
Forgot password? Resend activation email
Or sign in instantly with:
NEWS: The Changelog of March: Stability, Performance, Features
Hey there! Over the past month we have worked very hard on improving the stability and performance of our service. In addition, we also worked on
some interface changes ...
read the full article | see all articles
Pricing
Features
Blog
Company
Company•
Board Members•
Jobs•
Press•
Contact
Node.js
Node.js•
Nodebits.com•
NodeManual.org
Support
Support•
Status•
Documentation
Your code anywhere, anytime...

Recap
Traditional editors and IDEs are fine
Additional tooling available, use it
Future in the web?
·
·
·

The Anti-Pattern
<scriptsrc='jquery-current.js'type='text/javascript'></script>
<scriptsrc='sorttable.js' type='text/javascript'></script>
<scriptsrc='scripts.js' type='text/javascript'></script>
<scriptsrc='miniCalendar.js' type='text/javascript'></script>
HTML
Each include has to be defined by hand
Brittle and prone to error, especially with large codebases
Does not encourage to modularity
Hard to reuse
·
·
·
·

Concatenate Scripts
<scriptsrc='application.js'type='text/javascript'></script> HTML
Old skool but works
Less overhead at HTML
Still, running into dependency order problem at
concatenation
Possible to complement by loading scripts (ie. jQuery)
from a CDN
Nevertheless a step forward
·
·
·
·
·

RequireJS and AMD + Bower
<scriptdata-main="scripts/main"src="scripts/require.js"></script> HTML
define(['jquery','./math'],function($,math){
return{//exports
vector:function(){...}
};
});
JAVASCRIPT
Modular, asynchronous approach
Includes defineoverhead (possible to mimic Node.js
convention, though)
Optimizer resolves dependencies and creates build
(loadable with Almond)
Configuration complex at times
·
·
·
·

Browserify + NPM
<scriptsrc='application.js'type='text/javascript'></script> HTML
var$=require('jquery');
varmath=require('./math');
exports.vector=function(){...};
JAVASCRIPT
Allows to use Node.js module convention (CJS)
Better yet allows to hook into NPM ecosystem!
Still fairly bleeding edge
·
·
·

Recap
No official module system yet (ES6?)
Many alternatives (AMD, CJS etc.)
browserify looks promising (NPM!)
·
·
·

NPM
Search Packages
NODE.JS HOME
DOWNLOAD
ABOUT
NPM REGISTRY
DOCS
BLOG
COMMUNITY
LOGOS
JOBS
Node Packaged Modules
Total Packages: 28 067
907 584 downloads in the last day
9 157 954 downloads in the last week
33 188 669 downloads in the last month
Patches welcome!
Any package can be installed by using npminstall.
Add your programs to this index by using npmpublish.
Recently Updated
0m jspm
Most Depended Upon
2740 underscore
Create Account | Login

Bower
Bower components
Discover Bower (http://bower.io)
components
Check out some of my other
projects
Focus
(https://github.com/sindresorhus/focus),
JsRun
(https://github.com/sindresorhus/sublime-
jsrun), sublime-
editorconfig
(https://github.com/sindresorhus/editorconfig-
sublime), GitHub-Notifier
(https://github.com/sindresorhus/GitHub-
Notifier), Pure
(https://github.com/sindresorhus/pure),
quora-unblocker
(https://github.com/sindresorhus/quora-
unblocker)
screenfull.js (https://git…
stringify-object (https:/…
Featured components
Fullsc…
API
wrap…
String…
an
flight-storage (https://gi…
spice.css (https://github…
Latest components
Store…
JSON
data
Basic…
dry css
min.js (https://github.co…
angularjs-ordinal-filter …
Hot components
Super…
mini…
select…
Angul…
Ordinal
(https://github.com/sindresorhus/bower-components)

JSwiki
JSwiki
2 TweetTweet 59
EditEdit
Hi there! Welcome to jswiki.
This wiki indexes libraries and resources available for JavaScript. In addition it provides some starting points
for newbies in form of Beginner's Resources. In case you want to contribute, do take a look at Meta first for
some extra pointers. Happy hacking!
IMPORTANT! jster.net is a spiritual successor of jswiki. There is more content but the
site is less of a wiki. jswiki will remain here as more of a communal alternative. In
addition you might want to check out the following:
JSwiki
Essentials
Multimedia
Graphics
Data
UI
Utilities
Development
Applications
jsgamewiki Microjs
EveryJS JSDB
JSPkg

JSter
FollowFollow @jsterlibs@jsterlibs
Blog
Catalog
Add Library
Sign In
Find a Javascript library
JSter is a catalog of 1095 JavaScript libraries and tools for web development.
Problems?Problems?

Recap
No need to just Google it
Package managers (esp. NPM) make your life easier
Avoid NIH and use existing solutions
·
·
·

Unit Testing
assert(title('HELLOWORLD!')==='HelloWorld!');
assert(title('Helloworld!')==='HelloWorld!');
assert(title('hi')==='Hi');
assert(title()===undefined);
functiontitle(s){
returns&&s.split('').map(capitalize).join('');
}
functionassert(s){
if(!s)thrownewError('Assertionfailed!');
}
JAVASCRIPT
Popular alternatives: Jasmine (BDD), Mocha, QUnit·

Fuzz Testing
//functiontotest,noteannotation
vartitle=annotate('title','Returnsgivenstringinatitleformat.')
.on(is.string,function(s){
returns&&s.split('').map(capitalize).join('');
}).satisfies(is.string);
//testinganinvariant
fuzz(title,function(op,str){
varparts=op(str).split('');
returnparts.map(fst).map(isUpper).filter(id).length==parts.length;
});
JAVASCRIPT
Up and coming (hopefully)·
Source: bebraw/annofuzz

Testling
testling-cirun your browser tests on every push
write some tests
Use the test runner you like best!
The only thing your test runner needs to do is to produce TAP output
on console.log or process.stdout. Here's an example project using
mocha.
You can also use tape to output TAP output in browsers and in node.
Here is what a simple tape test looks like:
var test = require('tape');
var myCode = require('../my_code.js');
test('make sure my code works', function (t) {
t.plan(2);
t.equal(myCode.beep(5), 555);

Travis
travis-ci.org
Blog
Documentation
English
Français
Español
Português
Travis CI
A hosted continuous integration service for the open source community.
Welcome to Travis CI #
Travis CI is a hosted continuous integration service for the open source community. It is integrated with GitHub and offers first class support for:
C
C++
Clojure
Erlang
Go
Groovy
Haskell
Java
JavaScript (with Node.js)
Perl

Browserling
interactive cross-browser testing
http://
3.0 3.5 3.6 4.0 5.0 6.0
7.0 8.0 9.0 10.0 11.0 12.0
13.0 14.0 15.0 16.0 17.0 18.0
19.0 nightly
create account sign in

Browserstack
Live, Web-Based Browser Testing
Instant access to all desktop and mobile browsers.
Say goodbye to your setup of virtual machines and devices.
Free Trial
Sign up for free
Full Name
Email
Password
No credit cardNo credit card
required. We promise.required. We promise.
Support Pricing Free TrialResources Sign inLive

Chaos Monkey
Source: Jeff Atwood - Working with the Chaos Monkey

AB Testing
Source: TheBusyBrain (CC BY)

Recap
Test your JS
Browser differences bring their own challenge
Future in continuous integration (Travis and co.)
Fail constantly to avoid failure
·
·
·
·

Conclusion
JS - the most valuable language you don't know yet
A target for tool and language development
Not without its quirks but still manageable
The most important language of this decade?
·
·
·
·

Survive JS - The Guide
Survive JS
Have you ever felt lost in the JavaScript jungle? If so, you are in the right place. The purpose of this guide
is to provide you with sharp implements that help you survive and perhaps thrive even. Even seasoned
JavaScript explorers might find a trick or two to apply in practice.
As it is very possible I have not reached omnipotence yet, I encourage you to submit issues. This way we
can make the guide to serve you better.
I am well aware there are other excellent resources out there. Of these I would like to mention Eloquent
JavaScript and JavaScript Garden in particular. I have listed various beginner's resources over at JSwiki,
the predecessor of JSter.
Table of Contents
A Misunderstood Language? - What is the essence of JavaScript? Why is it relevant?
Current State - What is the current state of JavaScript and the ecosystem?
Language Features - What the language looks like? How to use it effectively?
EditEdit
TweetTweet 0
0
Table of Contents
Survive JS

Thank You!
twitter @bebraw
www www.nixtu.info
github github.com/bebraw

Survive JavaScript - Strategies and Tricks

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to Survive JavaScript - Strategies and Tricks

Similar to Survive JavaScript - Strategies and Tricks (20)

More from Juho Vepsäläinen

More from Juho Vepsäläinen (13)

Recently uploaded

Recently uploaded (20)

Survive JavaScript - Strategies and Tricks