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

Getting Started with YUI3 and AlloyUI

Avatar for Eduardo Lundgren Eduardo Lundgren
December 20, 2013
Technology
0
77

Getting Started with YUI3 and AlloyUI

Avatar for Eduardo Lundgren

Eduardo Lundgren

December 20, 2013
Tweet

More Decks by Eduardo Lundgren

See All by Eduardo Lundgren
WeDeploy
Avatar for Eduardo Lundgren eduardolundgren
0
48
Introducing Liferay Standalone Applications
Avatar for Eduardo Lundgren eduardolundgren
3
520
Single Page Applications in Liferay
Avatar for Eduardo Lundgren eduardolundgren
5
2.5k
Single Page Applications done right
Avatar for Eduardo Lundgren eduardolundgren
10
760
tracking.js with Maira Bello
Avatar for Eduardo Lundgren eduardolundgren
0
120
Single Page Application
Avatar for Eduardo Lundgren eduardolundgren
0
400
Getting started with AlloyUI
Avatar for Eduardo Lundgren eduardolundgren
0
78
Augmented Reality.js
Avatar for Eduardo Lundgren eduardolundgren
0
150
Liferay UI revolution
Avatar for Eduardo Lundgren eduardolundgren
0
190

Other Decks in Technology

See All in Technology
Vision Language Modelと自動運転AIの最前線_20250730
Avatar for Yu Yamaguchi yuyamaguchi
4
1.3k
MCP認可の現在地と自律型エージェント対応に向けた課題 / MCP Authorization Today and Challenges to Support Autonomous Agents
Avatar for Yoichi Kawasaki yokawasa
5
2.2k
AIのグローバルトレンド 2025 / ai global trend 2025
Avatar for kyonmm kyonmm
PRO
1
140
Lambda management with ecspresso and Terraform
Avatar for Michael H. Oshita ijin
2
160
隙間時間で爆速開発！ Claude Code × Vibe Coding で作るマニュアル自動生成サービス
Avatar for Akitomo Sato akitomonam
3
260
薬屋のひとりごとにみるトラブルシューティング
Avatar for tomokusaba tomokusaba
0
240
開発 × 生成AI × コミュニケーション：GENDAの開発現場で感じたコミュニケーションの変化 / GENDA Tech Talk #1
Avatar for GENDA genda
0
130
Amazon GuardDuty での脅威検出：脅威検出の実例から学ぶ
Avatar for KintoTech_Dev kintotechdev
0
100
【CEDEC2025】ブランド力アップのためのコンテンツマーケティング～ゲーム会社における情報資産の活かし方～
Avatar for Cygames cygames
PRO
0
280
Claude Codeが働くAI中心の業務システム構築の挑戦―AIエージェント中心の働き方を目指して
Avatar for os1ma os1ma
9
2.5k
Jamf Connect ZTNAとMDMで実現! 金融ベンチャーにおける「デバイストラスト」実例と軌跡 / Kyash Device Trust
Avatar for Jun Watanabe rela1470
1
190
いかにして命令の入れ替わりについて心配するのをやめ、メモリモデルを 愛するようになったか（改）
Avatar for Takaya Saeki nullpo_head
7
2.5k

Featured

See All Featured
Making the Leap to Tech Lead
Avatar for Ryan Cromwell cromwellryan
134
9.5k
10 Git Anti Patterns You Should be Aware of
Avatar for Lemi Orhan Ergin lemiorhan
PRO
656
60k
GraphQLとの向き合い方2022年版
Avatar for Yosuke Kurami quramy
49
14k
Building Better People: How to give real-time feedback that sticks.
Avatar for Will Jessup wjessup
367
19k
Unsuck your backbone
Avatar for Amy Palamountain ammeep
671
58k
Sharpening the Axe: The Primacy of Toolmaking
Avatar for Bryan Cantrill bcantrill
44
2.4k
Navigating Team Friction
Avatar for Lara Hogan lara
188
15k
How to Ace a Technical Interview
Avatar for Jacob Kaplan-Moss jacobian
278
23k
Bash Introduction
Avatar for André Augusto Costa Santos 62gerente
614
210k
Site-Speed That Sticks
Avatar for Harry Roberts csswizardry
10
760
A better future with KSS
Avatar for Kyle Neath kneath
239
17k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
Avatar for Dan Newman danielanewman
229
22k

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