Wintellect - Devscovery - Enterprise JavaScript Development 2 of 2


Published on

Published in: Technology
1 Like
  • Be the first to comment

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide
  • 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
  • Wintellect - Devscovery - Enterprise JavaScript Development 2 of 2

    1. 1. Enterprise JavaScript Development: Oxymoron? Part 2 of 2 Jeremy Likness (@JeremyLikness) Principal Consultant Copyright © 2012consulting training design debugging
    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
    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
    4. 4. demo JSLint and JSHintconsulting training design debugging
    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
    6. 6. demo jQueryconsulting training design debugging
    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
    8. 8. demo JSON and Web APIconsulting training design debugging
    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
    10. 10. demo Twitter Bootstrapconsulting training design debugging
    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
    12. 12. demo Underscore.jsconsulting training design debugging
    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
    14. 14. demo Backbone.jsconsulting training design debugging
    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) { training design debugging
    16. 16. demo Require.jsconsulting training design debugging
    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
    18. 18. demo Kendo UI / MVVMconsulting training design debugging
    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
    20. 20. demo Amplify.jsconsulting training design debugging
    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
    22. 22. Links and Recommendations • Twitter me: @JeremyLikness • Blog me: • JavaScript: The Good Parts ISBN: 0596517742consulting training design debugging
    23. 23. Questions? Jeremy Likness (@JeremyLikness) Principal Consultant jlikness@wintellect.comconsulting training design debugging