Client Side Dev

Toolkit HTML5 JavaScript CSS (and Less, but not today) Bootstrap Knockout.js Require.js (moving to Browserify) Toastr Visual Studio and Browser F12 tools

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