WebNet Conference 2012 - Designing complex applications using html5 and knockoutjs

Designing complex applications
using HTML5 and KnockoutJS
Fabio Franzini
@franzinifabio

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 engineer

Blog: www.fabiofranzini.com
Email: fabio@fabiofranzini.com

Agenda
• Introduction
• HTML5
• JavaScript and Client Side Frameworks
• Server Side Tools
• Multiplatform
• Demo

Introduction
What is the keys to create complex applications
in 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!!

HTML5 and JavaScript allow you to do this?
YES!! 

Why HTML5?
• Cross Browser
• Cross Platform
• W3C Standards
• All modern browsers and mobile devices
supports HTML5
• Rich set of controls and APIs
• What else? 

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 :)

…Constructor and Prototype
Keep in mind that Javascript is a class-less programming
language, 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 );

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.

Module Pattern Example
var testModule = ( function() {
var counter = 0;
var privateMethod = function() {
// do something….
}
return {
incrementCounter: function() { return counter++; },
resetCounter: function() { counter = 0; }
};
})();

Revealing Module Pattern
Coined 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 };
}());

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();
});
});

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

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.

KnockoutJs ViewModel
function 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.js
ko.applyBindings(new AppViewModel());

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>

SammyJS
Sammy.js is a tiny JavaScript framework developed to ease the
pain and provide a basic structure for developing JavaScript
applications.
// define a new Sammy.Application bound to the #main element selector
Sammy('#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();

List of other Powerfull JavaScript FX
• AmplifyJs
• UnderscoreJs
• LinqJs

AmplifyJs
Is a set of components designed to solve common web application problems
with 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 doesn't
get simpler than using amplify.store(key, data)! It even works
flawlessly on mobile devices.

AmplifyJs – request
amplify.request.define( "ajaxRESTFulExample", "ajax", {
url: "/myRestFulApi/{type}/{id}",
type: "GET"
})
……
// later in code
amplify.request( "ajaxRESTFulExample",
{
type: "foo",
id: "bar"
},
function( data ) {
// /myRESTFulApi/foo/bar was the URL used
data.foo; // bar
}
);

AmplifyJs – pub/sub
amplify.subscribe( "dataexample", function( data ) {
alert( data.foo ); // bar
});

……

// later in code
amplify.publish( "dataexample", { foo: "bar" } );

AmplifyJs - store
Support for the following storage types are built into amplify.store and are
detected 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+

AmplifyJs – store
//Store using .store
amplify.store( "storeExample1", { foo: "bar" } );
amplify.store( "storeExample2", "baz" );
...
// retrieve the data later via the key
var myStoredValue = amplify.store( "storeExample1" ),
myStoredValue2 = amplify.store( "storeExample2" ),
myStoredValues = amplify.store();

//Store data explicitly with session storage
amplify.store.sessionStorage( "explicitExample", { foo2: "baz" } );
…
// retrieve the data later via the key
var myStoredValue2 = amplify.store.sessionStorage( "explicitExample" );
myStoredValue2.foo2; // baz

UnderscoreJs
Underscore is a utility library that provides a lots of functions
without 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…

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();

ScriptSharp
Script# is a free tool that generates JavaScript by
compiling 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.

TypeScript
TypeScript is a typed superset of JavaScript that
compiles 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.

TypeScript – Class Example
TypeScript JavaScript
class 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());

How to generate apps from HTML5 and JavaScript?

MULTIPLATFORM

PhoneGap / Cordova
Is a platform for building native mobile
applications using HTML, CSS and JavaScript

Supported Platforms
and Features

PhoneGap / Cordova
• Pros
– The Power of HTML5
– Build native App
– Interact with Device API’s
• Conts
– Performance of WebBrowser Control on target device…

Please rate this session
Scan the code, go online, rate this session

WebNet Conference 2012 - Designing complex applications using html5 and knockoutjs

More Related Content

What's hot (20)

Similar to WebNet Conference 2012 - Designing complex applications using html5 and knockoutjs (20)

More from Fabio Franzini (7)

WebNet Conference 2012 - Designing complex applications using html5 and knockoutjs