Codemotion 2013 - Designing complex applications using html5 and knockoutjs

Fabio Franzini
Designing complex applications using HTML5 and
KnockoutJS

fabio@fabiofranzini.com - @franzinifabio

About Me
Fabio franzini fabio@fabiofranzini.com - @franzinifabio

 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 9 years experience in IT as a software engineer

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

Agenda

1. Introduction
2. HTML5
3. JavaScript and Client Side Frameworks
4. Server Side Tools
5. Multiplatform
6. Demo

Introduction

What is the keys to create complex applications in javascript
without becoming crazy?

1. Write clean code!!
2. Modularization and Reuse of code!!
3. Use frameworks or tools that simplify the work!!

Why HTML5?

• Cross Browser
• Cross Platform
• W3C Standards
• All modern browsers and mobile devices supports
HTML5
• Rich set of controls and APIs

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

Modularize your code using the module pattern!

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

List of other Powerfull JavaScript FX

• AmplifyJs
• UnderscoreJs
• LinqJs
• DurandalJs
• BreezeJS

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.

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

DurandalJs

Durandal is small JavaScript framework designed to make building Single Page Applications
(SPAs) simple and elegant. We didn't try to re-invent the wheel. Durandal is built on libs you know
and love like jQuery, Knockout and RequireJS. There's little to learn and building apps feels
comfortable and familiar.

• Clean MV* Architecture
• JS & HTML Modularity
• Simple App Lifecycle
• Eventing, Modals, Message Boxes, etc.
• Navigation & Screen State Management
• Consistent Async Programming w/ Promises
• App Bundling and Optimization
• Use any Backend Technology
• Built on top of jQuery, Knockout & RequireJS
• Integrates with other libraries such as SammyJS & Bootstrap
• Make jQuery & Bootstrap widgets templatable and bindable (or build your own widgets).

DurandalJs – Demo

DEMO
DurandalJs

BreezeJs

Breeze is a library for rich client applications written in HTML and JavaScript.
It concentrates on the challenge of building and maintaining highly responsive, data-intensive applications in which users
search, add, update, and view complex data from different angles as they pursue solutions to real problems in real time.

Features include:
• Rich queries using a LINQ-like query syntax
• Client-side caching
• Change tracking
• Validation
• Pluggable back-end
• Full integration with the Entity Framework.
• Supports WebAPI and OData back-ends.
• Works with NoSQL, non-.NET, and SOA back-ends
• Data management
• Batched saves
• Library and Tooling support
• Out-of-box support for Knockout, Angular, and Backbone.
• TypeScript support for compile-time type checking, classes, interfaces, and inheritance.
• IntelliSense support for Visual Studio 2012.
• RequireJS-enabled for modular applications.
• Open API that allows additional front or back-ends to be plugged in.

BreezeJs

BreezeJs– Demo

DEMO
BreezeJs

Server Side Tools

• TypeScript
• ScriptSharp

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

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.

Package Apps

• Apache Cordova
• AppJs

Apache Cordova (PhoneGap)

Is a platform for building native mobile applications using HTML, CSS
and JavaScript
• Pros
– The Power of HTML5
– Build native App
– Interact with Device API’s
• Conts
– Performance of WebBrowser
Control on target device…

AppJs

AppJS is an SDK to develop desktop applications using Node.js melded
with Chromium.

You get all the following in one package:
• JS, HTML5, CSS, SVG, WebGL — by Chromium
• mature HTTP/HTTPS servers and client APIs — by Node.js
• filesystem, DNS, cryptography, subprocesses, OS APIs — by Node.js
• sandboxed code execution environements, virtual machines — by Node.js
• tools for exposing native C++ bindings to JavaScript — by Node.js

Q&A

;-)
Questions & Answer time!

Codemotion 2013 - Designing complex applications using html5 and knockoutjs

Recomendados

Recomendados

Mais conteúdo relacionado

Mais procurados

Mais procurados (20)

Semelhante a Codemotion 2013 - Designing complex applications using html5 and knockoutjs

Semelhante a Codemotion 2013 - Designing complex applications using html5 and knockoutjs (20)

Mais de Fabio Franzini

Mais de Fabio Franzini (6)

Último

Último (20)

Codemotion 2013 - Designing complex applications using html5 and knockoutjs