WebNet Conference 2012 - Designing complex applications using html5 and knockoutjs


Published on

  • Be the first to comment

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

WebNet Conference 2012 - Designing complex applications using html5 and knockoutjs

  1. 1. Designing complex applications using HTML5 and KnockoutJS Fabio Franzini @franzinifabio
  2. 2. Thanks to the sponsors
  3. 3. About Me Senior Consultant and Software Engineer MCT Trainer, MCPD Web Applications, MCTS SharePoint 2010/2007 Official Ignite Trainer for SharePoint 2013 & 2010 in Italy Web Stack Lover Over 8 years experience in IT as a software engineerBlog: www.fabiofranzini.comEmail: fabio@fabiofranzini.com
  4. 4. Agenda• Introduction• HTML5• JavaScript and Client Side Frameworks• Server Side Tools• Multiplatform• Demo
  5. 5. IntroductionWhat is the keys to create complex applicationsin javascript without becoming crazy?• Write clean code!!• Modularization and Reuse of code!!• Use frameworks or tools that simplify the work!!• Write the code as simple as possible!!
  6. 6. HTML5 and JavaScript allow you to do this? YES!! 
  7. 7. Why HTML5?• Cross Browser• Cross Platform• W3C Standards• All modern browsers and mobile devices supports HTML5• Rich set of controls and APIs• What else? 
  8. 8. JavaScript is…• From Wikipedia: – A prototype-based scripting language that is dynamic, weakly typed and has first-class functions. – A multi-paradigm language, supporting object- oriented, imperative, and functional programming styles.• In short, a big mess for most developers :)
  9. 9. …Constructor and PrototypeKeep in mind that Javascript is a class-less programminglanguage, but these can be simulated usign functions.function Car ( model, color, year ){ this.model = model; this.color = silver; this.year = 2012; this.getInfo = function(){ return this.model + + this.year; } }Car.prototype.toString = function() { return this.model + “ did “ + this.miles + “ miles”;};var civic = new Car( "Honda Civic" , "blue", 20000 );
  10. 10. Module Pattern• Modularize your code!• Group several related elements such as classes, singletons, methods, globally used, into a simple object.• It fakes classes in Javascript.• Pros – Encapsulation, it gives us an API (public and private attributes or methods) – Avoid names conflicting with other function – Easier debugging (public functions are named)• Cons: – Difficult to refactor.
  11. 11. Module Pattern Example var testModule = ( function() { var counter = 0; var privateMethod = function() { // do something…. } return { incrementCounter: function() { return counter++; }, resetCounter: function() { counter = 0; } };})();
  12. 12. Revealing Module PatternCoined by by Christian Heilmann (Mozilla Foundation)• Pros – Sintax more consistent and easy to read – Easier to refactor var myRevealingModule = ( function() { var name = John Smith; function updatePerson() { name = John Smith Updated; } function setPerson (value) { name = value; } return { set: setPerson }; }());
  13. 13. RequireJs for implement Module Pattern• RequireJs is a JavaScript file and module loader.• Using a modular script loader like RequireJS will improve the speed and quality of your code![myPage.html]<script data-main="scripts/main" src="scripts/require-jquery.js"></script>…..[main.js]require(["jquery", "jquery.alpha", "jquery.beta"], function($) { //the jquery.alpha.js and jquery.beta.js plugins have been loaded. $(function() { $(body).alpha().beta(); });});
  14. 14. Another Pattern• MV* Pattern – The MV* Pattern allows to separate the functionalities and introduce greater flexibility to customize the presentation of items – Provides a standard model interface to allow a wide range of data sources to be used with existing item views – Different implementation: MVC, MVP, MVVM• Observer (Pub/Sub) Pattern – It is a design pattern which allows an object (known as a subscriber) to watch another object (the publisher) – Loose coupling, ability to break down our applications into smaller, general manageability
  15. 15. KnockoutJs• Model: It uses the Observable property that can notify subscribers about changes and automatically detect dependencies• View: A KnockoutJs View is simply a HTML document with declarative bindings to link it to the ViewModel• ViewModel: The ViewModel can be considered a specialized Controller that acts as a data converter. It changes Model information into View information, passing commands from the View to the Model.
  16. 16. KnockoutJs ViewModelfunction AppViewModel() { this.firstName = ko.observable("Bert"); this.lastName = ko.observable("Bertington"); this.fullName = ko.computed(function() { return this.firstName() + " " + this.lastName(); }, this); this.capitalizeLastName = function() { var currentVal = this.lastName(); this.lastName(currentVal.toUpperCase()); };}// Activates knockout.jsko.applyBindings(new AppViewModel());
  17. 17. KnockoutJs View<p>First name: <input data-bind="value: firstName" /></p><p>Last name: <input data-bind="value: lastName" /></p><p>Full name: <strong data-bind="text: fullName"></strong></p><button data-bind="click: capitalizeLastName">Go caps</button>
  18. 18. SammyJSSammy.js is a tiny JavaScript framework developed to ease thepain and provide a basic structure for developing JavaScriptapplications.// define a new Sammy.Application bound to the #main element selectorSammy(#main, function() { // define a get route that will be triggered at #/path this.get(#/path, function() { // this context is a Sammy.EventContext // this.$element() is equal to $(#main) this.$element().html(A new route!); });}).run();
  19. 19. DEMO
  20. 20. List of other Powerfull JavaScript FX• AmplifyJs• UnderscoreJs• LinqJs
  21. 21. AmplifyJsIs a set of components designed to solve common web application problemswith a simplistic API like – amplify.request provides a clean and elegant request abstraction for all types of data, even allowing for transformation prior to consumption. – amplify.publish/subscribe provides a clean, performant API for component to component communication. – amplify.store takes the confusion out of HTML5 localStorage. It doesnt get simpler than using amplify.store(key, data)! It even works flawlessly on mobile devices.
  22. 22. AmplifyJs – requestamplify.request.define( "ajaxRESTFulExample", "ajax", { url: "/myRestFulApi/{type}/{id}", type: "GET"})……// later in codeamplify.request( "ajaxRESTFulExample", { type: "foo", id: "bar" }, function( data ) { // /myRESTFulApi/foo/bar was the URL used data.foo; // bar });
  23. 23. AmplifyJs – pub/subamplify.subscribe( "dataexample", function( data ) { alert( data.foo ); // bar});……// later in codeamplify.publish( "dataexample", { foo: "bar" } );
  24. 24. AmplifyJs - storeSupport for the following storage types are built into amplify.store and aredetected in the order listed LocalStorage SessionStorage GlobalStorage UserData IE 8+ IE 8+ Firefox 3.5+ Firefox 2+ Safari 4+ Safari 4+ Chrome Chrome Firefox 2+ IE 5 - 7 Opera 10.5+ Opera 10.5+ iPhone 2+ iPhone 2+ Android 2+ Android 2+
  25. 25. AmplifyJs – store//Store using .storeamplify.store( "storeExample1", { foo: "bar" } );amplify.store( "storeExample2", "baz" );...// retrieve the data later via the keyvar myStoredValue = amplify.store( "storeExample1" ), myStoredValue2 = amplify.store( "storeExample2" ), myStoredValues = amplify.store();//Store data explicitly with session storageamplify.store.sessionStorage( "explicitExample", { foo2: "baz" } );…// retrieve the data later via the keyvar myStoredValue2 = amplify.store.sessionStorage( "explicitExample" );myStoredValue2.foo2; // baz
  26. 26. UnderscoreJsUnderscore is a utility library that provides a lots of functionswithout extending any of the built-in JavaScript objects UnderscoreJs Functions Collection Arrays Functions Objects Utility Chaining •Each •First •Bind •Keys •Random •Chain •Map •Initial •BindAll •Values •uniqueId •Value •Reduce •Union •Wrap •Extend •Escape •Find •Etc… •Etc… •isEqual •Etc.. •Where •isEmpty •Any •Etc… •Etc…
  27. 27. linq.js - LINQ for JavaScript• implement all .NET 4.0 linq to object methods and extra methods• complete lazy evaluation• full IntelliSense support for VisualStudio• two versions: linq.js and jquery.linq.js (jQuery plugin)var jsonArray = [ { "user": { "id": 100, "screen_name": "d_linq" }, "text": "to objects" }, { "user": { "id": 130, "screen_name": "c_bill" }, "text": "g" }, { "user": { "id": 155, "screen_name": "b_mskk" }, "text": "kabushiki kaisha" }, { "user": { "id": 301, "screen_name": "a_xbox" }, "text": "halo reach" }];var queryResult = Enumerable.From(jsonArray) .Where(function (x) { return x.user.id < 200 }) .OrderBy(function (x) { return x.user.screen_name }) .Select(function (x) { return x.user.screen_name + : + x.text }) .ToArray();
  29. 29. ScriptSharpScript# is a free tool that generates JavaScript bycompiling C# source code.• The goal is to enable you to leverage the productivity of C#, the Visual Studio IDE, and .NET tools and apply them to your HTML5 development.• The Script# compiler is a development/build-time tool that takes a pragmatic approach to generating script for use in real-world script- based applications, without introducing any unnecessary layers of abstraction.
  30. 30. TypeScriptTypeScript is a typed superset of JavaScript thatcompiles to plain JavaScript.• TypeScript starts from the syntax and semantics that millions of JavaScript developers know today.• You can use existing JavaScript code, incorporate popular JavaScript libraries, and be called from other JavaScript code.• Compiles to clean, simple JavaScript code which runs on any browser, in Node.js, or in any other ES3-compatible environment.
  31. 31. TypeScript – Class ExampleTypeScript JavaScriptclass Greeter { var Greeter = (function () { greeting: string; function Greeter(message) { constructor (message: string) { this.greeting = message; this.greeting = message; } } Greeter.prototype.greet = greet() { function () { return "Hello, " + this.greeting; return "Hello, " + this.greeting; } };} return Greeter; })();var greeter = new Greeter("world"); var greeter = new Greeter("world");alert(greeter.greet()); alert(greeter.greet());
  32. 32. How to generate apps from HTML5 and JavaScript?MULTIPLATFORM
  33. 33. PhoneGap / CordovaIs a platform for building native mobileapplications using HTML, CSS and JavaScriptSupported Platformsand Features
  34. 34. PhoneGap / Cordova• Pros – The Power of HTML5 – Build native App – Interact with Device API’s• Conts – Performance of WebBrowser Control on target device…
  35. 35. DEMO
  36. 36. Please rate this sessionScan the code, go online, rate this session