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

Getting Started with YUI3 and AlloyUI

Sponsored · SiteGround - Reliable hosting with speed, security, and support you can count on. →
Avatar for Eduardo Lundgren Eduardo Lundgren
December 20, 2013
Technology
0
90

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
64
Introducing Liferay Standalone Applications
Avatar for Eduardo Lundgren eduardolundgren
3
540
Single Page Applications in Liferay
Avatar for Eduardo Lundgren eduardolundgren
5
2.6k
Single Page Applications done right
Avatar for Eduardo Lundgren eduardolundgren
10
800
tracking.js with Maira Bello
Avatar for Eduardo Lundgren eduardolundgren
0
130
Single Page Application
Avatar for Eduardo Lundgren eduardolundgren
0
440
Getting started with AlloyUI
Avatar for Eduardo Lundgren eduardolundgren
0
94
Augmented Reality.js
Avatar for Eduardo Lundgren eduardolundgren
0
160
Liferay UI revolution
Avatar for Eduardo Lundgren eduardolundgren
0
190

Other Decks in Technology

See All in Technology
AI時代のSaaSとETL
Avatar for Shu Suzuki shoe116
1
190
Zeal of the Convert: Taming Shai-Hulud with AI
Avatar for Rami McCarthy ramimac
0
150
Go標準パッケージのI/O処理をながめる
Avatar for matumoto matumoto
0
240
【Λ（らむだ）】最近のアプデ情報 / RPALT20260318
Avatar for Λ lambda
0
120
Laravelで学ぶOAuthとOpenID Connectの基礎と実装
Avatar for Koji Yoshida kyoshidaxx
0
110
生成AI活用でQAエンジニアにどのような仕事が生まれるか/Support Required of QA Engineers for Generative AI
Avatar for Hiroki Iseri goyoki
1
300
めちゃくちゃ開発するQAエンジニアになって感じたメリットとこれからの課題感
Avatar for yama-cha-n ryuhei0000yamamoto
0
150
It’s “Time” to use Temporal
Avatar for Saji sajikix
3
230
モジュラモノリス導入から4年間の総括：アーキテクチャと組織の相互作用について / Architecture and Organizational Interaction
Avatar for Satoshi Kawashima nazonohito51
1
570
俺の/私の最強アーキテクチャ決定戦開催 ― チームで新しいアーキテクチャに適合していくために / 20260322 Naoki Takahashi
Avatar for SHIFT EVOLVE shift_evolve
PRO
0
180
(Test) ai-meetup slide creation
Avatar for Oikon oikon48
3
470
Tebiki Engineering Team Deck
Avatar for Tebiki, Inc. tebiki
0
27k

Featured

See All Featured
SEO Brein meetup: CTRL+C is not how to scale international SEO
Avatar for Linda Hogenes lindahogenes
1
2.4k
Building the Perfect Custom Keyboard
Avatar for Naoto Takai takai
2
710
[RailsConf 2023] Rails as a piece of cake
Avatar for Vladimir Dementyev palkan
59
6.4k
Building Flexible Design Systems
Avatar for Yesenia Perez-Cruz yeseniaperezcruz
330
40k
Ethics towards AI in product and experience design
Avatar for Skipper Chong Warson skipperchong
2
230
The Illustrated Guide to Node.js - THAT Conference 2024
Avatar for David Neal reverentgeek
1
310
AI Search:
Where Are We & What Can We Do About It?
Avatar for Aleyda Solis aleyda
0
7.1k
How to Align SEO within the Product Triangle To Get 
Buy-In & Support - #RIMC
Avatar for Aleyda Solis aleyda
1
1.4k
<Decoding/> the Language of Devs - We Love SEO 2024
Avatar for Nikki Halliwell nikkihalliwell
1
160
Art, The Web, and Tiny UX
Avatar for Lynn Fisher lynnandtonic
304
21k
Mobile First: as difficult as doing things right
Avatar for Swwweet swwweet
225
10k
Context Engineering - Making Every Token Count
Avatar for Addy Osmani addyosmani
9
770

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