Codemotion 2013 - Designing complex applications using html5 and knockoutjs


Published on

Published in: Technology
1 Comment
  • Il Codemotion Roma è stato davvero grandioso, per chi si fosse perso il mio talk 'Best Practices Mobile Web' il link con tutte le slide è questo:
    Are you sure you want to  Yes  No
    Your message goes here
  • Be the first to like this

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

No notes for slide

Codemotion 2013 - Designing complex applications using html5 and knockoutjs

  1. 1. Fabio FranziniDesigning complex applications using HTML5 - @franzinifabio
  2. 2. About Me Fabio franzini - @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 engineerBlog: www.fabiofranzini.comEmail:
  3. 3. Agenda Fabio franzini - @franzinifabio1. Introduction2. HTML53. JavaScript and Client Side Frameworks4. Server Side Tools5. Multiplatform6. Demo
  4. 4. Introduction Fabio franzini - @franzinifabioWhat is the keys to create complex applications in javascriptwithout becoming crazy?1. Write clean code!!2. Modularization and Reuse of code!!3. Use frameworks or tools that simplify the work!!
  5. 5. Why HTML5? Fabio franzini - @franzinifabio• Cross Browser• Cross Platform• W3C Standards• All modern browsers and mobile devices supports HTML5• Rich set of controls and APIs
  6. 6. JavaScript is… Fabio franzini - @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. 7. Modularize your code using the module pattern! Fabio franzini - @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. 8. Module Pattern: Example Fabio franzini - @franzinifabio var testModule = ( function() { var counter = 0; var privateMethod = function() { // do something…. } return { incrementCounter: function() { return counter++; }, resetCounter: function() { counter = 0; } };})();
  9. 9. Revealing Module Pattern Fabio franzini - @franzinifabioCoined by Christian Heilmann (Mozilla Foundation)Pros – Sintax more consistent and easy to read – Easier to refactorvar myRevealingModule = ( function() { var name = John Smith; function updatePerson() { name = John Smith Updated; } function setPerson (value) { name = value; } return { set: setPerson };}());
  10. 10. RequireJs for implement Module Pattern Fabio franzini - @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. 11. Another Pattern Fabio franzini - @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. 12. KnockoutJs Fabio franzini - @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
  13. 13. KnockoutJs ViewModel Fabio franzini - @franzinifabiofunction 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());
  14. 14. KnockoutJs View Fabio franzini - @franzinifabio<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>
  15. 15. List of other Powerfull JavaScript FX Fabio franzini - @franzinifabio• AmplifyJs• UnderscoreJs• LinqJs• DurandalJs• BreezeJS
  16. 16. AmplifyJs Fabio franzini - @franzinifabioIs a set of components designed to solve common web applicationproblems 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. – takes the confusion out of HTML5 localStorage. It doesnt get simpler than using, data)! It even works flawlessly on mobile devices.
  17. 17. UnderscoreJs Fabio franzini - @franzinifabioUnderscore is a utility library that provides a lots of functions withoutextending 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…
  18. 18. linq.js - LINQ for JavaScript Fabio franzini - @franzinifabio• 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 < 200 }) .OrderBy(function (x) { return x.user.screen_name }) .Select(function (x) { return x.user.screen_name + : + x.text }) .ToArray();
  19. 19. DurandalJs Fabio franzini - @franzinifabioDurandal is small JavaScript framework designed to make building Single Page Applications(SPAs) simple and elegant. We didnt try to re-invent the wheel. Durandal is built on libs you knowand love like jQuery, Knockout and RequireJS. Theres little to learn and building apps feelscomfortable 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).
  20. 20. DurandalJs – DemoFabio franzini - @franzinifabio DEMO DurandalJs
  21. 21. BreezeJs Fabio franzini - @franzinifabioBreeze 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.
  22. 22. BreezeJsFabio franzini - @franzinifabio
  23. 23. BreezeJs– DemoFabio franzini - @franzinifabio DEMO BreezeJs
  24. 24. Server Side Tools Fabio franzini - @franzinifabio• TypeScript• ScriptSharp
  25. 25. TypeScript Fabio franzini - @franzinifabioTypeScript 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. 26. TypeScript – Simple Example Fabio franzini - @franzinifabio TypeScript 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());
  27. 27. ScriptSharp Fabio franzini - @franzinifabioScript# 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.
  28. 28. Package Apps Fabio franzini - @franzinifabio• Apache Cordova• AppJs
  29. 29. Apache Cordova (PhoneGap) Fabio franzini - @franzinifabioIs a platform for building native mobile applications using HTML, CSSand JavaScript• Pros – The Power of HTML5 – Build native App – Interact with Device API’s• Conts – Performance of WebBrowser Control on target device…
  30. 30. AppJs Fabio franzini - @franzinifabioAppJS is an SDK to develop desktop applications using Node.js meldedwith 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
  31. 31. Q&A Fabio franzini - @franzinifabio ;-)Questions & Answer time!