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
400
7 Hábitos de Desenvolvedores Altamente Produtivos
zenorocha
1
520
What's new in the Liferay Community
zenorocha
0
690
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
990
Como investir em... você!
zenorocha
1
570
Other Decks in Programming
See All in Programming
明日から始めるリファクタリング
ryounasso
0
110
Swiftビルド弾丸ツアー - Swift Buildが作る新しいエコシステム
giginet
PRO
0
1.6k
株式会社 Sun terras カンパニーデック
sunterras
0
210
CSC305 Lecture 04
javiergs
PRO
0
250
iOS 17で追加されたSubscriptionStoreView を利用して5分でサブスク実装チャレンジ
natmark
0
510
XP, Testing and ninja testing ZOZ5
m_seki
2
270
いま中途半端なSwift 6対応をするより、Default ActorやApproachable Concurrencyを有効にしてからでいいんじゃない?
yimajo
2
330
Web フロントエンドエンジニアに開かれる AI Agent プロダクト開発 - Vercel AI SDK を観察して AI Agent と仲良くなろう! #FEC余熱NIGHT
izumin5210
3
370
Web Components で実現する Hotwire とフロントエンドフレームワークの橋渡し / Bridging with Web Components
da1chi
3
1.6k
『毎日の移動』を支えるGoバックエンド内製開発
yutautsugi
2
150
SpecKitでどこまでできる? コストはどれくらい?
leveragestech
0
490
Advance Your Career with Open Source
ivargrimstad
0
300
Featured
See All Featured
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
Facilitating Awesome Meetings
lara
56
6.6k
Producing Creativity
orderedlist
PRO
347
40k
StorybookのUI Testing Handbookを読んだ
zakiyama
31
6.2k
How To Stay Up To Date on Web Technology
chriscoyier
791
250k
Code Review Best Practice
trishagee
72
19k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
Building Better People: How to give real-time feedback that sticks.
wjessup
368
20k
How STYLIGHT went responsive
nonsquared
100
5.8k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
45
2.5k
Product Roadmaps are Hard
iamctodd
PRO
54
11k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
114
20k
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 :)