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
750
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
急成長を支える基盤作り〜地道な改善からコツコツと〜 #cre_meetup
Avatar for すてにゃん stefafafan
0
110
Кто отправит outbox? Валентин Удальцов, автор канала Пых
Avatar for Lamoda Tech lamodatech
0
320
A2Aのクライアントを自作する
Avatar for Ryunosuke Iwai rynsuke
1
160
GeminiとNotebookLMによる金融実務の業務革新
Avatar for abenben abenben
0
210
米国国防総省のDevSecOpsライフサイクルをAWSのセキュリティサービスとOSSで実現
Avatar for Shun Yoshie syoshie
2
970
初めてのAzure FunctionsをClaude Codeで作ってみた / My first Azure Functions using Claude Code
Avatar for Hideaki Aoyagi hideakiaoyagi
1
210
Snowflake Summit 2025 データエンジニアリング関連新機能紹介 / Snowflake Summit 2025 What's New about Data Engineering
Avatar for t-hiroto tiltmax3
0
300
Model Mondays S2E02: Model Context Protocol
Avatar for Nitya Narasimhan, PhD nitya
0
210
VCpp Link and Library - C++ breaktime 2025 Summer
Avatar for Akiko Kawai harukasao
0
240
Amazon Bedrockで実現する 新たな学習体験
Avatar for Kazuki Maeda kzkmaeda
1
490
地図も、未来も、オープンに。 〜OSGeo.JPとFOSS4Gのご紹介〜
Avatar for wata909 wata909
0
100
ローカルLLMでファインチューニング
Avatar for 西岡 賢一郎 (Kenichiro Nishioka) knishioka
0
140

Featured

See All Featured
Sharpening the Axe: The Primacy of Toolmaking
Avatar for Bryan Cantrill bcantrill
44
2.4k
Mobile First: as difficult as doing things right
Avatar for Swwweet swwweet
223
9.7k
ReactJS: Keep Simple. Everything can be a component!
Avatar for Pedro Nauck pedronauck
667
120k
Principles of Awesome APIs and How to Build Them.
Avatar for Keavy McMinn keavy
126
17k
Making the Leap to Tech Lead
Avatar for Ryan Cromwell cromwellryan
134
9.3k
The Success of Rails: Ensuring Growth for the Next 100 Years
Avatar for Eileen M. Uchitelle eileencodes
45
7.4k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
Avatar for Eileen M. Uchitelle eileencodes
26
2.8k
Measuring & Analyzing Core Web Vitals
Avatar for Philip Tellis bluesmoon
7
490
A Modern Web Designer's Workflow
Avatar for Chris Coyier chriscoyier
693
190k
Fantastic passwords and where to find them - at NoRuKo
Avatar for Phil Nash philnash
51
3.3k
Improving Core Web Vitals using Speculation Rules API
Avatar for Sergey Chernyshev sergeychernyshev
16
940
KATA
Avatar for Megan Lloyd mclloyd
29
14k

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