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
67
Getting started with AlloyUI
Eduardo Lundgren
November 20, 2013
Tweet
Share
More Decks by Eduardo Lundgren
See All by Eduardo Lundgren
WeDeploy
eduardolundgren
0
43
Introducing Liferay Standalone Applications
eduardolundgren
3
510
Single Page Applications in Liferay
eduardolundgren
5
2.5k
Single Page Applications done right
eduardolundgren
10
740
tracking.js with Maira Bello
eduardolundgren
0
110
Single Page Application
eduardolundgren
0
400
Getting Started with YUI3 and AlloyUI
eduardolundgren
0
69
Augmented Reality.js
eduardolundgren
0
150
Liferay UI revolution
eduardolundgren
0
180
Other Decks in Technology
See All in Technology
【株式会社ELYZA】|GENIAC成果報告会 自社開発モデルプレゼンテーション
elyza
1
310
Creative UIs with Compose: DroidKaigi 2024
chrishorner
1
590
Classmethod AI Talks(CATs) #1 司会進行スライド(2024.09.19) / classmethod-ai-talks-aka-cats_moderator-slides_vol1_2024-09-19
shinyaa31
0
120
Fediverse Discovery Providers overview
andypiper
0
170
2024年のナビゲーション・フォーカス対応:Composeでキーボード・ナビゲーションをサポートしよう
tahia910
0
110
グイグイ系QAマネージャーの仕事
sadonosake
0
350
watsonx.ai Dojo 環境準備について
oniak3ibm
PRO
0
340
Segment Anything Model 2
tenten0727
3
710
o1のAPIで実験してみたが 制限きつすぎて辛かった話
pharma_x_tech
0
210
タイミーのレコメンドにおける ABテストの運用
ozeshun
1
180
学術機関におけるID連携とOpenID Connect
fujie
0
280
ついに出た!OpenAIの最新モデル「o1」って何がすごいの?
minorun365
PRO
3
1.2k
Featured
See All Featured
Imperfection Machines: The Place of Print at Facebook
scottboms
263
13k
Fashionably flexible responsive web design (full day workshop)
malarkey
401
65k
Robots, Beer and Maslow
schacon
PRO
157
8.2k
The Straight Up "How To Draw Better" Workshop
denniskardys
230
130k
Clear Off the Table
cherdarchuk
91
320k
The Cost Of JavaScript in 2023
addyosmani
42
5.7k
The Pragmatic Product Professional
lauravandoore
31
6.2k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
1
55
YesSQL, Process and Tooling at Scale
rocio
167
14k
Making the Leap to Tech Lead
cromwellryan
128
8.8k
Embracing the Ebb and Flow
colly
83
4.4k
Navigating Team Friction
lara
183
13k
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