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
Eduardo Lundgren
December 20, 2013
Technology
0
77
Getting Started with YUI3 and AlloyUI
Eduardo Lundgren
December 20, 2013
Tweet
Share
More Decks by Eduardo Lundgren
See All by Eduardo Lundgren
WeDeploy
eduardolundgren
0
48
Introducing Liferay Standalone Applications
eduardolundgren
3
520
Single Page Applications in Liferay
eduardolundgren
5
2.5k
Single Page Applications done right
eduardolundgren
10
750
tracking.js with Maira Bello
eduardolundgren
0
120
Single Page Application
eduardolundgren
0
400
Getting started with AlloyUI
eduardolundgren
0
78
Augmented Reality.js
eduardolundgren
0
150
Liferay UI revolution
eduardolundgren
0
190
Other Decks in Technology
See All in Technology
使いたいMCPサーバーはWeb APIをラップして自分で作る #QiitaBash
bengo4com
0
990
A2Aのクライアントを自作する
rynsuke
1
220
生成AI時代の開発組織・技術・プロセス 〜 ログラスの挑戦と考察 〜
itohiro73
1
340
なぜ私はいま、ここにいるのか? #もがく中堅デザイナー #プロダクトデザイナー
bengo4com
0
1.2k
250627 関西Ruby会議08 前夜祭 RejectKaigi「DJ on Ruby Ver.0.1」
msykd
PRO
2
360
KubeCon + CloudNativeCon Japan 2025 Recap by CA
ponkio_o
PRO
0
230
生成AIで小説を書くためにプロンプトの制約や原則について学ぶ / prompt-engineering-for-ai-fiction
nwiizo
4
2.9k
PHP開発者のためのSOLID原則再入門 #phpcon / PHP Conference Japan 2025
shogogg
4
900
GitHub Copilot の概要
tomokusaba
1
140
Prox Industries株式会社 会社紹介資料
proxindustries
0
340
mrubyと micro-ROSが繋ぐロボットの世界
kishima
2
370
AWS Summit Japan 2025 Community Stage - App workflow automation by AWS Step Functions
matsuihidetoshi
1
300
Featured
See All Featured
Testing 201, or: Great Expectations
jmmastey
42
7.5k
Building Applications with DynamoDB
mza
95
6.5k
A better future with KSS
kneath
239
17k
Git: the NoSQL Database
bkeepers
PRO
430
65k
Why Our Code Smells
bkeepers
PRO
337
57k
Typedesign – Prime Four
hannesfritz
42
2.7k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
29
9.5k
Navigating Team Friction
lara
187
15k
Adopting Sorbet at Scale
ufuk
77
9.4k
Designing for humans not robots
tammielis
253
25k
Making the Leap to Tech Lead
cromwellryan
134
9.4k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
1.8k
Transcript
getting started with YUI3 and AlloyUI Front in BH, 2013
terça-feira, 6 de agosto de 13
@eduardolundgren terça-feira, 6 de agosto de 13
terça-feira, 6 de agosto de 13
jQuery jQueryUI YUI3 Liferay tracking.js AlloyUI jQuery Simulate nodegh terça-feira,
6 de agosto de 13
jQuery jQueryUI YUI3 Liferay tracking.js AlloyUI jQuery Simulate nodegh terça-feira,
6 de agosto de 13
jQuery jQueryUI YUI3 Liferay tracking.js AlloyUI jQuery Simulate nodegh terça-feira,
6 de agosto de 13
jQuery jQueryUI YUI3 Liferay tracking.js AlloyUI jQuery Simulate nodegh terça-feira,
6 de agosto de 13
jQuery jQueryUI YUI3 Liferay tracking.js AlloyUI jQuery Simulate nodegh terça-feira,
6 de agosto de 13
jQuery jQueryUI YUI3 Liferay tracking.js AlloyUI jQuery Simulate nodegh terça-feira,
6 de agosto de 13
jQuery jQueryUI YUI3 Liferay tracking.js AlloyUI jQuery Simulate nodegh terça-feira,
6 de agosto de 13
jQuery jQueryUI YUI3 Liferay tracking.js AlloyUI jQuery Simulate nodegh terça-feira,
6 de agosto de 13
jQuery jQueryUI YUI3 Liferay tracking.js AlloyUI jQuery Simulate nodegh terça-feira,
6 de agosto de 13
jquery.com (2006) terça-feira, 6 de agosto de 13
today we’re going to talk about server-agnostic JS frameworks terça-feira,
6 de agosto de 13
Events, Selection, DOM Manipulation, Animation, Ajax requests jquery.com terça-feira, 6
de agosto de 13
mootools.net terça-feira, 6 de agosto de 13
UI components twitter.github.io/bootstrap terça-feira, 6 de agosto de 13
jqueryui.com terça-feira, 6 de agosto de 13
Templates mustache.github.io terça-feira, 6 de agosto de 13
handlebarsjs.com terça-feira, 6 de agosto de 13
Module loader requirejs.org terça-feira, 6 de agosto de 13
headjs.com terça-feira, 6 de agosto de 13
MV* backbonejs.org terça-feira, 6 de agosto de 13
knockoutjs.com terça-feira, 6 de agosto de 13
angularjs.org terça-feira, 6 de agosto de 13
emberjs.com terça-feira, 6 de agosto de 13
Tests BDD TDD pivotal.github.io/jasmine terça-feira, 6 de agosto de 13
qunitjs.com terça-feira, 6 de agosto de 13
terça-feira, 6 de agosto de 13
yuilibrary.com terça-feira, 6 de agosto de 13
YUI3 modules terça-feira, 6 de agosto de 13
YUI = effects DOM ajax events ... MVC terça-feira, 6
de agosto de 13
YUI = effects DOM ajax events ... MVC terça-feira, 6
de agosto de 13
YUI = effects DOM ajax events ... MVC terça-feira, 6
de agosto de 13
YUI = effects DOM ajax events ... MVC terça-feira, 6
de agosto de 13
YUI = effects DOM ajax events ... MVC terça-feira, 6
de agosto de 13
YUI = effects DOM ajax events ... MVC terça-feira, 6
de agosto de 13
YUI = effects DOM ajax events ... MVC terça-feira, 6
de agosto de 13
yuilibrary.com/yui/docs/guides terça-feira, 6 de agosto de 13
yuilibrary.com/yui/docs/dial/dial-interactive.html terça-feira, 6 de agosto de 13
yuilibrary.com/yui/docs/app/app-todo.html terça-feira, 6 de agosto de 13
yuilibrary.com/yui/docs/graphics/graphics-violin.html terça-feira, 6 de agosto de 13
YUI3 basics terça-feira, 6 de agosto de 13
$('.foo'); DOM traversal Y.all('.foo'); YUI3 jQuery terça-feira, 6 de agosto
de 13
$('#foo').html('bar'); DOM manipulation Y.one('#foo').setHTML('bar'); YUI3 jQuery terça-feira, 6 de agosto
de 13
$('#close-btn').on('click', function() { // do something }); events Y.one('#close-btn').on('click', function()
{ // do something }); YUI3 jQuery terça-feira, 6 de agosto de 13
$('#fade').animate({ opacity: 0, }, 5000); effects Y.one('#fade').transition({ duration: 1, opacity
: 0 }); YUI3 jQuery terça-feira, 6 de agosto de 13
$.ajax({ url: "api.json", success: function(data) { // do something }
}); ajax Y.io('api.json', { on: { success: function(data) { // do something } } }); YUI3 jQuery terça-feira, 6 de agosto de 13
alloyui.com/rosetta-stone terça-feira, 6 de agosto de 13
YUI3 loading terça-feira, 6 de agosto de 13
terça-feira, 6 de agosto de 13
“Optimize the front-end performance first, because 80% of the user
response time is spent there.” - Steve Souders, Engineer at Google terça-feira, 6 de agosto de 13
without YUI... terça-feira, 6 de agosto de 13
<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> ... ... terça-feira, 6 de agosto de 13
performance-- maintainability-- terça-feira, 6 de agosto de 13
blocks render terça-feira, 6 de agosto de 13
with YUI... terça-feira, 6 de agosto de 13
one <script> terça-feira, 6 de agosto de 13
seed file <script src="http://yui.yahooapis.com/ 3.9.1/build/yui/yui-min.js"></script> <~26KB> terça-feira, 6 de agosto
de 13
seed file <script src="http://yui.yahooapis.com/ 3.9.1/build/yui/yui-min.js"></script> <~26KB> terça-feira, 6 de agosto
de 13
everything else asynchronous combo-loaded from CDN terça-feira, 6 de agosto
de 13
sandbox YUI().use('module-name', function (Y) { // code goes here });
terça-feira, 6 de agosto de 13
why asynchronous? terça-feira, 6 de agosto de 13
non-blocking http requests terça-feira, 6 de agosto de 13
load on demand terça-feira, 6 de agosto de 13
why combo-loaded? terça-feira, 6 de agosto de 13
yuilibrary.com/yui/configurator terça-feira, 6 de agosto de 13
loader +combo terça-feira, 6 de agosto de 13
why load from a CDN? terça-feira, 6 de agosto de
13
geographically closer terça-feira, 6 de agosto de 13
YUI gallery terça-feira, 6 de agosto de 13
yuilibrary.com/gallery terça-feira, 6 de agosto de 13
your code on Yahoo’s CDN terça-feira, 6 de agosto de
13
github.com/yui/yui3-gallery terça-feira, 6 de agosto de 13
available to anyone terça-feira, 6 de agosto de 13
just use() YUI().use('gallery-audio', function (Y) { // code goes here
}); terça-feira, 6 de agosto de 13
mzl.la/OEbuQH terça-feira, 6 de agosto de 13
AlloyUI terça-feira, 6 de agosto de 13
@natecavanaugh terça-feira, 6 de agosto de 13
created on 2009 terça-feira, 6 de agosto de 13
alloyui.com terça-feira, 6 de agosto de 13
built on top of YUI3 terça-feira, 6 de agosto de
13
AlloyUI = calendar tabs buttons carousel ... audio terça-feira, 6
de agosto de 13
AlloyUI = calendar tabs buttons carousel ... audio terça-feira, 6
de agosto de 13
AlloyUI = calendar tabs buttons carousel ... audio terça-feira, 6
de agosto de 13
AlloyUI = calendar tabs buttons carousel ... audio terça-feira, 6
de agosto de 13
AlloyUI = calendar tabs buttons carousel ... audio terça-feira, 6
de agosto de 13
AlloyUI = calendar tabs buttons carousel ... audio terça-feira, 6
de agosto de 13
AlloyUI = calendar tabs buttons carousel ... audio terça-feira, 6
de agosto de 13
terça-feira, 6 de agosto de 13
terça-feira, 6 de agosto de 13
what we wanted: char counter terça-feira, 6 de agosto de
13
#twitter-box #myTextarea #myCounter terça-feira, 6 de agosto de 13
#twitter-box #myTextarea #myCounter terça-feira, 6 de agosto de 13
#twitter-box #myTextarea #myCounter terça-feira, 6 de agosto de 13
#twitter-box #myTextarea #myCounter terça-feira, 6 de agosto de 13
alloyui.com/examples/char-counter/real-world terça-feira, 6 de agosto de 13
what we wanted: schedule terça-feira, 6 de agosto de 13
terça-feira, 6 de agosto de 13
alloyui.com/examples/scheduler terça-feira, 6 de agosto de 13
what we wanted: a better way to express ideas terça-feira,
6 de agosto de 13
* drag and drop UI * flexible API * support
all browsers * no flash (HTML5) terça-feira, 6 de agosto de 13
alloyui.com/examples/diagram-builder terça-feira, 6 de agosto de 13
terça-feira, 6 de agosto de 13
obrigado :) terça-feira, 6 de agosto de 13