Submit Search
Upload
Getting Started with YUI3 and AlloyUI Framework
•
14 likes
•
11,590 views
AI-enhanced title
Zeno Rocha
Follow
Jax Conf @ Mainz, Germany @ April, 2013
Read less
Read more
Technology
Report
Share
Report
Share
1 of 124
Download now
Download to read offline
Recommended
2009 End Of Year Cluster Share
2009 End Of Year Cluster Share
Shelly Park School
jQueryTO: State of jQuery March 2013
jQueryTO: State of jQuery March 2013
dmethvin
jQuery Conference Toronto
jQuery Conference Toronto
dmethvin
Lithe
Lithe
xiaojueqq12345
Web services and JavaScript
Web services and JavaScript
Christian Heilmann
PrairieDevCon 2014 - Web Doesn't Mean Slow
PrairieDevCon 2014 - Web Doesn't Mean Slow
dmethvin
Introduction to Android G-sensor
Introduction to Android G-sensor
Johnson Chou
Liferay UI (R)evolution
Liferay UI (R)evolution
Zeno Rocha
Recommended
2009 End Of Year Cluster Share
2009 End Of Year Cluster Share
Shelly Park School
jQueryTO: State of jQuery March 2013
jQueryTO: State of jQuery March 2013
dmethvin
jQuery Conference Toronto
jQuery Conference Toronto
dmethvin
Lithe
Lithe
xiaojueqq12345
Web services and JavaScript
Web services and JavaScript
Christian Heilmann
PrairieDevCon 2014 - Web Doesn't Mean Slow
PrairieDevCon 2014 - Web Doesn't Mean Slow
dmethvin
Introduction to Android G-sensor
Introduction to Android G-sensor
Johnson Chou
Liferay UI (R)evolution
Liferay UI (R)evolution
Zeno Rocha
Introdução ao HTML4 e HTML5
Introdução ao HTML4 e HTML5
Leonardo Soares
Building a JavaScript Module Framework at Gilt
Building a JavaScript Module Framework at Gilt
Eric Shepherd
HTML 5
HTML 5
Zeno Rocha
YUI App Framework
YUI App Framework
elHornair
Desbravando o HTML5 Boilerplate
Desbravando o HTML5 Boilerplate
Zeno Rocha
Construindo Projetos Robustos em HTML5
Construindo Projetos Robustos em HTML5
Zeno Rocha
Android Training (Sensors)
Android Training (Sensors)
Khaled Anaqwa
Web APIs you (probably) didn't know existed
Web APIs you (probably) didn't know existed
Zeno Rocha
JavaScript MV* Framework - Making the Right Choice
JavaScript MV* Framework - Making the Right Choice
Dmitry Sheiko
Starting with jQuery
Starting with jQuery
Anil Kumar
Jquery
Jquery
Girish Srivastava
Going Offline with JS
Going Offline with JS
brendankowitz
Seven Versions of One Web Application
Seven Versions of One Web Application
Yakov Fain
Going offline with JS (DDD Sydney)
Going offline with JS (DDD Sydney)
brendankowitz
Angularjs cascade
Angularjs cascade
hannonhill
jquery summit presentation for large scale javascript applications
jquery summit presentation for large scale javascript applications
DivyanshGupta922023
jQuery - the world's most popular java script library comes to XPages
jQuery - the world's most popular java script library comes to XPages
Mark Roden
Jquery
Jquery
Swapnil & Patil
Dynamic Groovy Edges
Dynamic Groovy Edges
Jimmy Ray
Modules and EmbedJS
Modules and EmbedJS
Jens Arps
Front-end optimisation & jQuery Internals (Pycon)
Front-end optimisation & jQuery Internals (Pycon)
Artur Cistov
Javascript toolkit-2.0
Javascript toolkit-2.0
Thoughtworks
More Related Content
Viewers also liked
Introdução ao HTML4 e HTML5
Introdução ao HTML4 e HTML5
Leonardo Soares
Building a JavaScript Module Framework at Gilt
Building a JavaScript Module Framework at Gilt
Eric Shepherd
HTML 5
HTML 5
Zeno Rocha
YUI App Framework
YUI App Framework
elHornair
Desbravando o HTML5 Boilerplate
Desbravando o HTML5 Boilerplate
Zeno Rocha
Construindo Projetos Robustos em HTML5
Construindo Projetos Robustos em HTML5
Zeno Rocha
Android Training (Sensors)
Android Training (Sensors)
Khaled Anaqwa
Web APIs you (probably) didn't know existed
Web APIs you (probably) didn't know existed
Zeno Rocha
Viewers also liked
(8)
Introdução ao HTML4 e HTML5
Introdução ao HTML4 e HTML5
Building a JavaScript Module Framework at Gilt
Building a JavaScript Module Framework at Gilt
HTML 5
HTML 5
YUI App Framework
YUI App Framework
Desbravando o HTML5 Boilerplate
Desbravando o HTML5 Boilerplate
Construindo Projetos Robustos em HTML5
Construindo Projetos Robustos em HTML5
Android Training (Sensors)
Android Training (Sensors)
Web APIs you (probably) didn't know existed
Web APIs you (probably) didn't know existed
Similar to Getting Started with YUI3 and AlloyUI Framework
JavaScript MV* Framework - Making the Right Choice
JavaScript MV* Framework - Making the Right Choice
Dmitry Sheiko
Starting with jQuery
Starting with jQuery
Anil Kumar
Jquery
Jquery
Girish Srivastava
Going Offline with JS
Going Offline with JS
brendankowitz
Seven Versions of One Web Application
Seven Versions of One Web Application
Yakov Fain
Going offline with JS (DDD Sydney)
Going offline with JS (DDD Sydney)
brendankowitz
Angularjs cascade
Angularjs cascade
hannonhill
jquery summit presentation for large scale javascript applications
jquery summit presentation for large scale javascript applications
DivyanshGupta922023
jQuery - the world's most popular java script library comes to XPages
jQuery - the world's most popular java script library comes to XPages
Mark Roden
Jquery
Jquery
Swapnil & Patil
Dynamic Groovy Edges
Dynamic Groovy Edges
Jimmy Ray
Modules and EmbedJS
Modules and EmbedJS
Jens Arps
Front-end optimisation & jQuery Internals (Pycon)
Front-end optimisation & jQuery Internals (Pycon)
Artur Cistov
Javascript toolkit-2.0
Javascript toolkit-2.0
Thoughtworks
jQuery and_drupal
jQuery and_drupal
BlackCatWeb
Front End Development for Back End Java Developers - Jfokus 2020
Front End Development for Back End Java Developers - Jfokus 2020
Matt Raible
Laug Mootools And Common Js
Laug Mootools And Common Js
Skills Matter
What is front-end development ?
What is front-end development ?
Mahmoud Shaker
Angular JS, A dive to concepts
Angular JS, A dive to concepts
Abhishek Sur
Top 45 jQuery Interview Questions and Answers | Edureka
Top 45 jQuery Interview Questions and Answers | Edureka
Edureka!
Similar to Getting Started with YUI3 and AlloyUI Framework
(20)
JavaScript MV* Framework - Making the Right Choice
JavaScript MV* Framework - Making the Right Choice
Starting with jQuery
Starting with jQuery
Jquery
Jquery
Going Offline with JS
Going Offline with JS
Seven Versions of One Web Application
Seven Versions of One Web Application
Going offline with JS (DDD Sydney)
Going offline with JS (DDD Sydney)
Angularjs cascade
Angularjs cascade
jquery summit presentation for large scale javascript applications
jquery summit presentation for large scale javascript applications
jQuery - the world's most popular java script library comes to XPages
jQuery - the world's most popular java script library comes to XPages
Jquery
Jquery
Dynamic Groovy Edges
Dynamic Groovy Edges
Modules and EmbedJS
Modules and EmbedJS
Front-end optimisation & jQuery Internals (Pycon)
Front-end optimisation & jQuery Internals (Pycon)
Javascript toolkit-2.0
Javascript toolkit-2.0
jQuery and_drupal
jQuery and_drupal
Front End Development for Back End Java Developers - Jfokus 2020
Front End Development for Back End Java Developers - Jfokus 2020
Laug Mootools And Common Js
Laug Mootools And Common Js
What is front-end development ?
What is front-end development ?
Angular JS, A dive to concepts
Angular JS, A dive to concepts
Top 45 jQuery Interview Questions and Answers | Edureka
Top 45 jQuery Interview Questions and Answers | Edureka
More from Zeno Rocha
Future of Web Development
Future of Web Development
Zeno Rocha
Tracking.js
Tracking.js
Zeno Rocha
Liferay + Wearables
Liferay + Wearables
Zeno Rocha
Como empreender em... você!
Como empreender em... você!
Zeno Rocha
Um futuro chamado Web Components
Um futuro chamado Web Components
Zeno Rocha
How to create high scalable JavaScript apps for Java Portals
How to create high scalable JavaScript apps for Java Portals
Zeno Rocha
Augmented Reality in JavaScript
Augmented Reality in JavaScript
Zeno Rocha
Como Perder Peso (no browser)
Como Perder Peso (no browser)
Zeno Rocha
Os mitos do desenvolvimento front-end
Os mitos do desenvolvimento front-end
Zeno Rocha
Super Trunfo - Case de Dados Abertos
Super Trunfo - Case de Dados Abertos
Zeno Rocha
Wordpress
Wordpress
Zeno Rocha
More from Zeno Rocha
(11)
Future of Web Development
Future of Web Development
Tracking.js
Tracking.js
Liferay + Wearables
Liferay + Wearables
Como empreender em... você!
Como empreender em... você!
Um futuro chamado Web Components
Um futuro chamado Web Components
How to create high scalable JavaScript apps for Java Portals
How to create high scalable JavaScript apps for Java Portals
Augmented Reality in JavaScript
Augmented Reality in JavaScript
Como Perder Peso (no browser)
Como Perder Peso (no browser)
Os mitos do desenvolvimento front-end
Os mitos do desenvolvimento front-end
Super Trunfo - Case de Dados Abertos
Super Trunfo - Case de Dados Abertos
Wordpress
Wordpress
Recently uploaded
Exploring the Future Potential of AI-Enabled Smartphone Processors
Exploring the Future Potential of AI-Enabled Smartphone Processors
debabhi2
Boost PC performance: How more available memory can improve productivity
Boost PC performance: How more available memory can improve productivity
Principled Technologies
The Role of Taxonomy and Ontology in Semantic Layers - Heather Hedden.pdf
The Role of Taxonomy and Ontology in Semantic Layers - Heather Hedden.pdf
Enterprise Knowledge
08448380779 Call Girls In Diplomatic Enclave Women Seeking Men
08448380779 Call Girls In Diplomatic Enclave Women Seeking Men
Delhi Call girls
🐬 The future of MySQL is Postgres 🐘
🐬 The future of MySQL is Postgres 🐘
RTylerCroy
From Event to Action: Accelerate Your Decision Making with Real-Time Automation
From Event to Action: Accelerate Your Decision Making with Real-Time Automation
Safe Software
CNv6 Instructor Chapter 6 Quality of Service
CNv6 Instructor Chapter 6 Quality of Service
giselly40
The Codex of Business Writing Software for Real-World Solutions 2.pptx
The Codex of Business Writing Software for Real-World Solutions 2.pptx
Malak Abu Hammad
Unblocking The Main Thread Solving ANRs and Frozen Frames
Unblocking The Main Thread Solving ANRs and Frozen Frames
Sinan KOZAK
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
apidays
Handwritten Text Recognition for manuscripts and early printed texts
Handwritten Text Recognition for manuscripts and early printed texts
Maria Levchenko
Histor y of HAM Radio presentation slide
Histor y of HAM Radio presentation slide
vu2urc
IAC 2024 - IA Fast Track to Search Focused AI Solutions
IAC 2024 - IA Fast Track to Search Focused AI Solutions
Enterprise Knowledge
04-2024-HHUG-Sales-and-Marketing-Alignment.pptx
04-2024-HHUG-Sales-and-Marketing-Alignment.pptx
HampshireHUG
EIS-Webinar-Prompt-Knowledge-Eng-2024-04-08.pptx
EIS-Webinar-Prompt-Knowledge-Eng-2024-04-08.pptx
Earley Information Science
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
Miguel Araújo
08448380779 Call Girls In Greater Kailash - I Women Seeking Men
08448380779 Call Girls In Greater Kailash - I Women Seeking Men
Delhi Call girls
[2024]Digital Global Overview Report 2024 Meltwater.pdf
[2024]Digital Global Overview Report 2024 Meltwater.pdf
hans926745
Slack Application Development 101 Slides
Slack Application Development 101 Slides
praypatel2
Automating Google Workspace (GWS) & more with Apps Script
Automating Google Workspace (GWS) & more with Apps Script
wesley chun
Recently uploaded
(20)
Exploring the Future Potential of AI-Enabled Smartphone Processors
Exploring the Future Potential of AI-Enabled Smartphone Processors
Boost PC performance: How more available memory can improve productivity
Boost PC performance: How more available memory can improve productivity
The Role of Taxonomy and Ontology in Semantic Layers - Heather Hedden.pdf
The Role of Taxonomy and Ontology in Semantic Layers - Heather Hedden.pdf
08448380779 Call Girls In Diplomatic Enclave Women Seeking Men
08448380779 Call Girls In Diplomatic Enclave Women Seeking Men
🐬 The future of MySQL is Postgres 🐘
🐬 The future of MySQL is Postgres 🐘
From Event to Action: Accelerate Your Decision Making with Real-Time Automation
From Event to Action: Accelerate Your Decision Making with Real-Time Automation
CNv6 Instructor Chapter 6 Quality of Service
CNv6 Instructor Chapter 6 Quality of Service
The Codex of Business Writing Software for Real-World Solutions 2.pptx
The Codex of Business Writing Software for Real-World Solutions 2.pptx
Unblocking The Main Thread Solving ANRs and Frozen Frames
Unblocking The Main Thread Solving ANRs and Frozen Frames
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
Handwritten Text Recognition for manuscripts and early printed texts
Handwritten Text Recognition for manuscripts and early printed texts
Histor y of HAM Radio presentation slide
Histor y of HAM Radio presentation slide
IAC 2024 - IA Fast Track to Search Focused AI Solutions
IAC 2024 - IA Fast Track to Search Focused AI Solutions
04-2024-HHUG-Sales-and-Marketing-Alignment.pptx
04-2024-HHUG-Sales-and-Marketing-Alignment.pptx
EIS-Webinar-Prompt-Knowledge-Eng-2024-04-08.pptx
EIS-Webinar-Prompt-Knowledge-Eng-2024-04-08.pptx
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
08448380779 Call Girls In Greater Kailash - I Women Seeking Men
08448380779 Call Girls In Greater Kailash - I Women Seeking Men
[2024]Digital Global Overview Report 2024 Meltwater.pdf
[2024]Digital Global Overview Report 2024 Meltwater.pdf
Slack Application Development 101 Slides
Slack Application Development 101 Slides
Automating Google Workspace (GWS) & more with Apps Script
Automating Google Workspace (GWS) & more with Apps Script
Getting Started with YUI3 and AlloyUI Framework
1.
getting started with YUI3
and AlloyUI Mainz, 2013.
2.
3.
4.
how some back-end devs see themselves
5.
how some back-end devs see front-end devs
6.
“CSS is very
easy”
7.
8.
9.
10.
“javascript is ugly and full
of bugs”
11.
12.
EcmaScript 6 is
coming
13.
front-end is changing
14.
extremejs.com
15.
github.com/languages
16.
there are three types
of people
17.
1. those who compile javascript
18.
developers.google.com/web-toolkit
19.
2. those who doesn’t compile
20.
developers.google.com/closure/library
21.
3. java ==
javascript
22.
23.
24.
twitter.com/joelambert/status/327047616326152193
25.
26.
today we’re going to talk
about server-agnostic JS frameworks
27.
Events, Selection, DOM Manipulation, Animation, Ajax requests jquery.com
28.
mootools.net
29.
UI components twitter.github.io/bootstrap
30.
jqueryui.com
31.
Templates mustache.github.io
32.
handlebarsjs.com
33.
Module loader requirejs.org
34.
headjs.com
35.
MV* backbonejs.org
36.
knockoutjs.com
37.
angularjs.org
38.
emberjs.com
39.
Tests BDD TDD pivotal.github.io/jasmine
40.
qunitjs.com
41.
42.
yuilibrary.com
43.
yuilibrary.com/projects/yuitest
44.
yui.github.io/yuicompressor
45.
yui.github.io/yuidoc
46.
yui.github.io/yogi
47.
YUI3 modules
48.
YUI = effects DOM ajax events ... MVC
49.
YUI = effects DOM ajax events ... MVC
50.
YUI = effects DOM ajax events ... MVC
51.
YUI = effects DOM ajax events ... MVC
52.
YUI = effects DOM ajax events ... MVC
53.
YUI = effects DOM ajax events ... MVC
54.
YUI = effects DOM ajax events ... MVC
55.
yuilibrary.com/yui/docs/guides
56.
yuilibrary.com/yui/docs/dial/dial-interactive.html
57.
yuilibrary.com/yui/docs/app/app-todo.html
58.
yuilibrary.com/yui/docs/graphics/graphics-violin.html
59.
YUI3 basics
60.
$('.foo'); DOM traversal Y.all('.foo'); YUI3 jQuery
61.
$('#foo').html('bar'); DOM manipulation Y.one('#foo').setHTML('bar'); YUI3 jQuery
62.
$('#close-btn').on('click', function() { //
do something }); events Y.one('#close-btn').on('click', function() { // do something }); YUI3 jQuery
63.
$('#fade').animate({ opacity: 0, }, 5000); effects Y.one('#fade').transition({ duration:
1, opacity : 0 }); YUI3 jQuery
64.
$.ajax({ url: "api.json", success: function(data)
{ // do something } }); ajax Y.io('api.json', { on: { success: function(data) { // do something } } }); YUI3 jQuery
65.
alloyui.com/rosetta-stone
66.
YUI3 loading
67.
68.
“Optimize the front-end performance
first, because 80/90% of the user response time is spent there.” - Steve Souders, Engineer at Google
69.
without YUI...
70.
<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> ... ...
71.
performance-- maintainability--
72.
blocks render
73.
with YUI...
74.
one <script>
75.
seed file <script src="http://yui.yahooapis.com/ 3.9.1/build/yui/yui-min.js"></script>
76.
everything else asynchronous combo-loaded from CDN
77.
sandbox YUI().use('module-name', function (Y)
{ // code goes here });
78.
why asynchronous?
79.
non-blocking http requests
80.
why combo-loaded?
81.
yuilibrary.com/yui/configurator
82.
why load from a
CDN?
83.
geographically closer
84.
YUI gallery
85.
yuilibrary.com/gallery
86.
your code on Yahoo’s
CDN
87.
github.com/yui/yui3-gallery
88.
available to anyone
89.
just use() YUI().use('gallery-audio', function
(Y) { // code goes here });
90.
mzl.la/OEbuQH
91.
AlloyUI
92.
@natecavanaugh
93.
@eduardolundgren
94.
created on 2009
95.
alloyui.com
96.
built on top
of YUI3
97.
AlloyUI = calendar tabs buttons carousel ... audio
98.
AlloyUI = calendar tabs buttons carousel ... audio
99.
AlloyUI = calendar tabs buttons carousel ... audio
100.
AlloyUI = calendar tabs buttons carousel ... audio
101.
AlloyUI = calendar tabs buttons carousel ... audio
102.
AlloyUI = calendar tabs buttons carousel ... audio
103.
AlloyUI = calendar tabs buttons carousel ... audio
104.
what we wanted: char
counter
105.
#twitter-box #myTextarea #myCounter
106.
#twitter-box #myTextarea #myCounter
107.
#twitter-box #myTextarea #myCounter
108.
#twitter-box #myTextarea #myCounter
109.
alloyui.com/examples/char-counter/real-world
110.
what we wanted: schedule
111.
112.
alloyui.com/examples/scheduler
113.
what we wanted: a
better way to express ideas
114.
* drag and
drop UI * flexible API * support all browsers * no flash (HTML5)
115.
alloyui.com/examples/diagram-builder
116.
alloyui.com/api
117.
but I’m a java guy!
118.
<taglibs> o/
119.
taglibs <aui:button name="saveButton" type="submit" value="save"/> Button
120.
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
121.
the success of
an application doesn’t depends on the technology itself... ...but how it is applied.
122.
123.
124.
dank :)
Download now