Getting started with YUI3 and AlloyUI
14 likes11,622 views
This document provides an overview of YUI3 and AlloyUI frameworks. It discusses how YUI3 offers modules for DOM manipulation, events, effects, AJAX requests and more. AlloyUI is introduced as a set of UI components built on YUI3, including calendars, tabs and buttons. Examples are given of building a character counter and scheduler using AlloyUI. The benefits of YUI3 like performance, maintainability and loading from CDNs are also highlighted.
![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](https://image.slidesharecdn.com/slides-130508120807-phpapp02/85/Getting-started-with-YUI3-and-AlloyUI-120-320.jpg)
Getting started with YUI3 and AlloyUI
- 1. getting started with YUI3 and AlloyUI Mainz, 2013.
- 6. “CSS is very easy”
- 10. “javascript is ugly and full of bugs”
- 12. EcmaScript 6 is coming
- 14. extremejs.com
- 16. there are three types of people
- 21. 3. java == javascript
- 26. today we’re going to talk about server-agnostic JS frameworks
- 28. mootools.net
- 30. jqueryui.com
- 32. handlebarsjs.com
- 34. headjs.com
- 36. knockoutjs.com
- 37. angularjs.org
- 38. emberjs.com
- 40. qunitjs.com
- 42. yuilibrary.com
- 47. YUI3 modules
- 59. YUI3 basics
- 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
- 66. YUI3 loading
- 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> ... ...
- 72. blocks render
- 73. with YUI...
- 74. one <script>
- 77. sandbox YUI().use('module-name', function (Y) { // code goes here });
- 82. why load from a CDN?
- 84. YUI gallery
- 86. your code on Yahoo’s CDN
- 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
- 104. what we wanted: char counter
- 113. what we wanted: a better way to express ideas
- 114. * drag and drop UI * flexible API * support all browsers * no flash (HTML5)
- 116. alloyui.com/api
- 117. but I’m a java guy!
- 118. <taglibs> o/
- 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.
- 124. dank :)