JAX Conference - Mainz, 2013
getting startedwith YUI3 andAlloyUIMainz, 2013.
View Slide
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
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...
......
performance--maintainability--
blocks render
with YUI...
one <br/>
seed file
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
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!
\o/
taglibstype="submit" value="save"/>Button
taglibs[8,50]Form Validation
the success of an applicationdoesn’t depends on thetechnology itself......but how it is applied.
dank :)
zenorocha
cocoeyes02
ivargrimstad
philipschwarz
eihigh
psj59129
akitotsukahara
stanby_inc
tomokusaba
ntsk
mascii
hpgrahsl
pedronauck
zakiwarfel
bkeepers
aleyda
trishagee
wjessup
addyosmani
shlominoach
gr2m
soudai