Transcript Client Side - Schwammy Says

CLIENT SIDE DEV
TOOLKIT
• HTML5
• JavaScript
• CSS (and Less, but not today)
•
•
•
•
•
•
Bootstrap
Knockout.js
Require.js
Toastr
Visual Studio and Browser F12 tools
In case you are wondering… Why not Angular?
BOOTSTRAP
• http://getbootstrap.com/
• Supports Less/Sass
• Responsive UI
• Uses jQuery
• Grid System (12 column)
• Popular (good and bad)
DEMO
• Bootstrap1.html
• Bootstrap2.html
CLIENT-SIDE VS SERVER-SIDE BINDING
• “Traditional” MVC and Web Forms use server-side binding.
• Controls (Web Forms)
• Razor, HtmlHelpers in MVC
• “Modern” web apps are often more responsive using asynchronous calls to the
server
• Combining the two brings challenges.
• Demo Razor view – use F12 Network tab to show that data is set on server
• Demo Knockout – use F12 again
KNOCKOUT.JS
• http://knockoutjs.com/
• Great online tutorial and demos
• Makes it really easy to two-way bind data to the UI.
• Much less javascript code!
• There are other options. Angular is very popular now. Knockout works fine for me 
• Binding frameworks don’t play well with Razor
• Demos
REVEALING MODULE PATTERN
• Javascript does not have classes.
• RMP is used to make this feel more like a class.
• Closure
• function within a function
• Inner function has access to the variables in the outer function
• Demo (closure.html)
• Declare all variables and functions in the private scope
• Return an anonymous object with pointers t private functionality (Reveal)
• Demo (reveal.html)
• Check out Learning JavaScript Design Patterns (ebook) by Addy Osmani
SOLID ON THE CLIENT
• Use modules for code “xxxDataService”, “xxxCalculator”
• RequireJs or other for DI/Dependency Management (gets files from server
too)
AMD VS COMMONJS
• requireJs vs browserify