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

Getting started with AlloyUI

Sponsored · Your Podcast. Everywhere. Effortlessly. Share. Educate. Inspire. Entertain. You do you. We'll handle the rest. →
Avatar for Eduardo Lundgren Eduardo Lundgren
November 20, 2013
Technology
110
0

Getting started with AlloyUI

Avatar for Eduardo Lundgren

Eduardo Lundgren

November 20, 2013

More Decks by Eduardo Lundgren

See All by Eduardo Lundgren
WeDeploy
Avatar for Eduardo Lundgren eduardolundgren
0
75
Introducing Liferay Standalone Applications
Avatar for Eduardo Lundgren eduardolundgren
3
550
Single Page Applications in Liferay
Avatar for Eduardo Lundgren eduardolundgren
5
2.6k
Single Page Applications done right
Avatar for Eduardo Lundgren eduardolundgren
10
810
tracking.js with Maira Bello
Avatar for Eduardo Lundgren eduardolundgren
0
130
Single Page Application
Avatar for Eduardo Lundgren eduardolundgren
0
450
Getting Started with YUI3 and AlloyUI
Avatar for Eduardo Lundgren eduardolundgren
0
100
Augmented Reality.js
Avatar for Eduardo Lundgren eduardolundgren
0
170
Liferay UI revolution
Avatar for Eduardo Lundgren eduardolundgren
0
200

Other Decks in Technology

See All in Technology
FPC(フレキシブル)基板にZephyr実装してみた。
Avatar for misoji engineer iotengineer22
0
120
気づかぬうちにセキュリティ負債を生むAPIキー運用
Avatar for Michitaka Sugawara sgwrmctk
0
180
ぼっちではじめた登壇が「51名」「241件」の発信に化けた
Avatar for subroh_0508 subroh0508
1
240
10年間のブログ発信を振り返って見えたWebアプリケーションエンジニアとしての軌跡
Avatar for すてにゃん stefafafan
0
160
あなたの知らないPDFのアクセシビリティ
Avatar for LINEヤフーTech (LY Corporation Tech) lycorptech_jp
PRO
0
220
手塩にかけりゃいいってもんじゃない
Avatar for ming ming_ayami
0
610
AI駆動開発を通して感じた、 AI時代のデザイナーの役割変化
Avatar for WHIsaiyo whisaiyo
4
2.3k
200個のGitHubリポジトリを横断調査したかった
Avatar for Issei.Komori icck
0
140
生成 AI 実践ガイド (概略版) AIガバナンス編
Avatar for Asei Sugiyama asei
0
120
SONiCで構築・運用する生成AI向けパブリッククラウドネットワーク ～実装編～
Avatar for SONiC Users Group Japan sonic
0
280
AI-DLCを “そのまま導入しなかった”話 ~組織に合わせてアジャストした 私たちの実践共有~
Avatar for hiroramos hiroramos4
PRO
0
210
【セミナー資料】Claude Code をセキュアに使うための考え方と設定の勘どころ / Claude Code Webinar 20260616
Avatar for MasahiroKawahara masahirokawahara
2
420

Featured

See All Featured
職位にかかわらず全員がリーダーシップを発揮するチーム作り / Building a team where everyone can demonstrate leadership regardless of position
Avatar for MADOX madoxten
62
54k
16th Malabo Montpellier Forum Presentation
Avatar for AKADEMIYA2063 akademiya2063
PRO
0
150
JAMstack: Web Apps at Ludicrous Speed - All Things Open 2022
Avatar for David Neal reverentgeek
1
480
How Software Deployment tools have changed in the past 20 years
Avatar for Geshan Manandhar geshan
0
34k
How STYLIGHT went responsive
Avatar for nonsquared nonsquared
100
6.2k
AI Search:
Where Are We & What Can We Do About It?
Avatar for Aleyda Solis aleyda
0
7.6k
Product Roadmaps are Hard
Avatar for C. Todd Lombardo iamctodd
PRO
55
12k
The Curious Case for Waylosing
Avatar for Cassini Nazir cassininazir
1
390
Put a Button on it: Removing Barriers to Going Fast.
Avatar for kastner kastner
60
4.3k
Crafting Experiences
Avatar for Bethany Jepchumba bethany
1
180
Java REST API Framework Comparison - PWX 2021
Avatar for Matt Raible mraible
34
9.4k
Stop Working from a Prison Cell
Avatar for Chris Michel hatefulcrawdad
274
21k

Transcript

  1. Getting started with AlloyUI Liferay North America Symposium October, 2013

    Thursday, October 17, 13

  2. @jonmak08 Thursday, October 17, 13

  3. @eduardolundgren Thursday, October 17, 13

  4. Thursday, October 17, 13

  5. today we’re going to talk about YUI3 and AlloyUI Thursday,

    October 17, 13

  6. Thursday, October 17, 13

  7. yuilibrary.com Thursday, October 17, 13

  8. YUI3 modules Thursday, October 17, 13

  9. YUI = effects DOM ajax events ... MVC Thursday, October

    17, 13

  10. YUI = effects DOM ajax events ... MVC Thursday, October

    17, 13

  11. YUI = effects DOM ajax events ... MVC Thursday, October

    17, 13

  12. YUI = effects DOM ajax events ... MVC Thursday, October

    17, 13

  13. YUI = effects DOM ajax events ... MVC Thursday, October

    17, 13

  14. YUI = effects DOM ajax events ... MVC Thursday, October

    17, 13

  15. YUI = effects DOM ajax events ... MVC Thursday, October

    17, 13

  16. yuilibrary.com/yui/docs/guides Thursday, October 17, 13

  17. yuilibrary.com/yui/docs/dial/dial-interactive.html Thursday, October 17, 13

  18. yuilibrary.com/yui/docs/app/app-todo.html Thursday, October 17, 13

  19. yuilibrary.com/yui/docs/graphics/graphics-violin.html Thursday, October 17, 13

  20. YUI3 basics Thursday, October 17, 13

  21. $('.foo'); DOM traversal Y.all('.foo'); YUI3 jQuery Thursday, October 17, 13

  22. $('#foo').html('bar'); DOM manipulation Y.one('#foo').setHTML('bar'); YUI3 jQuery Thursday, October 17, 13

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

    { // do something }); YUI3 jQuery Thursday, October 17, 13

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

    : 0 }); YUI3 jQuery Thursday, October 17, 13

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

    }); ajax Y.io('api.json', { on: { success: function(data) { // do something } } }); YUI3 jQuery Thursday, October 17, 13

  26. alloyui.com/rosetta-stone Thursday, October 17, 13

  27. YUI3 loading Thursday, October 17, 13

  28. Thursday, October 17, 13

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

    response time is spent there.” - Steve Souders, Engineer at Google Thursday, October 17, 13

  30. without YUI... Thursday, October 17, 13

  31. <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> ... ... Thursday, October 17, 13

  32. performance-- maintainability-- Thursday, October 17, 13

  33. blocks render Thursday, October 17, 13

  34. with YUI... Thursday, October 17, 13

  35. one <script> Thursday, October 17, 13

  36. seed file <script src="http://yui.yahooapis.com/ 3.9.1/build/yui/yui-min.js"></script> <~26KB> Thursday, October 17, 13

  37. seed file <script src="http://yui.yahooapis.com/ 3.9.1/build/yui/yui-min.js"></script> <~26KB> Thursday, October 17, 13

  38. everything else asynchronous combo-loaded from CDN Thursday, October 17, 13

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

    Thursday, October 17, 13

  40. why asynchronous? Thursday, October 17, 13

  41. non-blocking http requests Thursday, October 17, 13

  42. load on demand Thursday, October 17, 13

  43. why combo-loaded? Thursday, October 17, 13

  44. yuilibrary.com/yui/configurator Thursday, October 17, 13

  45. loader +combo Thursday, October 17, 13

  46. why load from a CDN? Thursday, October 17, 13

  47. geographically closer Thursday, October 17, 13

  48. YUI gallery Thursday, October 17, 13

  49. yuilibrary.com/gallery Thursday, October 17, 13

  50. your code on Yahoo’s CDN Thursday, October 17, 13

  51. github.com/yui/yui3-gallery Thursday, October 17, 13

  52. available to anyone Thursday, October 17, 13

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

    }); Thursday, October 17, 13

  54. mzl.la/OEbuQH Thursday, October 17, 13

  55. AlloyUI Thursday, October 17, 13

  56. @natecavanaugh Thursday, October 17, 13

  57. created on 2009 Thursday, October 17, 13

  58. alloyui.com Thursday, October 17, 13

  59. built on top of YUI3 Thursday, October 17, 13

  60. AlloyUI = calendar tabs buttons carousel ... audio Thursday, October

    17, 13

  61. AlloyUI = calendar tabs buttons carousel ... audio Thursday, October

    17, 13

  62. AlloyUI = calendar tabs buttons carousel ... audio Thursday, October

    17, 13

  63. AlloyUI = calendar tabs buttons carousel ... audio Thursday, October

    17, 13

  64. AlloyUI = calendar tabs buttons carousel ... audio Thursday, October

    17, 13

  65. AlloyUI = calendar tabs buttons carousel ... audio Thursday, October

    17, 13

  66. AlloyUI = calendar tabs buttons carousel ... audio Thursday, October

    17, 13

  67. Thursday, October 17, 13

  68. Thursday, October 17, 13

  69. what we wanted: char counter Thursday, October 17, 13

  70. #twitter-box #myTextarea #myCounter Thursday, October 17, 13

  71. #twitter-box #myTextarea #myCounter Thursday, October 17, 13

  72. #twitter-box #myTextarea #myCounter Thursday, October 17, 13

  73. #twitter-box #myTextarea #myCounter Thursday, October 17, 13

  74. alloyui.com/examples/char-counter/real-world Thursday, October 17, 13

  75. what we wanted: schedule Thursday, October 17, 13

  76. Thursday, October 17, 13

  77. alloyui.com/examples/scheduler Thursday, October 17, 13

  78. what we wanted: a better way to express ideas Thursday,

    October 17, 13

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

    all browsers * no flash (HTML5) Thursday, October 17, 13

  80. alloyui.com/examples/diagram-builder Thursday, October 17, 13

  81. Thursday, October 17, 13

  82. thank you :) Thursday, October 17, 13