More Related Content


Wintellect - Devscovery - Enterprise JavaScript Development 2 of 2

  1. Enterprise JavaScript Development: Oxymoron? Part 2 of 2 Jeremy Likness (@JeremyLikness) Principal Consultant Copyright © 2012 consulting training design debugging
  2. 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
  3. 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
  4. demo JSLint and JSHint consulting training design debugging
  5. 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
  6. demo jQuery consulting training design debugging
  7. 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
  8. demo JSON and Web API consulting training design debugging
  9. 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
  10. demo Twitter Bootstrap consulting training design debugging
  11. 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
  12. demo Underscore.js consulting training design debugging
  13. 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
  14. demo Backbone.js consulting training design debugging
  15. 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
  16. demo Require.js consulting training design debugging
  17. 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
  18. demo Kendo UI / MVVM consulting training design debugging
  19. 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
  20. demo Amplify.js consulting training design debugging
  21. 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
  22. Links and Recommendations • Twitter me: @JeremyLikness • Blog me: • JavaScript: The Good Parts ISBN: 0596517742 consulting training design debugging
  23. Questions? Jeremy Likness (@JeremyLikness) Principal Consultant consulting training design debugging

Editor's Notes

  1. Show the original first. Run in IE8 and IE9, then show crash in IE7 – find out if students can even see where the crash is coming from.Run JSLint, note it stops after a short time and you have to keep making fixes to keep it moving. Note complaints about spaces. Show that the defect was addressed.Now configure JSHint and show that experience.
  2. Run in browser, then show IETester and run in IE 6.0Show the form, then the logic, then the view – note how this helps structure the code and make it more readable
  3. Show fetch in ChromeShow fetch in IEShow fiddler testing
  4. Show fetch in ChromeShow fetch in IEShow fiddler testing
  5. Show fetch in ChromeShow fetch in IEShow fiddler testing
  6. Show fetch in ChromeShow fetch in IEShow fiddler testing
  7. Show fetch in ChromeShow fetch in IEShow fiddler testing
  8. Show fetch in ChromeShow fetch in IEShow fiddler testing
  9. Show fetch in ChromeShow fetch in IEShow fiddler testing