Enterprise JavaScript Development: Oxymoron? Part 2 of 2                            Jeremy Likness (@JeremyLikness)       ...
Agenda •   JSLint / JSHint – personal style is for fashion, not code •   jQuery – one API to bind them all •   JSON and We...
JSLint / JSHint • JSLint – JavaScript code that checks for problems in JavaScript code • Authored by Douglas Crockford, wh...
demo   JSLint and JSHintconsulting   training   design   debugging   wintellect.com
jQuery • Very “recent” API – released in 2006 • Most popular JavaScript library in use • Designed to make it easier to per...
demo   jQueryconsulting   training   design   debugging   wintellect.com
JSON and Web API •   JSON is client-side data “for free” •   JSON is very human readable •   JSON is more compact than XML...
demo   JSON and Web APIconsulting   training   design   debugging   wintellect.com
Twitter Bootstrap •   Fixed and fluid layouts •   Browser compatibility •   Tablet and smartphone support (responsive CSS)...
demo   Twitter Bootstrapconsulting   training   design   debugging   wintellect.com
Underscore.js • Swiss Army Knife • Lots of great collection-based functions      –   Each      –   Find      –   Filter   ...
demo   Underscore.jsconsulting   training   design   debugging   wintellect.com
Backbone.js • MVC on the client (C = Collection, not Controller!) • Models      –   Constructors      –   Defaults      – ...
demo   Backbone.jsconsulting   training   design   debugging   wintellect.com
Require.js •   Script file / module loader •   In-browser dynamic assembly of components •   Designed to improve speed and...
demo   Require.jsconsulting   training   design   debugging   wintellect.com
MVVM (Kendo UI) • Telerik • Knockout.js equivalent “open source” version • ObservableObject      –   Bind for event handle...
demo   Kendo UI / MVVMconsulting   training   design   debugging   wintellect.com
Amplify.js (Postal.js) • JavaScript implementation of publish/subscribe pattern • Synchronous and asynchronous • No extern...
demo   Amplify.jsconsulting   training   design   debugging   wintellect.com
Recap •   JavaScript is good •   JavaScript has bad parts •   JavaScript can get ugly •   Known the language •   Program w...
Links and Recommendations • Twitter me:   @JeremyLikness • Blog me:   http://csharperimage.jeremylikness.com/ • JavaScript...
Questions?                            Jeremy Likness (@JeremyLikness)                            Principal Consultant     ...
Upcoming SlideShare
Loading in...5
×

Wintellect - Devscovery - Enterprise JavaScript Development 2 of 2

391

Published on

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
391
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
12
Comments
0
Likes
1
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
  • Transcript of "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
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×