/
index.html
194 lines (184 loc) · 14.9 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="keywords" content="yui,javascript">
<meta name="robots" content="index,follow">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Getting up to speed with YUI 3 - Nodejs, Javascript, AJAX and Advanced Web Apps</title>
<link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.1.0/pure-min.css">
<link rel="stylesheet" href="/blog/static/blog.css">
<link rel="alternate" type="application/rss+xml", title="Caridy - Random Bubbles » rss", href="/blog/index.xml">
</head>
<body>
<div class="pure-g-r " id="layout">
<div class="pure-u" id="main">
<div class="header pure-u-1">
<h1 class="pure-u-1"><a href="http://caridy.name/">Caridy Patiño</a></h1>
</div>
<div class="content pure-u-1">
<h1 class="pure-u-1"><a href="/blog/2009/11/getting-up-to-speed-with-yui-3/">Getting up to speed with YUI 3</a></h1>
<p><p>Few folks asked me about <a href="http://developer.yahoo.com/yui/3/">YUI 3</a> and how they can get up to speed with this new version of <a href="http://developer.yahoo.com/yui/">Yahoo! User Interface Library</a>. Well, here is a quick guide to get up to speed in 3 days. Yes you heard me right, only 3 days, assuming you already know JavaScript and <a href="http://developer.yahoo.com/yui/2/">YUI 2</a>. <img src="http://caridy.name/wp-includes/images/smilies/icon_wink.gif" alt=";-)" class="wp-smiley"> </p>
</p>
<p><h3>First block (day one) – General Architecture</h3>
</p>
<p><p>In the first day, you will have to expend around 4 hours watching videos, getting a lot of information. There is not time to tackle this little by little, hahahaha. It’s better to get the whole insight in a row.</p>
</p>
<p><p><strong>(Day 1, Task 1). General Concepts</strong></p>
</p>
<p><p style="padding-left: 30px;">Let’s start with a general talk by Nicholas. He really explores some of the basic design principles used to build YUI 3. He didn’t mention YUI 3, but I believe if you understand these general concepts, will be easy for you to understand YUI 3.</p>
</p>
<p><p style="padding-left: 30px;"><a href="http://developer.yahoo.com/yui/theater/video.php?v=zakas-architecture"><strong>Nicholas C. Zakas — Scalable JavaScript Application Architecture</strong></a><br>
Frontend architecture for complex, modular web applications with significant JavaScript elements.<br>
<a href="http://developer.yahoo.com/yui/theater/video.php?v=zakas-architecture">http://developer.yahoo.com/yui/theater/video.php?v=zakas-architecture</a>
</p>
<p><p style="padding-left: 30px;">Then you can jump for the real stuff. These 3 videos were recorded during YUI Conf 2009, and are essential in the process of understanding the underlying concepts behind YUI 3.</p>
</p>
<p><p><strong>(Day 1, Task 2). YUI Infrastructure</strong></p>
</p>
<p><p style="padding-left: 30px;"><a href="http://developer.yahoo.com/yui/theater/video.php?v=miraglia-yuiconf2009-yui3">Eric Miraglia — Welcome to YUI 3</a><br>
YUI engineer Eric Miraglia provides a high-level introduction to key concepts underlying the YUI 3 codeline.<br>
<a href="http://developer.yahoo.com/yui/theater/video.php?v=miraglia-yuiconf2009-yui3">http://developer.yahoo.com/yui/theater/video.php?v=miraglia-yuiconf2009-yui3</a>
</p>
<p><p><strong>(Day 1, Task 3). Events Infrastructure</strong></p>
</p>
<p><p style="padding-left: 30px;"><a href="http://developer.yahoo.com/yui/theater/video.php?v=smith-yuiconf2009-events">Luke Smith — Events Evolved</a><br>
YUI engineer Luke Smith provides a deep introduction to the YUI 3 event system including its support for DOM events, event delegation, synthetic events, and custom events.<br>
<a href="http://developer.yahoo.com/yui/theater/video.php?v=smith-yuiconf2009-events">http://developer.yahoo.com/yui/theater/video.php?v=smith-yuiconf2009-events</a>
</p>
<p><p><strong>(Day 1, Task 4). Widget Infrastructure<br>
</strong></p>
</p>
<p><p style="padding-left: 30px;"><strong> </strong> <a href="http://developer.yahoo.com/yui/theater/video.php?v=desai-yuiconf2009-widgets">Satyen Desai — A Widget Walkthrough</a><br>
YUI engineer Satyen Desai provides a detailed tour of the YUI 3 widget subsystem. (Slides).<br>
<a href="http://developer.yahoo.com/yui/theater/video.php?v=desai-yuiconf2009-widgets">http://developer.yahoo.com/yui/theater/video.php?v=desai-yuiconf2009-widgets</a>
</p>
<p><h3>Second Block (day two) – Experimenting</h3>
</p>
<p><p>In this second block you will be able to get some insight, checking some real examples, and getting some feeling about the new code style and the new infrastructure.</p>
</p>
<p><p><strong><strong>(Day 2, Task 1). </strong>Playing with the Official Examples</strong></p>
</p>
<p><p style="padding-left: 30px;">You should spend some time checking some of these examples. Keep in mind that for every example in the library we have a page with the full explanation, this can help you to understand better how things work. Here is an <a href="http://developer.yahoo.com/yui/3/examples/anim/basic.html">example</a>, and has you can see, there is a link to display the <a href="http://developer.yahoo.com/yui/3/examples/anim/basic_clean.html">working example</a> in a new page, or you can see it within the iframe and the description is below that.</p>
</p>
<p><p style="padding-left: 30px;"><a href="http://developer.yahoo.com/yui/3/examples/">YUI 3: Index of Examples</a><br>
YUI 3 ships with a series of 130 examples that illustrate the implementation of its components. The examples can be starting points for your exploration, code snippets to jump-start your own programming, or simply inspiration as to how various interaction patterns can be enabled in the web browser via YUI.<br>
<a href="http://developer.yahoo.com/yui/3/examples/">http://developer.yahoo.com/yui/3/examples/</a>
</p>
<p><p><strong><strong>(Day 2, Task 2). </strong>Checking the state of the library<br>
</strong></p>
</p>
<p><p style="padding-left: 30px;">It’s important to understand the state of the library, the list of available modules, and the state of each module. Keep in mind that every module contains a landing page with some information (the most important), but there are some more pages and the API Docs with tons of valuable info. Don’t spend too much time digging from here, it’s better to explore each component when needed, having a real use-case in mind.
<a href="http://developer.yahoo.com/yui/3/">http://developer.yahoo.com/yui/3/</a>
</p>
<p><p style="padding-left: 30px;">Try to focus on “Core” and “Component Infrastructure” sections. Also, spend some time reviewing the <a href="http://developer.yahoo.com/yui/3/configurator/">dependency configurator</a> tool, it will give you some feeling about the granularity and the organization.<br>
<a href="http://developer.yahoo.com/yui/3/configurator/">http://developer.yahoo.com/yui/3/configurator/</a>
</p>
<p><p><strong>(Day 2, Task 3). Debugging</strong></p>
</p>
<p><p style="padding-left: 30px;">Now that you have nailed down some of the general concepts, and you will start checking some examples and putting some examples on your own, it’s important to know how the debug your code. YUI 3 offers a variety of tools and utilities to help you during the development process:</p>
</p>
<p><p style="padding-left: 30px;"><a href="http://developer.yahoo.com/yui/theater/video.php?v=smith-yuiconf2009-debugging">Luke Smith — Debugging in YUI 3</a><br>
YUI engineer Luke Smith discusses the fine art of debugging web applications, looking at general tools and techniques and providing a few specific hints about debugging in YUI 3.<br>
<a href="http://developer.yahoo.com/yui/theater/video.php?v=smith-yuiconf2009-debugging">http://developer.yahoo.com/yui/theater/video.php?v=smith-yuiconf2009-debugging</a>
</p>
<p><p><strong>(Day 2, Task 4). Performance Implications</strong></p>
</p>
<p><p style="padding-left: 30px;">With YUI 3 we are trying to beat all the barriers in terms of performance. Normally is not recommended to introduce performance optimization in the early stages for a project, it’s important to know the general concepts behind YUI 3 Loading process, and how to leverage YUI 3 infrastructure to create hight performance web applications.</p>
</p>
<p><p style="padding-left: 30px;"><a href="http://developer.yahoo.com/yui/theater/video.php?v=sweeney-yuiconf2009-performance">Matt Sweeney — YUI 3 Performance</a><br>
YUI architect Matt Sweeney reviews principles of high-performance web development and looks at how best to implement those principles in YUI 3-based projects.<br>
<a href="http://developer.yahoo.com/yui/theater/video.php?v=sweeney-yuiconf2009-performance">http://developer.yahoo.com/yui/theater/video.php?v=sweeney-yuiconf2009-performance</a>
</p>
<p><p>After that, you should be able to continue with the library documentation and the examples.</p>
</p>
<p><h3>Third Block (day three) – Extending and Contributing</h3>
</p>
<p><p><strong>(Day 3, Task 1). Creating your own modules</strong></p>
</p>
<p><p style="padding-left: 30px;"><a href="http://www.slideshare.net/caridy/building-yui-3-custom-modules">Caridy Patino – Building YUI 3 Custom Modules</a><br>
Learn how to leverage the YUI 3.x infrastructure to create custom code that can be loaded easily and efficiently onto any page. Also discover how these mashups can combine YUI widgets and utilities with your own code and how to reuse code between different YUI instances.<br>
<a href="http://www.slideshare.net/caridy/building-yui-3-custom-modules">http://www.slideshare.net/caridy/building-yui-3-custom-modules</a>
</p>
<p><p><strong>(Day 3, Task 2). A real world use-case</strong></p>
</p>
<p><p style="padding-left: 30px;">In every project, is always good to get a different angle, a different perspective, and outsider insight:</p>
</p>
<p><p style="padding-left: 30px;"><a href="http://developer.yahoo.com/yui/theater/video.php?v=ericf-yuiconf2009-webapps">Eric Ferraiuolo — Web App Development with YUI 3</a><br>
Eric Ferraiuolo of Oddnut Software talks about the nuances of deploying real-world web applications using YUI 3.<br>
<a href="http://developer.yahoo.com/yui/theater/video.php?v=ericf-yuiconf2009-webapps">http://developer.yahoo.com/yui/theater/video.php?v=ericf-yuiconf2009-webapps</a>
</p>
<p><p><strong>(Day 3, Task 3). How to contributing to YUI</strong></p>
</p>
<p><p style="padding-left: 30px;">If you’re really into YUI, you should take the time to check this awesome video from Dav Glass:</p>
</p>
<p><p style="padding-left: 30px;"><a href="http://developer.yahoo.com/yui/theater/video.php?v=glass-yuiconf2009-contributing">Dav Glass — Contributing to YUI</a><br>
YUI engineer Dav Glass introduces you to the YUI Gallery and steps through the process of making contributions to the YUI project.<br>
<a href="http://developer.yahoo.com/yui/theater/video.php?v=glass-yuiconf2009-contributing">http://developer.yahoo.com/yui/theater/video.php?v=glass-yuiconf2009-contributing</a>
</p>
<p><p style="padding-left: 30px;">Check the YUI 3 gallery here:<br>
<a href="http://yuilibrary.com/gallery/">http://yuilibrary.com/gallery/</a>
</p>
<p><h3>Few more thoughts</h3>
</p>
<p><p>There is a bunch of videos in the <a href="http://developer.yahoo.com/yui/theater/">YUI Theater</a>, make sure that you check them, some of them are really useful, other are very technical or diving into an specific subject. Also, there are a bunch of them explaining in details some of the tools created by YUI Team as well.<br>
<a href="http://developer.yahoo.com/yui/theater/">http://developer.yahoo.com/yui/theater/</a>
</p>
<p><p>YUI Blog is another good reason to keep you updated about the library. Including some good articles (again, some technical deep dive).<br>
<a href="http://www.yuiblog.com/">http://www.yuiblog.com/</a>
</p>
<p><p>And finally, you can join us thru the community. <a href="http://yuilibrary.com/">This site</a>, with such a great organization, provides multiple ways to get in contact with YUI Core Team, YUI Contributors and the community in general.<br>
<a href="http://yuilibrary.com/">http://yuilibrary.com/</a></p>
</div>
<div class="pure-g-r meta">
<div class="pure-u-1">
<div class="l-box">
<span class="article-date">November 16, 2009</span>
<span class="article-all"><a href="/blog/archives/">More Articles</a></span>
<span class="article-tags">
Tags:
<a href="/blog/tag/yui/">yui</a>,
<a href="/blog/tag/javascript/">javascript</a>,
<a href="/blog/archives/">all</a>
</span>
</div>
</div>
</div>
<div class="pure-u-1 footer">
<div class="l-box footer-centered">
<div class="pure-g-r">
<div class="pure-u-2-3">
<h1>require("caridy").info</h1>
<p>
I work for Yahoo! as principal FE at YUI Team. Some of my work includes <a href="http://github.com/yahoo/mojito">mojito</a>, <a href="http://github.com/yahoo/express-yui">express-yui</a>, <a href="http://github.com/yui/yui3">yui</a>, <a href="http://yuilibrary.com/gallery/user/caridy">a bunch of yui gallery modules</a>, and <a href="http://caridy.github.io/legacy/www.bubbling-library.com/">bubbling library</a>.
</p>
<p>
You can check some of my code at <a href="http://github.com/caridy">GitHub</a>, you can follow me at <a href="http://twitter.com/caridy">Twitter</a> or just email me at <a href="mailto:caridy@caridy.com">caridy@gmail.com</a>.
</p>
</div>
<div class="pure-u-1-3">
<div class="l-box">
<div id="pic">
<img alt="Caridy" src="/blog/static/caridy.png">
</div>
</div>
</div>
</div>
</div>
</div>
<div class="pure-g-r legal">
<div class="pure-u-1">
<div class="l-box">
<p class="legal-license">
This site is <a href="https://github.com/caridy/blog-src">built</a> using <a href="http://purecss.io/">Pure</a> and <a href="https://github.com/caridy/flipflop">FlipFlop</a>. <a href="/blog/archives/">Archives</a> and <a href="/blog/index.xml">Entries (RSS)</a> for your convenience.
</p>
<p class="legal-license">
All code and content on this site is licensed under <a href="http://creativecommons.org/licenses/by/3.0/us/">Creative Commons</a> unless stated otherwise.
</p>
</div>
</div>
</div>
</div>
</div>
</body>
</html>