jquery mobile deep dive

Download jQuery Mobile Deep Dive

Post on 08-May-2015

1.906 views

Category:

Technology

5 download

Embed Size (px)

DESCRIPTION

jQuery Mobile Deep Dive shows you how to create single page web apps that look and behave like native ones. We use JavaScript and open source libraries like jQuery, underscore, and backbone. And explore advanced topics like unit testing and performance optimization.

TRANSCRIPT

  • 1.jQuery Mobile Deep Dive 7 September 2013 Culver City, California USA Saturday, September 7, 13

2. Google Maps Full Throttle Learn the tips and tricks of the worlds premier mapping app 21 September 2013 Irvine, California USA http://bit.ly/156Mr5C Saturday, September 7, 13 3. Want more? Follow me for more tutorials and source code. @therockncoder Saturday, September 7, 13 4. Source code for my tutorials hosted on GitHub @ https://github.com/Rockncoder Saturday, September 7, 13 5. Before We Begin This class will move fast The source code is yours to keep The slides are available for download Saturday, September 7, 13 6. What Are We Going To Do? We are going to learn about jQuery Mobile by examining a working application.We arent going to decompose each line of code, instead we will examine each major area of functionality. Saturday, September 7, 13 7. Coffee Coffee+ jQuery Mobile Backbone Responsive Design Templates Saturday, September 7, 13 8. jQuery & jQuery Mobile jQuery 1.9.x jQuery Mobile 1.3.2 released on July 19th jQuery Mobile 1.4 which will support jQuery 2.0, coming soon Saturday, September 7, 13 9. Memory Management Saturday, September 7, 13 10. Memory Management Tips Globals are bad Use functions for information hiding Saturday, September 7, 13 11. Globals are bad Try to use only one global variable Remember: JS objects can be modied at runtime Use var app = app || {}; Saturday, September 7, 13 12. Information Hiding JS lacks classes or other information One alternative is to wrap code in anonymous functions Saturday, September 7, 13 13. Performance Optimization Saturday, September 7, 13 14. The fastest code is the code which is never run. Saturday, September 7, 13 15. Performance Optimization JavaScript jQuery HTML Saturday, September 7, 13 16. JavaScript Dene local variables Be careful with closures Accessing object properties and array items is slower than variables Avoid for-in loops Saturday, September 7, 13 17. jQuery Dont use .live() Use $.mobile.activePage Use preventDefault() Cache selector Know when not to use jQuery Saturday, September 7, 13 18. HTML Copy HTML collections into JS arrays Avoid accessing the DOM Use CSS classes not styles Saturday, September 7, 13 19. Templates Saturday, September 7, 13 20. Templates Think of a template like a cookie cutter Fill it with data, and it produces HTML Templates can be used on the server or on the client There are many templating engines Saturday, September 7, 13 21. Templating Engines Underscore Handlebars Jade dust (LinkedIn) http://garann.github.io/template-chooser/ Saturday, September 7, 13 22. Handlebars Create a template in a script tag Compile template in JS Render template with data Saturday, September 7, 13 23. Looping Handlebars has a built helper named, each, for looping else can be used with each for when no data is returned @index is the current loop index @key is the current object Saturday, September 7, 13 24. Conditional The if helper conditionally renders a block else is available for falsy values unless inverses the logic of the if Saturday, September 7, 13 25. Pre-compilation Precompile templates at application startup for improved performance later Can also ship precompiled templates using command line, node based tools Saturday, September 7, 13 26. Helpers Handlebars allows for the creation of JS helper functions These handlers make it possible to extend Handlebars functionality Saturday, September 7, 13 27. MV* Frameworks Saturday, September 7, 13 28. MV* Frameworks MV* Frameworks give an application structure It is very easy to create spaghetti code in JS M = model V = controller * = something else, like routing Saturday, September 7, 13 29. MV* & jQuery Mobile jQuery Mobile and most frameworks dont get along well The main reason is routing. Both JQM and MV* want to control the routes Saturday, September 7, 13 30. URL Routing URL are an invaluable part of the internet Users are use to sharing them They provide an easy mechanism to save state in an otherwise stateless environment Saturday, September 7, 13 31. Routing It is better for the MV* to handle routing To stop JQM from handling routing 26 34 Saturday, September 7, 13 32. MV* Frameworks Angular.js, from Google Ember.js, based on SproutCore Backbone.js, and many more http://todomvc.com/ Saturday, September 7, 13 33. Backbone.js A lightweight JS library which ads structure to your client side code From the creator of Underscore Very small - 6.3k minied and gzipped Saturday, September 7, 13 34. Small and Fast Ember.js = 56k minied Angular.js = 81kb minied http://jsperf.com/angular-vs-knockout-vs- ember/173 Saturday, September 7, 13 35. The Nickel Tour Models Collections Views Routes Saturday, September 7, 13 36. The Happy Path Use extend to create a class Use built in methods like initialize Once the class is dened, use new to instantiate an object Classes begins with upper case Objects begins with lower case Saturday, September 7, 13 37. Models Backbone.Model.extend() defaults allows for the creation of default values Saturday, September 7, 13 38. Collections Backbone.Collection.extend() Use model to dene the model of the collection Use url to dene a restful api Saturday, September 7, 13 39. Views Backbone.View.extend() Use the initialize method run handler code which is executed once, like compiling templates Use the render method to display the view Saturday, September 7, 13 40. Routes Backbone.Router.extend() Normally only one route per app Backbone.history.Start() tells BB to begin monitoring the URL Saturday, September 7, 13 41. Unit Testing Saturday, September 7, 13 42. Unit Testing Many unit testing frameworks are available QUnit, from the jQuery Team YUITest, fromYahoo Jasmine, from Pivotal Labs Mocha Saturday, September 7, 13 43. Unit Testing Tips Be sure to test logic Write tests before xing bugs Never stop running test Refactor the tests, when your refactor the code Saturday, September 7, 13 44. QUnit Probably the easiest one to learn Used to test all of the jQuery projects Saturday, September 7, 13 45. Custom Attributes Saturday, September 7, 13 46. Custom Attributes A custom attribute is a non-standard attribute added to a tag to convey some information HTML has always supported custom attributes HTML5 makes the support explicit instead of implicit Saturday, September 7, 13 47. data-* The ofcial way of creating custom attributes is with data- Recommended is: data-- example: data-rnc-listingId Saturday, September 7, 13 48. getNamedItem() HTML, aka the DOM, includes the getNamedItem() method Returns value of the attribute node with the specied name /* set a click event on each row */ $(".listing").off().on("click", function () { app.CurrentListing = this.attributes.getNamedItem("data-rnc-listingid").value; }); Saturday, September 7, 13 49. TheViewport Saturday, September 7, 13 50. Meta tags meta tag is an element which is used to provide structured metadata about a web page They can be used to specify page description, keywords, and instructions Always in the head section 5 dened attributes Saturday, September 7, 13 51. Meta Tag Attributes name, the name of the meta tag content, information for the reader http-equiv, character encoding, auto refresh scheme, species scheme to interpret content (not support in HTML5) charset, added in HTML5 Saturday, September 7, 13 52. Examples CC+ Saturday, September 7, 13 53. Viewport A special meta tag used to provide information about the device's display Saturday, September 7, 13 54. Viewport Parameters width, the width of the viewport in pixels initial-scale, the zoom level when the page loads maximum-scale, the max zoom level minimum-scale, the min zoom level user-scalable, if the user can change zoom Saturday, September 7, 13 55. Tips and Tricks There is no standard covering the viewport Apple probably has the best docs Type carefully, no error checking on viewport Use the viewport standardize your apps screen size across different devices Saturday, September 7, 13 56. Responsive Design Saturday, September 7, 13 57. Media Queries The workhorse of responsive design A media query is a media type and at least one expression that limits the style sheets' scope @media screen and (min-width: 480px) and (orientation:portrait) { } Saturday, September 7, 13 58. Media Query by the Piece The media query begins with @media then a media type, like screen, all, print, braille, etc You can add logical operators like: and, not, and only There is also the comma separated list which behaves like an or operator Saturday, September 7, 13 59. jQuery Mobile Features Grids, self sizing columns which dynamically resize themselves when the size of the page changes Tables, added with version 1.3.0 Panels, ala Facebook, a panel, usually options, reveals itself when an icon is clicked Saturday, September 7, 13 60. Minication Saturday, September 7, 13 61. Why? Developers using other languages rarely think of the size of their code. But client side JavaScript is different. Minifying JavaScript can dramatically reduce its size and radically reduce page load time. Saturday, September 7, 13 62. How to Minify By Hand Using an app Saturday, September 7, 13 63. By Hand Saturday, September 7, 13 64. Using an App packer, http://dean.edwards.name/packer/ Microsoft Ajax Minier, http:// ajaxmin.codeplex.com/ YUI Compressor, http://yui.github.io/ yuicompressor/ Google Closure Compiler, http://closure- compiler.appspot.com/home Saturday, September 7, 13 65. In Practice Hand minication is fraught with danger - code is hard to read and grows increasingly fragile Using a web site is good for an example but not in practice, too much labor Usually done via a command line tool, during build or on page request Satur