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
770
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
それでも私が品質保証プロセスを作り続ける理由 #テストラジオ / Why I still continue to create QA process
pineapplecandy
0
150
WEBサービスを成り立たせるAWSサービス
takano0131
1
200
Azureコストと向き合った、4年半のリアル / Four and a half years of dealing with Azure costs
aeonpeople
1
250
All About Sansan – for New Global Engineers
sansan33
PRO
1
1.2k
MCP ✖️ Apps SDKを触ってみた
hisuzuya
0
240
Kubernetes self-healing of your workload
hwchiu
0
320
フレームワークを意識させないワークショップづくり
keigosuda
0
230
Linux カーネルが支えるコンテナの仕組み / LF Japan Community Days 2025 Osaka
tenforward
1
100
Okta Identity Governanceで実現する最小権限の原則 / Implementing the Principle of Least Privilege with Okta Identity Governance
tatsumin39
0
150
混合雲環境整合異質工作流程工具運行關鍵業務 Job 的經驗分享
yaosiang
0
140
ローカルLLMとLINE Botの組み合わせ その2(EVO-X2でgpt-oss-120bを利用) / LINE DC Generative AI Meetup #7
you
PRO
0
140
OSSで50の競合と戦うためにやったこと
yamadashy
3
880
Featured
See All Featured
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
55
3k
Practical Orchestrator
shlominoach
190
11k
Testing 201, or: Great Expectations
jmmastey
45
7.7k
Designing for Performance
lara
610
69k
Leading Effective Engineering Teams in the AI Era
addyosmani
7
560
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
16
1.7k
Balancing Empowerment & Direction
lara
5
700
Faster Mobile Websites
deanohume
310
31k
GraphQLの誤解/rethinking-graphql
sonatard
73
11k
YesSQL, Process and Tooling at Scale
rocio
173
14k
Speed Design
sergeychernyshev
32
1.2k
4 Signs Your Business is Dying
shpigford
185
22k
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