1. Client Side Dev

2. 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?

3. Bootstrap http://getbootstrap.com/ Supports Less/Sass Responsive UI
Uses jQuery
Grid System (12 column)
Popular (good and bad)

4. Demo
Bootstrap1.html
Bootstrap2.html

5. 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

6. 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

7. 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

8. SOLID on the client
Use modules for code “xxxDataService”, “xxxCalculator”
RequireJs or other for DI/Dependency Management (gets files from server too)

9. AMD vs CommonJs
requireJs vs browserify