How to create high scalable JavaScript apps for Java Portals

how to createhigh scalable

javascriptapps for

java portalsMainz, 2013.

I’m from brazil

I ♥ opensource

I ♥ jQuery

jqueryboilerplate.com

I ♥ HTML5

html5-pro.com/wormz

today we’regoing to

talk about javascript...

just a toylanguage?

triggerrally.com/x/Preview/Arbusu/drive

what aboutjQuery?

goo.gl/rfaLs

why shouldI care?

because your UI suck

let’s createa high scalable

javascript application

option #1

writeeverything

from scratch

option #2

use existingopen source solutions

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

we buildjava portals

our solutionhas more than

4,000,000downloads

and over500,000

deploymentsworldwide

so how canwe create aneasy-to-maintainUI architeture?

yuilibrary.com

and wecreated our

own supersetof components

AlloyUI

alloyui.com

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

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

JavaScript

YUI

AlloyUI

alloyui.com/examples/carousel

alloyui.com/examples/diagram-builder

alloyui.com/examples/image-cropper

alloyui.com/examples/viewport

but I’ma javaguy!

<taglibs> \o/

everythingyou need

everythingyou need

+ single api

everythingyou need

+ single api+ good

performance

who uses it?

developer.cisco.com

lufthansa-flight-training.com

bosch-sicherheitssysteme.de

more than300,000

downloads

wannaknowmore?

find meon room Watfordsaal Bat 2pm

“HTML5 is the future”

wanna see the future?

HTML5is today!

Content ConsumerDevices

Content ConsumerDevices

old browsers are like B&W TVs

new browsers are like HD TVs

TV already solved that problem

so why developerskeep doing this?

it’s up to you!

dank :)