Designing complex applications using HTML5 and KnockoutJS

Fabio Franzini

@franzinifabio

Thanks to the sponsors

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

DEMO

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 codeamplify.request( "ajaxRESTFulExample",

{type: "foo",id: "bar"

},function( data ) {

// /myRESTFulApi/foo/bar was the URL useddata.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

IE 8+

Firefox 3.5+

Safari 4+

Chrome

Opera 10.5+

iPhone 2+

Android 2+

SessionStorage

IE 8+

Firefox 2+

Safari 4+

Chrome

Opera 10.5+

iPhone 2+

Android 2+

GlobalStorage

Firefox 2+

UserData

IE 5 - 7

//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

AmplifyJs – store

UnderscoreJs

Underscore is a utility library that provides a lots of functions without extending any of the built-in JavaScript objects

UnderscoreJs FunctionsCollection

•Each

•Map

•Reduce

•Find

•Where

•Any

•Etc…

Arrays

•First

•Initial

•Union

•Etc…

Functions

•Bind

•BindAll

•Wrap

•Etc…

Objects

•Keys

•Values

•Extend

•isEqual

•isEmpty

•Etc…

Utility

•Random

•uniqueId

•Escape

•Etc..

Chaining

•Chain

•Value

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

SERVER SIDE TOOLS

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

TypeScriptclass Greeter {

greeting: string;

constructor (message: string) {

this.greeting = message;

}

greet() {

return "Hello, " + this.greeting;

}

}

var greeter = new Greeter("world");

alert(greeter.greet());

JavaScriptvar Greeter = (function () {

function Greeter(message) {

this.greeting = message;

}

Greeter.prototype.greet =

function () {

return "Hello, " + this.greeting;

};

return Greeter;

})();

var greeter = new Greeter("world");

alert(greeter.greet());

MULTIPLATFORMHow to generate apps from HTML5 and JavaScript?

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…

DEMO

Please rate this session

Scan the code, go online, rate this session