The document discusses tools and frameworks for building complex applications using HTML5 and JavaScript. It begins with introductions and background on the speaker. The rest of the document outlines various topics: HTML5 and its benefits, JavaScript and patterns like modularity, client-side frameworks like KnockoutJS, server-side tools like TypeScript, packaging apps with Cordova or AppJS, and demonstrates some of the frameworks.
2. 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
3. Agenda
Fabio franzini fabio@fabiofranzini.com - @franzinifabio
1. Introduction
2. HTML5
3. JavaScript and Client Side Frameworks
4. Server Side Tools
5. Multiplatform
6. Demo
4. Introduction
Fabio franzini fabio@fabiofranzini.com - @franzinifabio
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!!
5. Why HTML5?
Fabio franzini fabio@fabiofranzini.com - @franzinifabio
• Cross Browser
• Cross Platform
• W3C Standards
• All modern browsers and mobile devices supports
HTML5
• Rich set of controls and APIs
6. JavaScript is…
Fabio franzini fabio@fabiofranzini.com - @franzinifabio
• 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 :)
7. Modularize your code using the module pattern!
Fabio franzini fabio@fabiofranzini.com - @franzinifabio
• 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
8. Module Pattern: Example
Fabio franzini fabio@fabiofranzini.com - @franzinifabio
var testModule = ( function() {
var counter = 0;
var privateMethod = function() {
// do something….
}
return {
incrementCounter: function() { return counter++; },
resetCounter: function() { counter = 0; }
};
})();
9. Revealing Module Pattern
Fabio franzini fabio@fabiofranzini.com - @franzinifabio
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 };
}());
10. RequireJs for implement Module Pattern
Fabio franzini fabio@fabiofranzini.com - @franzinifabio
• 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();
});
});
11. Another Pattern
Fabio franzini fabio@fabiofranzini.com - @franzinifabio
• 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
12. KnockoutJs
Fabio franzini fabio@fabiofranzini.com - @franzinifabio
• 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
15. List of other Powerfull JavaScript FX
Fabio franzini fabio@fabiofranzini.com - @franzinifabio
• AmplifyJs
• UnderscoreJs
• LinqJs
• DurandalJs
• BreezeJS
16. AmplifyJs
Fabio franzini fabio@fabiofranzini.com - @franzinifabio
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.
17. UnderscoreJs
Fabio franzini fabio@fabiofranzini.com - @franzinifabio
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…
19. DurandalJs
Fabio franzini fabio@fabiofranzini.com - @franzinifabio
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).
21. BreezeJs
Fabio franzini fabio@fabiofranzini.com - @franzinifabio
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.
24. Server Side Tools
Fabio franzini fabio@fabiofranzini.com - @franzinifabio
• TypeScript
• ScriptSharp
25. TypeScript
Fabio franzini fabio@fabiofranzini.com - @franzinifabio
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.
26. TypeScript – Simple Example
Fabio franzini fabio@fabiofranzini.com - @franzinifabio
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());
27. ScriptSharp
Fabio franzini fabio@fabiofranzini.com - @franzinifabio
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.
29. Apache Cordova (PhoneGap)
Fabio franzini fabio@fabiofranzini.com - @franzinifabio
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…
30. AppJs
Fabio franzini fabio@fabiofranzini.com - @franzinifabio
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