Codemotion 2013 - Designing complex applications using html5 and knockoutjs

4,425 views

Published on

Published in: Technology
1 Comment
0 Likes
Statistics
Notes
  • 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: http://www.slideshare.net/LucaDegliEsposti/il-tap-e-il-nuovo-click
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Be the first to like this

No Downloads
Views
Total views
4,425
On SlideShare
0
From Embeds
0
Number of Embeds
125
Actions
Shares
0
Downloads
20
Comments
1
Likes
0
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 andKnockoutJSfabio@fabiofranzini.com - @franzinifabio
  2. 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 engineerBlog: www.fabiofranzini.comEmail: fabio@fabiofranzini.com
  3. 3. Agenda Fabio franzini fabio@fabiofranzini.com - @franzinifabio1. Introduction2. HTML53. JavaScript and Client Side Frameworks4. Server Side Tools5. Multiplatform6. Demo
  4. 4. Introduction Fabio franzini fabio@fabiofranzini.com - @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 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. 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. 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. 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. 9. Revealing Module Pattern Fabio franzini fabio@fabiofranzini.com - @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 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. 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. 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
  13. 13. KnockoutJs ViewModel Fabio franzini fabio@fabiofranzini.com - @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 fabio@fabiofranzini.com - @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 fabio@fabiofranzini.com - @franzinifabio• AmplifyJs• UnderscoreJs• LinqJs• DurandalJs• BreezeJS
  16. 16. AmplifyJs Fabio franzini fabio@fabiofranzini.com - @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. – amplify.store takes the confusion out of HTML5 localStorage. It doesnt get simpler than using amplify.store(key, data)! It even works flawlessly on mobile devices.
  17. 17. UnderscoreJs Fabio franzini fabio@fabiofranzini.com - @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 fabio@fabiofranzini.com - @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 x.user.id < 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 fabio@fabiofranzini.com - @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 fabio@fabiofranzini.com - @franzinifabio DEMO DurandalJs
  21. 21. BreezeJs Fabio franzini fabio@fabiofranzini.com - @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 fabio@fabiofranzini.com - @franzinifabio
  23. 23. BreezeJs– DemoFabio franzini fabio@fabiofranzini.com - @franzinifabio DEMO BreezeJs
  24. 24. Server Side Tools Fabio franzini fabio@fabiofranzini.com - @franzinifabio• TypeScript• ScriptSharp
  25. 25. TypeScript Fabio franzini fabio@fabiofranzini.com - @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 fabio@fabiofranzini.com - @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 fabio@fabiofranzini.com - @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 fabio@fabiofranzini.com - @franzinifabio• Apache Cordova• AppJs
  29. 29. Apache Cordova (PhoneGap) Fabio franzini fabio@fabiofranzini.com - @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 fabio@fabiofranzini.com - @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 fabio@fabiofranzini.com - @franzinifabio ;-)Questions & Answer time!

×