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
79
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
49
Introducing Liferay Standalone Applications
eduardolundgren
3
520
Single Page Applications in Liferay
eduardolundgren
5
2.5k
Single Page Applications done right
eduardolundgren
10
760
tracking.js with Maira Bello
eduardolundgren
0
120
Single Page Application
eduardolundgren
0
410
Getting started with AlloyUI
eduardolundgren
0
81
Augmented Reality.js
eduardolundgren
0
160
Liferay UI revolution
eduardolundgren
0
190
Other Decks in Technology
See All in Technology
Railsアプリケーション開発者のためのブックガイド
takahashim
12
5.2k
AIが書いたコードをAIが検証する!自律的なモバイルアプリ開発の実現
henteko
1
230
Function calling機能をPLaMo2に実装するには / PFN LLMセミナー
pfn
PRO
0
740
AI Agentと MCP Serverで実現する iOSアプリの 自動テスト作成の効率化
spiderplus_cb
0
300
Geospatialの世界最前線を探る [2025年版]
dayjournal
2
440
生成AIを活用したZennの取り組み事例
ryosukeigarashi
0
170
AIを導⼊しても、 開発⽣産性は"爆増"していない なぜ?
kinosuke01
4
3.6k
OpenAI gpt-oss ファインチューニング入門
kmotohas
1
590
PLaMoの事後学習を支える技術 / PFN LLMセミナー
pfn
PRO
9
3.3k
Flaky Testへの現実解をGoのプロポーザルから考える | Go Conference 2025
upamune
1
310
XP祭り2025「指標は目標になると機能しなくなる」のか?XPでもそうなのか?
akinorisakata001
2
250
ユニットテストに対する考え方の変遷 / Everyone should watch his live coding
mdstoy
0
110
Featured
See All Featured
It's Worth the Effort
3n
187
28k
[RailsConf 2023] Rails as a piece of cake
palkan
57
5.9k
For a Future-Friendly Web
brad_frost
180
9.9k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
45
2.5k
Code Review Best Practice
trishagee
72
19k
A Tale of Four Properties
chriscoyier
160
23k
Gamification - CAS2011
davidbonilla
81
5.4k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
234
17k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
140
34k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
34
6.1k
Building a Modern Day E-commerce SEO Strategy
aleyda
43
7.7k
Stop Working from a Prison Cell
hatefulcrawdad
271
21k
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