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
70
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
RAGの性能を評価しよう
kurahara
1
300
Strict Concurrencyにしたらdeinitでクラッシュする話
0si43
0
120
業務ヒアリングと知識の呪い
tamai_63
0
170
低コストで実現する社内文書RAG機能を搭載したAIチャットボット開発
takapy
3
650
AWSへのNIST SP800-171管理策 導入に向けての整備/20240930 Mitsutoshi Matsuo
shift_evolve
0
180
リスクから学ぶKubernetesコンテナセキュリティ/k8s-risk-and-security
mochizuki875
1
290
【shownet.conf_】ローカル5Gを活用したウォーキングツアーの体感向上
shownet
PRO
0
290
Tracking down sources of kernel errors with retsnoop
ennael
PRO
0
150
Oracle GoldenGate 23ai 導入Tips
oracle4engineer
PRO
1
220
KDD2024参加報告
cyberagentdevelopers
PRO
1
230
たった一人で始めた音楽制作が気がついたら会社公認の部活動になっていた話〜組織の垣根を超えるコラボレーションを実現するには〜 / On-KAG-bu
piyonakajima
0
180
Slackbot × RAG で実現する社内情報検索の最適化
howdy39
2
300
Featured
See All Featured
Statistics for Hackers
jakevdp
796
220k
The Straight Up "How To Draw Better" Workshop
denniskardys
231
130k
Testing 201, or: Great Expectations
jmmastey
38
7k
Designing for Performance
lara
604
68k
Designing for humans not robots
tammielis
249
25k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
4
110
Making Projects Easy
brettharned
114
5.8k
Scaling GitHub
holman
458
140k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
504
140k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
7
560
Making the Leap to Tech Lead
cromwellryan
130
8.8k
How GitHub Uses GitHub to Build GitHub
holman
473
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