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

• 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