Enviar búsqueda
Cargar
Getting Started with YUI3 and AlloyUI Framework
•
14 recomendaciones
•
11,589 vistas
Título mejorado por IA
Zeno Rocha
Seguir
Jax Conf @ Mainz, Germany @ April, 2013
Leer menos
Leer más
Tecnología
Denunciar
Compartir
Denunciar
Compartir
1 de 124
Descargar ahora
Descargar para leer sin conexión
Recomendados
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
Recomendados
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
Más contenido relacionado
Destacado
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
Destacado
(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 a 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 a 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
Más de 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
Más de 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
Último
Why device, WIFI, and ISP insights are crucial to supporting remote Microsoft...
Why device, WIFI, and ISP insights are crucial to supporting remote Microsoft...
panagenda
Sample pptx for embedding into website for demo
Sample pptx for embedding into website for demo
HarshalMandlekar2
From Family Reminiscence to Scholarly Archive .
From Family Reminiscence to Scholarly Archive .
Alan Dix
What is DBT - The Ultimate Data Build Tool.pdf
What is DBT - The Ultimate Data Build Tool.pdf
MounikaPolabathina
Passkey Providers and Enabling Portability: FIDO Paris Seminar.pptx
Passkey Providers and Enabling Portability: FIDO Paris Seminar.pptx
LoriGlavin3
Connecting the Dots for Information Discovery.pdf
Connecting the Dots for Information Discovery.pdf
Neo4j
Digital Identity is Under Attack: FIDO Paris Seminar.pptx
Digital Identity is Under Attack: FIDO Paris Seminar.pptx
LoriGlavin3
Decarbonising Buildings: Making a net-zero built environment a reality
Decarbonising Buildings: Making a net-zero built environment a reality
IES VE
How to Effectively Monitor SD-WAN and SASE Environments with ThousandEyes
How to Effectively Monitor SD-WAN and SASE Environments with ThousandEyes
ThousandEyes
Data governance with Unity Catalog Presentation
Data governance with Unity Catalog Presentation
Knoldus Inc.
How to write a Business Continuity Plan
How to write a Business Continuity Plan
Databarracks
2024 April Patch Tuesday
2024 April Patch Tuesday
Ivanti
Assure Ecommerce and Retail Operations Uptime with ThousandEyes
Assure Ecommerce and Retail Operations Uptime with ThousandEyes
ThousandEyes
New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024
New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024
BookNet Canada
DevEX - reference for building teams, processes, and platforms
DevEX - reference for building teams, processes, and platforms
Sergiu Bodiu
How AI, OpenAI, and ChatGPT impact business and software.
How AI, OpenAI, and ChatGPT impact business and software.
Curtis Poe
[Webinar] SpiraTest - Setting New Standards in Quality Assurance
[Webinar] SpiraTest - Setting New Standards in Quality Assurance
Inflectra
Long journey of Ruby standard library at RubyConf AU 2024
Long journey of Ruby standard library at RubyConf AU 2024
Hiroshi SHIBATA
Moving Beyond Passwords: FIDO Paris Seminar.pdf
Moving Beyond Passwords: FIDO Paris Seminar.pdf
LoriGlavin3
Generative AI for Technical Writer or Information Developers
Generative AI for Technical Writer or Information Developers
Raghuram Pandurangan
Último
(20)
Why device, WIFI, and ISP insights are crucial to supporting remote Microsoft...
Why device, WIFI, and ISP insights are crucial to supporting remote Microsoft...
Sample pptx for embedding into website for demo
Sample pptx for embedding into website for demo
From Family Reminiscence to Scholarly Archive .
From Family Reminiscence to Scholarly Archive .
What is DBT - The Ultimate Data Build Tool.pdf
What is DBT - The Ultimate Data Build Tool.pdf
Passkey Providers and Enabling Portability: FIDO Paris Seminar.pptx
Passkey Providers and Enabling Portability: FIDO Paris Seminar.pptx
Connecting the Dots for Information Discovery.pdf
Connecting the Dots for Information Discovery.pdf
Digital Identity is Under Attack: FIDO Paris Seminar.pptx
Digital Identity is Under Attack: FIDO Paris Seminar.pptx
Decarbonising Buildings: Making a net-zero built environment a reality
Decarbonising Buildings: Making a net-zero built environment a reality
How to Effectively Monitor SD-WAN and SASE Environments with ThousandEyes
How to Effectively Monitor SD-WAN and SASE Environments with ThousandEyes
Data governance with Unity Catalog Presentation
Data governance with Unity Catalog Presentation
How to write a Business Continuity Plan
How to write a Business Continuity Plan
2024 April Patch Tuesday
2024 April Patch Tuesday
Assure Ecommerce and Retail Operations Uptime with ThousandEyes
Assure Ecommerce and Retail Operations Uptime with ThousandEyes
New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024
New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024
DevEX - reference for building teams, processes, and platforms
DevEX - reference for building teams, processes, and platforms
How AI, OpenAI, and ChatGPT impact business and software.
How AI, OpenAI, and ChatGPT impact business and software.
[Webinar] SpiraTest - Setting New Standards in Quality Assurance
[Webinar] SpiraTest - Setting New Standards in Quality Assurance
Long journey of Ruby standard library at RubyConf AU 2024
Long journey of Ruby standard library at RubyConf AU 2024
Moving Beyond Passwords: FIDO Paris Seminar.pdf
Moving Beyond Passwords: FIDO Paris Seminar.pdf
Generative AI for Technical Writer or Information Developers
Generative AI for Technical Writer or Information Developers
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 :)
Descargar ahora