: HTML5, JavaScript, LESS and jquery Shawn Wildermuth One of the Minds, Wilder Minds LLC Microsoft MVP @shawnwildermuth http://wilderminds.com
What it was like <html> <head> <script type="text/javascript"> function oninit() { var obj = document.getelementbyid("foo"); foo.display = "block"; } </script> <head> <body onload="oninit()"> <div id="foo" style="display: none" height="100px"> <font size="3" color="red">hello World</font> </div> </body>
Whole New World? Overwhelming Amount of Chatter jquery Node.js JSLint JSFiddle Knockout Backbone Mustache Jasmine LESS SASS Comet SignalR GIT Mercurial Et al.
Modernize Your Web Development Client-side Development Do More in the Browser Abandon Post-Back and ViewState Client-side Network Calls are here to stay Separate Concerns Don t Comingle Markup, Design and Code
Structuring Projects Two kinds of JavaScript in a project Framework code (e.g. jquery) Your code (e.g. view specific code) Separate these in your project Style Sheets Your JavaScript Their JavaScript
Structuring Projects Typically View is composed of: Markup (i.e. View) Design (i.e. CSS) Code (i.e. JavaScript)
Demo
JavaScript You don t have to learn it E.g. Coffeescript, Script#, TypeScript But you should Even these languages build JavaScript At the end of the day you ll need to debug Not everyone agrees with me but I m right ;)
Types Primitives JavaScript has basic types "Value Types" boolean string number "Reference Type" Object Array "Delegate Type" function Special "undefined"
Language Basics Type Coalescing JavaScript Wants to Coalesce Values // JavaScript "test " + "me" // test me "test " + 1 // test 1 "test " + true // test true "test " + (1 == 1) // test true 100 + "25" // 10025
Language Basics Equality uses Coalescing Equality/NotEqual (==,!=) // JavaScript "hello" == "hello"; // true 1 == 1; // true 1 == "1"; // true
Language Basics JavaScript's Identically Equality Operators Determines equality without coalescing // JavaScript "hello" == "hello"; // true 1 == 1; // true 1 == "1"; // true 1 === "1"; // false 1!== "1"; // true 1 === 1.000000000000001; // false 1 === 1.0000000000000001; // true
Dynamic Types Object Literals Shortcut for creating data structures // JavaScript var data = { name: "hello", "some value": 1 }; var more = { "moniker": "more data", height: 6.0, subdata: { option: true, flavor: "vanilla" } };
Dynamic Types Array Literals Shortcut for creating collections // JavaScript var array = [ "hello", "goodbye" ]; var coll = [{ "moniker": "more data", height: 6.0, subdata: { option: true, flavor: "vanilla" } }];
Dynamic Types Malleability Can add members on the fly // JavaScript var cust = { name: "Shawn", "company name": "Wilder Minds" }; cust.phone = "404-555-1212"; cust.call = function () { var tocall = this.phone; };
Demo
"Classes" in JavaScript No such thing as a "Class" in JavaScript But you can mimic them with some effort // JavaScript function Customer(name, company) { this.name = name; this.company = company; } var cust = new Customer("Shawn", "Wilder Minds"); var name = cust.name;
"Classes" in JavaScript Member Functions Work Fine // JavaScript function Customer(name, company) { this.name = name; this.company = company; this.sendemail = function (email) {... }; } var cust = new Customer("Shawn", "Wilder Minds"); cust.sendemail("shawn@foo.com");
"Classes" in JavaScript Need Everything be Public? Nope closures to the rescue! // JavaScript function Customer(name, company) { // public this.name = name; this.company = company; // non-public (e.g. private) var mailserver = "mail.google.com"; } this.sendemail = function (email) { sendmailviaserver(mailserver); };
The Prototype Object Centerpiece of the object story in JavaScript Each 'type' has a prototype object Just an object (e.g. can add properties to it) All instances of an 'type' shares the members of the prototype
Improving JavaScript "Classes" Sharing a Function That way each instance doesn't have it's own copy // JavaScript function Customer(name, company) { this.name = name; this.company = company; } // Works Gives but access no access to each to instance private/member of Customer data Customer.send Customer.prototype.send = function = (email) function {... (email) }; {... }; var cust = new Customer("Shawn"); cust.send("shawn@foo.com"); // WORKS
Demo
Structuring JavaScript Most JavaScript code is either: Module: Just an Object Class: Factory for Objects // JavaScript var gamesearcher = { findgamebygenre: function (genrename) {... } }; var results = gamesearcher.findgamebygenre("shooter"); // JavaScript function Customer(name, company) { this.name = name; this.company = company; } var c = new Customer("Shawn", "Wilder Minds LLC");
Asynchronous Module Definition Modularization Require.js http://requirejs.org/ Dependency Injection for JavaScript
Demo
jquery jquery is Key Ubiquitous DOM Manipulation (et al.) Plug-in Architecture Simplifies Cross Browser Coding Game Changer
jquery Selectors $ is jquery Based on CSS Selector Syntax E.g. $( div ) Returns results of query (get it?) Operations work on the set of results (e.g. all)
Demo
jquery Plugins jquery Supports Rich Ecosystem Thousands Which is Good And is Bad
jquery Plugins
jquery Plugins Plugins I use jquery UI FancyBox Smart Slider Joyride TagIt (the right one)
Demo
Why Data Binding? Writing Code to push/pull data is tedious Data Binding Lets the UI React to Data Better Separation of Markup and Data/Code
What is KnockoutJS? An Open Source Data Binding Library Maintained by Steve Sanderson (MSFT) But not a MS product
Demo
A Better CSS Declarative Nature Means Easy To Write Editor Inheritance becomes the norm Duplication leads to errors
Better CSS LESS - Dynamic Style Sheet Language Compiles to CSS Introduces programming features to CSS Looks and Feels like CSS I.e. all CSS is valid LESS
Demo
Debugging Browser Based Debuggers IE, Firefox, Chrome and Safari All Fine But I use FireBug mostly Clean Browser (I only use Firefox for dev) Most Mature Tools
Demo
Mobile Development The Problem Device Size Screen Resolution Text Size Horizontal Scrolling Sucks Touch versus Click
Mobile Development Mobile Web Site Mobile Specific Site E.g. m.facebook.com Mobile Views Render Pages for Mobile Based on Sniffing URLs are the same, but the result is different Responsive Design Use CSS to adapt
Responsive Design Media Queries Works because of cascading rules Later rules over-rule (pun!) earlier rules More specific rules overrule earlier rules // your.css #main { width: 989px; } @media only screen and (min-width: 768px) and (max-width: 959px) { #main { width: 760px; } } @media only screen and (max-width: 767px) { #main { width: 470px; } }
Demo
Takeaways This demo and slides will be available: http://wildermuth.com Important Links http://jquery.com http://lesscss.org http://requirejs.org My Company http://wilderminds.com