Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Web App Development With YUI 3

7,873 views

Published on

This talk discusses techniques for deploying YUI 3 custom modules within a larger server application environment, using a working application as a reference. You'll learn how to streamline your development and deployment process, ways to organize your code for maximum efficiency, how to integrate with the Eclipse IDE, and some tips and tricks around build strategies and server-side tooling.

Published in: Technology
  • Be the first to comment

Web App Development With YUI 3

  1. 1. Web App Development with YUI 3 Eric Ferraiuolo Oddnut Software
  2. 2. Overview
  3. 3. Overview 1. Development and Deployment Goals
  4. 4. Overview 1. Development and Deployment Goals 2. YUI 3 as the UI Framework
  5. 5. Overview 1. Development and Deployment Goals 2. YUI 3 as the UI Framework 3. Logismo — Log Viewer App
  6. 6. Overview 1. Development and Deployment Goals 2. YUI 3 as the UI Framework 3. Logismo — Log Viewer App 4. From IDE to Browser
  7. 7. Development and Deployment Goals
  8. 8. Web App UIs — High Level
  9. 9. Web App UIs — High Level Organize
  10. 10. Web App UIs — High Level Organize Link
  11. 11. Web App UIs — High Level Organize Link Construct
  12. 12. Goals for UI Dev and Deploy
  13. 13. Goals for UI Dev and Deploy 1. Component framework
  14. 14. Goals for UI Dev and Deploy 1. Component framework 2. Managed dependencies
  15. 15. Goals for UI Dev and Deploy 1. Component framework 2. Managed dependencies 3. Build components automatically
  16. 16. Goals for UI Dev and Deploy 1. Component framework 2. Managed dependencies 3. Build components automatically 4. No manual assembly required — Auto deploy
  17. 17. YUI 3 as the UI Framework
  18. 18. YUI 3 — Real World Project Ready
  19. 19. YUI 3 — Real World Project Ready ‣ Component Infrastructure ‣ Y.Attribute, Y.Base, Y.Plugin, Y.Widget
  20. 20. YUI 3 — Real World Project Ready ‣ Component Infrastructure ‣ Y.Attribute, Y.Base, Y.Plugin, Y.Widget ‣ Module System baked-in
  21. 21. YUI 3 — Real World Project Ready ‣ Component Infrastructure ‣ Y.Attribute, Y.Base, Y.Plugin, Y.Widget ‣ Module System baked-in ‣ Build System — YUI Builder, YUI Compressor
  22. 22. YUI 3 — Real World Project Ready ‣ Component Infrastructure ‣ Y.Attribute, Y.Base, Y.Plugin, Y.Widget ‣ Module System baked-in ‣ Build System — YUI Builder, YUI Compressor ‣ Runtime Configuration ‣ YUI({ /* config */ }).use();
  23. 23. Functional UI Components
  24. 24. Functional UI Components ‣ UI as a collection of functional parts
  25. 25. Functional UI Components ‣ UI as a collection of functional parts ‣ Encapsulation
  26. 26. Functional UI Components ‣ UI as a collection of functional parts ‣ Encapsulation ‣ Think Widgets
  27. 27. Functional UI Components ‣ UI as a collection of functional parts ‣ Encapsulation ‣ Think Widgets ‣ Use YUI 3ʼs Component Infrastructure
  28. 28. Functional UI Components ‣ UI as a collection of functional parts ‣ Encapsulation ‣ Think Widgets ‣ Use YUI 3ʼs Component Infrastructure
  29. 29. Functional UI Components ‣ UI as a collection of functional parts ‣ Encapsulation ‣ Think Widgets ‣ Use YUI 3ʼs Component Infrastructure
  30. 30. A Top-Level UI Component
  31. 31. A Top-Level UI Component ‣ Top of the component hierarchy
  32. 32. A Top-Level UI Component ‣ Top of the component hierarchy ‣ Manages functional components
  33. 33. A Top-Level UI Component ‣ Top of the component hierarchy ‣ Manages functional components ‣ Y.Base ‣ Managed Attributes ‣ Event Target
  34. 34. Messy Glue Code to Tidy Wiring
  35. 35. Messy Glue Code to Tidy Wiring
  36. 36. Messy Glue Code to Tidy Wiring
  37. 37. Advantages of Top-Level Component
  38. 38. Advantages of Top-Level Component ‣ Event wiring
  39. 39. Advantages of Top-Level Component ‣ Event wiring ‣ Document-ability
  40. 40. Advantages of Top-Level Component ‣ Event wiring ‣ Document-ability ‣ Standardized code structure
  41. 41. Advantages of Top-Level Component ‣ Event wiring ‣ Document-ability ‣ Standardized code structure ‣ Centralized control
  42. 42. Advantages of Top-Level Component ‣ Event wiring ‣ Document-ability ‣ Standardized code structure ‣ Centralized control ‣ Reduces the Functional Componentʼs dependencies
  43. 43. Components as Custom Modules
  44. 44. Components as Custom Modules ‣ Framework will manage dependencies
  45. 45. Components as Custom Modules ‣ Framework will manage dependencies ‣ Dynamically loaded via YUI Loader
  46. 46. Components as Custom Modules ‣ Framework will manage dependencies ‣ Dynamically loaded via YUI Loader ‣ Build using the YUI Builder
  47. 47. YUI 3 Module “Categories” General Specific
  48. 48. YUI 3 Module “Categories” General Specific YUI 3 Framework
  49. 49. YUI 3 Module “Categories” General Specific YUI 3 Add-on Framework Modules
  50. 50. YUI 3 Module “Categories” General Specific YUI 3 Add-on App Framework Modules Components
  51. 51. YUI 3 Module “Categories” General Specific YUI 3 Add-on App Page Framework Modules Components Components
  52. 52. YUI 3 Module “Categories” General Specific YUI 3 Add-on App Page Framework } Modules Components Custom Modules Components
  53. 53. Logismo
  54. 54. Logismo
  55. 55. Logismo Demo
  56. 56. Logismo’s Components
  57. 57. ControlPanel View Log Logismo’s Components
  58. 58. Logismo’s YUI 3 Modules General Specific YUI 3 Add-on App Page Framework } Modules Components Custom Modules Components
  59. 59. Logismo’s YUI 3 Modules General Specific YUI 3 Add-on App Page Framework } Modules Components Custom Modules Components
  60. 60. Logismo’s YUI 3 Modules base widget stylesheet io-base json-parse cookie datatype-date General Specific YUI 3 Add-on App Page Framework } Modules Components Custom Modules Components
  61. 61. Logismo’s YUI 3 Modules base markout widget form stylesheet io-poller io-base json-parse cookie datatype-date General Specific YUI 3 Add-on App Page Framework } Modules Components Custom Modules Components
  62. 62. Logismo’s YUI 3 Modules base markout logevent widget form stylesheet io-poller io-base json-parse cookie datatype-date General Specific YUI 3 Add-on App Page Framework } Modules Components Custom Modules Components
  63. 63. Logismo’s YUI 3 Modules base markout logevent widget form log stylesheet io-poller io-base json-parse cookie datatype-date General Specific YUI 3 Add-on App Page Framework } Modules Components Custom Modules Components
  64. 64. Logismo’s YUI 3 Modules base markout logevent widget form log stylesheet io-poller view io-base json-parse cookie datatype-date General Specific YUI 3 Add-on App Page Framework } Modules Components Custom Modules Components
  65. 65. Logismo’s YUI 3 Modules base markout logevent widget form log stylesheet io-poller view io-base controlpanel json-parse cookie datatype-date General Specific YUI 3 Add-on App Page Framework } Modules Components Custom Modules Components
  66. 66. Logismo’s YUI 3 Modules base markout logevent widget form log stylesheet io-poller view io-base controlpanel json-parse logismo cookie datatype-date General Specific YUI 3 Add-on App Page Framework } Modules Components Custom Modules Components
  67. 67. Logismo’s Top-Level Component Event Wiring var er = this._eventsResource, cp = this._controlPanel, l = this._log; er.after('pollingChange', Y.bind(this._afterPollingChange, this)); cp.on('lockScrollRequest', Y.bind(this.lockScroll, this)); cp.on('unlockScrollRequest', Y.bind(this.unlockScroll, this)); cp.on('pauseRequest', Y.bind(er.stop, er)); cp.on('resumeRequest', Y.bind(er.start, er)); cp.on('flushRequest', Y.bind(l.flush, l)); cp.after('viewsUpdate', Y.bind(this._afterViewsUpdate, this)); cp.after('activeViewChange', Y.bind(this._afterActiveViewChange, this)); l.on('renderedEvents', Y.bind(this.scrollIntoView, this));
  68. 68. Logismo’s Dynamic YUI() Instance YUI({ /* config */ }).use('logismo', function(Y){ new Y.Logismo.Window({ eventsResourcePath : 'events/' }); });
  69. 69. From IDE to Browser
  70. 70. Automatic Building
  71. 71. Automatic Building ‣ Sync UI building with project
  72. 72. Automatic Building ‣ Sync UI building with project ‣ Fast turn-around ‣ Just refresh page in Browser
  73. 73. Automatic Building ‣ Sync UI building with project ‣ Fast turn-around ‣ Just refresh page in Browser ‣ Helps non-UI developers
  74. 74. Automatic Building in Eclipse
  75. 75. Automatic Building in Eclipse ‣ Eclipse: An open, extensible development platform (i.e. an IDE)
  76. 76. Automatic Building in Eclipse ‣ Eclipse: An open, extensible development platform (i.e. an IDE) ‣ External Tools Builders
  77. 77. Automatic Building in Eclipse ‣ Eclipse: An open, extensible development platform (i.e. an IDE) ‣ External Tools Builders ‣ Integrated Ant Builder — YUI Builder defines Ant tasks
  78. 78. Automatic Building in Eclipse ‣ Eclipse: An open, extensible development platform (i.e. an IDE) ‣ External Tools Builders ‣ Integrated Ant Builder — YUI Builder defines Ant tasks ‣ Build triggers
  79. 79. Automatic Building in Eclipse ‣ Eclipse: An open, extensible development platform (i.e. an IDE) ‣ External Tools Builders ‣ Integrated Ant Builder — YUI Builder defines Ant tasks ‣ Build triggers ‣ Cmd + S = JSLint, Compress, & Deploy
  80. 80. Custom Modules — Deployment Ready
  81. 81. Custom Modules — Deployment Ready ‣ Derivatives created
  82. 82. Custom Modules — Deployment Ready ‣ Derivatives created ‣ Debug: has Y.log calls
  83. 83. Custom Modules — Deployment Ready ‣ Derivatives created ‣ Debug: has Y.log calls ‣ Min: compressed via YUI Compressor, served in production
  84. 84. Custom Modules — Deployment Ready ‣ Derivatives created ‣ Debug: has Y.log calls ‣ Min: compressed via YUI Compressor, served in production ‣ Ability to debug code, or check performance (page-load times)
  85. 85. Generating YUI 3 Configuration
  86. 86. Generating YUI 3 Configuration ‣ YUI 3 configuration can be done on the server
  87. 87. Generating YUI 3 Configuration ‣ YUI 3 configuration can be done on the server ‣ Combine:
  88. 88. Generating YUI 3 Configuration ‣ YUI 3 configuration can be done on the server ‣ Combine: ‣ Where YUI is Hosted
  89. 89. Generating YUI 3 Configuration ‣ YUI 3 configuration can be done on the server ‣ Combine: ‣ Where YUI is Hosted ‣ Custom Module Metadata
  90. 90. Generating YUI 3 Configuration ‣ YUI 3 configuration can be done on the server ‣ Combine: ‣ Where YUI is Hosted ‣ Custom Module Metadata ‣ Other YUI Instance config
  91. 91. Generating YUI 3 Configuration ‣ YUI 3 configuration can be done on the server ‣ Combine: ‣ Where YUI is Hosted ‣ Custom Module Metadata ‣ Other YUI Instance config ‣ Write as JavaScript Object literal
  92. 92. Generating YUI3 Configuration Cont.
  93. 93. Generating YUI3 Configuration Cont. YUI3Config
  94. 94. Generating YUI3 Configuration Cont. YUI3Host (Yahoo CDN) YUI3Config
  95. 95. Generating YUI3 Configuration Cont. YUI3Module (CM1) YUI3Host (Yahoo CDN) YUI3Module (CM2) YUI3Module (CM3) YUI3Config
  96. 96. Generating YUI3 Configuration Cont. YUI3Module (CM1) YUI3Host (Yahoo CDN) YUI3Module (CM2) YUI3Module (CM3) YUI3Config
  97. 97. Generating YUI3 Configuration Cont. YUI3Module (CM1) YUI3Host (Yahoo CDN) YUI3Module (CM2) YUI3Module (CM3) YUI3Config YUI( ).use()
  98. 98. Logismo in Debug-mode
  99. 99. YUI 3 w/ Auto Build & Gen. Config
  100. 100. YUI 3 w/ Auto Build & Gen. Config ‣ Depends on specifics
  101. 101. YUI 3 w/ Auto Build & Gen. Config ‣ Depends on specifics ‣ YUI 3 fits with larger dev & deploy process
  102. 102. YUI 3 w/ Auto Build & Gen. Config ‣ Depends on specifics ‣ YUI 3 fits with larger dev & deploy process ‣ Faster development
  103. 103. YUI 3 w/ Auto Build & Gen. Config ‣ Depends on specifics ‣ YUI 3 fits with larger dev & deploy process ‣ Faster development ‣ Simplified deployment
  104. 104. YUI 3 w/ Auto Build & Gen. Config ‣ Depends on specifics ‣ YUI 3 fits with larger dev & deploy process ‣ Faster development ‣ Simplified deployment ‣ YUI 3 + Streamlined Dev & Deploy = :-)
  105. 105. Thanks! Any Questions? ‣ Eric Ferraiuolo ‣ http://twitter.com/ericf ‣ http://925html.com ‣ http://ericf.name

×