Wintellect - Devscovery - Enterprise JavaScript Development 2 of 2

wintellect.comconsulting training design debugging

Enterprise JavaScript Development: Oxymoron?Part 2 of 2

Jeremy Likness (@JeremyLikness)Principal [email protected] Copyright © 2012


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


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

wintellect.com

demo

consulting training design debugging

JSLint and JSHint


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

wintellect.com

demo


jQuery


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

wintellect.com

demo


JSON and Web API


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

wintellect.com

demo


Twitter Bootstrap


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

wintellect.com

demo


Underscore.js


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

wintellect.com

demo


Backbone.js


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) { ...

wintellect.com

demo


Require.js


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

wintellect.com

demo


Kendo UI / MVVM


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

wintellect.com

demo


Amplify.js


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)


Links and Recommendations

• Twitter me: @JeremyLikness

• Blog me: http://csharperimage.jeremylikness.com/

• JavaScript: The Good PartsISBN: 0596517742

http://csharperimage.jeremylikness.com/



wintellect.com

Questions?


Jeremy Likness (@JeremyLikness)Principal [email protected]

Technology

Wintellect - Devscovery - Enterprise JavaScript Development 2 of 2