Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
Getting started with YUI3 and AlloyUI
Zeno Rocha
April 25, 2013
Programming
6
460
Getting started with YUI3 and AlloyUI
JAX Conference - Mainz, 2013
Zeno Rocha
April 25, 2013
Tweet
Share
More Decks by Zeno Rocha
See All by Zeno Rocha
The Next Generation of Developer-First Products
zenorocha
1
240
7 Habits of Highly Productive Developers
zenorocha
1
120
7 Hábitos de Desenvolvedores Altamente Produtivos
zenorocha
1
130
What's new in the Liferay Community
zenorocha
0
430
Launching Liferay Projects Faster with WeDeploy
zenorocha
1
320
How Liferay fits into the real of latest technologies
zenorocha
0
210
Estoicismo e JavaScript
zenorocha
3
670
Por que ninguém se importa com seu novo projeto open source?
zenorocha
2
580
Como investir em... você!
zenorocha
1
340
Other Decks in Programming
See All in Programming
ポケモンで学ぶiOS 16弾丸ツアー 🚅
giginet
PRO
1
600
フロントエンドで学んだことをデータ分析で使ってみた話
daichi_igarashi
0
160
23年のJavaトレンドは?Quarkusで理解するコンテナネイティブJava
tatsuya1bm
1
110
xarray-Datatree: Hierarchical Data Structures for Multi-Model Science
tomnicholas
0
200
(新米)エンジニアリングマネージャーのしごと #RSGT2023
murabayashi
9
5.4k
ちょうぜつ改め21世紀ふつうのソフトウェア設計
tanakahisateru
7
5.9k
コンピュータビジョンセミナー2 / computer_vision_seminar_libSGM
fixstars
0
310
SHOWROOMの分析目的を意識した伝え方・コミュニケーション
hatapu
0
230
AWS App Runnerがそろそろ本番環境でも使い物になりそう
n1215
PRO
0
840
爆速の日経電子版開発の今
shinyaigeek
0
250
和暦を正しく扱うための暦の話
nagise
10
4.6k
MBSD Cybersecurity Challenges 2022 最終審査会 IPFactory 発表スライド
futabato
0
830
Featured
See All Featured
Principles of Awesome APIs and How to Build Them.
keavy
117
15k
Six Lessons from altMBA
skipperchong
15
2.3k
Building Applications with DynamoDB
mza
85
4.9k
The Invisible Side of Design
smashingmag
292
48k
Mobile First: as difficult as doing things right
swwweet
213
7.8k
Navigating Team Friction
lara
176
12k
Bash Introduction
62gerente
601
210k
Atom: Resistance is Futile
akmur
256
24k
Faster Mobile Websites
deanohume
295
29k
Music & Morning Musume
bryan
36
4.6k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
44
14k
Gamification - CAS2011
davidbonilla
75
4.1k
Transcript
getting started with YUI3 and AlloyUI Mainz, 2013.
None
None
how some back-end devs see themselves
how some back-end devs see front-end devs
“CSS is very easy”
None
None
None
“javascript is ugly and full of bugs”
None
EcmaScript 6 is coming
front-end is changing
extremejs.com
github.com/languages
there are three types of people
1. those who compile javascript
developers.google.com/web-toolkit
2. those who doesn’t compile
developers.google.com/closure/library
3. java == javascript
None
None
twitter.com/joelambert/status/327047616326152193
None
today we’re going to talk about server-agnostic JS frameworks
Events, Selection, DOM Manipulation, Animation, Ajax requests jquery.com
mootools.net
UI components twitter.github.io/bootstrap
jqueryui.com
Templates mustache.github.io
handlebarsjs.com
Module loader requirejs.org
headjs.com
MV* backbonejs.org
knockoutjs.com
angularjs.org
emberjs.com
Tests BDD TDD pivotal.github.io/jasmine
qunitjs.com
None
yuilibrary.com
yuilibrary.com/projects/yuitest
yui.github.io/yuicompressor
yui.github.io/yuidoc
yui.github.io/yogi
YUI3 modules
YUI = effects DOM ajax events ... MVC
YUI = effects DOM ajax events ... MVC
YUI = effects DOM ajax events ... MVC
YUI = effects DOM ajax events ... MVC
YUI = effects DOM ajax events ... MVC
YUI = effects DOM ajax events ... MVC
YUI = effects DOM ajax events ... MVC
yuilibrary.com/yui/docs/guides
yuilibrary.com/yui/docs/dial/dial-interactive.html
yuilibrary.com/yui/docs/app/app-todo.html
yuilibrary.com/yui/docs/graphics/graphics-violin.html
YUI3 basics
$('.foo'); DOM traversal Y.all('.foo'); YUI3 jQuery
$('#foo').html('bar'); DOM manipulation Y.one('#foo').setHTML('bar'); YUI3 jQuery
$('#close-btn').on('click', function() { // do something }); events Y.one('#close-btn').on('click', function()
{ // do something }); YUI3 jQuery
$('#fade').animate({ opacity: 0, }, 5000); effects Y.one('#fade').transition({ duration: 1, opacity
: 0 }); YUI3 jQuery
$.ajax({ url: "api.json", success: function(data) { // do something }
}); ajax Y.io('api.json', { on: { success: function(data) { // do something } } }); YUI3 jQuery
alloyui.com/rosetta-stone
YUI3 loading
None
“Optimize the front-end performance first, because 80/90% of the user
response time is spent there.” - Steve Souders, Engineer at Google
without YUI...
<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> ... ...
performance-- maintainability--
blocks render
with YUI...
one <script>
seed file <script src="http://yui.yahooapis.com/ 3.9.1/build/yui/yui-min.js"></script>
everything else asynchronous combo-loaded from CDN
sandbox YUI().use('module-name', function (Y) { // code goes here });
why asynchronous?
non-blocking http requests
why combo-loaded?
yuilibrary.com/yui/configurator
why load from a CDN?
geographically closer
YUI gallery
yuilibrary.com/gallery
your code on Yahoo’s CDN
github.com/yui/yui3-gallery
available to anyone
just use() YUI().use('gallery-audio', function (Y) { // code goes here
});
mzl.la/OEbuQH
AlloyUI
@natecavanaugh
@eduardolundgren
created on 2009
alloyui.com
built on top of YUI3
AlloyUI = calendar tabs buttons carousel ... audio
AlloyUI = calendar tabs buttons carousel ... audio
AlloyUI = calendar tabs buttons carousel ... audio
AlloyUI = calendar tabs buttons carousel ... audio
AlloyUI = calendar tabs buttons carousel ... audio
AlloyUI = calendar tabs buttons carousel ... audio
AlloyUI = calendar tabs buttons carousel ... audio
what we wanted: char counter
#twitter-box #myTextarea #myCounter
#twitter-box #myTextarea #myCounter
#twitter-box #myTextarea #myCounter
#twitter-box #myTextarea #myCounter
alloyui.com/examples/char-counter/real-world
what we wanted: schedule
None
alloyui.com/examples/scheduler
what we wanted: a better way to express ideas
* drag and drop UI * flexible API * support
all browsers * no flash (HTML5)
alloyui.com/examples/diagram-builder
alloyui.com/api
but I’m a java guy!
<taglibs> \o/
taglibs <aui:button name="saveButton" type="submit" value="save"/> Button
taglibs <aui:input name="myField" > <aui:validator name="required" /> <aui:validator name="digits" />
<aui:validator name="range" > [8,50] </aui:validator> </aui:input> Form Validation
the success of an application doesn’t depends on the technology
itself... ...but how it is applied.
None
None
dank :)