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
Zeno Rocha
April 25, 2013
Programming
6
510
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
600
7 Habits of Highly Productive Developers
zenorocha
1
390
7 Hábitos de Desenvolvedores Altamente Produtivos
zenorocha
1
500
What's new in the Liferay Community
zenorocha
0
680
Launching Liferay Projects Faster with WeDeploy
zenorocha
1
560
How Liferay fits into the real of latest technologies
zenorocha
0
600
Estoicismo e JavaScript
zenorocha
3
1.1k
Por que ninguém se importa com seu novo projeto open source?
zenorocha
2
970
Como investir em... você!
zenorocha
1
560
Other Decks in Programming
See All in Programming
Rails Frontend Evolution: It Was a Setup All Along
skryukov
0
160
Flutterで備える!Accessibility Nutrition Labels完全ガイド
yuukiw00w
0
160
Composerが「依存解決」のためにどんな工夫をしているか #phpcon
o0h
PRO
1
270
RailsGirls IZUMO スポンサーLT
16bitidol
0
190
PostgreSQLのRow Level SecurityをPHPのORMで扱う Eloquent vs Doctrine #phpcon #track2
77web
2
530
ruby.wasmで多人数リアルタイム通信ゲームを作ろう
lnit
3
490
Goで作る、開発・CI環境
sin392
0
240
システム成長を止めない!本番無停止テーブル移行の全貌
sakawe_ee
1
210
PHPでWebSocketサーバーを実装しよう2025
kubotak
0
290
Quand Symfony, ApiPlatform, OpenAI et LangChain s'allient pour exploiter vos PDF : de la théorie à la production…
ahmedbhs123
0
200
設計やレビューに悩んでいるPHPerに贈る、クリーンなオブジェクト設計の指針たち
panda_program
6
2.2k
Discover Metal 4
rei315
2
140
Featured
See All Featured
Become a Pro
speakerdeck
PRO
29
5.4k
Raft: Consensus for Rubyists
vanstee
140
7k
We Have a Design System, Now What?
morganepeng
53
7.7k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
8
690
A Modern Web Designer's Workflow
chriscoyier
695
190k
The Art of Programming - Codeland 2020
erikaheidi
54
13k
BBQ
matthewcrist
89
9.7k
Facilitating Awesome Meetings
lara
54
6.4k
Building Applications with DynamoDB
mza
95
6.5k
4 Signs Your Business is Dying
shpigford
184
22k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
GraphQLとの向き合い方2022年版
quramy
49
14k
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 :)