YUI

For Hackers

Who Only Have 24 Hours, Give Or Take A Bathroom Break

Satyen Desai

sdesai@yahoo-inc.com

@dezziness

Y! IM: sdezzi

Public Speaking Is Not My Thing, So If I Faint

http://yuilibrary.com

(and if it isn't too much trouble, please call a doctor)

The Basics

Made For Mashups

Your own copy of the library

<script src="http://yui.yahooapis.com/3.9.1/build/yui/yui-min.js"></script>
YUI().use("overlay", function(Y) {
    var overlay = new Y.Overlay();
    ...
});

DOM Nodes

Basics

YUI().use("node", function(Y) {
    // Select
    var body = Y.Node.one("body");
    var items = Y.Node.all("#friends li");

    // Create
    var div = Y.Node.create("<div>");

    // Change
    body.appendChild(div);
});

DOM Nodes

Basics

// Properties
div.set("id", "foo");   // div.id = "foo";
div.get("offsetWidth"); // div.offsetWidth;

// Methods
div.appendChild(someOtherNode);

// Styles
div.setStyle("backgroundColor", "#f00");
div.setStyles({...});

// Classes
div.addClass("foo");
div.toggleClass("foo");
div.removeClass("foo");

DOM Nodes

Value Adds

div.setXY([100, 200]);
div.getXY();
div.get("region"); // {top, bottom, left, right, width, height}

div.show(); div.hide();

div.load(url);

div.remove();

More Value Adds

// Plugin to a single instance.
body.plug(Y.Plugin.ScrollInfo);

body.scrollInfo.getOffscreenNodes();
body.scrollInfo.on("scrollToBottom", function(){});

// Plugin to a single instance
div.plug(Y.Plugin.Align);

div.align.to(otherNode, "tl", "tr");

DOM Events

/* use "node", "event" */

div.on("click", function(e) {
  var target = e.target;

  if (e.pageX > 500) {
     e.preventDefault();
  }
});

div.once("click", function(e){...});

div.delegate("click", function(e) {

  var target = e.target,               // Target
      container = e.container,         // Delegate container: 'div'
      currentTarget = e.currentTarget; // Delegate target: '.contact'

}, ".contact");

Extended DOM Events

// Don't need any target/ancestor filtering
div.on("mouseenter", function(e){...});
div.on("mouseleave", function(e){...});
div.on("clickoutside", function(e){...});

// Gestures - Abstraction across touch/mouse/ms-pointer events.
div.on("flick", function(e){...}, {minVelocity: ..., minDistance: ...});
div.on("tap", function(e){...});

div.on("gesturemovestart", function(e){...});
   div.on("gesturemove", function(e){...});
   div.on("gesturemoveend", function(e){...});

// Input
input.on("valuechange", function(e){...});
input.on("key", function(e){...}, "enter");

Getting Data

YQL

/* use "yql" */

Y.YQL("select * from weather.forecast where location=90210", function(o) {

  // Use the YQL console, to figure out where to look in 'o'
  myDiv.setHTML(o.query.results.channel.item.description);

});

Works everywhere, including nodejs and inside win8 apps

  • http://query.yahooapis.com/v1/public/yql
  • q=select%20*%20from%20weather.forecast%20where%20location%3D90210
  • format=json
  • env=http%3A%2F%2Fdatatables.org%2Falltables.env
  • callback=YUI.Env.JSONP.yui_3_9_1_1_1366758190852_8

JSONP

/* use "jsonp" */

Y.jsonp("https://api.github.com/users/yui?callback={callback}", function(o) {

   // Use the service docs to figure out where to look
   myDiv.setHTML(o.data);

});
  • Remember the "callback={callback}"
  • Use only with trusted services

IO

/* use "io" */

Y.io("http://samedomain/service?foo=bar", {
   headers: {
      'Content-Type': 'application/json'
   },
   on : {
      start : function() {...},
      failure : function() {...},
      success : function(o) {
         myDiv.setHTML(o.responseText); // or o.responseXML;
      }
   }
});
  • Safer - XHR restrictions
  • More granular control
  • XDR support
  • Form mining support

Aaargh! Raw String Data

JSON

/* use "json" */

var arr = Y.JSON.parse("[{name:'Abc', rank:1}, ...]");

XML

/* use "datatype-xml" */

var xmlDoc = Y.XML.parse(
  "<root><item><name>Abc</name><rank>1</rank></item>...</root>");

Yes, I know, XML. Nobody said life is fair

Making Things Pretty

Without JS

Normalize The Browser's Idea Of Pretty

<link rel="stylesheet" type="text/css"
 href="http://yui.yahooapis.com/3.9.1/build/cssnormalize/cssnormalize-min.css">

Now Add Your Own Pretty!

Form, Pretty!

<form class="yui3-form yui3-form-stacked">...</form>

Button, Pretty!

<a class="yui3-button yui3-button-selected">Selected</a>​

Popover, Pretty!

<div class=​"yui3-popover left">...​</div>​

Grids, Pretty!

Grids, Pretty!

<div class='yui3-g-responsive'>
   <div class="yui3-u-1-3">...</div>
   <div class="yui3-u-1-3">...</div>
   <div class="yui3-u-1-3">...</div>
</div>

Grid Builder

I Want! I Want! Gimee!

<link rel="stylesheet" href="http://yui.yahooapis.com/combo?
 3.9.1/build/cssnormalize/cssnormalize-min.css&
 3.9.1/build/cssgrids-responsive/cssgrids-responsive-min.css&
 3.9.1/build/cssbutton/cssbutton-min.css&

 gallery-2013.03.27-22-06/build/gallerycss-csslist/gallerycss-csslist-min.css&
 gallery-2013.03.27-22-06/build/gallerycss-csstable/gallerycss-csstable-min.css&
 gallery-2013.03.27-22-06/build/gallerycss-cssform/gallerycss-cssform-min.css">

YUI CSS

Skin Builder; Pretty And Smart!

Making Things Pretty

With JS

Transition

/* use "transition" */

mydiv.transition({
    easing: 'ease-out',
    duration: 0.75, // seconds
    width: '10px',
    height: '10px'
}, function() {     // callback
    this.remove();
});

Anim

/* use "anim" */

new Y.Anim({
    node: demoA,
    duration: 1.5,
    to : {
        curve: [[120, 100], [250, 230], [350, 400]]
    }
}).run();
  • Tween Events
  • Animating along a curve

Graphics

/* use "graphics" */

var mygraphic = new Y.Graphic({render:"#mygraphiccontainer"}),

    myrect = mygraphic.addShape({
        type: "rect",
        width: 300,
        height: 200,
        fill: {
            color: "#0000ff"
        },
        stroke: {
            weight: 2,
            color: "#ff0000"
        },
        x: 50,
        y: 100
    });

App Flows

Single Page Apps

/* use "app", "handlebars" */

var app = new Y.App({

   views: {
      home : {
         type: HomeView
      },
      users: {
         type: UsersView
      },
      user : {
         type: UserView,
            parent: 'users'
         }
      }
   },

   serverRouting: false,
   transitions: true

});

Views

Handlebars Template

<script id="user-template" type="text/x-handlebars-template">
    <h1>User Form</h1>
    <form>
        <label>First Name: <input ... value="{{firstname}}"></label>
        <label>Last Name: <input ... value="{{lastname}}"></label>
    </form>
</script>

View Instance

var UserView = Y.Base.create("user", Y.View, [], {

      template: Y.Handlebars.compile(Y.one('#user-template').getHTML()),

      render: function () {
         var html = this.template({firstname: "Satyen", lastname: "Desai"});
         this.get('container').setHTML(html);

         return this;
      }
   });

App Flow

// add route (for history, back-button)
app.route("/users", navigateToUsers);

// navigate to route (updating history)
app.navigate("/users");

// show view without updating history
app.showView("users");
...

A Quick And Dirty Template Based On These Slides

Widgets

  • Overlay
  • Panel
  • Charts
  • ScrollView
  • TabView
  • AutoComplete
  • Slider
  • Dial

Widgets

/* use "slider" */

var slider = new Y.Slider({
  min: -200,
  max: 200,
  value: 100,
  render: true
});

slider.after("valueChange", function(e) {
  if (e.prevVal > 0 && e.newVal <= 0) {
     // Moved backwards across the 0 value
  }
});

Lots Of Other Stuff

  • Language Utils: Y.Array, Y.Object, Y.extend, Y.bind
  • Drag and Drop
  • Resize
  • Cache : Local Storage
  • Cookie
  • ...

1 Developer, 1 Location, 24 hours

100 Developers, 10 Locations, 4 years

  • YUI.add(name, module, dependencies)
  • OOP
  • Promises
  • Custom Event
  • App: MVC
  • Attribute
  • Base
    • Plugins
    • Extensions
  • Widget
  • Intl

42

Any other questions?

References

This deck: http://yuiblog.com/satyen/hackday2013/ (too much recursion)

Shoutout to reveal.js which is driving this presentation

If You Need Help And Can't See Me

Satyen Desai

sdesai@yahoo-inc.com

Y! IM: sdezzi

 

Or I may be in the bathroom