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
78
Getting started with AlloyUI
Eduardo Lundgren
November 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
760
tracking.js with Maira Bello
eduardolundgren
0
120
Single Page Application
eduardolundgren
0
400
Getting Started with YUI3 and AlloyUI
eduardolundgren
0
77
Augmented Reality.js
eduardolundgren
0
150
Liferay UI revolution
eduardolundgren
0
190
Other Decks in Technology
See All in Technology
Copilot coding agentにベットしたいCTOが開発組織で取り組んだこと / GitHub Copilot coding agent in Team
tnir
0
150
United airlines®️ USA Contact Numbers: Complete 2025 Support Guide
unitedflyhelp
0
340
スタックチャン家庭用アシスタントへの道
kanekoh
0
110
「クラウドコスト絶対削減」を支える技術—FinOpsを超えた徹底的なクラウドコスト削減の実践論
delta_tech
4
190
アクセスピークを制するオートスケール再設計: 障害を乗り越えKEDAで実現したリソース管理の最適化
myamashii
1
330
ロールが細分化された組織でSREは何をするか?
tgidgd
1
200
20250708オープンエンドな探索と知識発見
sakana_ai
PRO
4
860
Four Keysから始める信頼性の改善 - SRE NEXT 2025
ozakikota
0
210
AWS CDK 入門ガイド これだけは知っておきたいヒント集
anank
5
600
IPA&AWSダブル全冠が明かす、人生を変えた勉強法のすべて
iwamot
PRO
2
220
マルチプロダクト環境におけるSREの役割 / SRE NEXT 2025 lunch session
sugamasao
1
390
関数型プログラミングで 「脳がバグる」を乗り越える
manabeai
2
220
Featured
See All Featured
Why You Should Never Use an ORM
jnunemaker
PRO
58
9.4k
GraphQLの誤解/rethinking-graphql
sonatard
71
11k
How to Think Like a Performance Engineer
csswizardry
25
1.7k
Stop Working from a Prison Cell
hatefulcrawdad
271
21k
Imperfection Machines: The Place of Print at Facebook
scottboms
267
13k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
229
22k
GraphQLとの向き合い方2022年版
quramy
49
14k
Designing for Performance
lara
610
69k
Java REST API Framework Comparison - PWX 2021
mraible
31
8.7k
4 Signs Your Business is Dying
shpigford
184
22k
Building Adaptive Systems
keathley
43
2.7k
Agile that works and the tools we love
rasmusluckow
329
21k
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