wintellect - devscovery - enterprise javascript development 2 of 2
DESCRIPTION
TRANSCRIPT
![Page 1: Wintellect - Devscovery - Enterprise JavaScript Development 2 of 2](https://reader036.vdocument.in/reader036/viewer/2022070301/545aede4b1af9f4a1d8b4b8a/html5/thumbnails/1.jpg)
wintellect.comconsulting training design debugging
Enterprise JavaScript Development: Oxymoron?Part 2 of 2
Jeremy Likness (@JeremyLikness)Principal [email protected] Copyright © 2012
![Page 2: Wintellect - Devscovery - Enterprise JavaScript Development 2 of 2](https://reader036.vdocument.in/reader036/viewer/2022070301/545aede4b1af9f4a1d8b4b8a/html5/thumbnails/2.jpg)
wintellect.comconsulting training design debugging
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
![Page 3: Wintellect - Devscovery - Enterprise JavaScript Development 2 of 2](https://reader036.vdocument.in/reader036/viewer/2022070301/545aede4b1af9f4a1d8b4b8a/html5/thumbnails/3.jpg)
wintellect.comconsulting training design debugging
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
![Page 4: Wintellect - Devscovery - Enterprise JavaScript Development 2 of 2](https://reader036.vdocument.in/reader036/viewer/2022070301/545aede4b1af9f4a1d8b4b8a/html5/thumbnails/4.jpg)
wintellect.com
demo
consulting training design debugging
JSLint and JSHint
![Page 5: Wintellect - Devscovery - Enterprise JavaScript Development 2 of 2](https://reader036.vdocument.in/reader036/viewer/2022070301/545aede4b1af9f4a1d8b4b8a/html5/thumbnails/5.jpg)
wintellect.comconsulting training design debugging
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
![Page 6: Wintellect - Devscovery - Enterprise JavaScript Development 2 of 2](https://reader036.vdocument.in/reader036/viewer/2022070301/545aede4b1af9f4a1d8b4b8a/html5/thumbnails/6.jpg)
wintellect.com
demo
consulting training design debugging
jQuery
![Page 7: Wintellect - Devscovery - Enterprise JavaScript Development 2 of 2](https://reader036.vdocument.in/reader036/viewer/2022070301/545aede4b1af9f4a1d8b4b8a/html5/thumbnails/7.jpg)
wintellect.comconsulting training design debugging
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
![Page 8: Wintellect - Devscovery - Enterprise JavaScript Development 2 of 2](https://reader036.vdocument.in/reader036/viewer/2022070301/545aede4b1af9f4a1d8b4b8a/html5/thumbnails/8.jpg)
wintellect.com
demo
consulting training design debugging
JSON and Web API
![Page 9: Wintellect - Devscovery - Enterprise JavaScript Development 2 of 2](https://reader036.vdocument.in/reader036/viewer/2022070301/545aede4b1af9f4a1d8b4b8a/html5/thumbnails/9.jpg)
wintellect.comconsulting training design debugging
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
![Page 10: Wintellect - Devscovery - Enterprise JavaScript Development 2 of 2](https://reader036.vdocument.in/reader036/viewer/2022070301/545aede4b1af9f4a1d8b4b8a/html5/thumbnails/10.jpg)
wintellect.com
demo
consulting training design debugging
Twitter Bootstrap
![Page 11: Wintellect - Devscovery - Enterprise JavaScript Development 2 of 2](https://reader036.vdocument.in/reader036/viewer/2022070301/545aede4b1af9f4a1d8b4b8a/html5/thumbnails/11.jpg)
wintellect.comconsulting training design debugging
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
![Page 12: Wintellect - Devscovery - Enterprise JavaScript Development 2 of 2](https://reader036.vdocument.in/reader036/viewer/2022070301/545aede4b1af9f4a1d8b4b8a/html5/thumbnails/12.jpg)
wintellect.com
demo
consulting training design debugging
Underscore.js
![Page 13: Wintellect - Devscovery - Enterprise JavaScript Development 2 of 2](https://reader036.vdocument.in/reader036/viewer/2022070301/545aede4b1af9f4a1d8b4b8a/html5/thumbnails/13.jpg)
wintellect.comconsulting training design debugging
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
![Page 14: Wintellect - Devscovery - Enterprise JavaScript Development 2 of 2](https://reader036.vdocument.in/reader036/viewer/2022070301/545aede4b1af9f4a1d8b4b8a/html5/thumbnails/14.jpg)
wintellect.com
demo
consulting training design debugging
Backbone.js
![Page 15: Wintellect - Devscovery - Enterprise JavaScript Development 2 of 2](https://reader036.vdocument.in/reader036/viewer/2022070301/545aede4b1af9f4a1d8b4b8a/html5/thumbnails/15.jpg)
wintellect.comconsulting training design debugging
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) { ...
![Page 16: Wintellect - Devscovery - Enterprise JavaScript Development 2 of 2](https://reader036.vdocument.in/reader036/viewer/2022070301/545aede4b1af9f4a1d8b4b8a/html5/thumbnails/16.jpg)
wintellect.com
demo
consulting training design debugging
Require.js
![Page 17: Wintellect - Devscovery - Enterprise JavaScript Development 2 of 2](https://reader036.vdocument.in/reader036/viewer/2022070301/545aede4b1af9f4a1d8b4b8a/html5/thumbnails/17.jpg)
wintellect.comconsulting training design debugging
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
![Page 18: Wintellect - Devscovery - Enterprise JavaScript Development 2 of 2](https://reader036.vdocument.in/reader036/viewer/2022070301/545aede4b1af9f4a1d8b4b8a/html5/thumbnails/18.jpg)
wintellect.com
demo
consulting training design debugging
Kendo UI / MVVM
![Page 19: Wintellect - Devscovery - Enterprise JavaScript Development 2 of 2](https://reader036.vdocument.in/reader036/viewer/2022070301/545aede4b1af9f4a1d8b4b8a/html5/thumbnails/19.jpg)
wintellect.comconsulting training design debugging
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
![Page 20: Wintellect - Devscovery - Enterprise JavaScript Development 2 of 2](https://reader036.vdocument.in/reader036/viewer/2022070301/545aede4b1af9f4a1d8b4b8a/html5/thumbnails/20.jpg)
wintellect.com
demo
consulting training design debugging
Amplify.js
![Page 21: Wintellect - Devscovery - Enterprise JavaScript Development 2 of 2](https://reader036.vdocument.in/reader036/viewer/2022070301/545aede4b1af9f4a1d8b4b8a/html5/thumbnails/21.jpg)
wintellect.comconsulting training design debugging
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)
![Page 22: Wintellect - Devscovery - Enterprise JavaScript Development 2 of 2](https://reader036.vdocument.in/reader036/viewer/2022070301/545aede4b1af9f4a1d8b4b8a/html5/thumbnails/22.jpg)
wintellect.comconsulting training design debugging
Links and Recommendations
• Twitter me: @JeremyLikness
• Blog me: http://csharperimage.jeremylikness.com/
• JavaScript: The Good PartsISBN: 0596517742
![Page 23: Wintellect - Devscovery - Enterprise JavaScript Development 2 of 2](https://reader036.vdocument.in/reader036/viewer/2022070301/545aede4b1af9f4a1d8b4b8a/html5/thumbnails/23.jpg)
wintellect.com
Questions?
consulting training design debugging
Jeremy Likness (@JeremyLikness)Principal [email protected]