Enviar pesquisa
Carregar
Getting Started with YUI3 and AlloyUI Framework
•
14 gostaram
•
11,590 visualizações
Título melhorado com IA
Zeno Rocha
Seguir
Jax Conf @ Mainz, Germany @ April, 2013
Leia menos
Leia mais
Tecnologia
Denunciar
Compartilhar
Denunciar
Compartilhar
1 de 124
Baixar agora
Baixar para ler offline
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
Mais conteúdo relacionado
Destaque
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
Destaque
(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
Semelhante 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!
Semelhante 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
Mais 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
Mais 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
Vertex AI Gemini Prompt Engineering Tips
Vertex AI Gemini Prompt Engineering Tips
Miki Katsuragi
Nell’iperspazio con Rocket: il Framework Web di Rust!
Nell’iperspazio con Rocket: il Framework Web di Rust!
Commit University
Powerpoint exploring the locations used in television show Time Clash
Powerpoint exploring the locations used in television show Time Clash
charlottematthew16
Streamlining Python Development: A Guide to a Modern Project Setup
Streamlining Python Development: A Guide to a Modern Project Setup
Florian Wilhelm
Integration and Automation in Practice: CI/CD in Mule Integration and Automat...
Integration and Automation in Practice: CI/CD in Mule Integration and Automat...
Patryk Bandurski
"Federated learning: out of reach no matter how close",Oleksandr Lapshyn
"Federated learning: out of reach no matter how close",Oleksandr Lapshyn
Fwdays
Gen AI in Business - Global Trends Report 2024.pdf
Gen AI in Business - Global Trends Report 2024.pdf
Addepto
WordPress Websites for Engineers: Elevate Your Brand
WordPress Websites for Engineers: Elevate Your Brand
gvaughan
AI as an Interface for Commercial Buildings
AI as an Interface for Commercial Buildings
Memoori
Connect Wave/ connectwave Pitch Deck Presentation
Connect Wave/ connectwave Pitch Deck Presentation
Slibray Presentation
Artificial intelligence in cctv survelliance.pptx
Artificial intelligence in cctv survelliance.pptx
hariprasad279825
"LLMs for Python Engineers: Advanced Data Analysis and Semantic Kernel",Oleks...
"LLMs for Python Engineers: Advanced Data Analysis and Semantic Kernel",Oleks...
Fwdays
"Debugging python applications inside k8s environment", Andrii Soldatenko
"Debugging python applications inside k8s environment", Andrii Soldatenko
Fwdays
Developer Data Modeling Mistakes: From Postgres to NoSQL
Developer Data Modeling Mistakes: From Postgres to NoSQL
ScyllaDB
Advanced Test Driven-Development @ php[tek] 2024
Advanced Test Driven-Development @ php[tek] 2024
Scott Keck-Warren
New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
BookNet Canada
My Hashitalk Indonesia April 2024 Presentation
My Hashitalk Indonesia April 2024 Presentation
Ridwan Fadjar
Training state-of-the-art general text embedding
Training state-of-the-art general text embedding
Zilliz
DevoxxFR 2024 Reproducible Builds with Apache Maven
DevoxxFR 2024 Reproducible Builds with Apache Maven
Hervé Boutemy
Anypoint Exchange: It’s Not Just a Repo!
Anypoint Exchange: It’s Not Just a Repo!
Manik S Magar
Último
(20)
Vertex AI Gemini Prompt Engineering Tips
Vertex AI Gemini Prompt Engineering Tips
Nell’iperspazio con Rocket: il Framework Web di Rust!
Nell’iperspazio con Rocket: il Framework Web di Rust!
Powerpoint exploring the locations used in television show Time Clash
Powerpoint exploring the locations used in television show Time Clash
Streamlining Python Development: A Guide to a Modern Project Setup
Streamlining Python Development: A Guide to a Modern Project Setup
Integration and Automation in Practice: CI/CD in Mule Integration and Automat...
Integration and Automation in Practice: CI/CD in Mule Integration and Automat...
"Federated learning: out of reach no matter how close",Oleksandr Lapshyn
"Federated learning: out of reach no matter how close",Oleksandr Lapshyn
Gen AI in Business - Global Trends Report 2024.pdf
Gen AI in Business - Global Trends Report 2024.pdf
WordPress Websites for Engineers: Elevate Your Brand
WordPress Websites for Engineers: Elevate Your Brand
AI as an Interface for Commercial Buildings
AI as an Interface for Commercial Buildings
Connect Wave/ connectwave Pitch Deck Presentation
Connect Wave/ connectwave Pitch Deck Presentation
Artificial intelligence in cctv survelliance.pptx
Artificial intelligence in cctv survelliance.pptx
"LLMs for Python Engineers: Advanced Data Analysis and Semantic Kernel",Oleks...
"LLMs for Python Engineers: Advanced Data Analysis and Semantic Kernel",Oleks...
"Debugging python applications inside k8s environment", Andrii Soldatenko
"Debugging python applications inside k8s environment", Andrii Soldatenko
Developer Data Modeling Mistakes: From Postgres to NoSQL
Developer Data Modeling Mistakes: From Postgres to NoSQL
Advanced Test Driven-Development @ php[tek] 2024
Advanced Test Driven-Development @ php[tek] 2024
New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
My Hashitalk Indonesia April 2024 Presentation
My Hashitalk Indonesia April 2024 Presentation
Training state-of-the-art general text embedding
Training state-of-the-art general text embedding
DevoxxFR 2024 Reproducible Builds with Apache Maven
DevoxxFR 2024 Reproducible Builds with Apache Maven
Anypoint Exchange: It’s Not Just a Repo!
Anypoint Exchange: It’s Not Just a Repo!
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 :)
Baixar agora