Getting started with YUI3 and AlloyUI

Transcript

1. getting started with YUI3 and AlloyUI Mainz, 2013.

2. None
3. None

4. how some back-end devs see themselves

5. how some back-end devs see front-end devs

6. “CSS is very easy”

7. None
8. None
9. None

10. “javascript is ugly and full of bugs”

11. None

12. EcmaScript 6 is coming

13. front-end is changing

14. extremejs.com

15. github.com/languages

16. there are three types of people

17. 1. those who compile javascript

18. developers.google.com/web-toolkit

19. 2. those who doesn’t compile

20. developers.google.com/closure/library

21. 3. java == javascript

22. None
23. None

24. twitter.com/joelambert/status/327047616326152193

25. None

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

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

28. mootools.net

29. UI components twitter.github.io/bootstrap

30. jqueryui.com

31. Templates mustache.github.io

32. handlebarsjs.com

33. Module loader requirejs.org

34. headjs.com

35. MV* backbonejs.org

36. knockoutjs.com

37. angularjs.org

38. emberjs.com

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

40. qunitjs.com

41. None

42. yuilibrary.com

43. yuilibrary.com/projects/yuitest

44. yui.github.io/yuicompressor

45. yui.github.io/yuidoc

46. yui.github.io/yogi

47. YUI3 modules

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

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

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

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

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

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

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

55. yuilibrary.com/yui/docs/guides

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

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

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

59. YUI3 basics

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

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

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

    { // do something }); YUI3 jQuery

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

    : 0 }); YUI3 jQuery

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

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

65. alloyui.com/rosetta-stone

66. YUI3 loading

67. None

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

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

69. without YUI...

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. performance-- maintainability--

72. blocks render

73. with YUI...

74. one <script>

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

76. everything else asynchronous combo-loaded from CDN

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

78. why asynchronous?

79. non-blocking http requests

80. why combo-loaded?

81. yuilibrary.com/yui/configurator

82. why load from a CDN?

83. geographically closer

84. YUI gallery

85. yuilibrary.com/gallery

86. your code on Yahoo’s CDN

87. github.com/yui/yui3-gallery

88. available to anyone

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

    });

90. mzl.la/OEbuQH

91. AlloyUI

92. @natecavanaugh

93. @eduardolundgren

94. created on 2009

95. alloyui.com

96. built on top of YUI3

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

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

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

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

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

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

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

104. what we wanted: char counter

105. #twitter-box #myTextarea #myCounter

106. #twitter-box #myTextarea #myCounter

107. #twitter-box #myTextarea #myCounter

108. #twitter-box #myTextarea #myCounter

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

110. what we wanted: schedule

111. None

112. alloyui.com/examples/scheduler

113. what we wanted: a better way to express ideas

114. * drag and drop UI * flexible API * support

     all browsers * no flash (HTML5)

115. alloyui.com/examples/diagram-builder

116. alloyui.com/api

117. but I’m a java guy!

118. <taglibs> \o/

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

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. the success of an application doesn’t depends on the technology

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

124. dank :)