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 AlloyUI
Search
Eduardo Lundgren
November 20, 2013
Technology
0
81
Getting started with AlloyUI
Eduardo Lundgren
November 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 YUI3 and AlloyUI
eduardolundgren
0
79
Augmented Reality.js
eduardolundgren
0
160
Liferay UI revolution
eduardolundgren
0
190
Other Decks in Technology
See All in Technology
BirdCLEF+2025 Noir 5位解法紹介
myso
0
200
動画データのポテンシャルを引き出す! Databricks と AI活用への奮闘記(現在進行形)
databricksjapan
0
150
「AI駆動PO」を考えてみる - 作る速さから価値のスループットへ:検査・適応で未来を開発 / AI-driven product owner. scrummat2025
yosuke_nagai
4
600
Access-what? why and how, A11Y for All - Nordic.js 2025
gdomiciano
1
110
コンテキストエンジニアリングとは? 考え方と応用方法
findy_eventslides
4
900
AI Agentと MCP Serverで実現する iOSアプリの 自動テスト作成の効率化
spiderplus_cb
0
500
Exadata Database Service on Dedicated Infrastructure(ExaDB-D) UI スクリーン・キャプチャ集
oracle4engineer
PRO
2
5.4k
about #74462 go/token#FileSet
tomtwinkle
1
360
データエンジニアがこの先生きのこるには...?
10xinc
0
450
20201008_ファインディ_品質意識を育てる役目は人かAIか___2_.pdf
findy_eventslides
1
410
SOC2取得の全体像
shonansurvivors
1
390
英語は話せません!それでも海外チームと信頼関係を作るため、対話を重ねた2ヶ月間のまなび
niioka_97
0
120
Featured
See All Featured
Why You Should Never Use an ORM
jnunemaker
PRO
59
9.6k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
Producing Creativity
orderedlist
PRO
347
40k
Rebuilding a faster, lazier Slack
samanthasiow
84
9.2k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
51k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
188
55k
Intergalactic Javascript Robots from Outer Space
tanoku
273
27k
What's in a price? How to price your products and services
michaelherold
246
12k
The Pragmatic Product Professional
lauravandoore
36
6.9k
Six Lessons from altMBA
skipperchong
28
4k
GitHub's CSS Performance
jonrohan
1032
460k
Transcript
Getting started with AlloyUI Liferay North America Symposium October, 2013
Thursday, October 17, 13
@jonmak08 Thursday, October 17, 13
@eduardolundgren Thursday, October 17, 13
Thursday, October 17, 13
today we’re going to talk about YUI3 and AlloyUI Thursday,
October 17, 13
Thursday, October 17, 13
yuilibrary.com Thursday, October 17, 13
YUI3 modules Thursday, October 17, 13
YUI = effects DOM ajax events ... MVC Thursday, October
17, 13
YUI = effects DOM ajax events ... MVC Thursday, October
17, 13
YUI = effects DOM ajax events ... MVC Thursday, October
17, 13
YUI = effects DOM ajax events ... MVC Thursday, October
17, 13
YUI = effects DOM ajax events ... MVC Thursday, October
17, 13
YUI = effects DOM ajax events ... MVC Thursday, October
17, 13
YUI = effects DOM ajax events ... MVC Thursday, October
17, 13
yuilibrary.com/yui/docs/guides Thursday, October 17, 13
yuilibrary.com/yui/docs/dial/dial-interactive.html Thursday, October 17, 13
yuilibrary.com/yui/docs/app/app-todo.html Thursday, October 17, 13
yuilibrary.com/yui/docs/graphics/graphics-violin.html Thursday, October 17, 13
YUI3 basics Thursday, October 17, 13
$('.foo'); DOM traversal Y.all('.foo'); YUI3 jQuery Thursday, October 17, 13
$('#foo').html('bar'); DOM manipulation Y.one('#foo').setHTML('bar'); YUI3 jQuery Thursday, October 17, 13
$('#close-btn').on('click', function() { // do something }); events Y.one('#close-btn').on('click', function()
{ // do something }); YUI3 jQuery Thursday, October 17, 13
$('#fade').animate({ opacity: 0, }, 5000); effects Y.one('#fade').transition({ duration: 1, opacity
: 0 }); YUI3 jQuery Thursday, October 17, 13
$.ajax({ url: "api.json", success: function(data) { // do something }
}); ajax Y.io('api.json', { on: { success: function(data) { // do something } } }); YUI3 jQuery Thursday, October 17, 13
alloyui.com/rosetta-stone Thursday, October 17, 13
YUI3 loading Thursday, October 17, 13
Thursday, October 17, 13
“Optimize the front-end performance first, because 80% of the user
response time is spent there.” - Steve Souders, Engineer at Google Thursday, October 17, 13
without YUI... Thursday, October 17, 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> ... ... Thursday, October 17, 13
performance-- maintainability-- Thursday, October 17, 13
blocks render Thursday, October 17, 13
with YUI... Thursday, October 17, 13
one <script> Thursday, October 17, 13
seed file <script src="http://yui.yahooapis.com/ 3.9.1/build/yui/yui-min.js"></script> <~26KB> Thursday, October 17, 13
seed file <script src="http://yui.yahooapis.com/ 3.9.1/build/yui/yui-min.js"></script> <~26KB> Thursday, October 17, 13
everything else asynchronous combo-loaded from CDN Thursday, October 17, 13
sandbox YUI().use('module-name', function (Y) { // code goes here });
Thursday, October 17, 13
why asynchronous? Thursday, October 17, 13
non-blocking http requests Thursday, October 17, 13
load on demand Thursday, October 17, 13
why combo-loaded? Thursday, October 17, 13
yuilibrary.com/yui/configurator Thursday, October 17, 13
loader +combo Thursday, October 17, 13
why load from a CDN? Thursday, October 17, 13
geographically closer Thursday, October 17, 13
YUI gallery Thursday, October 17, 13
yuilibrary.com/gallery Thursday, October 17, 13
your code on Yahoo’s CDN Thursday, October 17, 13
github.com/yui/yui3-gallery Thursday, October 17, 13
available to anyone Thursday, October 17, 13
just use() YUI().use('gallery-audio', function (Y) { // code goes here
}); Thursday, October 17, 13
mzl.la/OEbuQH Thursday, October 17, 13
AlloyUI Thursday, October 17, 13
@natecavanaugh Thursday, October 17, 13
created on 2009 Thursday, October 17, 13
alloyui.com Thursday, October 17, 13
built on top of YUI3 Thursday, October 17, 13
AlloyUI = calendar tabs buttons carousel ... audio Thursday, October
17, 13
AlloyUI = calendar tabs buttons carousel ... audio Thursday, October
17, 13
AlloyUI = calendar tabs buttons carousel ... audio Thursday, October
17, 13
AlloyUI = calendar tabs buttons carousel ... audio Thursday, October
17, 13
AlloyUI = calendar tabs buttons carousel ... audio Thursday, October
17, 13
AlloyUI = calendar tabs buttons carousel ... audio Thursday, October
17, 13
AlloyUI = calendar tabs buttons carousel ... audio Thursday, October
17, 13
Thursday, October 17, 13
Thursday, October 17, 13
what we wanted: char counter Thursday, October 17, 13
#twitter-box #myTextarea #myCounter Thursday, October 17, 13
#twitter-box #myTextarea #myCounter Thursday, October 17, 13
#twitter-box #myTextarea #myCounter Thursday, October 17, 13
#twitter-box #myTextarea #myCounter Thursday, October 17, 13
alloyui.com/examples/char-counter/real-world Thursday, October 17, 13
what we wanted: schedule Thursday, October 17, 13
Thursday, October 17, 13
alloyui.com/examples/scheduler Thursday, October 17, 13
what we wanted: a better way to express ideas Thursday,
October 17, 13
* drag and drop UI * flexible API * support
all browsers * no flash (HTML5) Thursday, October 17, 13
alloyui.com/examples/diagram-builder Thursday, October 17, 13
Thursday, October 17, 13
thank you :) Thursday, October 17, 13