www.morettocarlo.eu ts.eestec.it

1. Client
Technology
Moretto Carlo – www.morettocarlo.eu ts.eestec.it

2. Client
• jQuery
• Toastr
• Knockout
Moretto Carlo – www.morettocarlo.eu ts.eestec.it

3. jQuery
Download: http://jquery.com/
jQuery is a fast and concise JavaScript Library
that simplifies HTML document
traversing, event handling, animating, and
Ajax interactions for rapid web
development. jQuery is designed to change
the way that you write JavaScript.
Moretto Carlo – www.morettocarlo.eu ts.eestec.it

4. Toastr: JS notification
https://github.com/CodeSeven/toastr
Sample:
• toastr.warning(‘Warning!') ;
• toastr.success('Have fun storming the
castle!', 'Miracle');
• toastr.error(‘Please check your data‘);
Moretto Carlo – www.morettocarlo.eu ts.eestec.it

5. Knockout
http://knockoutjs.com/
Knockout is a Javascript library that
allows developers to create
rich, responsive display and editor user
interfaces with a clean underlying data
model.
Moretto Carlo – www.morettocarlo.eu ts.eestec.it

6. Features
• Declarative bindings
• Automatic UI refresh (when the data
model's state changes, the UI
updates automatically)
• Dependency tracking
• Templating
Moretto Carlo – www.morettocarlo.eu ts.eestec.it

7. MVVM -Model View ViewModel
MVVM facilitates a clear
separation of the development of
the graphical user interface
(either as markup language or
GUI code) from the development
of the business logic or back end
logic known as the model.
Moretto Carlo – www.morettocarlo.eu ts.eestec.it

8. Example
View (HTML)
<p>First name: <input data-bind="value:
firstName" /></p>
<p>Last name: <input data-bind="value:
lastName" /></p>
<h2>Hello, <span data-bind="text: fullName">
</span>!</h2>
View Model (Javascript)
function ViewModel() {
this.firstName = ko.observable(‘Mario’);
this.lastName = ko.observable(‘Rossi’);
this.fullName = ko.computed(function() {
return this.firstName() + " " +
this.lastName();
}, this); }
ko.applyBindings(new ViewModel());
Moretto Carlo – www.morettocarlo.eu ts.eestec.it

9. Example
• Control Type
knockoutjs.com/examples/controlTypes.html
• Observable Arrays
knockoutjs.com/documentation/observableArrays.html
• Cart Editor
knockoutjs.com/examples/cartEditor.html
Moretto Carlo – www.morettocarlo.eu ts.eestec.it

10. Download and savethe data
Download Save
$.getJSON("/api/yyy?par=zzz", $.ajax({
function (data) { type: "POST",
viewModelJs = data; url: "/api/yyy?param=zzz",
viewModel = data: dataJs,
addComputed(viewModelJs); success: function (data) {
toastr.success(‘:-)');
ko.mapping.fromJS(viewModelJs); },
error: function () {
ko.applyBindings(viewModel);
toastr.error(‘:-(');
})
}
});
});
Moretto Carlo – www.morettocarlo.eu ts.eestec.it

11. Usefullinks
• https://github.com/CodeSeven/KoLite -
asyncCommand, activity, dirtyFlag
• http://www.knockmeout.net - knockout tutorial
• https://github.com/ericmbarnard/Knockout-Validation -
knockout validation
Moretto Carlo – www.morettocarlo.eu ts.eestec.it

12. Source Control
Moretto Carlo – www.morettocarlo.eu ts.eestec.it

13. Source Control
• TFS
• SVN
• Git
• Mercurial
Moretto Carlo – www.morettocarlo.eu ts.eestec.it

14. SVN
Compatible successor to the widely
used Concurrent Versions System (CVS):
• Versioning of directories
• Atomic commits
• Metadata versioning
• Abstraction from the network layer
Moretto Carlo – www.morettocarlo.eu ts.eestec.it

15. Git
+ Dramatic increase in operation speed
+ Cheap branch operations
+ Full history tree available offline
+ Distributed, peer-to-peer model
- Learning curve for those used to SVN
- Not optimal for single developers
- Limited Windows support compared to Linux
Moretto Carlo – www.morettocarlo.eu ts.eestec.it

16. Mercurial
+ Easier to learn than Git
+ Better documentation
+ Distributed model
- No merging of two parents
- Extension-based rather than scriptability
- Less out of the box power
Moretto Carlo – www.morettocarlo.eu ts.eestec.it

17. Useful links
• http://biz30.timedoctor.com/git-mecurial-and-cvs-
comparison-of-svn-software/ - git vs mercurial vs cvs
• http://blogs.atlassian.com/2012/02/mercurial-vs-git-
why-mercurial/ - command line git, mercurial
• http://betterexplained.com/articles/intro-to-distributed-
version-control-illustrated/ - Intro to Distributed Version
Control
• https://github.com/ - github
• http://codeplex.com/ - codeplex
• https://bitbucket.org/ - bitbuket
• http://code.google.com/intl/it/ - google code
Moretto Carlo – www.morettocarlo.eu ts.eestec.it

18. Contacts
Email: moretto.carlo@outlook.com
Website: www.morettocarlo.eu
EESTEC: ts.eestec.it
Moretto Carlo – www.morettocarlo.eu ts.eestec.it