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
75
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
750
tracking.js with Maira Bello
eduardolundgren
0
110
Single Page Application
eduardolundgren
0
400
Getting Started with YUI3 and AlloyUI
eduardolundgren
0
74
Augmented Reality.js
eduardolundgren
0
150
Liferay UI revolution
eduardolundgren
0
190
Other Decks in Technology
See All in Technology
LT:組込み屋さんのオシロが壊れた!
windy_pon
0
470
TypeScript と歩む OpenAPI の discriminator / OpenAPI discriminator with TypeScript
kaminashi
1
150
GitHub Coding Agent 概要
kkamegawa
1
1.7k
Redmineの意外と知らない便利機能 (Redmine 6.0対応版)
vividtone
0
1.2k
Zero Data Loss Autonomous Recovery Service サービス概要
oracle4engineer
PRO
2
7.2k
金融システムをモダナイズするためのAmazon Elastic Kubernetes Service(EKS)ノウハウ大全
daitak
0
130
AIに実況させる / AI Streamer
motemen
3
1.4k
Scale Security Programs with Scorecarding
ramimac
0
440
プラットフォームとしての Datadog / Datadog as Platforms
aoto
PRO
1
340
JNation 2025 - Quarkus for Spring Developers
edeandrea
PRO
0
110
FastMCPでSQLをチェックしてくれるMCPサーバーを自作してCursorから動かしてみた
nayuts
1
220
名刺メーカーDevグループ 紹介資料
sansan33
PRO
0
740
Featured
See All Featured
Testing 201, or: Great Expectations
jmmastey
42
7.5k
Into the Great Unknown - MozCon
thekraken
39
1.8k
Making Projects Easy
brettharned
116
6.2k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
45
9.6k
How to Ace a Technical Interview
jacobian
276
23k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
48
5.4k
How STYLIGHT went responsive
nonsquared
100
5.6k
Raft: Consensus for Rubyists
vanstee
137
7k
Optimising Largest Contentful Paint
csswizardry
37
3.3k
How to train your dragon (web standard)
notwaldorf
92
6k
How to Think Like a Performance Engineer
csswizardry
23
1.6k
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