$30 off During Our Annual Pro Sale. View Details »

How to create JavaScript apps for Java portals

How to create JavaScript apps for Java portals

JAX Conference - Mainz, 2013

Zeno Rocha

April 25, 2013
Tweet

More Decks by Zeno Rocha

Other Decks in Programming

Transcript

  1. how to create
    high scalable
    javascript
    apps for
    java portals
    Mainz, 2013.

    View Slide

  2. View Slide

  3. I’m from brazil

    View Slide

  4. View Slide

  5. View Slide

  6. I ♥ opensource

    View Slide

  7. I ♥ jQuery

    View Slide

  8. jqueryboilerplate.com

    View Slide

  9. I ♥ HTML5

    View Slide

  10. html5-pro.com/wormz

    View Slide

  11. today we’re
    going to
    talk about
    javascript...

    View Slide

  12. View Slide

  13. just a toy
    language?

    View Slide

  14. triggerrally.com/x/Preview/Arbusu/drive

    View Slide

  15. View Slide

  16. what about
    jQuery?

    View Slide

  17. View Slide

  18. goo.gl/rfaLs

    View Slide

  19. why should
    I care?

    View Slide

  20. because your UI suck

    View Slide

  21. let’s create
    a high scalable
    javascript
    application

    View Slide

  22. View Slide

  23. option #1
    write
    everything
    from scratch

    View Slide

  24. option #2
    use existing
    open source
    solutions

    View Slide

  25. Events,
    Selection,
    DOM Manipulation,
    Animation,
    Ajax requests
    jquery.com

    View Slide

  26. mootools.net

    View Slide

  27. UI components
    twitter.github.io/bootstrap

    View Slide

  28. jqueryui.com

    View Slide

  29. Templates
    mustache.github.io

    View Slide

  30. handlebarsjs.com

    View Slide

  31. Module loader
    requirejs.org

    View Slide

  32. headjs.com

    View Slide

  33. MV*
    backbonejs.org

    View Slide

  34. knockoutjs.com

    View Slide

  35. angularjs.org

    View Slide

  36. emberjs.com

    View Slide

  37. Tests
    BDD
    TDD
    pivotal.github.io/jasmine

    View Slide

  38. qunitjs.com

    View Slide

  39. View Slide

  40. View Slide

  41. we build
    java portals

    View Slide

  42. our solution
    has more than
    4,000,000
    downloads

    View Slide

  43. and over
    500,000
    deployments
    worldwide

    View Slide

  44. so how can
    we create an
    easy-to-maintain
    UI architeture?

    View Slide

  45. View Slide

  46. yuilibrary.com

    View Slide

  47. and we
    created our
    own superset
    of components

    View Slide

  48. AlloyUI

    View Slide

  49. alloyui.com

    View Slide

  50. YUI =
    effects
    DOM
    ajax
    events
    ...
    MVC

    View Slide

  51. YUI =
    effects
    DOM
    ajax
    events
    ...
    MVC

    View Slide

  52. YUI =
    effects
    DOM
    ajax
    events
    ...
    MVC

    View Slide

  53. YUI =
    effects
    DOM
    ajax
    events
    ...
    MVC

    View Slide

  54. YUI =
    effects
    DOM
    ajax
    events
    ...
    MVC

    View Slide

  55. YUI =
    effects
    DOM
    ajax
    events
    ...
    MVC

    View Slide

  56. YUI =
    effects
    DOM
    ajax
    events
    ...
    MVC

    View Slide

  57. AlloyUI =
    calendar
    tabs
    buttons
    carousel
    ...
    audio

    View Slide

  58. AlloyUI =
    calendar
    tabs
    buttons
    carousel
    ...
    audio

    View Slide

  59. AlloyUI =
    calendar
    tabs
    buttons
    carousel
    ...
    audio

    View Slide

  60. AlloyUI =
    calendar
    tabs
    buttons
    carousel
    ...
    audio

    View Slide

  61. AlloyUI =
    calendar
    tabs
    buttons
    carousel
    ...
    audio

    View Slide

  62. AlloyUI =
    calendar
    tabs
    buttons
    carousel
    ...
    audio

    View Slide

  63. AlloyUI =
    calendar
    tabs
    buttons
    carousel
    ...
    audio

    View Slide

  64. View Slide

  65. JavaScript

    View Slide

  66. View Slide

  67. YUI

    View Slide

  68. View Slide

  69. AlloyUI

    View Slide

  70. alloyui.com/examples/carousel

    View Slide

  71. alloyui.com/examples/diagram-builder

    View Slide

  72. alloyui.com/examples/image-cropper

    View Slide

  73. alloyui.com/examples/viewport

    View Slide

  74. but I’m
    a java
    guy!

    View Slide

  75. \o/

    View Slide

  76. everything
    you need

    View Slide

  77. everything
    you need
    + single api

    View Slide

  78. everything
    you need
    + single api
    + good
    performance

    View Slide

  79. who uses it?

    View Slide

  80. developer.cisco.com

    View Slide

  81. lufthansa-flight-training.com

    View Slide

  82. bosch-sicherheitssysteme.de

    View Slide

  83. more than
    300,000
    downloads

    View Slide

  84. wanna
    know
    more?

    View Slide

  85. find me
    on room
    Watfordsaal B
    at 2pm

    View Slide

  86. View Slide

  87. “HTML5 is the future”

    View Slide

  88. wanna see the future?

    View Slide

  89. View Slide

  90. View Slide

  91. HTML5
    is today!

    View Slide

  92. Content Consumer
    Devices

    View Slide

  93. Content Consumer
    Devices

    View Slide

  94. old browsers are like B&W TVs

    View Slide

  95. new browsers are like HD TVs

    View Slide

  96. TV already solved that problem

    View Slide

  97. so why developers
    keep doing this?

    View Slide

  98. it’s up to you!

    View Slide

  99. dank :)

    View Slide