Getting started with YUI3 and AlloyUI

Transcript

1. 1.

   getting started with YUI3 and AlloyUI Mainz, 2013.

2. 2.

   None
3. 3.

   None
4. 4.

   how some back-end devs see themselves

5. 5.

   how some back-end devs see front-end devs

6. 6.

   “CSS is very easy”

7. 7.

   None
8. 8.

   None
9. 9.

   None
10. 10.

    “javascript is ugly and full of bugs”

11. 11.

    None
12. 12.

    EcmaScript 6 is coming

13. 13.

    front-end is changing

14. 14.

    extremejs.com

15. 15.

    github.com/languages

16. 16.

    there are three types of people

17. 17.

    1. those who compile javascript

18. 18.

    developers.google.com/web-toolkit

19. 19.

    2. those who doesn’t compile

20. 20.

    developers.google.com/closure/library

21. 21.

    3. java == javascript

22. 22.

    None
23. 23.

    None
24. 24.

    twitter.com/joelambert/status/327047616326152193

25. 25.

    None
26. 26.

    today we’re going to talk about server-agnostic JS frameworks

27. 27.

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

28. 28.

    mootools.net

29. 29.

    UI components twitter.github.io/bootstrap

30. 30.

    jqueryui.com

31. 31.

    Templates mustache.github.io

32. 32.

    handlebarsjs.com

33. 33.

    Module loader requirejs.org

34. 34.

    headjs.com

35. 35.

    MV* backbonejs.org

36. 36.

    knockoutjs.com

37. 37.

    angularjs.org

38. 38.

    emberjs.com

39. 39.

    Tests BDD TDD pivotal.github.io/jasmine

40. 40.

    qunitjs.com

41. 41.

    None
42. 42.

    yuilibrary.com

43. 43.

    yuilibrary.com/projects/yuitest

44. 44.

    yui.github.io/yuicompressor

45. 45.

    yui.github.io/yuidoc

46. 46.

    yui.github.io/yogi

47. 47.

    YUI3 modules

48. 48.

    YUI = effects DOM ajax events ... MVC

49. 49.

    YUI = effects DOM ajax events ... MVC

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.

    yuilibrary.com/yui/docs/guides

56. 56.

    yuilibrary.com/yui/docs/dial/dial-interactive.html

57. 57.

    yuilibrary.com/yui/docs/app/app-todo.html

58. 58.

    yuilibrary.com/yui/docs/graphics/graphics-violin.html

59. 59.

    YUI3 basics

60. 60.

    $('.foo'); DOM traversal Y.all('.foo'); YUI3 jQuery

61. 61.

    $('#foo').html('bar'); DOM manipulation Y.one('#foo').setHTML('bar'); YUI3 jQuery

62. 62.

    $('#close-btn').on('click', function() { // do something }); events Y.one('#close-btn').on('click', function()

    { // do something }); YUI3 jQuery
63. 63.

    $('#fade').animate({ opacity: 0, }, 5000); effects Y.one('#fade').transition({ duration: 1, opacity

    : 0 }); YUI3 jQuery
64. 64.

    $.ajax({ url: "api.json", success: function(data) { // do something }

    }); ajax Y.io('api.json', { on: { success: function(data) { // do something } } }); YUI3 jQuery
65. 65.

    alloyui.com/rosetta-stone

66. 66.

    YUI3 loading

67. 67.

    None
68. 68.

    “Optimize the front-end performance first, because 80/90% of the user

    response time is spent there.” - Steve Souders, Engineer at Google
69. 69.

    without YUI...

70. 70.

    <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/ 1.9.1/jquery.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jqueryui/ 1.10.2/jquery-ui.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/ mustache.js/0.7.2/mustache.js"></script> <script

    src="//cdnjs.cloudflare.com/ajax/libs/ require.js/2.1.5/require.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/ember.js/ 1.0.0-rc.2/ember-1.0.pre.js"></script> ... ...
71. 71.

    performance-- maintainability--

72. 72.

    blocks render

73. 73.

    with YUI...

74. 74.

    one <script>

75. 75.

    seed file <script src="http://yui.yahooapis.com/ 3.9.1/build/yui/yui-min.js"></script>

76. 76.

    everything else asynchronous combo-loaded from CDN

77. 77.

    sandbox YUI().use('module-name', function (Y) { // code goes here });

78. 78.

    why asynchronous?

79. 79.

    non-blocking http requests

80. 80.

    why combo-loaded?

81. 81.

    yuilibrary.com/yui/configurator

82. 82.

    why load from a CDN?

83. 83.

    geographically closer

84. 84.

    YUI gallery

85. 85.

    yuilibrary.com/gallery

86. 86.

    your code on Yahoo’s CDN

87. 87.

    github.com/yui/yui3-gallery

88. 88.

    available to anyone

89. 89.

    just use() YUI().use('gallery-audio', function (Y) { // code goes here

    });
90. 90.

    mzl.la/OEbuQH

91. 91.

    AlloyUI

92. 92.

    @natecavanaugh

93. 93.

    @eduardolundgren

94. 94.

    created on 2009

95. 95.

    alloyui.com

96. 96.

    built on top of YUI3

97. 97.

    AlloyUI = calendar tabs buttons carousel ... audio

98. 98.

    AlloyUI = calendar tabs buttons carousel ... audio

99. 99.

    AlloyUI = calendar tabs buttons carousel ... audio

100. 100.

     AlloyUI = calendar tabs buttons carousel ... audio

101. 101.

     AlloyUI = calendar tabs buttons carousel ... audio

102. 102.

     AlloyUI = calendar tabs buttons carousel ... audio

103. 103.

     AlloyUI = calendar tabs buttons carousel ... audio

104. 104.

     what we wanted: char counter

105. 105.

     #twitter-box #myTextarea #myCounter

106. 106.

     #twitter-box #myTextarea #myCounter

107. 107.

     #twitter-box #myTextarea #myCounter

108. 108.

     #twitter-box #myTextarea #myCounter

109. 109.

     alloyui.com/examples/char-counter/real-world

110. 110.

     what we wanted: schedule

111. 111.

     None
112. 112.

     alloyui.com/examples/scheduler

113. 113.

     what we wanted: a better way to express ideas

114. 114.

     * drag and drop UI * flexible API * support

     all browsers * no flash (HTML5)
115. 115.

     alloyui.com/examples/diagram-builder

116. 116.

     alloyui.com/api

117. 117.

     but I’m a java guy!

118. 118.

     <taglibs> \o/

119. 119.

     taglibs <aui:button name="saveButton" type="submit" value="save"/> Button

120. 120.

     taglibs <aui:input name="myField" > <aui:validator name="required" /> <aui:validator name="digits" />

     <aui:validator name="range" > [8,50] </aui:validator> </aui:input> Form Validation
121. 121.

     the success of an application doesn’t depends on the technology

     itself... ...but how it is applied.
122. 122.

     None
123. 123.

     None
124. 124.

     dank :)