SlideShare une entreprise Scribd logo
1  sur  38
Get Started with YUI

         Adam Lu
   http://adamlu.com/
        @adamlu
    Frontend Engineer
What is YUI?




YUI = Yahoo! User Interface Library
          http://yuilibrary.com/
YUI Library Project
•   JavaScript library
•   CSS foundation
•   Documentation tools
•   Build tools
•   Testing tools
•   Server side delivery tools
•   Developer education
http://www.mindmeister.com/149577110/yui-library-project
YUI Core & Utilities
• Event               •   Anim
• Node                •   History
• YUI Global Object   •   IO
                      •   Transition
                      •   …
YUIGlobalObject
•   YUI.add
•   YUI(config).use()
•   YUI_config
•   YUI.GlobalConfig
•   YUI.applyConfig
•   Instance Config
    YUI({
    debug: true,
    combine: true,
    comboBase: 'http://mydomain.com/combo?',
    root: 'yui3/'
    }).use('node', function (Y) {});
YUIGlobalObject
• Y.Lang                     • Y.UA

 Y.Lang.isArray                Y.UA.android
 Y.Lang.isBoolean              Y.UA.ie
 Y.Lang.isFunction             Y.UA.ios
 Y.Lang.isNumber               Y.UA.ipad
 Y.Lang.isObject               Y.UA.iphone
 Y.Lang.isString               Y.UA.ipod
 Y.Lang.now                    Y.UA.mobile
 Y.Lang.sub                    Y.UA.opera
 Y.Lang.trim                   Y.UA.os
                               Y.UA.safari
                               Y.UA.webkit
Y.Array
•   dudupe            •   map
•   each              •   numericSort
•   every             •   partition
•   filter            •   reduce
•   find              •   reject
•   grep              •   some
•   hashindexOf       •   test
•   Invoke            •   unique
•   lastIndexOf       •   zip
Y.mix
mix ( receiver supplier [overwrite=false] [whitelist] [mode=0] [merge=false] )


          Mixes supplier's properties into receiver.

          0: Default. Object to object.
          1: Prototype to prototype.
          2: Prototype to prototype and object to object.
          3: Prototype to object.
          4: Object to prototype.

Y.mix(AttributeEvents, EventTarget, false, null, 1);
Y.mix(Attribute, Y.AttributeEvents, true, null, 1);
Y.mix(Base, Attribute, false, null, 1);

Y.aggregate = function(r, s, ov, wl) {
   return Y.mix(r, s, ov, wl, 0, true);
};
Y.extend
Create Class Hierarchies with extend

Y.extend = function(r, s, px, sx) {        function Bird(name) {
var sp = s.prototype, rp = Y.Object(sp);   this.name = name;
r.prototype = rp;                          }
rp.constructor = r;
r.superclass = sp;                         Bird.prototype.flighted = true; //
   // add prototype overrides              Default for all Birds
   if (px) {
Y.mix(rp, px, true);
}                                          function Chicken(name) {
   // add object overrides                 Chicken.superclass.constructor.call
   if (sx) {                               (this, name);
Y.mix(r, sx, true);                        }
}                                          Y.extend(Chicken, Bird);
   return r;                               Chicken.prototype.flighted = false;
};
Y.augment

augment ( receiver supplier [overwrite=false] [whitelist] [args] )


Augments the receiver with prototype properties from the supplier.
The receiver may be a constructor function or an object. The
supplier must be a constructor function.


Y.augment(TreeNode, Y.EventTarg        function Foo() {}
et, true, null, {                     Foo.prototype.doSomething = function () {};
emitFacade: true,                        function Bar() {}
    prefix: 'tree'                    Y.augment(Bar, Foo);
});                                   varb = new Bar();
                                         if (binstanceof Bar) {} // true
                                         if (binstanceofFoo) {} //false
Y.Object

Prototype inheritance


Y.Object = Lang._isNative(Object.create) ? function (obj) {
   return Object.create(obj);
} : (function () {
   function F() {}
   return function (obj) {
F.prototype= obj;
      return new F();
   };
}());
Y.merge
Returns a new object containing all of the properties of all the supplied objects. The
properties from later objects will overwrite those in earlier objects.




                var set1 = { foo : "foo" };
                var set2 = { foo : "BAR", bar : "bar" };
                var set3 = { foo : "FOO", baz : "BAZ" };

                var merged = Y.merge(set1, set2, set3);
                //{foo => FOO, bar => bar, baz => BAZ}
Y.clone
clone ( o safe fc owner cloned )

Deep object/array copy.

yeach(o, function(v, k) {
if (k == 'prototype') {
                // skip the prototype
             // } else if (o[k] === o) {
             // this[k] = this;
             } else {
this[k] =
Y.clone(v, safe, f, c, owner || o, marked);
             }
}, o2);
Module
YUI.add("mywidget", function(Y) {
     function MyWidget(){}

Y.namespace(‘MyWidget’) = MyWidget;

}, "1.0.0", {requires:["widget", "substitute"]});

YUI.use(‘mywidget’, function(Y){
     new Y.MyWidget();
});


A module's add() callback isn't executed until that module is attached to a
YUI instance via use(). Each time a module is attached via use(), the module's
add() callback will be executed, and will receive as an argument the same YUI
instance that will later be passed to the use() callback.
Loader
•   Built into YUI Global Object
•   Self-aware dependency management
•   Asynchronous combo-loaded from CDN
•   Sandboxed Code
•   Dynamic Loading withuse() method

    YUI().use('calendar', function (Y) {
    Y.use('autocomplete', function () {
            // The autocomplete module is available here, and the calendar module
        });
    });
Event
•   Dom Events
•   Custom Events
•   Event API
•   Custom Events more DOM like
•   “After” subscriptions
•   Unified subscription
DOM Events
button.on('click', function (e) {
e.target.get('id'); // => 'readygo'
e.preventDefault();
e.stopPropagation();
});

button.detach("click", handleClick);

Y.one('#items').delegate('click', handleClick, 'button.remove’, context);


Y.Event.define("tripleclick", {});
button.on('tripleclick', omgYayCantClickEnough);
Custom Events
Y.augment(MyClass, Y.EventTarget);
var instance = new MyClass();
instance.on('addItem', function (e) {
alert("Yay, I'm adding " + e.item);
});
instance.add('a new item');



Y.Env.evt.plugins.konami = Y.Node.DOM_EVENTS.konami = {
     on: function (type, fn, ctx) {
var progress = {}, handlers = {}, keys = [38,38,40,40,37,39,37,39,66,65],
      ...
node.on("keydown", _checkProgress);
     return detachHandle;
}
node.on(konami, addUnicorns);
Node

// Use Y.one( [css selector string] )
var node = Y.one('#main');

node.one(".hello").setContent("<h1>Hello, <em>World</em>!</h1>");

node.addClass('highlight');

vardoneTasks = Y.all('#tasklist .completed');
doneTasks.each(function (taskNode) {
taskNode.transition({ opacity: 0 }, function () {
completedTasklist.appendChild(this);
    });
});


http://jsfiddle.net/adamlu/zKSZq/
IO
• io-base: base class used for standard XHR
• io-xdr: extension for cross-domain requests
• ……
     varcfg, request;
     cfg = {
     method: 'POST',
     arguments: { 'start' : 'bar' },
     on: {
     start: function(o){},
     complete: function(o){
     console.log(o.responseText);
                }
           }
     };
     request = Y.io(uri, cfg);
Transition
YUI().use('transition', function (Y) {

Y.one('#demo').transition({
   duration: 1,
   height:0,

    width: {
      delay: 1,
      duration: 0.5,
      value: 0
    }
}, function() {
Y.log('end');
});

});
                       http://jsfiddle.net/adamlu/RE6dF/
YUI Infrastructure




http://yuilibrary.com/yui/infrastructure/
YUI Infrastructure
Base
function MyClass(config) {
     // Invoke Base constructor, passing through arguments
MyClass.superclass.constructor.apply(this, arguments);
}
MyClass.NAME = "myClass";
MyClass.ATTRS = {
        A:{
           // Attribute "A" configuration
        },
     };

Y.extend(MyClass, Y.Base, {
initializer: function(cfg) {},
destructor : function() {},
            ...
   });


App = Y.Base.create('app', Y.Base, [View, Router, PjaxBase], {});
Attributes
     function MyClass(userValues) {
varattributeConfig = {
attrA : {
             // ... Configuration for attribute "attrA" ...
          },

attrB : {
                // ... Configuration for attribute "attrB" ...
            }
         };
this.addAttrs(attributeConfig, userValues);
      };

Y.augment(MyClass, Y.Attribute);
varo = new MyClass({
         attrA:5
     });
o.set("attrB", "Hello World!”)
Plugin
     function AnchorPlugin(config) {this._node = config.host;}
AnchorPlugin.NS = "anchors"
AnchorPlugin.prototype = {
        disable: function() {}
     };
var container = Y.one("div.actions");
container.plug(AnchorPlugin);
container.anchors.disable();

Y.extend(WidgetAnimPlugin, Y.Plugin.Base, {
initializer: function(config) {
this.afterHostEvent('render', this.insertCornerElements);
this.beforeHostMethod("_uiSetVisible", this._uiAnimSetVisible);
            },
            _uiAnimSetVisible : function(show) {
                  return new Y.Do.Prevent();
            }
      })
               http://yuilibrary.com/yui/docs/overlay/overlay-anim-plugin.html
Widget
Widget
• Basic Attributes: boudingBox, contentBox, focused…
• Rendering Methods:
  init, destroy, render, renderUI, bindUI, syncUI
• Plugins and Extensions
    Extensions - A Class Level Concept

    Plugins - An Instance Level Concept
/* MyWidget class constructor */
  function MyWidget(config) {
MyWidget.superclass.constructor.apply(this, arguments);
}

MyWidget.NAME = "myWidget";

MyWidget.ATTRS = {
attrA : {
                 value: "A”
     }
}

Y.extend(MyWidget, Y.Widget, {
renderUI: function() {},
bindUI: function() {},
syncUI: function() {},
};

varmywidget = new MyWidget();
mywidget.render(‘#container’);
App Framework
•   MVC-style framework      var router = new Y.Router();
                             router.route(/library/:lib/, function (req) {
•   Y.Model                  var lib = req.params.lib;
                                   if (lib === yui) {
•   Y.ModelList              Y.log(YUI Library is awesome!);
                                   }
•   Y.View                   });


•   Y.Router                 router.save(/library/yui/);// => YUI Library
                             is awesome!

•   Y.App
•   Templating: Y.Handlebars
            http://yuilibrary.com/yui/docs/app/app-todo.html
App Framework
varusersApp = new Y.App({
     views: {
         users: { type : Y.UsersView, preserve: true },
         user: { type : Y.UserView, parent: ‘users’ }
     }
});

var users = new Y.UsersList();

usersApp.route('/user/', function () {
this.showView(users, {modelList: users});
});
usersApp.route('/user/:id/', function (req) {
var user = users.getById(req.params.id);
this.showView(user, {model: user}, function (view) {});
});

                           http://photosnear.me/
YUI Gallery
Learn More
• http://yuilibrary.com/yui/docs/tutorials
• http://yuilibrary.com/theater/
• http://yuilibrary.com/gallery/
• https://github.com/yui/yui3
• http://www.slideshare.net/drprolix/yui-3-
  quick-overview
• http://www.slideshare.net/eferraiuolo/app-
  framework-youve-been-wanting-this
http://www.amazon.com/YUI-3-Cookbook-Evan-Goer/dp/1449304192
Get started with YUI

Contenu connexe

Tendances

Tendances (20)

Arquitetando seu aplicativo Android com Jetpack
Arquitetando seu aplicativo Android com JetpackArquitetando seu aplicativo Android com Jetpack
Arquitetando seu aplicativo Android com Jetpack
 
Using Reflections and Automatic Code Generation
Using Reflections and Automatic Code GenerationUsing Reflections and Automatic Code Generation
Using Reflections and Automatic Code Generation
 
Google Guava - Core libraries for Java & Android
Google Guava - Core libraries for Java & AndroidGoogle Guava - Core libraries for Java & Android
Google Guava - Core libraries for Java & Android
 
Mastering Kotlin Standard Library
Mastering Kotlin Standard LibraryMastering Kotlin Standard Library
Mastering Kotlin Standard Library
 
連邦の白いヤツ 「Objective-C」
連邦の白いヤツ 「Objective-C」連邦の白いヤツ 「Objective-C」
連邦の白いヤツ 「Objective-C」
 
LetSwift RxSwift 시작하기
LetSwift RxSwift 시작하기LetSwift RxSwift 시작하기
LetSwift RxSwift 시작하기
 
JavaScript and the AST
JavaScript and the ASTJavaScript and the AST
JavaScript and the AST
 
Kotlin Generation
Kotlin GenerationKotlin Generation
Kotlin Generation
 
Rust ⇋ JavaScript
Rust ⇋ JavaScriptRust ⇋ JavaScript
Rust ⇋ JavaScript
 
Google guava overview
Google guava overviewGoogle guava overview
Google guava overview
 
Letswift19-clean-architecture
Letswift19-clean-architectureLetswift19-clean-architecture
Letswift19-clean-architecture
 
Testing javascriptwithjasmine sydjs
Testing javascriptwithjasmine sydjsTesting javascriptwithjasmine sydjs
Testing javascriptwithjasmine sydjs
 
Clean code with google guava jee conf
Clean code with google guava jee confClean code with google guava jee conf
Clean code with google guava jee conf
 
Writing Your App Swiftly
Writing Your App SwiftlyWriting Your App Swiftly
Writing Your App Swiftly
 
The Rule of 10,000 Spark Jobs: Learning From Exceptions and Serializing Your ...
The Rule of 10,000 Spark Jobs: Learning From Exceptions and Serializing Your ...The Rule of 10,000 Spark Jobs: Learning From Exceptions and Serializing Your ...
The Rule of 10,000 Spark Jobs: Learning From Exceptions and Serializing Your ...
 
The Rule of 10,000 Spark Jobs - Learning from Exceptions and Serializing Your...
The Rule of 10,000 Spark Jobs - Learning from Exceptions and Serializing Your...The Rule of 10,000 Spark Jobs - Learning from Exceptions and Serializing Your...
The Rule of 10,000 Spark Jobs - Learning from Exceptions and Serializing Your...
 
Letswift18 워크숍#1 스위프트 클린코드와 코드리뷰
Letswift18 워크숍#1 스위프트 클린코드와 코드리뷰Letswift18 워크숍#1 스위프트 클린코드와 코드리뷰
Letswift18 워크숍#1 스위프트 클린코드와 코드리뷰
 
節子、それViewControllerやない...、FatViewControllerや...。
節子、それViewControllerやない...、FatViewControllerや...。節子、それViewControllerやない...、FatViewControllerや...。
節子、それViewControllerやない...、FatViewControllerや...。
 
Google Guava
Google GuavaGoogle Guava
Google Guava
 
Introduction to CQRS and Event Sourcing
Introduction to CQRS and Event SourcingIntroduction to CQRS and Event Sourcing
Introduction to CQRS and Event Sourcing
 

En vedette (6)

Promises. The basics, from Promises/A+
Promises. The basics, from Promises/A+Promises. The basics, from Promises/A+
Promises. The basics, from Promises/A+
 
Inheritance patterns
Inheritance patternsInheritance patterns
Inheritance patterns
 
Professional Web Development
Professional Web DevelopmentProfessional Web Development
Professional Web Development
 
YUI 3 quick overview
YUI 3 quick overviewYUI 3 quick overview
YUI 3 quick overview
 
Attribute
AttributeAttribute
Attribute
 
Hack with YUI
Hack with YUIHack with YUI
Hack with YUI
 

Similaire à Get started with YUI

The Beauty Of Java Script V5a
The Beauty Of Java Script V5aThe Beauty Of Java Script V5a
The Beauty Of Java Script V5a
rajivmordani
 
JavaScript APIs - The Web is the Platform - .toster conference, Moscow
JavaScript APIs - The Web is the Platform - .toster conference, MoscowJavaScript APIs - The Web is the Platform - .toster conference, Moscow
JavaScript APIs - The Web is the Platform - .toster conference, Moscow
Robert Nyman
 
Yui3在美团 2
Yui3在美团 2Yui3在美团 2
Yui3在美团 2
Kai Cui
 
JavaScript APIs - The Web is the Platform - MDN Hack Day - Buenos Aires
JavaScript APIs - The Web is the Platform - MDN Hack Day - Buenos AiresJavaScript APIs - The Web is the Platform - MDN Hack Day - Buenos Aires
JavaScript APIs - The Web is the Platform - MDN Hack Day - Buenos Aires
Robert Nyman
 
international PHP2011_Bastian Feder_jQuery's Secrets
international PHP2011_Bastian Feder_jQuery's Secretsinternational PHP2011_Bastian Feder_jQuery's Secrets
international PHP2011_Bastian Feder_jQuery's Secrets
smueller_sandsmedia
 
Jggug 2010 330 Grails 1.3 観察
Jggug 2010 330 Grails 1.3 観察Jggug 2010 330 Grails 1.3 観察
Jggug 2010 330 Grails 1.3 観察
Tsuyoshi Yamamoto
 

Similaire à Get started with YUI (20)

The next step, part 2
The next step, part 2The next step, part 2
The next step, part 2
 
YUI (Advanced)
YUI (Advanced)YUI (Advanced)
YUI (Advanced)
 
YUI Tidbits
YUI TidbitsYUI Tidbits
YUI Tidbits
 
jQuery Data Manipulate API - A source code dissecting journey
jQuery Data Manipulate API - A source code dissecting journeyjQuery Data Manipulate API - A source code dissecting journey
jQuery Data Manipulate API - A source code dissecting journey
 
The Beauty of Java Script
The Beauty of Java ScriptThe Beauty of Java Script
The Beauty of Java Script
 
meet.js - QooXDoo
meet.js - QooXDoomeet.js - QooXDoo
meet.js - QooXDoo
 
The Beauty Of Java Script V5a
The Beauty Of Java Script V5aThe Beauty Of Java Script V5a
The Beauty Of Java Script V5a
 
ES6 PPT FOR 2016
ES6 PPT FOR 2016ES6 PPT FOR 2016
ES6 PPT FOR 2016
 
Writing Maintainable JavaScript
Writing Maintainable JavaScriptWriting Maintainable JavaScript
Writing Maintainable JavaScript
 
Essential YUI
Essential YUIEssential YUI
Essential YUI
 
jQuery secrets
jQuery secretsjQuery secrets
jQuery secrets
 
JavaScript - i och utanför webbläsaren (2010-03-03)
JavaScript - i och utanför webbläsaren (2010-03-03)JavaScript - i och utanför webbläsaren (2010-03-03)
JavaScript - i och utanför webbläsaren (2010-03-03)
 
JavaScript APIs - The Web is the Platform - .toster conference, Moscow
JavaScript APIs - The Web is the Platform - .toster conference, MoscowJavaScript APIs - The Web is the Platform - .toster conference, Moscow
JavaScript APIs - The Web is the Platform - .toster conference, Moscow
 
Yui3在美团 2
Yui3在美团 2Yui3在美团 2
Yui3在美团 2
 
Maintainable JavaScript 2011
Maintainable JavaScript 2011Maintainable JavaScript 2011
Maintainable JavaScript 2011
 
JavaScript APIs - The Web is the Platform - MDN Hack Day - Buenos Aires
JavaScript APIs - The Web is the Platform - MDN Hack Day - Buenos AiresJavaScript APIs - The Web is the Platform - MDN Hack Day - Buenos Aires
JavaScript APIs - The Web is the Platform - MDN Hack Day - Buenos Aires
 
TypeScript Introduction
TypeScript IntroductionTypeScript Introduction
TypeScript Introduction
 
jQuery secrets
jQuery secretsjQuery secrets
jQuery secrets
 
international PHP2011_Bastian Feder_jQuery's Secrets
international PHP2011_Bastian Feder_jQuery's Secretsinternational PHP2011_Bastian Feder_jQuery's Secrets
international PHP2011_Bastian Feder_jQuery's Secrets
 
Jggug 2010 330 Grails 1.3 観察
Jggug 2010 330 Grails 1.3 観察Jggug 2010 330 Grails 1.3 観察
Jggug 2010 330 Grails 1.3 観察
 

Plus de Adam Lu (14)

Yui rocks
Yui rocksYui rocks
Yui rocks
 
YUI介绍和使用YUI构建web应用
YUI介绍和使用YUI构建web应用YUI介绍和使用YUI构建web应用
YUI介绍和使用YUI构建web应用
 
一步一步开发Html5 mobile apps
一步一步开发Html5 mobile apps一步一步开发Html5 mobile apps
一步一步开发Html5 mobile apps
 
HTML5概览
HTML5概览HTML5概览
HTML5概览
 
HTML5 on Mobile
HTML5 on MobileHTML5 on Mobile
HTML5 on Mobile
 
Html5 on Mobile(For Developer)
Html5 on Mobile(For Developer)Html5 on Mobile(For Developer)
Html5 on Mobile(For Developer)
 
HTML5 on Mobile(For Designer)
HTML5 on Mobile(For Designer)HTML5 on Mobile(For Designer)
HTML5 on Mobile(For Designer)
 
重新认识Html5
重新认识Html5重新认识Html5
重新认识Html5
 
常用Js框架比较
常用Js框架比较常用Js框架比较
常用Js框架比较
 
浏览器兼容性问题小结
浏览器兼容性问题小结浏览器兼容性问题小结
浏览器兼容性问题小结
 
小谈Javascript设计模式
小谈Javascript设计模式小谈Javascript设计模式
小谈Javascript设计模式
 
从Adobe和qcof会议看前端开发
从Adobe和qcof会议看前端开发从Adobe和qcof会议看前端开发
从Adobe和qcof会议看前端开发
 
揭秘Html5和Css3
揭秘Html5和Css3揭秘Html5和Css3
揭秘Html5和Css3
 
Enhance Web Performance
Enhance Web PerformanceEnhance Web Performance
Enhance Web Performance
 

Dernier

Architecting Cloud Native Applications
Architecting Cloud Native ApplicationsArchitecting Cloud Native Applications
Architecting Cloud Native Applications
WSO2
 
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers:  A Deep Dive into Serverless Spatial Data and FMECloud Frontiers:  A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Safe Software
 

Dernier (20)

CNIC Information System with Pakdata Cf In Pakistan
CNIC Information System with Pakdata Cf In PakistanCNIC Information System with Pakdata Cf In Pakistan
CNIC Information System with Pakdata Cf In Pakistan
 
Ransomware_Q4_2023. The report. [EN].pdf
Ransomware_Q4_2023. The report. [EN].pdfRansomware_Q4_2023. The report. [EN].pdf
Ransomware_Q4_2023. The report. [EN].pdf
 
"I see eyes in my soup": How Delivery Hero implemented the safety system for ...
"I see eyes in my soup": How Delivery Hero implemented the safety system for ..."I see eyes in my soup": How Delivery Hero implemented the safety system for ...
"I see eyes in my soup": How Delivery Hero implemented the safety system for ...
 
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
 
Architecting Cloud Native Applications
Architecting Cloud Native ApplicationsArchitecting Cloud Native Applications
Architecting Cloud Native Applications
 
AWS Community Day CPH - Three problems of Terraform
AWS Community Day CPH - Three problems of TerraformAWS Community Day CPH - Three problems of Terraform
AWS Community Day CPH - Three problems of Terraform
 
MS Copilot expands with MS Graph connectors
MS Copilot expands with MS Graph connectorsMS Copilot expands with MS Graph connectors
MS Copilot expands with MS Graph connectors
 
Axa Assurance Maroc - Insurer Innovation Award 2024
Axa Assurance Maroc - Insurer Innovation Award 2024Axa Assurance Maroc - Insurer Innovation Award 2024
Axa Assurance Maroc - Insurer Innovation Award 2024
 
Apidays New York 2024 - Passkeys: Developing APIs to enable passwordless auth...
Apidays New York 2024 - Passkeys: Developing APIs to enable passwordless auth...Apidays New York 2024 - Passkeys: Developing APIs to enable passwordless auth...
Apidays New York 2024 - Passkeys: Developing APIs to enable passwordless auth...
 
DBX First Quarter 2024 Investor Presentation
DBX First Quarter 2024 Investor PresentationDBX First Quarter 2024 Investor Presentation
DBX First Quarter 2024 Investor Presentation
 
Exploring the Future Potential of AI-Enabled Smartphone Processors
Exploring the Future Potential of AI-Enabled Smartphone ProcessorsExploring the Future Potential of AI-Enabled Smartphone Processors
Exploring the Future Potential of AI-Enabled Smartphone Processors
 
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers:  A Deep Dive into Serverless Spatial Data and FMECloud Frontiers:  A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
 
Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...
Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...
Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...
 
ICT role in 21st century education and its challenges
ICT role in 21st century education and its challengesICT role in 21st century education and its challenges
ICT role in 21st century education and its challenges
 
[BuildWithAI] Introduction to Gemini.pdf
[BuildWithAI] Introduction to Gemini.pdf[BuildWithAI] Introduction to Gemini.pdf
[BuildWithAI] Introduction to Gemini.pdf
 
FWD Group - Insurer Innovation Award 2024
FWD Group - Insurer Innovation Award 2024FWD Group - Insurer Innovation Award 2024
FWD Group - Insurer Innovation Award 2024
 
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, AdobeApidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
 
Emergent Methods: Multi-lingual narrative tracking in the news - real-time ex...
Emergent Methods: Multi-lingual narrative tracking in the news - real-time ex...Emergent Methods: Multi-lingual narrative tracking in the news - real-time ex...
Emergent Methods: Multi-lingual narrative tracking in the news - real-time ex...
 
Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...
Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...
Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...
 
How to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected WorkerHow to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected Worker
 

Get started with YUI

  • 1. Get Started with YUI Adam Lu http://adamlu.com/ @adamlu Frontend Engineer
  • 2. What is YUI? YUI = Yahoo! User Interface Library http://yuilibrary.com/
  • 3.
  • 4. YUI Library Project • JavaScript library • CSS foundation • Documentation tools • Build tools • Testing tools • Server side delivery tools • Developer education
  • 6. YUI Core & Utilities • Event • Anim • Node • History • YUI Global Object • IO • Transition • …
  • 7. YUIGlobalObject • YUI.add • YUI(config).use() • YUI_config • YUI.GlobalConfig • YUI.applyConfig • Instance Config YUI({ debug: true, combine: true, comboBase: 'http://mydomain.com/combo?', root: 'yui3/' }).use('node', function (Y) {});
  • 8. YUIGlobalObject • Y.Lang • Y.UA Y.Lang.isArray Y.UA.android Y.Lang.isBoolean Y.UA.ie Y.Lang.isFunction Y.UA.ios Y.Lang.isNumber Y.UA.ipad Y.Lang.isObject Y.UA.iphone Y.Lang.isString Y.UA.ipod Y.Lang.now Y.UA.mobile Y.Lang.sub Y.UA.opera Y.Lang.trim Y.UA.os Y.UA.safari Y.UA.webkit
  • 9. Y.Array • dudupe • map • each • numericSort • every • partition • filter • reduce • find • reject • grep • some • hashindexOf • test • Invoke • unique • lastIndexOf • zip
  • 10. Y.mix mix ( receiver supplier [overwrite=false] [whitelist] [mode=0] [merge=false] ) Mixes supplier's properties into receiver. 0: Default. Object to object. 1: Prototype to prototype. 2: Prototype to prototype and object to object. 3: Prototype to object. 4: Object to prototype. Y.mix(AttributeEvents, EventTarget, false, null, 1); Y.mix(Attribute, Y.AttributeEvents, true, null, 1); Y.mix(Base, Attribute, false, null, 1); Y.aggregate = function(r, s, ov, wl) { return Y.mix(r, s, ov, wl, 0, true); };
  • 11. Y.extend Create Class Hierarchies with extend Y.extend = function(r, s, px, sx) { function Bird(name) { var sp = s.prototype, rp = Y.Object(sp); this.name = name; r.prototype = rp; } rp.constructor = r; r.superclass = sp; Bird.prototype.flighted = true; // // add prototype overrides Default for all Birds if (px) { Y.mix(rp, px, true); } function Chicken(name) { // add object overrides Chicken.superclass.constructor.call if (sx) { (this, name); Y.mix(r, sx, true); } } Y.extend(Chicken, Bird); return r; Chicken.prototype.flighted = false; };
  • 12. Y.augment augment ( receiver supplier [overwrite=false] [whitelist] [args] ) Augments the receiver with prototype properties from the supplier. The receiver may be a constructor function or an object. The supplier must be a constructor function. Y.augment(TreeNode, Y.EventTarg function Foo() {} et, true, null, { Foo.prototype.doSomething = function () {}; emitFacade: true, function Bar() {} prefix: 'tree' Y.augment(Bar, Foo); }); varb = new Bar(); if (binstanceof Bar) {} // true if (binstanceofFoo) {} //false
  • 13. Y.Object Prototype inheritance Y.Object = Lang._isNative(Object.create) ? function (obj) { return Object.create(obj); } : (function () { function F() {} return function (obj) { F.prototype= obj; return new F(); }; }());
  • 14. Y.merge Returns a new object containing all of the properties of all the supplied objects. The properties from later objects will overwrite those in earlier objects. var set1 = { foo : "foo" }; var set2 = { foo : "BAR", bar : "bar" }; var set3 = { foo : "FOO", baz : "BAZ" }; var merged = Y.merge(set1, set2, set3); //{foo => FOO, bar => bar, baz => BAZ}
  • 15. Y.clone clone ( o safe fc owner cloned ) Deep object/array copy. yeach(o, function(v, k) { if (k == 'prototype') { // skip the prototype // } else if (o[k] === o) { // this[k] = this; } else { this[k] = Y.clone(v, safe, f, c, owner || o, marked); } }, o2);
  • 16. Module YUI.add("mywidget", function(Y) { function MyWidget(){} Y.namespace(‘MyWidget’) = MyWidget; }, "1.0.0", {requires:["widget", "substitute"]}); YUI.use(‘mywidget’, function(Y){ new Y.MyWidget(); }); A module's add() callback isn't executed until that module is attached to a YUI instance via use(). Each time a module is attached via use(), the module's add() callback will be executed, and will receive as an argument the same YUI instance that will later be passed to the use() callback.
  • 17. Loader • Built into YUI Global Object • Self-aware dependency management • Asynchronous combo-loaded from CDN • Sandboxed Code • Dynamic Loading withuse() method YUI().use('calendar', function (Y) { Y.use('autocomplete', function () { // The autocomplete module is available here, and the calendar module }); });
  • 18. Event • Dom Events • Custom Events • Event API • Custom Events more DOM like • “After” subscriptions • Unified subscription
  • 19. DOM Events button.on('click', function (e) { e.target.get('id'); // => 'readygo' e.preventDefault(); e.stopPropagation(); }); button.detach("click", handleClick); Y.one('#items').delegate('click', handleClick, 'button.remove’, context); Y.Event.define("tripleclick", {}); button.on('tripleclick', omgYayCantClickEnough);
  • 20. Custom Events Y.augment(MyClass, Y.EventTarget); var instance = new MyClass(); instance.on('addItem', function (e) { alert("Yay, I'm adding " + e.item); }); instance.add('a new item'); Y.Env.evt.plugins.konami = Y.Node.DOM_EVENTS.konami = { on: function (type, fn, ctx) { var progress = {}, handlers = {}, keys = [38,38,40,40,37,39,37,39,66,65], ... node.on("keydown", _checkProgress); return detachHandle; } node.on(konami, addUnicorns);
  • 21. Node // Use Y.one( [css selector string] ) var node = Y.one('#main'); node.one(".hello").setContent("<h1>Hello, <em>World</em>!</h1>"); node.addClass('highlight'); vardoneTasks = Y.all('#tasklist .completed'); doneTasks.each(function (taskNode) { taskNode.transition({ opacity: 0 }, function () { completedTasklist.appendChild(this); }); }); http://jsfiddle.net/adamlu/zKSZq/
  • 22. IO • io-base: base class used for standard XHR • io-xdr: extension for cross-domain requests • …… varcfg, request; cfg = { method: 'POST', arguments: { 'start' : 'bar' }, on: { start: function(o){}, complete: function(o){ console.log(o.responseText); } } }; request = Y.io(uri, cfg);
  • 23. Transition YUI().use('transition', function (Y) { Y.one('#demo').transition({ duration: 1, height:0, width: { delay: 1, duration: 0.5, value: 0 } }, function() { Y.log('end'); }); }); http://jsfiddle.net/adamlu/RE6dF/
  • 26. Base function MyClass(config) { // Invoke Base constructor, passing through arguments MyClass.superclass.constructor.apply(this, arguments); } MyClass.NAME = "myClass"; MyClass.ATTRS = { A:{ // Attribute "A" configuration }, }; Y.extend(MyClass, Y.Base, { initializer: function(cfg) {}, destructor : function() {}, ... }); App = Y.Base.create('app', Y.Base, [View, Router, PjaxBase], {});
  • 27. Attributes function MyClass(userValues) { varattributeConfig = { attrA : { // ... Configuration for attribute "attrA" ... }, attrB : { // ... Configuration for attribute "attrB" ... } }; this.addAttrs(attributeConfig, userValues); }; Y.augment(MyClass, Y.Attribute); varo = new MyClass({ attrA:5 }); o.set("attrB", "Hello World!”)
  • 28.
  • 29. Plugin function AnchorPlugin(config) {this._node = config.host;} AnchorPlugin.NS = "anchors" AnchorPlugin.prototype = { disable: function() {} }; var container = Y.one("div.actions"); container.plug(AnchorPlugin); container.anchors.disable(); Y.extend(WidgetAnimPlugin, Y.Plugin.Base, { initializer: function(config) { this.afterHostEvent('render', this.insertCornerElements); this.beforeHostMethod("_uiSetVisible", this._uiAnimSetVisible); }, _uiAnimSetVisible : function(show) { return new Y.Do.Prevent(); } }) http://yuilibrary.com/yui/docs/overlay/overlay-anim-plugin.html
  • 31. Widget • Basic Attributes: boudingBox, contentBox, focused… • Rendering Methods: init, destroy, render, renderUI, bindUI, syncUI • Plugins and Extensions Extensions - A Class Level Concept Plugins - An Instance Level Concept
  • 32. /* MyWidget class constructor */ function MyWidget(config) { MyWidget.superclass.constructor.apply(this, arguments); } MyWidget.NAME = "myWidget"; MyWidget.ATTRS = { attrA : { value: "A” } } Y.extend(MyWidget, Y.Widget, { renderUI: function() {}, bindUI: function() {}, syncUI: function() {}, }; varmywidget = new MyWidget(); mywidget.render(‘#container’);
  • 33. App Framework • MVC-style framework var router = new Y.Router(); router.route(/library/:lib/, function (req) { • Y.Model var lib = req.params.lib; if (lib === yui) { • Y.ModelList Y.log(YUI Library is awesome!); } • Y.View }); • Y.Router router.save(/library/yui/);// => YUI Library is awesome! • Y.App • Templating: Y.Handlebars http://yuilibrary.com/yui/docs/app/app-todo.html
  • 34. App Framework varusersApp = new Y.App({ views: { users: { type : Y.UsersView, preserve: true }, user: { type : Y.UserView, parent: ‘users’ } } }); var users = new Y.UsersList(); usersApp.route('/user/', function () { this.showView(users, {modelList: users}); }); usersApp.route('/user/:id/', function (req) { var user = users.getById(req.params.id); this.showView(user, {model: user}, function (view) {}); }); http://photosnear.me/
  • 36. Learn More • http://yuilibrary.com/yui/docs/tutorials • http://yuilibrary.com/theater/ • http://yuilibrary.com/gallery/ • https://github.com/yui/yui3 • http://www.slideshare.net/drprolix/yui-3- quick-overview • http://www.slideshare.net/eferraiuolo/app- framework-youve-been-wanting-this