Client Side Dev. Toolkit HTML5 JavaScript CSS (and Less, but not today) Bootstrap Knockout.js...

9
Client Side Dev

Transcript of Client Side Dev. Toolkit HTML5 JavaScript CSS (and Less, but not today) Bootstrap Knockout.js...

Page 1: Client Side Dev. Toolkit HTML5 JavaScript CSS (and Less, but not today) Bootstrap Knockout.js Require.js (moving to Browserify) Toastr Visual Studio and.

Client Side Dev

Page 2: Client Side Dev. Toolkit HTML5 JavaScript CSS (and Less, but not today) Bootstrap Knockout.js Require.js (moving to Browserify) Toastr Visual Studio and.

Toolkit

• HTML5• JavaScript• CSS (and Less, but not today)

• Bootstrap• Knockout.js• Require.js (moving to Browserify)• Toastr• Visual Studio and Browser F12 tools

Page 3: Client Side Dev. Toolkit HTML5 JavaScript CSS (and Less, but not today) Bootstrap Knockout.js Require.js (moving to Browserify) Toastr Visual Studio and.

Bootstrap

• http://getbootstrap.com/

• Supports Less/Sass• Responsive UI• Uses jQuery• Grid System (12 column)• Popular (good and bad)

Page 4: Client Side Dev. Toolkit HTML5 JavaScript CSS (and Less, but not today) Bootstrap Knockout.js Require.js (moving to Browserify) Toastr Visual Studio and.

Demo

• Bootstrap1.html• Bootstrap2.html

Page 5: Client Side Dev. Toolkit HTML5 JavaScript CSS (and Less, but not today) Bootstrap Knockout.js Require.js (moving to Browserify) Toastr Visual Studio and.

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

Page 6: Client Side Dev. Toolkit HTML5 JavaScript CSS (and Less, but not today) Bootstrap Knockout.js Require.js (moving to Browserify) Toastr Visual Studio and.

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

Page 7: Client Side Dev. Toolkit HTML5 JavaScript CSS (and Less, but not today) Bootstrap Knockout.js Require.js (moving to Browserify) Toastr Visual Studio and.

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

Page 8: Client Side Dev. Toolkit HTML5 JavaScript CSS (and Less, but not today) Bootstrap Knockout.js Require.js (moving to Browserify) Toastr Visual Studio and.

SOLID on the client

• Use modules for code “xxxDataService”, “xxxCalculator”• RequireJs or other for DI/Dependency Management (gets files from

server too)

Page 9: Client Side Dev. Toolkit HTML5 JavaScript CSS (and Less, but not today) Bootstrap Knockout.js Require.js (moving to Browserify) Toastr Visual Studio and.

AMD vs CommonJs

• requireJs vs browserify