Getting started with AlloyUI

Transcript

1. Getting started with AlloyUI Liferay North America Symposium October, 2013

   Thursday, October 17, 13

2. @jonmak08 Thursday, October 17, 13

3. @eduardolundgren Thursday, October 17, 13

4. Thursday, October 17, 13

5. today we’re going to talk about YUI3 and AlloyUI Thursday,

   October 17, 13

6. Thursday, October 17, 13

7. yuilibrary.com Thursday, October 17, 13

8. YUI3 modules Thursday, October 17, 13

9. YUI = effects DOM ajax events ... MVC Thursday, October

   17, 13

10. YUI = effects DOM ajax events ... MVC Thursday, October

    17, 13

11. YUI = effects DOM ajax events ... MVC Thursday, October

    17, 13

12. YUI = effects DOM ajax events ... MVC Thursday, October

    17, 13

13. YUI = effects DOM ajax events ... MVC Thursday, October

    17, 13

14. YUI = effects DOM ajax events ... MVC Thursday, October

    17, 13

15. YUI = effects DOM ajax events ... MVC Thursday, October

    17, 13

16. yuilibrary.com/yui/docs/guides Thursday, October 17, 13

17. yuilibrary.com/yui/docs/dial/dial-interactive.html Thursday, October 17, 13

18. yuilibrary.com/yui/docs/app/app-todo.html Thursday, October 17, 13

19. yuilibrary.com/yui/docs/graphics/graphics-violin.html Thursday, October 17, 13

20. YUI3 basics Thursday, October 17, 13

21. $('.foo'); DOM traversal Y.all('.foo'); YUI3 jQuery Thursday, October 17, 13

22. $('#foo').html('bar'); DOM manipulation Y.one('#foo').setHTML('bar'); YUI3 jQuery Thursday, October 17, 13

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

    { // do something }); YUI3 jQuery Thursday, October 17, 13

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

    : 0 }); YUI3 jQuery Thursday, October 17, 13

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

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

26. alloyui.com/rosetta-stone Thursday, October 17, 13

27. YUI3 loading Thursday, October 17, 13

28. Thursday, October 17, 13

29. “Optimize the front-end performance first, because 80% of the user

    response time is spent there.” - Steve Souders, Engineer at Google Thursday, October 17, 13

30. without YUI... Thursday, October 17, 13

31. <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> ... ... Thursday, October 17, 13

32. performance-- maintainability-- Thursday, October 17, 13

33. blocks render Thursday, October 17, 13

34. with YUI... Thursday, October 17, 13

35. one <script> Thursday, October 17, 13

36. seed file <script src="http://yui.yahooapis.com/ 3.9.1/build/yui/yui-min.js"></script> <~26KB> Thursday, October 17, 13

37. seed file <script src="http://yui.yahooapis.com/ 3.9.1/build/yui/yui-min.js"></script> <~26KB> Thursday, October 17, 13

38. everything else asynchronous combo-loaded from CDN Thursday, October 17, 13

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

    Thursday, October 17, 13

40. why asynchronous? Thursday, October 17, 13

41. non-blocking http requests Thursday, October 17, 13

42. load on demand Thursday, October 17, 13

43. why combo-loaded? Thursday, October 17, 13

44. yuilibrary.com/yui/configurator Thursday, October 17, 13

45. loader +combo Thursday, October 17, 13

46. why load from a CDN? Thursday, October 17, 13

47. geographically closer Thursday, October 17, 13

48. YUI gallery Thursday, October 17, 13

49. yuilibrary.com/gallery Thursday, October 17, 13

50. your code on Yahoo’s CDN Thursday, October 17, 13

51. github.com/yui/yui3-gallery Thursday, October 17, 13

52. available to anyone Thursday, October 17, 13

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

    }); Thursday, October 17, 13

54. mzl.la/OEbuQH Thursday, October 17, 13

55. AlloyUI Thursday, October 17, 13

56. @natecavanaugh Thursday, October 17, 13

57. created on 2009 Thursday, October 17, 13

58. alloyui.com Thursday, October 17, 13

59. built on top of YUI3 Thursday, October 17, 13

60. AlloyUI = calendar tabs buttons carousel ... audio Thursday, October

    17, 13

61. AlloyUI = calendar tabs buttons carousel ... audio Thursday, October

    17, 13

62. AlloyUI = calendar tabs buttons carousel ... audio Thursday, October

    17, 13

63. AlloyUI = calendar tabs buttons carousel ... audio Thursday, October

    17, 13

64. AlloyUI = calendar tabs buttons carousel ... audio Thursday, October

    17, 13

65. AlloyUI = calendar tabs buttons carousel ... audio Thursday, October

    17, 13

66. AlloyUI = calendar tabs buttons carousel ... audio Thursday, October

    17, 13

67. Thursday, October 17, 13

68. Thursday, October 17, 13

69. what we wanted: char counter Thursday, October 17, 13

70. #twitter-box #myTextarea #myCounter Thursday, October 17, 13

71. #twitter-box #myTextarea #myCounter Thursday, October 17, 13

72. #twitter-box #myTextarea #myCounter Thursday, October 17, 13

73. #twitter-box #myTextarea #myCounter Thursday, October 17, 13

74. alloyui.com/examples/char-counter/real-world Thursday, October 17, 13

75. what we wanted: schedule Thursday, October 17, 13

76. Thursday, October 17, 13

77. alloyui.com/examples/scheduler Thursday, October 17, 13

78. what we wanted: a better way to express ideas Thursday,

    October 17, 13

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

    all browsers * no flash (HTML5) Thursday, October 17, 13

80. alloyui.com/examples/diagram-builder Thursday, October 17, 13

81. Thursday, October 17, 13

82. thank you :) Thursday, October 17, 13