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

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

YUI =

effects

DOM

ajax

events...

MVC

YUI =

effects

DOM

ajax

events...

MVC

YUI =

effects

DOM

ajax

events...

MVC

YUI =

effects

DOM

ajax

events...

MVC

YUI =

effects

DOM

ajax

events...

MVC

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

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

AlloyUI =

calendar

tabs

buttons

carousel...

audio

AlloyUI =

calendar

tabs

buttons

carousel...

audio

AlloyUI =

calendar

tabs

buttons

carousel...

audio

AlloyUI =

calendar

tabs

buttons

carousel...

audio

AlloyUI =

calendar

tabs

buttons

carousel...

audio

AlloyUI =

calendar

tabs

buttons

carousel...

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

...but how it is applied.

dank :)