Getting started with YUI3 and AlloyUI
Upcoming SlideShare
Loading in...5
×
 

Getting started with YUI3 and AlloyUI

on

  • 3,915 views

Jax Conf @ Mainz, Germany @ April, 2013

Jax Conf @ Mainz, Germany @ April, 2013

Statistics

Views

Total Views
3,915
Views on SlideShare
3,884
Embed Views
31

Actions

Likes
14
Downloads
59
Comments
2

2 Embeds 31

https://twitter.com 25
http://hyeok9494.tistory.com 6

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Getting started with YUI3 and AlloyUI Getting started with YUI3 and AlloyUI Presentation Transcript

  • 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});YUI3jQuery
  • $(#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) {// do something}}});YUI3jQuery
  • alloyui.com/rosetta-stone
  • YUI3loading
  • “Optimize the front-endperformance first, because80/90% of the user responsetime is spent there.”- Steve Souders,Engineer at Google
  • without YUI...
  • <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>......
  • 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="range" >[8,50]</aui:validator></aui:input>Form Validation
  • the success of an applicationdoesn’t depends on thetechnology itself......but how it is applied.
  • dank :)