When Not to Use YUI - Speaker Deck

Slide 1

Slide 1 text

Howdy! I’m Ryan Grove @yaypie on Twitter and ADN

Slide 2

Slide 2 text

I work at

Slide 3

Slide 3 text

I used to work at

Slide 4

Slide 4 text

I once modeled for a Japanese clothing catalog me

Slide 5

Slide 5 text

Things I like:

Slide 6

Slide 6 text

kittens movies with happy endings pie awesomeness JavaScript movies with sad endings the ocean not giving talks YUI driving really fast gadgets old-ass sailing ships coffee unit tests sleeping in Pocky thunderstorms

Slide 7

Slide 7 text

kittens movies with happy endings pie awesomeness JavaScript movies with sad endings the ocean not giving talks driving really fast old-ass sailing ships gadgets coffee unit tests sleeping in Pocky thunderstorms YUI

Slide 8

Slide 8 text

YUI When Not to Use

Slide 9

Slide 9 text

A library makes hard or annoying tasks easier

Slide 10

Slide 10 text

Libraries are awesome

Slide 11

Slide 11 text

But a library shouldn’t try to do everything http://www.flickr.com/photos/justinbaeder/5318402022/

Slide 12

Slide 12 text

A good library does one thing well http://www.flickr.com/photos/scttw/1335967584/

Slide 13

Slide 13 text

Despite the name, YUI is a framework

Slide 14

Slide 14 text

A framework is a collection of like- minded libraries

Slide 15

Slide 15 text

Library == tool Framework == toolbox http://www.flickr.com/photos/caldwellian/504891328/

Slide 16

Slide 16 text

Don’t try to use every tool in the toolbox http://www.flickr.com/photos/75905404@N00/7126147125/

Slide 17

Slide 17 text

Don’t use a tool just because you have a tool http://www.flickr.com/photos/carlwain/3555650607/

Slide 18

Slide 18 text

http://quibly.deviantart.com/art/Admiral-Ackbar-156351053

Slide 19

Slide 19 text

Understand the tradeoffs

Slide 20

Slide 20 text

Don’t be lazy http://www.flickr.com/photos/ggunson/21535407/

Slide 21

Slide 21 text

Be curious http://www.flickr.com/photos/giaky88/4189310121/

Slide 22

Slide 22 text

Don’t use YUI when vanilla JavaScript will do

Slide 23

Slide 23 text

Enough philosophy. Let’s get real. The Matrix (1999), Warner Bros. Pictures

Slide 24

Slide 24 text

Don’t use the following Y.Lang methods AVOID

Slide 25

Slide 25 text

Y.Lang.isBoolean() Chrome 22 IE 9 Firefox 16 iOS 6 1% slower 45% slower 9% slower 5% slower Compared to typeof value === ‘boolean’ http://jsperf.com/y-lang-isboolean AVOID Benchmarked on a Mac Pro, 2.8GHz quad-core Xeon, 16 GB RAM, OS X 10.8.2 and an iPhone 4S, iOS 6.0

Slide 26

Slide 26 text

Y.Lang.isFunction() Chrome 22 IE 9 Firefox 16 iOS 6 58% slower 68% slower 64% slower 75% slower Compared to typeof value === ‘function’ http://jsperf.com/y-lang-isfunction AVOID Benchmarked on a Mac Pro, 2.8GHz quad-core Xeon, 16 GB RAM, OS X 10.8.2 and an iPhone 4S, iOS 6.0

Slide 27

Slide 27 text

Y.Lang.isNull() Chrome 22 IE 9 Firefox 16 iOS 6 3% slower 48% slower 10% slower 3% slower Compared to value === null http://jsperf.com/y-lang-isnull AVOID Benchmarked on a Mac Pro, 2.8GHz quad-core Xeon, 16 GB RAM, OS X 10.8.2 and an iPhone 4S, iOS 6.0

Slide 28

Slide 28 text

Y.Lang.isString() Chrome 22 IE 9 Firefox 16 iOS 6 1% slower 49% slower 8% slower 6% slower Compared to typeof value === ‘string’ http://jsperf.com/y-lang-isstring AVOID Benchmarked on a Mac Pro, 2.8GHz quad-core Xeon, 16 GB RAM, OS X 10.8.2 and an iPhone 4S, iOS 6.0

Slide 29

Slide 29 text

Chrome 22 IE 9 Firefox 16 iOS 6 0.4% slower 47% slower 7% slower 5% slower Y.Lang.isUndefined() Compared to typeof value === ‘undefined’ http://jsperf.com/y-lang-isundefined AVOID Benchmarked on a Mac Pro, 2.8GHz quad-core Xeon, 16 GB RAM, OS X 10.8.2 and an iPhone 4S, iOS 6.0

Slide 30

Slide 30 text

Chrome 22 IE 9 Firefox 16 iOS 6 isBoolean() isFunction() isNull() isString() isUndefined() 1% slower 45% slower 9% slower 5% slower 58% slower 68% slower 64% slower 75% slower 3% slower 48% slower 10% slower 3% slower 1% slower 49% slower 8% slower 6% slower 0.4% slower 47% slower 7% slower 5% slower

Slide 31

Slide 31 text

Consider not using these Y.Lang methods: isNumber() isObject() caution

Slide 32

Slide 32 text

These ones are cool: isArray() isDate() isValue() now() type() Okay!

Slide 33

Slide 33 text

Y.instanceOf() Chrome 22 IE 9 Firefox 16 iOS 6 26% slower 58% slower 53% slower 49% slower Compared to the instanceof operator http://jsperf.com/y-instanceof AVOID Benchmarked on a Mac Pro, 2.8GHz quad-core Xeon, 16 GB RAM, OS X 10.8.2 and an iPhone 4S, iOS 6.0

Slide 34

Slide 34 text

Let’s go after the big fish Jaws (1975), Universal Studios

Slide 35

Slide 35 text

Y.Base caution

Slide 36

Slide 36 text

Y.Base caution •Initializer/destructor lifecycle •Y.Attribute •Y.EventTarget •Attribute aggregation

Slide 37

Slide 37 text

Y.Base.create() caution Y.Base.create('myClass', Y.Base, [...], { ... }, { ... });

Slide 38

Slide 38 text

TANSTAAFL

Slide 39

Slide 39 text

Chrome 22 IE 9 Firefox 16 iOS 6 99.7% slower 99.6% slower 99.9% slower 99.8% slower Y.Base vs. vanilla JS Comparing instantiation speed http://jsperf.com/y-base caution Benchmarked on a Mac Pro, 2.8GHz quad-core Xeon, 16 GB RAM, OS X 10.8.2 and an iPhone 4S, iOS 6.0

Slide 40

Slide 40 text

Y.Base vs. vanilla JS Comparing instantiation speed (ops/sec) http://jsperf.com/y-base caution Benchmarked on a Mac Pro, 2.8GHz quad-core Xeon, 16 GB RAM, OS X 10.8.2 and an iPhone 4S, iOS 6.0 Chrome 22 IE 9 Firefox 16 iOS 6 Y.Base vanilla JS 10,924 2,323 6,196 1,717 4,013,182 544,036 8,189,437 713,684

Slide 41

Slide 41 text

caution •~2,040 bytes per Y.Base instance •1,000 Y.Base instances: ~1.9MB •~12 bytes per vanilla JS instance •1,000 vanilla instances: ~11.7KB Y.Base memory usage

Slide 42

Slide 42 text

You may be using Y.Base without realizing it

Slide 43

Slide 43 text

Y.Anim Y.App Y.AutoComplete Y.Button Y.Cache Y.Calendar Y.DataSource.* Y.DataTable Y.DD.* Y.Dial Y.EditorBase Y.LazyModelList Y.Model Y.ModelList Y.Overlay Y.Panel Y.Pjax Y.Record Y.Recordset Y.Resize Y.Router Y.ScrollView Y.Slider Y.Sortable Y.Tab Y.TabView Y.ToggleButton Y.Uploader Y.View Y.Widget Y.WidgetParent Y.WidgetChild

Slide 44

Slide 44 text

•When you need attributes •...and events •...and an initializer/destructor lifecycle •...and extensions When is Y.Base worth using?

Slide 45

Slide 45 text

Use only what you need

Slide 46

Slide 46 text

Consider how many instances you’ll be creating

Slide 47

Slide 47 text

Be careful with Y.Model and Y.View caution

Slide 48

Slide 48 text

Sorry. :(

Slide 49

Slide 49 text

Case study: SmugMug Search

Slide 50

Slide 50 text

No content

Slide 51

Slide 51 text

Not so fast...

Slide 52

Slide 52 text

My God, it’s full of models and views 2001: A Space Odyssey (1968), MGM Studios

Slide 53

Slide 53 text

Model + View Model + View Model + View Model + View Model + View Model + View Model + View Model + View Model + View Model + View Model + View Model + View

Slide 54

Slide 54 text

http://www.flickr.com/photos/koskisuomi/1453645876/ Don’t forget about users with old, slow machines

Slide 55

Slide 55 text

Memory leaks suck http://www.flickr.com/photos/vrogy/511644410/

Slide 56

Slide 56 text

One view to rule them all

Slide 57

Slide 57 text

•Throttled scroll event handlers •Efficiently-computed scroll metrics •Convenient events for actions like scrollToBottom and scrollToTop Y.Plugin.ScrollInfo http://yuilibrary.com/yui/docs/api/classes/Plugin.ScrollInfo.html

Slide 58

Slide 58 text

Remodeling Model

Slide 59

Slide 59 text

• Same API as ModelList • Contains vanilla JavaScript objects instead of Model instances • revive() and free() Model instances as needed Y.LazyModelList http://yuilibrary.com/yui/docs/model-list/#lazymodellist

Slide 60

Slide 60 text

SmugMug Search benchmarks Before After Time to initial results Initial memory usage Time to manually scroll to 1,000 results Memory usage after 1,000 results 1,410ms 950ms (33% faster) 8.26MB 7.23MB (12% less) 30s 22s (27% faster) 42.82MB 15.64MB (63% less)

Slide 61

Slide 61 text

This got me thinking...

Slide 62

Slide 62 text

•Y.Lang.sub() doesn’t do enough •Y.Handlebars is often overkill •Underscore templates were just right Templating

Slide 63

Slide 63 text

Y.Handlebars Underscore Y.Template.Micro Render Compile & Render 146,446 ops/s 197,123 ops/s 205,716 ops/s 4,501 ops/s 28,966 ops/s 36,737 ops/s Y.Template.Micro vs. others http://jsperf.com/y-template-vs-others/6 Benchmarked on a Mac Pro, 2.8GHz quad-core Xeon, 16 GB RAM, OS X 10.8.2

Slide 64

Slide 64 text

Y.TreeView A victim of the YUI Way

Slide 65

Slide 65 text

Y.Tree Extends Y.Base

Slide 66

Slide 66 text

Y.Tree Extends Y.Base Y.Tree.Node Vanilla JS constructor

Slide 67

Slide 67 text

Y.Tree Extends Y.Base Y.Tree.Node Vanilla JS constructor Y.TreeView Extends Y.View

Slide 68

Slide 68 text

No content

Slide 69

Slide 69 text

Y.Menu Building on lessons learned

Slide 70

Slide 70 text

No content

Slide 71

Slide 71 text

Brainstorm! Brainstorm (1983), MGM Studios

Slide 72

Slide 72 text

•Native ECMAScript 5 feature •Supported by all modern browsers •Getters/setters •Read-only properties •Super cheap vs. Y.Attribute Object.defineProperty()

Slide 73

Slide 73 text

Y.Property vs. Y.Attribute Comparing instantiation speed (ops/sec) of base classes http://jsperf.com/y-property-vs-y-attribute/4 Benchmarked on a Mac Pro, 2.8GHz quad-core Xeon, 16 GB RAM, OS X 10.8.2 and an iPhone 4S, iOS 6.0 Chrome 22 IE 9 Firefox 16 iOS 6 Y.Attribute Y.Property 22,919 7,140 15,669 4,794 56,222 145% faster 48,276 576% faster 110,163 603% faster 28,508 495% faster

Slide 74

Slide 74 text

Coming soon to a YUI near you? Maybe. Until then: https://github.com/smugmug/yui3

Slide 75

Slide 75 text

Breaking out of YUI The Shawshank Redemption (1994), Castle Rock Entertainment

Slide 76

Slide 76 text

YUI isn’t a religion

Slide 77

Slide 77 text

Micro-(libraries|frameworks) to the rescue

Slide 78

Slide 78 text

But what about dependency management?

Slide 79

Slide 79 text

Just use YUI Loader

Slide 80

Slide 80 text

YUI({ groups: { 'cdnjs': { base: '//cdnjs.cloudflare.com/ajax/libs', modules: { xregexp: { path: '/xregexp/2.0.0/xregexp-min.js' } } } }, onProgress: function (e) { if (e.data[0].name === 'xregexp') { YUI.add('xregexp', function (Y) { Y.XRegExp = XRegExp; }); } } }).use('xregexp', function (Y) { console.log('xregexp is now available at Y.XRegExp'); });

Slide 81

Slide 81 text

Slide 82

Slide 82 text

Slide 83

Slide 83 text

Slide 84

Slide 84 text

Slide 85

Slide 85 text

Slide 86

Slide 86 text

YUI wants you to succeed

Slide 87

Slide 87 text

Be curious

Slide 88

Slide 88 text

Be pragmatic

Slide 89

Slide 89 text

Read the source

Slide 90

Slide 90 text

Be loyal to your users, not your tools

Slide 91

Slide 91 text

Thank you! @yaypie on Twitter and ADN rgrove on GitHub & Freenode https://speakerdeck.com/yaypie/when-not-to-use-yui