Getting started with YUI3 and AlloyUI

getting startedwith YUI3 and

AlloyUI

Mainz, 2013.

how someback-end

devs seethemselves

how someback-end

devs seefront-end

devs

“CSS is very easy”

“javascriptis ugly andfull of bugs”

EcmaScript 6 is coming

front-endis changing

extremejs.com

http://dev.w3.org/2011/webrtc/editor/webrtc.html


github.com/languages



there are three types of people

1. those who compile javascript

developers.google.com/web-toolkit



2. those who doesn’t compile

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 requests

jquery.com



mootools.net



UI components

twitter.github.io/bootstrap



jqueryui.com



Templates

mustache.github.io



handlebarsjs.com



Module loader

requirejs.org



headjs.com



MV*

backbonejs.org



knockoutjs.com



angularjs.org



emberjs.com



TestsBDDTDD

pivotal.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 =

effects

DOM

ajax

events...

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');

DOM traversalY.all('.foo');

YUI3

jQuery

$('#foo').html('bar');

DOMmanipulationY.one('#foo').setHTML('bar');

YUI3

jQuery

$('#close-btn').on('click', function() { // do something});

eventsY.one('#close-btn').on('click', function() { // do something});

YUI3

jQuery

$('#fade').animate({ opacity: 0,}, 5000);

effectsY.one('#fade').transition({ duration: 1, opacity : 0});

YUI3

jQuery

$.ajax({ url: "api.json", success: function(data) { // do something }});

ajaxY.io('api.json', { on: { success: function(data) { // do something } }});

YUI3

jQuery

alloyui.com/rosetta-stone



YUI3loading

“Optimize the front-end performance first, because 80/90% of the user response time is spent there.”

- Steve Souders,Engineer at Google

without YUI...

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>

http://yui.yahooapis.com/3.9.1/build/yui/yui-min.js




everything elseasynchronous combo-loaded

from CDN

sandboxYUI().use('module-name', function (Y) { // code goes here});

why asynchronous?

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 to anyone

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 =

calendar

tabs

buttons

carousel...

audio

what we wanted:char counter

#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 application doesn’t depends on the technology itself...

...but how it is applied.

dank :)

Getting started with YUI3 and AlloyUI

Technology

Transcript of Getting started with YUI3 and AlloyUI