Client Side Dev. Toolkit HTML5 JavaScript CSS (and Less, but not today) Bootstrap Knockout.js...
-
Upload
cory-daniel -
Category
Documents
-
view
222 -
download
0
Transcript of Client Side Dev. Toolkit HTML5 JavaScript CSS (and Less, but not today) Bootstrap Knockout.js...
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