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
74

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
110
Single Page Application
Avatar for Eduardo Lundgren eduardolundgren
0
400
Getting started with AlloyUI
Avatar for Eduardo Lundgren eduardolundgren
0
75
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
Houtou.pm #1
Avatar for papix papix
0
670
会社紹介資料 / Sansan Company Profile
Avatar for Sansan, Inc. sansan33
PRO
6
360k
コードの考古学 〜労務システムから発掘した成長の糧〜
Avatar for Kenta SEKINE kenta_smarthr
1
1.2k
うちの会社の評判は？SNSの投稿分析にAIを使ってみた
Avatar for Kiyotaka Doumae doumae
0
270
令和最新版TypeScriptでのnpmパッケージ開発
Avatar for LINEヤフーTech (LY Corporation Tech) lycorptech_jp
PRO
0
110
名刺メーカーDevグループ 紹介資料
Avatar for Sansan, Inc. sansan33
PRO
0
740
テストを実施する前に考えるべきテストの話 / Thinking About Testing Before You Test
Avatar for nihonbuson nihonbuson
PRO
14
2.1k
障害を回避するHttpClient再入門 / Avoiding Failures HttpClient Reintroduction
Avatar for Yusuke Uehara uskey512
1
140
新卒から4年間、20年もののWebサービスと向き合って学んだソフトウェア考古学 - PHPカンファレンス新潟2025 / new graduate 4year software archeology
Avatar for guri oguri
2
360
いまさら聞けない Git 超入門 〜Gitって結局なに？から始める第一歩〜
Avatar for とことんDevOps devops_vtj
0
170
CloudBruteによる外部からのS3バケットの探索・公開の発見について / 20250605 Kumiko Hennmi
Avatar for SHIFT EVOLVE shift_evolve
3
190
Digitization部 紹介資料
Avatar for Sansan, Inc. sansan33
PRO
1
3.8k

Featured

See All Featured
Designing Dashboards & Data Visualisations in Web Apps
Avatar for Des Traynor destraynor
231
53k
The Power of CSS Pseudo Elements
Avatar for Geoffrey Crofte geoffreycrofte
76
5.8k
The Success of Rails: Ensuring Growth for the Next 100 Years
Avatar for Eileen M. Uchitelle eileencodes
45
7.3k
Raft: Consensus for Rubyists
Avatar for Patrick Van Stee vanstee
137
7k
How to Ace a Technical Interview
Avatar for Jacob Kaplan-Moss jacobian
276
23k
Fight the Zombie Pattern Library - RWD Summit 2016
Avatar for Marcelo Somers marcelosomers
233
17k
CSS Pre-Processors: Stylus, Less & Sass
Avatar for Bermon Painter bermonpainter
357
30k
Rebuilding a faster, lazier Slack
Avatar for samanthasiow samanthasiow
81
9k
Building Adaptive Systems
Avatar for Chris Keathley keathley
41
2.6k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
Avatar for Chris Coyier chriscoyier
507
140k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
Avatar for Rebecca Miller-Webster rmw
34
3k
How STYLIGHT went responsive
Avatar for nonsquared nonsquared
100
5.6k

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