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.

1. Web App Development with YUI 3
Eric Ferraiuolo
Oddnut Software

2. Overview

3. Overview
1. Development and Deployment Goals

4. Overview
1. Development and Deployment Goals
2. YUI 3 as the UI Framework

5. Overview
1. Development and Deployment Goals
2. YUI 3 as the UI Framework
3. Logismo — Log Viewer App

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. Development and Deployment Goals

8. Web App UIs — High Level

9. Web App UIs — High Level
Organize

10. Web App UIs — High Level
Organize Link

11. Web App UIs — High Level
Organize Link Construct

12. Goals for UI Dev and Deploy

13. Goals for UI Dev and Deploy
1. Component framework

14. Goals for UI Dev and Deploy
1. Component framework
2. Managed dependencies

15. Goals for UI Dev and Deploy
1. Component framework
2. Managed dependencies
3. Build components automatically

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. YUI 3 as the UI Framework

18. YUI 3 — Real World Project Ready

19. YUI 3 — Real World Project Ready
‣ Component Infrastructure
‣ Y.Attribute, Y.Base, Y.Plugin, Y.Widget

20. YUI 3 — Real World Project Ready
‣ Component Infrastructure
‣ Y.Attribute, Y.Base, Y.Plugin, Y.Widget
‣ Module System baked-in

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. 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. Functional UI Components

24. Functional UI Components
‣ UI as a collection of functional parts

25. Functional UI Components
‣ UI as a collection of functional parts
‣ Encapsulation

26. Functional UI Components
‣ UI as a collection of functional parts
‣ Encapsulation
‣ Think Widgets

27. Functional UI Components
‣ UI as a collection of functional parts
‣ Encapsulation
‣ Think Widgets
‣ Use YUI 3ʼs Component Infrastructure

28. Functional UI Components
‣ UI as a collection of functional parts
‣ Encapsulation
‣ Think Widgets
‣ Use YUI 3ʼs Component Infrastructure

29. Functional UI Components
‣ UI as a collection of functional parts
‣ Encapsulation
‣ Think Widgets
‣ Use YUI 3ʼs Component Infrastructure

30. A Top-Level UI Component

31. A Top-Level UI Component
‣ Top of the component hierarchy

32. A Top-Level UI Component
‣ Top of the component hierarchy
‣ Manages functional components

33. A Top-Level UI Component
‣ Top of the component hierarchy
‣ Manages functional components
‣ Y.Base
‣ Managed Attributes
‣ Event Target

34. Messy Glue Code to Tidy Wiring

35. Messy Glue Code to Tidy Wiring

36. Messy Glue Code to Tidy Wiring

37. Advantages of Top-Level Component

38. Advantages of Top-Level Component
‣ Event wiring

39. Advantages of Top-Level Component
‣ Event wiring
‣ Document-ability

40. Advantages of Top-Level Component
‣ Event wiring
‣ Document-ability
‣ Standardized code structure

41. Advantages of Top-Level Component
‣ Event wiring
‣ Document-ability
‣ Standardized code structure
‣ Centralized control

42. Advantages of Top-Level Component
‣ Event wiring
‣ Document-ability
‣ Standardized code structure
‣ Centralized control
‣ Reduces the Functional Componentʼs
dependencies

43. Components as Custom Modules

44. Components as Custom Modules
‣ Framework will manage dependencies

45. Components as Custom Modules
‣ Framework will manage dependencies
‣ Dynamically loaded via YUI Loader

46. Components as Custom Modules
‣ Framework will manage dependencies
‣ Dynamically loaded via YUI Loader
‣ Build using the YUI Builder

47. YUI 3 Module “Categories”
General Specific

48. YUI 3 Module “Categories”
General Specific
YUI 3
Framework

49. YUI 3 Module “Categories”
General Specific
YUI 3 Add-on
Framework Modules

50. YUI 3 Module “Categories”
General Specific
YUI 3 Add-on App
Framework Modules Components

51. YUI 3 Module “Categories”
General Specific
YUI 3 Add-on App Page
Framework Modules Components Components

52. YUI 3 Module “Categories”
General Specific
YUI 3 Add-on App Page
Framework
}
Modules Components
Custom Modules
Components

53. Logismo

54. Logismo

55. Logismo Demo

56. Logismo’s Components

57. ControlPanel
View
Log
Logismo’s Components

58. Logismo’s YUI 3 Modules
General Specific
YUI 3 Add-on App Page
Framework
}
Modules Components
Custom Modules
Components

59. Logismo’s YUI 3 Modules
General Specific
YUI 3 Add-on App Page
Framework
}
Modules Components
Custom Modules
Components

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. 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. 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. 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. 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. 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. 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. 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. Logismo’s Dynamic YUI() Instance
YUI({
/* config */
}).use('logismo', function(Y){
new Y.Logismo.Window({
eventsResourcePath : 'events/'
});
});

69. From IDE to Browser

70. Automatic Building

71. Automatic Building
‣ Sync UI building with project

72. Automatic Building
‣ Sync UI building with project
‣ Fast turn-around
‣ Just refresh page in Browser

73. Automatic Building
‣ Sync UI building with project
‣ Fast turn-around
‣ Just refresh page in Browser
‣ Helps non-UI developers

74. Automatic Building in Eclipse

75. Automatic Building in Eclipse
‣ Eclipse: An open, extensible development
platform (i.e. an IDE)

76. Automatic Building in Eclipse
‣ Eclipse: An open, extensible development
platform (i.e. an IDE)
‣ External Tools Builders

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. 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. 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. Custom Modules — Deployment Ready

81. Custom Modules — Deployment Ready
‣ Derivatives created

82. Custom Modules — Deployment Ready
‣ Derivatives created
‣ Debug: has Y.log calls

83. Custom Modules — Deployment Ready
‣ Derivatives created
‣ Debug: has Y.log calls
‣ Min: compressed via YUI Compressor, served
in production

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. Generating YUI 3 Configuration

86. Generating YUI 3 Configuration
‣ YUI 3 configuration can be done on the server

87. Generating YUI 3 Configuration
‣ YUI 3 configuration can be done on the server
‣ Combine:

88. Generating YUI 3 Configuration
‣ YUI 3 configuration can be done on the server
‣ Combine:
‣ Where YUI is Hosted

89. Generating YUI 3 Configuration
‣ YUI 3 configuration can be done on the server
‣ Combine:
‣ Where YUI is Hosted
‣ Custom Module Metadata

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. 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. Generating YUI3 Configuration Cont.

93. Generating YUI3 Configuration Cont.
YUI3Config

94. Generating YUI3 Configuration Cont.
YUI3Host (Yahoo CDN)
YUI3Config

95. Generating YUI3 Configuration Cont.
YUI3Module (CM1)
YUI3Host (Yahoo CDN) YUI3Module (CM2)
YUI3Module (CM3)
YUI3Config

96. Generating YUI3 Configuration Cont.
YUI3Module (CM1)
YUI3Host (Yahoo CDN) YUI3Module (CM2)
YUI3Module (CM3)
YUI3Config

97. Generating YUI3 Configuration Cont.
YUI3Module (CM1)
YUI3Host (Yahoo CDN) YUI3Module (CM2)
YUI3Module (CM3)
YUI3Config
YUI( ).use()

98. Logismo in Debug-mode

99. YUI 3 w/ Auto Build & Gen. Config

100. YUI 3 w/ Auto Build & Gen. Config
‣ Depends on specifics

101. YUI 3 w/ Auto Build & Gen. Config
‣ Depends on specifics
‣ YUI 3 fits with larger dev & deploy process

102. YUI 3 w/ Auto Build & Gen. Config
‣ Depends on specifics
‣ YUI 3 fits with larger dev & deploy process
‣ Faster development

103. YUI 3 w/ Auto Build & Gen. Config
‣ Depends on specifics
‣ YUI 3 fits with larger dev & deploy process
‣ Faster development
‣ Simplified deployment

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. Thanks! Any Questions?
‣ Eric Ferraiuolo
‣ http://twitter.com/ericf
‣ http://925html.com
‣ http://ericf.name