jQueryTO

Canada's Largest Javascript Conference

jQueryTO is the second largest JavaScript Conference in the World

700 attendees

2 days

With speakers from:

• JQuery
• Netflix
• rdio
• Mozilla
• Tumblr

How is this crazy thing going to work?

10 presenters

5 minutes each

with a Count down clock!

Reveal.js

The HTML presentaion framework

BY Hakim El Hattab / hakim.se

What is Reveal.js

HTML, JS, CSS Framework for creating beautiful cross platform presentations

with support for CSS 3D transformations

Degrades gracefully to support almost any browser desktop or mobile

Most of the presenters were using a forein presentation system

What is this thing?

Reveal.js!

What makes it special?

• No special software needed
• Truely portable and platform agnostic
• Easy to share
• No Powerpoint
• FREE!

• No special software needed
• truely portable and platform agnostic
• Easy to share
• No Powerpoint
• FREE!

Markdown

Not a developer?

don't like HTML

Reveal.js supports Markdown

Markdown is a way to write things in a natural way that gets marked down to HTML.

## Markdown support

For those of you who like that sort of thing.
Instructions and a bit more info available [here](https://github.com/hakimel/reveal.js#markdown).

You can export your presentation as a PDF

Just press add ?print-pdf to the URL

Fragments?

It

does

fragmented

views!

Just add class="fragment" to your element

Pretty Code

function linkify( selector ) {
  if( supports3DTransforms ) {

    var nodes = document.querySelectorAll( selector );

    for( var i = 0, len = nodes.length; i < len; i++ ) {
      var node = nodes[i];

      if( !node.className ) {
        node.className += ' roll';
      }
    }
  }
}

Courtesy of highlight.js.

Pause Mode

Press b or period on your keyboard to enter the 'paused' mode. This mode is helpful when you want to take distracting slides off the screen during a presentation.

Zoom Out

Press esc

Slides HTML

<section>
    <h2>Pause Mode</h2>
    <img src="http://musicandeverything.files.wordpress.com/2013/09/download.jpg" />
    <p>
    	Press b or period on your keyboard to enter the 'paused' mode. This mode is helpful when you want to take distracting slides off the screen
	    during a presentation.
    </p>
</section>

Reflections on Reveal.js

• Wonderfully collaborative
• As a dev, use all the same tools
• There is an API for navigation, Leap motion
• Don't like something? It's open source, change anything
• Not WYSIWYG -> http://slid.es/

The State of jQuery

• January 2013: jQuery 1.9 and 2.0
  • The same API, but 2.x branch drops support for IE6-8
  • 12% smaller, so optimal for modern/mobile web apps
• January 2014: jQuery 1.11 and 2.1
  • Performance optimzation
  • Available on npm and Bower (package managers)

jQuery 1.13

With Microsoft no longer supporting Windows XP, jQuery 1.x drops supports for IE6 and 7

jQuery UI 1.12

Button, Slider, Flipswitch, Textinput from Mobile merge into UI All widgets from jQuery Mobile will eventually be merged into jQuery UI

High contrast mode

jQuery UI 1.13

Along with jQuery, jQuery UI drops support for IE6 and 7

Supports the pointer events to unify mouse, touch, and pointer support Pointer events created by Microsoft will be supported by Firefox and Chrome... but not by Safari!

Rewrite of Globalize to use Unicode CLDR "The Unicode CLDR provides key building blocks for software to support the world's languages,with the largest and most extensive standard repository of locale data available"

WebRTC

By: Ivan Joukov

What's the catch?

• Limited browser support (for now). In particular, no IE or mobile browser support. Android Chrome Beta!
• If both peers are behind a symmetrical NAT a connection is impossible.
• You miss out on some great features a server can provide.
  • Cross session chat history
  • Conference calling with more than 2 users
  • Sending messages to offline users

Sounds hard?

• WebRTC.org
• HTML5Rocks
• Mozilla Developer Network

What are you waiting for?

Questions?

HTML5 Video Elements!

Just kidding; those aren't really new.

• No stable specification
• Requires video conversion to known types
• Lack of support on older browsers

What about JavaScript?

JavaScript File Decoders

• e.g. JSMPEG, Broadway.js
• Tend to have a high client side load
• Usually have narrow file requirements
• Poor mobile performance and barely acceptable desktop performance

Okay, so why aren't we all using HTML Video elements then?

• Ads ($)
• Security (DRM)
• Still lacking browser support (e.g. older versions of IE)

So what did you see in the future?

• Mobile performance is paramount
  • Minimizing file size
  • Maximizing performance
  • Providing consistency across platforms/browsers
• Offloading processing to the cloud to provide multiple renderings (e.g. angles/perspectives)
• WebM
• WebGL

Web Usability on a Budget

Usable UI, you say?

Not Usable:

Usable:

Javascript on the Move

Javascript is no longer limited to just Web development platforms.

• Johnny-Five!
• arduino and node.js can be used to create robots
• Paired with jQuery's new Pointer API and a camera, Web apps can extend beyound the browser
• https://www.youtube.com/watch?v=2rPWArKq878

The Second Screen

Most households have multiple TVs and other digial devices.

• Javascript and Websockets is allowing for easier device connectivity
• remote control media center from a phone
• playing MMORPG using phone, tablet and computer display

Javascript is changing the world

Javascript is becoming a new interoperability standard.

• Nothing new
• Javascript not restristed or limited to a platform (Windows, Mac, Linux)
• Not just a Web technology
• Web is starting to interact with the outside world

So what!

As Web developers we have more options today then yesterday.

Improving Performance with Responsive Images

What is not a responsive image?

What is a responsive image?

The srcset attribute

The srcset attribute is an extension to the img and source elements that provides a concice method for delivering high-res assets to high-density displays only, while allowing the user to override requests based on a preference or available bandwidth.

<img src="fallback.jpg" alt="" srcset="photo.jpg 1x, photo-hd.jpg 2x">

The picture element

The picture element is a markup pattern that allows developers to declare multiple sources for an image. By using media queries, it gives developers control as to when and if those images are presented to the user.

<picture>
	<source type="image/webp" srcset="dogs-1.webp, dogs-2.webp 2x">
	<source media="(min-width: 40em)" srcset="big.jpg 1x, big-hd.jpg 2x">
	<source srcset="small.jpg 1x, small-hd.jpg 2x">
	<img src="fallback.jpg" alt="">
</picture>

Implementation status

• Blink / Chrome
  • Picture: ASSIGNED (in work)
  • srcset: IMPLEMENTED/SHIPPED
• WebKit / Safari
  • Picture: UNCONFIRMED (not implemented)
  • srcset: IMPLEMENTED
• Mozilla Firefox
  • Picture: ASSIGNED (but not implemented)
  • srcset: OPEN (but not implemented)
• Microsoft Internet Explorer
  • Picture: NO INFORMATION
  • srcset: NO INFORMATION

Alternatives

• • github.com/scottjehl/picturefill: Picturefill
  • github.com/stowball/rwd.images.js: rwd.images.js
  • github.com/BBC-News/Imager.js: BBC News Imager

Be responsive!

• www.abookapart.com/products/responsive-web-design: Responsive web design book
• alistapart.com/article/responsive-web-design: Responsive web design paper
• picture.responsiveimages.org: Picture element spec
• www.w3.org/html/wg/drafts/srcset/w3c-srcset: srcset attribute spec
• responsiveimages.org: Responsive images group

AngularJS:

Why we should use it? What is it's benefit in web development?

• Makes MVVM pattern available in JS.
• Makes easy UI automated unit testing possible.(By use of Dependency Injection)
• Makes web apps more responsive (similar to native apps).
• Less interaction to server-side. Can handle most UI user interactions in the browser side.

Features of angularJS:

• Templating and Data Binding
• Dependency Injection
• Url Routing

Templating

you can bind the HTML elements and tags with your model variables and the updates/refresh of UI happens bi-directionally. If model value change UI gets updated and the other way around.

• ng-repeat used for loops constructions.
• ng-app defines the scope for module defined.
• ng-Controller defines what controller should be used.
• ng-Click attach a click function defined in controller .
• ng-href binds to anchor tag href attribute
• Many more OOTB directives

Templating: HTML code

<html ng-app="myApp">
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.4/angular.min.js"></script>
        <script src="controller.js"></script>
    </head>
    <body>
    <div ng-controller="GreetingController">
        <ul>
            <li ng-repeat="friend in friends">
                name: {{ friend.name }}
                nickname: {{friend.nickname}}
            </li>
        </ul>
        <div  ng-click="add()">Add</div>
    </div>

    </body>
</html>
						

Templating: JS code

var myApp = angular.module('myApp',[]);
myApp.controller('GreetingController', ['$scope', function($scope) {
$scope.friends = [
                    {
                        id: 1, name: "Tricia", nickname: "Nickname1"
                    },
                    {
                        id: 2, name: "Joanna", nickname: "Nickname2"
                    },
                    {
                        id: 3, name: "Kit", nickname: "Sparky"
                    }
                ];
    $scope.add = function() {
        $scope.friends.push({id:4,name:'arash',nickname:'arashnickname'});
    };
}]);
						

Custom Template: Can be used to create re-usable html templates

<html ng-app="docsSimpleDirective">
        <head>
            <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.12/angular.min.js"></script>
            <script type="text/javascript" src="controller.js"></script>
        </head>
        <body>
        <div ng-controller="Ctrl">
            <div my-customer></div>
            <div my-customer></div>
            <div my-customer></div>
        </div>
    </body>
</html>

Custom Template

angular.module('docsSimpleDirective', [])
                                   .controller('Ctrl', function($scope) {
                                          $scope.customer = {
                                               name: 'Naomi',
                                               address: '1600 Amphitheatre'
                                           };
                                        })
                                          .directive('myCustomer', function() {
                                               return {
                                                  template: 'Name: {{customer.name}} Address: {{customer.address}}'
                                               };
                                         });

Dependency Injection:

Dependency Injection is the design patter where the objects do not instantiate their dependencies, Instead the framework passes their dependencies to them.

<html ng-app="myModule">
    <head>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.12/angular.min.js"></script>
        <script type="text/javascript" src="DI.js"></script>
    </head>
    <body>
    <div ng-controller="MyController">
        <button ng-click="sayHello()">Hello</button>
    </div>
    </body>
</html>

Dependency Injection:

Using Angular OOTB injector implicitly. Angular default injector subsystem takes care of dependency injection when controller is created

angular.module('myModule', [])
							         .factory('greeter', function($window) {
                                          return {
                                              greet: function(text) {
                                                  $window.alert(text);
                                               }
                                         };
                                     })
							           .controller('MyController', function($scope, greeter) {
                                               $scope.sayHello = function() {
                                               greeter.greet('Hello World');
                                         };
                                     });

Dependency Injection:

Dynamically inject a service to controller

angular.module('myModule', []).factory('greeter', function($window) {
                                    return {
                                       greet: function(text) {
                                            $window.alert(text);
                                     }
                                 };
                            })
							  .controller('MyController', function($scope, $injector) {
                                     $scope.sayHello = function() {
                                             $injector.get('greeter').greet('hello worldcc'); 
                                     };
                            });

Useful tutorial links

• http://angularjs.org/
• https://github.com/jmcunningham/AngularJS-Learning

Taking Javascript Offline

Using the HTML5 Application Cache

So what is it?

An interface to specify resources that the browser should cache and make available to offline users

So why use it?

• Improved user experience
• Increased speed
• Ability to work offline

Pain Points

Popularity

The Manifest

<html manifest="index.appcache">
  ...
</html>

CACHE MANIFEST
# 2014-04-01

CACHE:
index.html
scripts/main.js

NETWORK:
*

FALLBACK:
images/large images/offline.jpg

jQueryTO

Thank you!