Successfully reported this slideshow.

Wintellect - Devscovery - Enterprise JavaScript Development 2 of 2

1

Share

Loading in …3
×
1 of 23
1 of 23

More Related Content

Related Books

Free with a 14 day trial from Scribd

See all

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 © 2012 consulting 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 today consulting 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 fix consulting training design debugging wintellect.com
  4. 4. demo JSLint and JSHint consulting 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 mobile consulting training design debugging wintellect.com
  6. 6. demo jQuery consulting 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 jQuery consulting training design debugging wintellect.com
  8. 8. demo JSON and Web API consulting 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 CSS consulting training design debugging wintellect.com
  10. 10. demo Twitter Bootstrap consulting 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 function consulting training design debugging wintellect.com
  12. 12. demo Underscore.js consulting 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 applications consulting training design debugging wintellect.com
  14. 14. demo Backbone.js consulting 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.js consulting 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 rules consulting training design debugging wintellect.com
  18. 18. demo Kendo UI / MVVM consulting 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 events consulting training design debugging wintellect.com
  20. 20. demo Amplify.js consulting 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: 0596517742 consulting training design debugging wintellect.com
  23. 23. Questions? Jeremy Likness (@JeremyLikness) Principal Consultant jlikness@wintellect.com consulting training design debugging wintellect.com

Editor's Notes

  • 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.
  • 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
  • Show fetch in ChromeShow fetch in IEShow fiddler testing
  • Show fetch in ChromeShow fetch in IEShow fiddler testing
  • Show fetch in ChromeShow fetch in IEShow fiddler testing
  • Show fetch in ChromeShow fetch in IEShow fiddler testing
  • Show fetch in ChromeShow fetch in IEShow fiddler testing
  • Show fetch in ChromeShow fetch in IEShow fiddler testing
  • Show fetch in ChromeShow fetch in IEShow fiddler testing
  • ×