How to create JavaScript apps for Java portals

Transcript

1. 1.

   how to create high scalable javascript apps for java portals

   Mainz, 2013.
2. 2.

   None
3. 3.

   I’m from brazil

4. 4.

   None
5. 5.

   None
6. 6.

   I ♥ opensource

7. 7.

   I ♥ jQuery

8. 8.

   jqueryboilerplate.com

9. 9.

   I ♥ HTML5

10. 10.

    html5-pro.com/wormz

11. 11.

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

12. 12.

    None
13. 13.

    just a toy language?

14. 14.

    triggerrally.com/x/Preview/Arbusu/drive

15. 15.

    None
16. 16.

    what about jQuery?

17. 17.

    None
18. 18.

    goo.gl/rfaLs

19. 19.

    why should I care?

20. 20.

    because your UI suck

21. 21.

    let’s create a high scalable javascript application

22. 22.

    None
23. 23.

    option #1 write everything from scratch

24. 24.

    option #2 use existing open source solutions

25. 25.

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

26. 26.

    mootools.net

27. 27.

    UI components twitter.github.io/bootstrap

28. 28.

    jqueryui.com

29. 29.

    Templates mustache.github.io

30. 30.

    handlebarsjs.com

31. 31.

    Module loader requirejs.org

32. 32.

    headjs.com

33. 33.

    MV* backbonejs.org

34. 34.

    knockoutjs.com

35. 35.

    angularjs.org

36. 36.

    emberjs.com

37. 37.

    Tests BDD TDD pivotal.github.io/jasmine

38. 38.

    qunitjs.com

39. 39.

    None
40. 40.

    None
41. 41.

    we build java portals

42. 42.

    our solution has more than 4,000,000 downloads

43. 43.

    and over 500,000 deployments worldwide

44. 44.

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

45. 45.

    None
46. 46.

    yuilibrary.com

47. 47.

    and we created our own superset of components

48. 48.

    AlloyUI

49. 49.

    alloyui.com

50. 50.

    YUI = effects DOM ajax events ... MVC

51. 51.

    YUI = effects DOM ajax events ... MVC

52. 52.

    YUI = effects DOM ajax events ... MVC

53. 53.

    YUI = effects DOM ajax events ... MVC

54. 54.

    YUI = effects DOM ajax events ... MVC

55. 55.

    YUI = effects DOM ajax events ... MVC

56. 56.

    YUI = effects DOM ajax events ... MVC

57. 57.

    AlloyUI = calendar tabs buttons carousel ... audio

58. 58.

    AlloyUI = calendar tabs buttons carousel ... audio

59. 59.

    AlloyUI = calendar tabs buttons carousel ... audio

60. 60.

    AlloyUI = calendar tabs buttons carousel ... audio

61. 61.

    AlloyUI = calendar tabs buttons carousel ... audio

62. 62.

    AlloyUI = calendar tabs buttons carousel ... audio

63. 63.

    AlloyUI = calendar tabs buttons carousel ... audio

64. 64.

    None
65. 65.

    JavaScript

66. 66.

    None
67. 67.

    YUI

68. 68.

    None
69. 69.

    AlloyUI

70. 70.

    alloyui.com/examples/carousel

71. 71.

    alloyui.com/examples/diagram-builder

72. 72.

    alloyui.com/examples/image-cropper

73. 73.

    alloyui.com/examples/viewport

74. 74.

    but I’m a java guy!

75. 75.

    <taglibs> \o/

76. 76.

    everything you need

77. 77.

    everything you need + single api

78. 78.

    everything you need + single api + good performance

79. 79.

    who uses it?

80. 80.

    developer.cisco.com

81. 81.

    lufthansa-flight-training.com

82. 82.

    bosch-sicherheitssysteme.de

83. 83.

    more than 300,000 downloads

84. 84.

    wanna know more?

85. 85.

    find me on room Watfordsaal B at 2pm

86. 86.

    None
87. 87.

    “HTML5 is the future”

88. 88.

    wanna see the future?

89. 89.

    None
90. 90.

    None
91. 91.

    HTML5 is today!

92. 92.

    Content Consumer Devices

93. 93.

    Content Consumer Devices

94. 94.

    old browsers are like B&W TVs

95. 95.

    new browsers are like HD TVs

96. 96.

    TV already solved that problem

97. 97.

    so why developers keep doing this?

98. 98.

    it’s up to you!

99. 99.

    dank :)