Transcript Client Side Dev

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