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 YUI3 and AlloyUI
Search
Eduardo Lundgren
December 20, 2013
Technology
0
69
Getting Started with YUI3 and AlloyUI
Eduardo Lundgren
December 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 AlloyUI
eduardolundgren
0
67
Augmented Reality.js
eduardolundgren
0
150
Liferay UI revolution
eduardolundgren
0
180
Other Decks in Technology
See All in Technology
OR学会2024秋_短期収益と将来のオフ方策評価性能を考慮したクーポン割当方策混合比の決定
recruitengineers
PRO
4
470
Mocking in Rust Applications
taiki45
2
410
DevRelの始め方
moongift
PRO
2
390
Google CloudのLLM活用の選択肢を広げるVertex AIのパートナーモデル
nayuts
0
130
アプリをリリースできる状態に保ったまま 段階的にリファクタリングするための 戦略と戦術 / Strategies and tactics for incremental refactoring
yanzm
6
1.4k
テスト”ケース”駆動開発 で手戻りをなくそう
ryohma0510
0
330
DuckDB雑紹介(1.1対応版)@DuckDB座談会
ktz
6
1.4k
言葉は感情の近似値である。その感情と言葉の誤差を最小化しよう ~コミュニケーションにおけるアナログ/デジタル変換の課題に立ち向かう~
nktamago
0
230
Road to Single Activity
yurihondo
2
240
開発生産性を始める前に開発チームができること / optim-improve-development-productivity.pdf
optim
0
110
Classmethod AI Talks(CATs) #1 司会進行スライド(2024.09.19) / classmethod-ai-talks-aka-cats_moderator-slides_vol1_2024-09-19
shinyaa31
0
120
PdMはどのように全てのスピードを上げられるか ~ 非連続進化のための具体的な取り組み ~
sansantech
PRO
4
1.3k
Featured
See All Featured
Pencils Down: Stop Designing & Start Developing
hursman
119
11k
Mobile First: as difficult as doing things right
swwweet
221
8.8k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
1
55
GraphQLの誤解/rethinking-graphql
sonatard
65
9.8k
Infographics Made Easy
chrislema
239
18k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
25
3.9k
Fontdeck: Realign not Redesign
paulrobertlloyd
80
5.1k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
26
1.3k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
26
2k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
326
21k
Practical Orchestrator
shlominoach
185
10k
How GitHub Uses GitHub to Build GitHub
holman
472
290k
Transcript
getting started with YUI3 and AlloyUI Front in BH, 2013
terça-feira, 6 de agosto de 13
@eduardolundgren terça-feira, 6 de agosto de 13
terça-feira, 6 de agosto de 13
jQuery jQueryUI YUI3 Liferay tracking.js AlloyUI jQuery Simulate nodegh terça-feira,
6 de agosto de 13
jQuery jQueryUI YUI3 Liferay tracking.js AlloyUI jQuery Simulate nodegh terça-feira,
6 de agosto de 13
jQuery jQueryUI YUI3 Liferay tracking.js AlloyUI jQuery Simulate nodegh terça-feira,
6 de agosto de 13
jQuery jQueryUI YUI3 Liferay tracking.js AlloyUI jQuery Simulate nodegh terça-feira,
6 de agosto de 13
jQuery jQueryUI YUI3 Liferay tracking.js AlloyUI jQuery Simulate nodegh terça-feira,
6 de agosto de 13
jQuery jQueryUI YUI3 Liferay tracking.js AlloyUI jQuery Simulate nodegh terça-feira,
6 de agosto de 13
jQuery jQueryUI YUI3 Liferay tracking.js AlloyUI jQuery Simulate nodegh terça-feira,
6 de agosto de 13
jQuery jQueryUI YUI3 Liferay tracking.js AlloyUI jQuery Simulate nodegh terça-feira,
6 de agosto de 13
jQuery jQueryUI YUI3 Liferay tracking.js AlloyUI jQuery Simulate nodegh terça-feira,
6 de agosto de 13
jquery.com (2006) terça-feira, 6 de agosto de 13
today we’re going to talk about server-agnostic JS frameworks terça-feira,
6 de agosto de 13
Events, Selection, DOM Manipulation, Animation, Ajax requests jquery.com terça-feira, 6
de agosto de 13
mootools.net terça-feira, 6 de agosto de 13
UI components twitter.github.io/bootstrap terça-feira, 6 de agosto de 13
jqueryui.com terça-feira, 6 de agosto de 13
Templates mustache.github.io terça-feira, 6 de agosto de 13
handlebarsjs.com terça-feira, 6 de agosto de 13
Module loader requirejs.org terça-feira, 6 de agosto de 13
headjs.com terça-feira, 6 de agosto de 13
MV* backbonejs.org terça-feira, 6 de agosto de 13
knockoutjs.com terça-feira, 6 de agosto de 13
angularjs.org terça-feira, 6 de agosto de 13
emberjs.com terça-feira, 6 de agosto de 13
Tests BDD TDD pivotal.github.io/jasmine terça-feira, 6 de agosto de 13
qunitjs.com terça-feira, 6 de agosto de 13
terça-feira, 6 de agosto de 13
yuilibrary.com terça-feira, 6 de agosto de 13
YUI3 modules terça-feira, 6 de agosto de 13
YUI = effects DOM ajax events ... MVC terça-feira, 6
de agosto de 13
YUI = effects DOM ajax events ... MVC terça-feira, 6
de agosto de 13
YUI = effects DOM ajax events ... MVC terça-feira, 6
de agosto de 13
YUI = effects DOM ajax events ... MVC terça-feira, 6
de agosto de 13
YUI = effects DOM ajax events ... MVC terça-feira, 6
de agosto de 13
YUI = effects DOM ajax events ... MVC terça-feira, 6
de agosto de 13
YUI = effects DOM ajax events ... MVC terça-feira, 6
de agosto de 13
yuilibrary.com/yui/docs/guides terça-feira, 6 de agosto de 13
yuilibrary.com/yui/docs/dial/dial-interactive.html terça-feira, 6 de agosto de 13
yuilibrary.com/yui/docs/app/app-todo.html terça-feira, 6 de agosto de 13
yuilibrary.com/yui/docs/graphics/graphics-violin.html terça-feira, 6 de agosto de 13
YUI3 basics terça-feira, 6 de agosto de 13
$('.foo'); DOM traversal Y.all('.foo'); YUI3 jQuery terça-feira, 6 de agosto
de 13
$('#foo').html('bar'); DOM manipulation Y.one('#foo').setHTML('bar'); YUI3 jQuery terça-feira, 6 de agosto
de 13
$('#close-btn').on('click', function() { // do something }); events Y.one('#close-btn').on('click', function()
{ // do something }); YUI3 jQuery terça-feira, 6 de agosto de 13
$('#fade').animate({ opacity: 0, }, 5000); effects Y.one('#fade').transition({ duration: 1, opacity
: 0 }); YUI3 jQuery terça-feira, 6 de agosto de 13
$.ajax({ url: "api.json", success: function(data) { // do something }
}); ajax Y.io('api.json', { on: { success: function(data) { // do something } } }); YUI3 jQuery terça-feira, 6 de agosto de 13
alloyui.com/rosetta-stone terça-feira, 6 de agosto de 13
YUI3 loading terça-feira, 6 de agosto de 13
terça-feira, 6 de agosto de 13
“Optimize the front-end performance first, because 80% of the user
response time is spent there.” - Steve Souders, Engineer at Google terça-feira, 6 de agosto de 13
without YUI... terça-feira, 6 de agosto de 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> ... ... terça-feira, 6 de agosto de 13
performance-- maintainability-- terça-feira, 6 de agosto de 13
blocks render terça-feira, 6 de agosto de 13
with YUI... terça-feira, 6 de agosto de 13
one <script> terça-feira, 6 de agosto de 13
seed file <script src="http://yui.yahooapis.com/ 3.9.1/build/yui/yui-min.js"></script> <~26KB> terça-feira, 6 de agosto
de 13
seed file <script src="http://yui.yahooapis.com/ 3.9.1/build/yui/yui-min.js"></script> <~26KB> terça-feira, 6 de agosto
de 13
everything else asynchronous combo-loaded from CDN terça-feira, 6 de agosto
de 13
sandbox YUI().use('module-name', function (Y) { // code goes here });
terça-feira, 6 de agosto de 13
why asynchronous? terça-feira, 6 de agosto de 13
non-blocking http requests terça-feira, 6 de agosto de 13
load on demand terça-feira, 6 de agosto de 13
why combo-loaded? terça-feira, 6 de agosto de 13
yuilibrary.com/yui/configurator terça-feira, 6 de agosto de 13
loader +combo terça-feira, 6 de agosto de 13
why load from a CDN? terça-feira, 6 de agosto de
13
geographically closer terça-feira, 6 de agosto de 13
YUI gallery terça-feira, 6 de agosto de 13
yuilibrary.com/gallery terça-feira, 6 de agosto de 13
your code on Yahoo’s CDN terça-feira, 6 de agosto de
13
github.com/yui/yui3-gallery terça-feira, 6 de agosto de 13
available to anyone terça-feira, 6 de agosto de 13
just use() YUI().use('gallery-audio', function (Y) { // code goes here
}); terça-feira, 6 de agosto de 13
mzl.la/OEbuQH terça-feira, 6 de agosto de 13
AlloyUI terça-feira, 6 de agosto de 13
@natecavanaugh terça-feira, 6 de agosto de 13
created on 2009 terça-feira, 6 de agosto de 13
alloyui.com terça-feira, 6 de agosto de 13
built on top of YUI3 terça-feira, 6 de agosto de
13
AlloyUI = calendar tabs buttons carousel ... audio terça-feira, 6
de agosto de 13
AlloyUI = calendar tabs buttons carousel ... audio terça-feira, 6
de agosto de 13
AlloyUI = calendar tabs buttons carousel ... audio terça-feira, 6
de agosto de 13
AlloyUI = calendar tabs buttons carousel ... audio terça-feira, 6
de agosto de 13
AlloyUI = calendar tabs buttons carousel ... audio terça-feira, 6
de agosto de 13
AlloyUI = calendar tabs buttons carousel ... audio terça-feira, 6
de agosto de 13
AlloyUI = calendar tabs buttons carousel ... audio terça-feira, 6
de agosto de 13
terça-feira, 6 de agosto de 13
terça-feira, 6 de agosto de 13
what we wanted: char counter terça-feira, 6 de agosto de
13
#twitter-box #myTextarea #myCounter terça-feira, 6 de agosto de 13
#twitter-box #myTextarea #myCounter terça-feira, 6 de agosto de 13
#twitter-box #myTextarea #myCounter terça-feira, 6 de agosto de 13
#twitter-box #myTextarea #myCounter terça-feira, 6 de agosto de 13
alloyui.com/examples/char-counter/real-world terça-feira, 6 de agosto de 13
what we wanted: schedule terça-feira, 6 de agosto de 13
terça-feira, 6 de agosto de 13
alloyui.com/examples/scheduler terça-feira, 6 de agosto de 13
what we wanted: a better way to express ideas terça-feira,
6 de agosto de 13
* drag and drop UI * flexible API * support
all browsers * no flash (HTML5) terça-feira, 6 de agosto de 13
alloyui.com/examples/diagram-builder terça-feira, 6 de agosto de 13
terça-feira, 6 de agosto de 13
obrigado :) terça-feira, 6 de agosto de 13