Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Getting Started with YUI3 and AlloyUI

Eduardo Lundgren
December 20, 2013
Technology
0
72

Getting Started with YUI3 and AlloyUI

Eduardo Lundgren

December 20, 2013
Tweet

More Decks by Eduardo Lundgren

See All by Eduardo Lundgren
WeDeploy
eduardolundgren
0
43
Introducing Liferay Standalone Applications
eduardolundgren
3
510
Single Page Applications in Liferay
eduardolundgren
5
2.5k
Single Page Applications done right
eduardolundgren
10
750
tracking.js with Maira Bello
eduardolundgren
0
110
Single Page Application
eduardolundgren
0
400
Getting started with AlloyUI
eduardolundgren
0
70
Augmented Reality.js
eduardolundgren
0
150
Liferay UI revolution
eduardolundgren
0
180

Other Decks in Technology

See All in Technology
エンジニア候補者向け資料2024.11.07.pdf
macloud
0
4.5k
Incident Response Practices: Waroom's Features and Future Challenges
rrreeeyyy
0
140
Mini Tokyo 3D × PLATEAU - 公共交通デジタルツインにリアルな風景を
nagix
1
230
私はこうやってマインドマップでテストすることを出す！
mineo_matsuya
0
240
Intuneお役立ちツールのご紹介
sukank
3
760
マイベストのデータ基盤の現在と未来 / mybest-data-infra-asis-tobe
mybestinc
2
1.9k
AIチャットボット開発への生成AI活用
ryomrt
0
140
dev 補講: プロダクトセキュリティ / Product security overview
wa6sn
0
1.6k
SREの組織類型に応じた リーダシップの考察
kenta_hi
PRO
1
630
ジョブマッチングサービスにおける相互推薦システムの応用事例と課題
hakubishin3
3
640
Redmine 6.0 新機能評価ガイド
vividtone
0
290
マルチモーダル / AI Agent / LLMOps 3つの技術トレンドで理解するLLMの今後の展望
hirosatogamo
8
2.8k

Featured

See All Featured
For a Future-Friendly Web
brad_frost
175
9.4k
The Art of Programming - Codeland 2020
erikaheidi
52
13k
[RailsConf 2023] Rails as a piece of cake
palkan
51
4.9k
Fantastic passwords and where to find them - at NoRuKo
philnash
50
2.9k
What's new in Ruby 2.0
geeforr
343
31k
Fireside Chat
paigeccino
33
3k
How to Think Like a Performance Engineer
csswizardry
20
1.1k
ピンチをチャンスに：未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
109
49k
Designing on Purpose - Digital PM Summit 2013
jponch
115
7k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
31
2.7k
jQuery: Nuts, Bolts and Bling
dougneiner
61
7.5k
GraphQLの誤解/rethinking-graphql
sonatard
67
10k

Transcript

  1. getting started with YUI3 and AlloyUI Front in BH, 2013

    terça-feira, 6 de agosto de 13

  2. @eduardolundgren terça-feira, 6 de agosto de 13

  3. terça-feira, 6 de agosto de 13

  4. jQuery jQueryUI YUI3 Liferay tracking.js AlloyUI jQuery Simulate nodegh terça-feira,

    6 de agosto de 13

  5. jQuery jQueryUI YUI3 Liferay tracking.js AlloyUI jQuery Simulate nodegh terça-feira,

    6 de agosto de 13

  6. jQuery jQueryUI YUI3 Liferay tracking.js AlloyUI jQuery Simulate nodegh terça-feira,

    6 de agosto de 13

  7. jQuery jQueryUI YUI3 Liferay tracking.js AlloyUI jQuery Simulate nodegh terça-feira,

    6 de agosto de 13

  8. jQuery jQueryUI YUI3 Liferay tracking.js AlloyUI jQuery Simulate nodegh terça-feira,

    6 de agosto de 13

  9. jQuery jQueryUI YUI3 Liferay tracking.js AlloyUI jQuery Simulate nodegh terça-feira,

    6 de agosto de 13

  10. jQuery jQueryUI YUI3 Liferay tracking.js AlloyUI jQuery Simulate nodegh terça-feira,

    6 de agosto de 13

  11. jQuery jQueryUI YUI3 Liferay tracking.js AlloyUI jQuery Simulate nodegh terça-feira,

    6 de agosto de 13

  12. jQuery jQueryUI YUI3 Liferay tracking.js AlloyUI jQuery Simulate nodegh terça-feira,

    6 de agosto de 13

  13. jquery.com (2006) terça-feira, 6 de agosto de 13

  14. today we’re going to talk about server-agnostic JS frameworks terça-feira,

    6 de agosto de 13

  15. Events, Selection, DOM Manipulation, Animation, Ajax requests jquery.com terça-feira, 6

    de agosto de 13

  16. mootools.net terça-feira, 6 de agosto de 13

  17. UI components twitter.github.io/bootstrap terça-feira, 6 de agosto de 13

  18. jqueryui.com terça-feira, 6 de agosto de 13

  19. Templates mustache.github.io terça-feira, 6 de agosto de 13

  20. handlebarsjs.com terça-feira, 6 de agosto de 13

  21. Module loader requirejs.org terça-feira, 6 de agosto de 13

  22. headjs.com terça-feira, 6 de agosto de 13

  23. MV* backbonejs.org terça-feira, 6 de agosto de 13

  24. knockoutjs.com terça-feira, 6 de agosto de 13

  25. angularjs.org terça-feira, 6 de agosto de 13

  26. emberjs.com terça-feira, 6 de agosto de 13

  27. Tests BDD TDD pivotal.github.io/jasmine terça-feira, 6 de agosto de 13

  28. qunitjs.com terça-feira, 6 de agosto de 13

  29. terça-feira, 6 de agosto de 13

  30. yuilibrary.com terça-feira, 6 de agosto de 13

  31. YUI3 modules terça-feira, 6 de agosto de 13

  32. YUI = effects DOM ajax events ... MVC terça-feira, 6

    de agosto de 13

  33. YUI = effects DOM ajax events ... MVC terça-feira, 6

    de agosto de 13

  34. YUI = effects DOM ajax events ... MVC terça-feira, 6

    de agosto de 13

  35. YUI = effects DOM ajax events ... MVC terça-feira, 6

    de agosto de 13

  36. YUI = effects DOM ajax events ... MVC terça-feira, 6

    de agosto de 13

  37. YUI = effects DOM ajax events ... MVC terça-feira, 6

    de agosto de 13

  38. YUI = effects DOM ajax events ... MVC terça-feira, 6

    de agosto de 13

  39. yuilibrary.com/yui/docs/guides terça-feira, 6 de agosto de 13

  40. yuilibrary.com/yui/docs/dial/dial-interactive.html terça-feira, 6 de agosto de 13

  41. yuilibrary.com/yui/docs/app/app-todo.html terça-feira, 6 de agosto de 13

  42. yuilibrary.com/yui/docs/graphics/graphics-violin.html terça-feira, 6 de agosto de 13

  43. YUI3 basics terça-feira, 6 de agosto de 13

  44. $('.foo'); DOM traversal Y.all('.foo'); YUI3 jQuery terça-feira, 6 de agosto

    de 13

  45. $('#foo').html('bar'); DOM manipulation Y.one('#foo').setHTML('bar'); YUI3 jQuery terça-feira, 6 de agosto

    de 13

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

    { // do something }); YUI3 jQuery terça-feira, 6 de agosto de 13

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

    : 0 }); YUI3 jQuery terça-feira, 6 de agosto de 13

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

    }); ajax Y.io('api.json', { on: { success: function(data) { // do something } } }); YUI3 jQuery terça-feira, 6 de agosto de 13

  49. alloyui.com/rosetta-stone terça-feira, 6 de agosto de 13

  50. YUI3 loading terça-feira, 6 de agosto de 13

  51. terça-feira, 6 de agosto de 13

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

    response time is spent there.” - Steve Souders, Engineer at Google terça-feira, 6 de agosto de 13

  53. without YUI... terça-feira, 6 de agosto de 13

  54. <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> ... ... terça-feira, 6 de agosto de 13

  55. performance-- maintainability-- terça-feira, 6 de agosto de 13

  56. blocks render terça-feira, 6 de agosto de 13

  57. with YUI... terça-feira, 6 de agosto de 13

  58. one <script> terça-feira, 6 de agosto de 13

  59. seed file <script src="http://yui.yahooapis.com/ 3.9.1/build/yui/yui-min.js"></script> <~26KB> terça-feira, 6 de agosto

    de 13

  60. seed file <script src="http://yui.yahooapis.com/ 3.9.1/build/yui/yui-min.js"></script> <~26KB> terça-feira, 6 de agosto

    de 13

  61. everything else asynchronous combo-loaded from CDN terça-feira, 6 de agosto

    de 13

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

    terça-feira, 6 de agosto de 13

  63. why asynchronous? terça-feira, 6 de agosto de 13

  64. non-blocking http requests terça-feira, 6 de agosto de 13

  65. load on demand terça-feira, 6 de agosto de 13

  66. why combo-loaded? terça-feira, 6 de agosto de 13

  67. yuilibrary.com/yui/configurator terça-feira, 6 de agosto de 13

  68. loader +combo terça-feira, 6 de agosto de 13

  69. why load from a CDN? terça-feira, 6 de agosto de

    13

  70. geographically closer terça-feira, 6 de agosto de 13

  71. YUI gallery terça-feira, 6 de agosto de 13

  72. yuilibrary.com/gallery terça-feira, 6 de agosto de 13

  73. your code on Yahoo’s CDN terça-feira, 6 de agosto de

    13

  74. github.com/yui/yui3-gallery terça-feira, 6 de agosto de 13

  75. available to anyone terça-feira, 6 de agosto de 13

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

    }); terça-feira, 6 de agosto de 13

  77. mzl.la/OEbuQH terça-feira, 6 de agosto de 13

  78. AlloyUI terça-feira, 6 de agosto de 13

  79. @natecavanaugh terça-feira, 6 de agosto de 13

  80. created on 2009 terça-feira, 6 de agosto de 13

  81. alloyui.com terça-feira, 6 de agosto de 13

  82. built on top of YUI3 terça-feira, 6 de agosto de

    13

  83. AlloyUI = calendar tabs buttons carousel ... audio terça-feira, 6

    de agosto de 13

  84. AlloyUI = calendar tabs buttons carousel ... audio terça-feira, 6

    de agosto de 13

  85. AlloyUI = calendar tabs buttons carousel ... audio terça-feira, 6

    de agosto de 13

  86. AlloyUI = calendar tabs buttons carousel ... audio terça-feira, 6

    de agosto de 13

  87. AlloyUI = calendar tabs buttons carousel ... audio terça-feira, 6

    de agosto de 13

  88. AlloyUI = calendar tabs buttons carousel ... audio terça-feira, 6

    de agosto de 13

  89. AlloyUI = calendar tabs buttons carousel ... audio terça-feira, 6

    de agosto de 13

  90. terça-feira, 6 de agosto de 13

  91. terça-feira, 6 de agosto de 13

  92. what we wanted: char counter terça-feira, 6 de agosto de

    13

  93. #twitter-box #myTextarea #myCounter terça-feira, 6 de agosto de 13

  94. #twitter-box #myTextarea #myCounter terça-feira, 6 de agosto de 13

  95. #twitter-box #myTextarea #myCounter terça-feira, 6 de agosto de 13

  96. #twitter-box #myTextarea #myCounter terça-feira, 6 de agosto de 13

  97. alloyui.com/examples/char-counter/real-world terça-feira, 6 de agosto de 13

  98. what we wanted: schedule terça-feira, 6 de agosto de 13

  99. terça-feira, 6 de agosto de 13

  100. alloyui.com/examples/scheduler terça-feira, 6 de agosto de 13

  101. what we wanted: a better way to express ideas terça-feira,

    6 de agosto de 13

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

    all browsers * no flash (HTML5) terça-feira, 6 de agosto de 13

  103. alloyui.com/examples/diagram-builder terça-feira, 6 de agosto de 13

  104. terça-feira, 6 de agosto de 13

  105. obrigado :) terça-feira, 6 de agosto de 13