Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Getting started with YUI3 and AlloyUI
Search
Zeno Rocha
April 25, 2013
Programming
6
510
Getting started with YUI3 and AlloyUI
JAX Conference - Mainz, 2013
Zeno Rocha
April 25, 2013
Tweet
Share
More Decks by Zeno Rocha
See All by Zeno Rocha
The Next Generation of Developer-First Products
zenorocha
1
610
7 Habits of Highly Productive Developers
zenorocha
1
400
7 Hábitos de Desenvolvedores Altamente Produtivos
zenorocha
1
510
What's new in the Liferay Community
zenorocha
0
690
Launching Liferay Projects Faster with WeDeploy
zenorocha
1
560
How Liferay fits into the real of latest technologies
zenorocha
0
610
Estoicismo e JavaScript
zenorocha
3
1.1k
Por que ninguém se importa com seu novo projeto open source?
zenorocha
2
980
Como investir em... você!
zenorocha
1
570
Other Decks in Programming
See All in Programming
Honoアップデート 2025年夏
yusukebe
1
840
開発チーム・開発組織の設計改善スキルの向上
masuda220
PRO
13
7.3k
CSC305 Summer Lecture 04
javiergs
PRO
1
100
自作OSでDOOMを動かしてみた
zakki0925224
1
1.4k
WebAssemblyインタプリタを書く ~Component Modelを添えて~
ruccho
1
900
【第4回】関東Kaggler会「Kaggleは執筆に役立つ」
mipypf
0
750
TDD 実践ミニトーク
contour_gara
0
140
私の後悔をAWS DMSで解決した話
hiramax
4
110
Introduction to Git & GitHub
latte72
0
120
DynamoDBは怖くない!〜テーブル設計の勘所とテスト戦略〜
hyamazaki
1
210
コーディングは技術者(エンジニア)の嗜みでして / Learning the System Development Mindset from Rock Lady
mackey0225
2
570
オープンセミナー2025@広島LT技術ブログを続けるには
satoshi256kbyte
0
120
Featured
See All Featured
How to Think Like a Performance Engineer
csswizardry
25
1.8k
Building an army of robots
kneath
306
46k
[RailsConf 2023] Rails as a piece of cake
palkan
56
5.8k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
50k
Music & Morning Musume
bryan
46
6.7k
4 Signs Your Business is Dying
shpigford
184
22k
Building Flexible Design Systems
yeseniaperezcruz
328
39k
Building a Modern Day E-commerce SEO Strategy
aleyda
43
7.5k
A better future with KSS
kneath
239
17k
Code Reviewing Like a Champion
maltzj
525
40k
Large-scale JavaScript Application Architecture
addyosmani
512
110k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
61k
Transcript
getting started with YUI3 and AlloyUI Mainz, 2013.
None
None
how some back-end devs see themselves
how some back-end devs see front-end devs
“CSS is very easy”
None
None
None
“javascript is ugly and full of bugs”
None
EcmaScript 6 is coming
front-end is changing
extremejs.com
github.com/languages
there are three types of people
1. those who compile javascript
developers.google.com/web-toolkit
2. those who doesn’t compile
developers.google.com/closure/library
3. java == javascript
None
None
twitter.com/joelambert/status/327047616326152193
None
today we’re going to talk about server-agnostic JS frameworks
Events, Selection, DOM Manipulation, Animation, Ajax requests jquery.com
mootools.net
UI components twitter.github.io/bootstrap
jqueryui.com
Templates mustache.github.io
handlebarsjs.com
Module loader requirejs.org
headjs.com
MV* backbonejs.org
knockoutjs.com
angularjs.org
emberjs.com
Tests BDD TDD pivotal.github.io/jasmine
qunitjs.com
None
yuilibrary.com
yuilibrary.com/projects/yuitest
yui.github.io/yuicompressor
yui.github.io/yuidoc
yui.github.io/yogi
YUI3 modules
YUI = effects DOM ajax events ... MVC
YUI = effects DOM ajax events ... MVC
YUI = effects DOM ajax events ... MVC
YUI = effects DOM ajax events ... MVC
YUI = effects DOM ajax events ... MVC
YUI = effects DOM ajax events ... MVC
YUI = effects DOM ajax events ... MVC
yuilibrary.com/yui/docs/guides
yuilibrary.com/yui/docs/dial/dial-interactive.html
yuilibrary.com/yui/docs/app/app-todo.html
yuilibrary.com/yui/docs/graphics/graphics-violin.html
YUI3 basics
$('.foo'); DOM traversal Y.all('.foo'); YUI3 jQuery
$('#foo').html('bar'); DOM manipulation Y.one('#foo').setHTML('bar'); YUI3 jQuery
$('#close-btn').on('click', function() { // do something }); events Y.one('#close-btn').on('click', function()
{ // do something }); YUI3 jQuery
$('#fade').animate({ opacity: 0, }, 5000); effects Y.one('#fade').transition({ duration: 1, opacity
: 0 }); YUI3 jQuery
$.ajax({ url: "api.json", success: function(data) { // do something }
}); ajax Y.io('api.json', { on: { success: function(data) { // do something } } }); YUI3 jQuery
alloyui.com/rosetta-stone
YUI3 loading
None
“Optimize the front-end performance first, because 80/90% of the user
response time is spent there.” - Steve Souders, Engineer at Google
without YUI...
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/ 1.9.1/jquery.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jqueryui/ 1.10.2/jquery-ui.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/ mustache.js/0.7.2/mustache.js"></script> <script
src="//cdnjs.cloudflare.com/ajax/libs/ require.js/2.1.5/require.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/ember.js/ 1.0.0-rc.2/ember-1.0.pre.js"></script> ... ...
performance-- maintainability--
blocks render
with YUI...
one <script>
seed file <script src="http://yui.yahooapis.com/ 3.9.1/build/yui/yui-min.js"></script>
everything else asynchronous combo-loaded from CDN
sandbox YUI().use('module-name', function (Y) { // code goes here });
why asynchronous?
non-blocking http requests
why combo-loaded?
yuilibrary.com/yui/configurator
why load from a CDN?
geographically closer
YUI gallery
yuilibrary.com/gallery
your code on Yahoo’s CDN
github.com/yui/yui3-gallery
available to anyone
just use() YUI().use('gallery-audio', function (Y) { // code goes here
});
mzl.la/OEbuQH
AlloyUI
@natecavanaugh
@eduardolundgren
created on 2009
alloyui.com
built on top of YUI3
AlloyUI = calendar tabs buttons carousel ... audio
AlloyUI = calendar tabs buttons carousel ... audio
AlloyUI = calendar tabs buttons carousel ... audio
AlloyUI = calendar tabs buttons carousel ... audio
AlloyUI = calendar tabs buttons carousel ... audio
AlloyUI = calendar tabs buttons carousel ... audio
AlloyUI = calendar tabs buttons carousel ... audio
what we wanted: char counter
#twitter-box #myTextarea #myCounter
#twitter-box #myTextarea #myCounter
#twitter-box #myTextarea #myCounter
#twitter-box #myTextarea #myCounter
alloyui.com/examples/char-counter/real-world
what we wanted: schedule
None
alloyui.com/examples/scheduler
what we wanted: a better way to express ideas
* drag and drop UI * flexible API * support
all browsers * no flash (HTML5)
alloyui.com/examples/diagram-builder
alloyui.com/api
but I’m a java guy!
<taglibs> \o/
taglibs <aui:button name="saveButton" type="submit" value="save"/> Button
taglibs <aui:input name="myField" > <aui:validator name="required" /> <aui:validator name="digits" />
<aui:validator name="range" > [8,50] </aui:validator> </aui:input> Form Validation
the success of an application doesn’t depends on the technology
itself... ...but how it is applied.
None
None
dank :)