How to create JavaScript apps for Java portals

JAX Conference - Mainz, 2013

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