Enterprise JavaScript Development: Oxymoron?
Part 2 of 2
Jeremy Likness (@JeremyLikness)
Principal Consultant
jlikness@wintellect.com
Copyright © 2012
consulting training design debugging wintellect.com

Agenda
• JSLint / JSHint – personal style is for fashion, not code
• jQuery – one API to bind them all
• JSON and Web API – flexible information on demand
• Twitter Bootstrap – one layout to rule them all
• Underscore.js – the Swiss army knife of JavaScript
• Backbone.js – MVC on the client
• RequireJS – dependency resolution
• MVVM (for example, Kendo UI) – “Gotta keep „em separated”
• Amplify.js – publisher/subscriber for the client
• … and many more great projects we won‟t have time to discuss today
consulting training design debugging wintellect.com

JSLint / JSHint
• JSLint – JavaScript code that checks for problems in JavaScript code
• Authored by Douglas Crockford, who helped develop the JavaScript
language, pioneered JSON and wrote The Good Parts
• Very restrictive – many debates over whether it is the right tool or not
• JSHint – code quality tool, open source project
– Fork of JSLint
– More flexible
– Help avoid typos and language “gotchas”
• Available as a Visual Studio extension
– Install from Tools -> Extensions and Updates
– Configure – you can even error builds based on the results
– Start early because existing code can be a bear to fix
consulting training design debugging wintellect.com

demo
JSLint and JSHint
consulting training design debugging wintellect.com

jQuery
• Very “recent” API – released in 2006
• Most popular JavaScript library in use
• Designed to make it easier to perform client-side scripting without
worrying about browser-specific idioms
• Bundled with the Visual Studio 2012 MVC templates
• Support for current Firefox, Safari, Opera, and Chrome versions, and
Internet Explorer 6 and above
• Support for plug-ins
– jQuery UI
– jQuery grid
– jQuery mobile
consulting training design debugging wintellect.com

demo
jQuery
consulting training design debugging wintellect.com

JSON and Web API
• JSON is client-side data “for free”
• JSON is very human readable
• JSON is more compact than XML
• JSON is a popular format for REST
• Web API makes it extremely easy to stand up REST end points
• Web API provides true “negotiation” of content types
• Web API gives control over response codes
• Very easy syntax with jQuery
consulting training design debugging wintellect.com

demo
JSON and Web API
consulting training design debugging wintellect.com

Twitter Bootstrap
• Fixed and fluid layouts
• Browser compatibility
• Tablet and smartphone support (responsive CSS)
• Provides tons of CSS for existing components:
– Forms
– Labels
– Alert boxes
– Typographical sections
• Also includes JavaScript extensions for various features
– Alert, Tooltip, Modal, etc.
• Great way to baseline your application
• Completely customizable CSS
consulting training design debugging wintellect.com

demo
Twitter Bootstrap
consulting training design debugging wintellect.com

Underscore.js
• Swiss Army Knife
• Lots of great collection-based functions
– Each
– Find
– Filter
– Map
– Reduce
– Pluck
• Testers
– Is Empty?
– Has?
– Etc.
• Templates
• Helpers i.e. bind = no more self-invoking function
consulting training design debugging wintellect.com

demo
Underscore.js
consulting training design debugging wintellect.com

Backbone.js
• MVC on the client (C = Collection, not Controller!)
• Models
– Constructors
– Defaults
– Change notification
– Initialization
• Collections
– Auto-binding to REST end points
– Change notification
• Views
– Bind to tags
– Support for templates
• Events
• Navigation / Browser journal
• Great for “data over forms” style applications
consulting training design debugging wintellect.com

demo
Backbone.js
consulting training design debugging wintellect.com

Require.js
• Script file / module loader
• In-browser dynamic assembly of components
• Designed to improve speed and quality
• Load modules only if/when/as needed
• Optimizer tool can compress JavaScript into single file
• In each file, you use this to load other scripts that are dependencies:
require(["app/services"], function(services) { ...
consulting training design debugging wintellect.com

demo
Require.js
consulting training design debugging wintellect.com

MVVM (Kendo UI)
• Telerik
• Knockout.js equivalent “open source” version
• ObservableObject
– Bind for event handlers
– Get/Set for property updates with change notification
– toJSON for clean transport
– Exposes a change event
• ObservableArray
– Array with change tracking
– Most basic array functions supported
• Model – specialized ObservableObject with data definition for data
sources
• Validator – works with existing HTML5 tags and allows for custom
rules
consulting training design debugging wintellect.com

demo
Kendo UI / MVVM
consulting training design debugging wintellect.com

Amplify.js (Postal.js)
• JavaScript implementation of publish/subscribe pattern
• Synchronous and asynchronous
• No external dependencies
• Channels for further scoping
• Envelopes for correlation, tracking, etc.
• Use events on objects and subscribe within modules
• Use publisher/subscriber for decoupled communication
between/across modules
• Use the adapter pattern to adapt pub/sub to events
• Wiretap to log all events
consulting training design debugging wintellect.com

demo
Amplify.js
consulting training design debugging wintellect.com

Recap
• JavaScript is good
• JavaScript has bad parts
• JavaScript can get ugly
• Known the language
• Program with JavaScript, not "C# using JavaScript"
• Learn how to make your code:
– Use the good parts (JSHint/JSLint)
– Cross-browser friendly (jQuery)
– Fluid and adaptable (Twitter Bootstrap)
– Data-friendly (JSON)
– Consistent (tools like underscore)
– Modular (Backbone, Requires)
– Testable and Extendable (MVVM)
– Decoupled (Postal)
consulting training design debugging wintellect.com

Links and Recommendations
• Twitter me:
@JeremyLikness
• Blog me:
http://csharperimage.jeremylikness.com/
• JavaScript: The Good Parts
ISBN: 0596517742
consulting training design debugging wintellect.com

Questions?
Jeremy Likness (@JeremyLikness)
Principal Consultant
jlikness@wintellect.com
consulting training design debugging wintellect.com