getting startedwith YUI3 andAlloyUIMainz, 2013.
how someback-enddevs seethemselves
how someback-enddevs seefront-enddevs
“CSS is very easy”
“javascriptis ugly andfull of bugs”
EcmaScript 6 is coming
front-endis changing
extremejs.com
github.com/languages
there are threetypes of people
1. those whocompilejavascript
developers.google.com/web-toolkit
2. those whodoesn’tcompile
developers.google.com/closure/library
3. java == javascript
twitter.com/joelambert/status/327047616326152193
today we’regoing totalk aboutserver-agnosticJS frameworks
Events,Selection,DOM Manipulation,Animation,Ajax requestsjquery.com
mootools.net
UI componentstwitter.github.io/bootstrap
jqueryui.com
Templatesmustache.github.io
handlebarsjs.com
Module loaderrequirejs.org
headjs.com
MV*backbonejs.org
knockoutjs.com
angularjs.org
emberjs.com
TestsBDDTDDpivotal.github.io/jasmine
qunitjs.com
yuilibrary.com
yuilibrary.com/projects/yuitest
yui.github.io/yuicompressor
yui.github.io/yuidoc
yui.github.io/yogi
YUI3modules
YUI =effectsDOMajaxevents...MVC
YUI =effectsDOMajaxevents...MVC
YUI =effectsDOMajaxevents...MVC
YUI =effectsDOMajaxevents...MVC
YUI =effectsDOMajaxevents...MVC
YUI =effectsDOMajaxevents...MVC
YUI =effectsDOMajaxevents...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
YUI3basics
$(.foo);DOMtraversalY.all(.foo);YUI3jQuery
$(#foo).html(bar);DOMmanipulationY.one(#foo).setHTML(bar);YUI3jQuery
$(#close-btn).on(click, function() {// do something});eventsY.one(#close-btn).on(click, function() {// do something});YUI3...
$(#fade).animate({opacity: 0,}, 5000);effectsY.one(#fade).transition({duration: 1,opacity : 0});YUI3jQuery
$.ajax({url: "api.json",success: function(data) {// do something}});ajaxY.io(api.json, {on: {success: function(data) {// d...
alloyui.com/rosetta-stone
YUI3loading
“Optimize the front-endperformance first, because80/90% of the user responsetime is spent there.”- Steve Souders,Engineer ...
without YUI...
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.js"></script><script src="//cdnjs.cloudflare.com/ajax/li...
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 elseasynchronouscombo-loadedfrom CDN
sandboxYUI().use(module-name, function (Y) {// code goes here});
whyasynchronous?
non-blockinghttp requests
whycombo-loaded?
yuilibrary.com/yui/configurator
whyload from a CDN?
geographicallycloser
YUIgallery
yuilibrary.com/gallery
your code onYahoo’s CDN
github.com/yui/yui3-gallery
available toanyone
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 =calendartabsbuttonscarousel...audio
AlloyUI =calendartabsbuttonscarousel...audio
AlloyUI =calendartabsbuttonscarousel...audio
AlloyUI =calendartabsbuttonscarousel...audio
AlloyUI =calendartabsbuttonscarousel...audio
AlloyUI =calendartabsbuttonscarousel...audio
AlloyUI =calendartabsbuttonscarousel...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
alloyui.com/examples/scheduler
what we wanted:a better way toexpress ideas
* drag and drop UI* flexible API* support all browsers* no flash (HTML5)
alloyui.com/examples/diagram-builder
alloyui.com/api
but I’ma javaguy!
<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="ran...
the success of an applicationdoesn’t depends on thetechnology itself......but how it is applied.
dank :)
Getting started with YUI3 and AlloyUI
Getting started with YUI3 and AlloyUI
Getting started with YUI3 and AlloyUI
Getting started with YUI3 and AlloyUI
Getting started with YUI3 and AlloyUI
Getting started with YUI3 and AlloyUI
Getting started with YUI3 and AlloyUI
Getting started with YUI3 and AlloyUI
Getting started with YUI3 and AlloyUI
Getting started with YUI3 and AlloyUI
Getting started with YUI3 and AlloyUI
Getting started with YUI3 and AlloyUI
Getting started with YUI3 and AlloyUI
Getting started with YUI3 and AlloyUI
Upcoming SlideShare
Loading in …5
×

Getting started with YUI3 and AlloyUI

7,650 views
6,692 views

Published on

Jax Conf @ Mainz, Germany @ April, 2013

Published in: Technology
2 Comments
15 Likes
Statistics
Notes
No Downloads
Views
Total views
7,650
On SlideShare
0
From Embeds
0
Number of Embeds
20
Actions
Shares
0
Downloads
73
Comments
2
Likes
15
Embeds 0
No embeds

No notes for slide

Getting started with YUI3 and AlloyUI

  1. getting startedwith YUI3 andAlloyUIMainz, 2013.
  2. how someback-enddevs seethemselves
  3. how someback-enddevs seefront-enddevs
  4. “CSS is very easy”
  5. “javascriptis ugly andfull of bugs”
  6. EcmaScript 6 is coming
  7. front-endis changing
  8. extremejs.com
  9. github.com/languages
  10. there are threetypes of people
  11. 1. those whocompilejavascript
  12. developers.google.com/web-toolkit
  13. 2. those whodoesn’tcompile
  14. developers.google.com/closure/library
  15. 3. java == javascript
  16. twitter.com/joelambert/status/327047616326152193
  17. today we’regoing totalk aboutserver-agnosticJS frameworks
  18. Events,Selection,DOM Manipulation,Animation,Ajax requestsjquery.com
  19. mootools.net
  20. UI componentstwitter.github.io/bootstrap
  21. jqueryui.com
  22. Templatesmustache.github.io
  23. handlebarsjs.com
  24. Module loaderrequirejs.org
  25. headjs.com
  26. MV*backbonejs.org
  27. knockoutjs.com
  28. angularjs.org
  29. emberjs.com
  30. TestsBDDTDDpivotal.github.io/jasmine
  31. qunitjs.com
  32. yuilibrary.com
  33. yuilibrary.com/projects/yuitest
  34. yui.github.io/yuicompressor
  35. yui.github.io/yuidoc
  36. yui.github.io/yogi
  37. YUI3modules
  38. YUI =effectsDOMajaxevents...MVC
  39. YUI =effectsDOMajaxevents...MVC
  40. YUI =effectsDOMajaxevents...MVC
  41. YUI =effectsDOMajaxevents...MVC
  42. YUI =effectsDOMajaxevents...MVC
  43. YUI =effectsDOMajaxevents...MVC
  44. YUI =effectsDOMajaxevents...MVC
  45. yuilibrary.com/yui/docs/guides
  46. yuilibrary.com/yui/docs/dial/dial-interactive.html
  47. yuilibrary.com/yui/docs/app/app-todo.html
  48. yuilibrary.com/yui/docs/graphics/graphics-violin.html
  49. YUI3basics
  50. $(.foo);DOMtraversalY.all(.foo);YUI3jQuery
  51. $(#foo).html(bar);DOMmanipulationY.one(#foo).setHTML(bar);YUI3jQuery
  52. $(#close-btn).on(click, function() {// do something});eventsY.one(#close-btn).on(click, function() {// do something});YUI3jQuery
  53. $(#fade).animate({opacity: 0,}, 5000);effectsY.one(#fade).transition({duration: 1,opacity : 0});YUI3jQuery
  54. $.ajax({url: "api.json",success: function(data) {// do something}});ajaxY.io(api.json, {on: {success: function(data) {// do something}}});YUI3jQuery
  55. alloyui.com/rosetta-stone
  56. YUI3loading
  57. “Optimize the front-endperformance first, because80/90% of the user responsetime is spent there.”- Steve Souders,Engineer at Google
  58. without YUI...
  59. <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>......
  60. performance--maintainability--
  61. blocks render
  62. with YUI...
  63. one <script>
  64. seed file<script src="http://yui.yahooapis.com/3.9.1/build/yui/yui-min.js"></script>
  65. everything elseasynchronouscombo-loadedfrom CDN
  66. sandboxYUI().use(module-name, function (Y) {// code goes here});
  67. whyasynchronous?
  68. non-blockinghttp requests
  69. whycombo-loaded?
  70. yuilibrary.com/yui/configurator
  71. whyload from a CDN?
  72. geographicallycloser
  73. YUIgallery
  74. yuilibrary.com/gallery
  75. your code onYahoo’s CDN
  76. github.com/yui/yui3-gallery
  77. available toanyone
  78. just use()YUI().use(gallery-audio, function (Y) {// code goes here});
  79. mzl.la/OEbuQH
  80. AlloyUI
  81. @natecavanaugh
  82. @eduardolundgren
  83. created on 2009
  84. alloyui.com
  85. built on top of YUI3
  86. AlloyUI =calendartabsbuttonscarousel...audio
  87. AlloyUI =calendartabsbuttonscarousel...audio
  88. AlloyUI =calendartabsbuttonscarousel...audio
  89. AlloyUI =calendartabsbuttonscarousel...audio
  90. AlloyUI =calendartabsbuttonscarousel...audio
  91. AlloyUI =calendartabsbuttonscarousel...audio
  92. AlloyUI =calendartabsbuttonscarousel...audio
  93. what we wanted:char counter
  94. #twitter-box#myTextarea#myCounter
  95. #twitter-box#myTextarea#myCounter
  96. #twitter-box#myTextarea#myCounter
  97. #twitter-box#myTextarea#myCounter
  98. alloyui.com/examples/char-counter/real-world
  99. what we wanted:schedule
  100. alloyui.com/examples/scheduler
  101. what we wanted:a better way toexpress ideas
  102. * drag and drop UI* flexible API* support all browsers* no flash (HTML5)
  103. alloyui.com/examples/diagram-builder
  104. alloyui.com/api
  105. but I’ma javaguy!
  106. <taglibs> o/
  107. taglibs<aui:button name="saveButton"type="submit" value="save"/>Button
  108. 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
  109. the success of an applicationdoesn’t depends on thetechnology itself......but how it is applied.
  110. dank :)

×