Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Wintellect - Devscovery - Enterprise JavaScript Development 2 of 2

734 views

Published on

Published in: Technology
  • Be the first to comment

Wintellect - Devscovery - Enterprise JavaScript Development 2 of 2

  1. 1. Enterprise JavaScript Development: Oxymoron? Part 2 of 2 Jeremy Likness (@JeremyLikness) Principal Consultant jlikness@wintellect.com Copyright © 2012consulting training design debugging wintellect.com
  2. 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 todayconsulting training design debugging wintellect.com
  3. 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 fixconsulting training design debugging wintellect.com
  4. 4. demo JSLint and JSHintconsulting training design debugging wintellect.com
  5. 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 mobileconsulting training design debugging wintellect.com
  6. 6. demo jQueryconsulting training design debugging wintellect.com
  7. 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 jQueryconsulting training design debugging wintellect.com
  8. 8. demo JSON and Web APIconsulting training design debugging wintellect.com
  9. 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 CSSconsulting training design debugging wintellect.com
  10. 10. demo Twitter Bootstrapconsulting training design debugging wintellect.com
  11. 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 functionconsulting training design debugging wintellect.com
  12. 12. demo Underscore.jsconsulting training design debugging wintellect.com
  13. 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 applicationsconsulting training design debugging wintellect.com
  14. 14. demo Backbone.jsconsulting training design debugging wintellect.com
  15. 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 wintellect.com
  16. 16. demo Require.jsconsulting training design debugging wintellect.com
  17. 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 rulesconsulting training design debugging wintellect.com
  18. 18. demo Kendo UI / MVVMconsulting training design debugging wintellect.com
  19. 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 eventsconsulting training design debugging wintellect.com
  20. 20. demo Amplify.jsconsulting training design debugging wintellect.com
  21. 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 wintellect.com
  22. 22. Links and Recommendations • Twitter me: @JeremyLikness • Blog me: http://csharperimage.jeremylikness.com/ • JavaScript: The Good Parts ISBN: 0596517742consulting training design debugging wintellect.com
  23. 23. Questions? Jeremy Likness (@JeremyLikness) Principal Consultant jlikness@wintellect.comconsulting training design debugging wintellect.com

×