Modern Web Development:

Size: px

Start display at page:

Download "Modern Web Development:"

Walter White
10 years ago
Views:

1 : HTML5, JavaScript, LESS and jquery Shawn Wildermuth One of the Minds, Wilder Minds LLC Microsoft

4 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>

display = "block"; } </script> <head> <body onload="oninit()"> <div

5 Whole New World? Overwhelming Amount of Chatter jquery Node.js JSLint JSFiddle Knockout Backbone Mustache Jasmine LESS SASS Comet SignalR GIT Mercurial Et al.

6 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

and ViewState Client-side Network Calls are here to

7 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

8 Structuring Projects Typically View is composed of: Markup (i.e. View) Design (i.e. CSS) Code (i.e. JavaScript)

9 Demo

10 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 ;)

these languages build JavaScript At the end of the day

11 Types Primitives JavaScript has basic types "Value Types" boolean string number "Reference Type" Object Array "Delegate Type" function Special "undefined"

12 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 "25" // 10025

13 Language Basics Equality uses Coalescing Equality/NotEqual (==,!=) // JavaScript "hello" == "hello"; // true 1 == 1; // true 1 == "1"; // true

14 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 === ; // false 1 === ; // true

"hello"; // true 1 == 1; // true 1 == "1"; // true 1 === "1"; //

15 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" } };

16 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" } }];

17 Dynamic Types Malleability Can add members on the fly // JavaScript var cust = { name: "Shawn", "company name": "Wilder Minds" }; cust.phone = " "; cust.call = function () { var tocall = this.phone; };

18 Demo

19 "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;

20 "Classes" in JavaScript Member Functions Work Fine // JavaScript function Customer(name, company) { this.name = name; this.company = company; this.send = function ( ) {... }; } var cust = new Customer("Shawn", "Wilder Minds"); cust.send ("[email protected]");

company = company; this.sendemail = function (email) {.

21 "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.send = function ( ) { sendmailviaserver(mailserver); };

22 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.

23 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 = ( ) function {... ( ) }; {... }; var cust = new Customer("Shawn"); cust.send("[email protected]"); // WORKS

24 Demo

Structuring JavaScript Most JavaScript code is either: Module: Just an Object Class: Factory for Objects // JavaScript var gamesearcher = { findgamebygenre: function (genrename) {.

25 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");

26 Asynchronous Module Definition Modularization Require.js Dependency Injection for JavaScript

27 Demo

28 jquery jquery is Key Ubiquitous DOM Manipulation (et al.) Plug-in Architecture Simplifies Cross Browser Coding Game Changer

29 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)

30 Demo

31 jquery Plugins jquery Supports Rich Ecosystem Thousands Which is Good And is Bad

32 jquery Plugins

33 jquery Plugins Plugins I use jquery UI FancyBox Smart Slider Joyride TagIt (the right one)

34 Demo

35 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

36 What is KnockoutJS? An Open Source Data Binding Library Maintained by Steve Sanderson (MSFT) But not a MS product

37 Demo

38 A Better CSS Declarative Nature Means Easy To Write Editor Inheritance becomes the norm Duplication leads to errors

39 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

40 Demo

41 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

42 Demo

43 Mobile Development The Problem Device Size Screen Resolution Text Size Horizontal Scrolling Sucks Touch versus Click

44 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.

45 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; only screen and (min-width: 768px) and (max-width: 959px) { #main { width: 760px; } only screen and (max-width: 767px) { #main { width: 470px; } }

46 Demo

47 Takeaways This demo and slides will be available: Important Links My Company

Art of Code Front-end Web Development Training Program

Art of Code Front-end Web Development Training Program Pre-work (5 weeks) Codecademy HTML5/CSS3 and JavaScript tracks HTML/CSS (7 hours): http://www.codecademy.com/en/tracks/web JavaScript (10 hours):