• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Getting started with YUI3 and AlloyUI
 

Getting started with YUI3 and AlloyUI

on

  • 3,636 views

Jax Conf @ Mainz, Germany @ April, 2013

Jax Conf @ Mainz, Germany @ April, 2013

Statistics

Views

Total Views
3,636
Views on SlideShare
3,606
Embed Views
30

Actions

Likes
13
Downloads
55
Comments
2

2 Embeds 30

https://twitter.com 24
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

12 of 2 previous next

  • 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 :)