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
520
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
620
7 Habits of Highly Productive Developers
zenorocha
1
410
7 Hábitos de Desenvolvedores Altamente Produtivos
zenorocha
1
520
What's new in the Liferay Community
zenorocha
0
700
Launching Liferay Projects Faster with WeDeploy
zenorocha
1
570
How Liferay fits into the real of latest technologies
zenorocha
0
620
Estoicismo e JavaScript
zenorocha
3
1.1k
Por que ninguém se importa com seu novo projeto open source?
zenorocha
2
1k
Como investir em... você!
zenorocha
1
580
Other Decks in Programming
See All in Programming
uniqueパッケージの内部実装を支えるweak pointerの話
magavel
0
970
iOSエンジニア向けの英語学習アプリを作る!
yukawashouhei
0
190
CSC305 Lecture 06
javiergs
PRO
0
210
止められない医療アプリ、そっと Swift 6 へ
medley
1
150
複雑化したリポジトリをなんとかした話 pipenvからuvによるモノレポ構成への移行
satoshi256kbyte
1
1k
タスクの特性や不確実性に応じた最適な作業スタイルの選択(ペアプロ・モブプロ・ソロプロ)と実践 / Optimal Work Style Selection: Pair, Mob, or Solo Programming.
honyanya
3
160
iOSエンジニア向けの英語学習アプリを作る!
yukawashouhei
0
190
The Past, Present, and Future of Enterprise Java
ivargrimstad
0
220
CSC509 Lecture 05
javiergs
PRO
0
300
詳しくない分野でのVibe Codingで困ったことと学び/vibe-coding-in-unfamiliar-area
shibayu36
3
4.8k
Catch Up: Go Style Guide Update
andpad
0
210
Six and a half ridiculous things to do with Quarkus
hollycummins
0
150
Featured
See All Featured
How To Stay Up To Date on Web Technology
chriscoyier
791
250k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
229
22k
Fantastic passwords and where to find them - at NoRuKo
philnash
52
3.4k
Music & Morning Musume
bryan
46
6.8k
Building Flexible Design Systems
yeseniaperezcruz
329
39k
Docker and Python
trallard
46
3.6k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
3.1k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
51k
Being A Developer After 40
akosma
91
590k
Learning to Love Humans: Emotional Interface Design
aarron
274
41k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
45
2.5k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
34
6.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 :)