Your SlideShare is downloading. ×
0
Web App Development with YUI 3
           Eric Ferraiuolo
           Oddnut Software
Overview
Overview
1. Development and Deployment Goals
Overview
1. Development and Deployment Goals

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

2. YUI 3 as the UI Framework

3. Logismo — Log Viewer App
Overview
1. Development and Deployment Goals

2. YUI 3 as the UI Framework

3. Logismo — Log Viewer App

4. From IDE to Br...
Development and Deployment Goals
Web App UIs — High Level
Web App UIs — High Level




 Organize
Web App UIs — High Level




 Organize     Link
Web App UIs — High Level




 Organize     Link         Construct
Goals for UI Dev and Deploy
Goals for UI Dev and Deploy
1. Component framework
Goals for UI Dev and Deploy
1. Component framework

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

2. Managed dependencies

3. Build components automatically
Goals for UI Dev and Deploy
1. Component framework

2. Managed dependencies

3. Build components automatically

4. No manu...
YUI 3 as the UI Framework
YUI 3 — Real World Project Ready
YUI 3 — Real World Project Ready
‣   Component Infrastructure
     ‣   Y.Attribute, Y.Base, Y.Plugin, Y.Widget
YUI 3 — Real World Project Ready
‣   Component Infrastructure
     ‣   Y.Attribute, Y.Base, Y.Plugin, Y.Widget

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

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

‣   Module...
Functional UI Components
Functional UI Components
‣   UI as a collection of functional parts
Functional UI Components
‣   UI as a collection of functional parts
‣   Encapsulation
Functional UI Components
‣   UI as a collection of functional parts
‣   Encapsulation
‣   Think Widgets
Functional UI Components
‣   UI as a collection of functional parts
‣   Encapsulation
‣   Think Widgets
‣   Use YUI 3ʼs Co...
Functional UI Components
‣   UI as a collection of functional parts
‣   Encapsulation
‣   Think Widgets
‣   Use YUI 3ʼs Co...
Functional UI Components
‣   UI as a collection of functional parts
‣   Encapsulation
‣   Think Widgets
‣   Use YUI 3ʼs Co...
A Top-Level UI Component
A Top-Level UI Component
‣   Top of the component hierarchy
A Top-Level UI Component
‣   Top of the component hierarchy
‣   Manages functional components
A Top-Level UI Component
‣   Top of the component hierarchy
‣   Manages functional components
‣ Y.Base

     ‣   Managed A...
Messy Glue Code to Tidy Wiring
Messy Glue Code to Tidy Wiring
Messy Glue Code to Tidy Wiring
Advantages of Top-Level Component
Advantages of Top-Level Component
‣   Event wiring
Advantages of Top-Level Component
‣   Event wiring
‣   Document-ability
Advantages of Top-Level Component
‣   Event wiring
‣   Document-ability
‣   Standardized code structure
Advantages of Top-Level Component
‣   Event wiring
‣   Document-ability
‣   Standardized code structure
‣   Centralized co...
Advantages of Top-Level Component
‣   Event wiring
‣   Document-ability
‣   Standardized code structure
‣   Centralized co...
Components as Custom Modules
Components as Custom Modules
‣   Framework will manage dependencies
Components as Custom Modules
‣   Framework will manage dependencies
‣   Dynamically loaded via YUI Loader
Components as Custom Modules
‣   Framework will manage dependencies
‣   Dynamically loaded via YUI Loader
‣   Build using ...
YUI 3 Module “Categories”


General                      Specific
YUI 3 Module “Categories”


General                      Specific

     YUI 3
  Framework
YUI 3 Module “Categories”


General                      Specific

     YUI 3    Add-on
  Framework   Modules
YUI 3 Module “Categories”


General                              Specific

     YUI 3    Add-on       App
  Framework   Mod...
YUI 3 Module “Categories”


General                                   Specific

     YUI 3    Add-on       App         Page...
YUI 3 Module “Categories”


General                                       Specific

     YUI 3    Add-on        App        ...
Logismo
Logismo
Logismo Demo
Logismo’s Components
ControlPanel
View




        Log




Logismo’s Components
Logismo’s YUI 3 Modules




General                                       Specific

     YUI 3    Add-on        App        ...
Logismo’s YUI 3 Modules




General                                       Specific

     YUI 3    Add-on        App        ...
Logismo’s YUI 3 Modules
      base
     widget
  stylesheet
    io-base
  json-parse
     cookie
 datatype-date

General  ...
Logismo’s YUI 3 Modules
      base       markout
     widget        form
  stylesheet     io-poller
    io-base
  json-par...
Logismo’s YUI 3 Modules
      base       markout        logevent
     widget        form
  stylesheet     io-poller
    io...
Logismo’s YUI 3 Modules
      base       markout        logevent
     widget        form            log
  stylesheet     i...
Logismo’s YUI 3 Modules
      base       markout        logevent
     widget        form            log
  stylesheet     i...
Logismo’s YUI 3 Modules
      base       markout        logevent
     widget        form            log
  stylesheet     i...
Logismo’s YUI 3 Modules
      base       markout        logevent
     widget        form             log
  stylesheet     ...
Logismo’s Top-Level Component
Event Wiring
var er = this._eventsResource,
    cp = this._controlPanel,
    l = this._log;
...
Logismo’s Dynamic YUI() Instance

YUI({

 /* config */

}).use('logismo', function(Y){

 new Y.Logismo.Window({
   eventsR...
From IDE to Browser
Automatic Building
Automatic Building
‣   Sync UI building with project
Automatic Building
‣   Sync UI building with project
‣   Fast turn-around
     ‣   Just refresh page in Browser
Automatic Building
‣   Sync UI building with project
‣   Fast turn-around
     ‣   Just refresh page in Browser
‣   Helps ...
Automatic Building in Eclipse
Automatic Building in Eclipse
‣   Eclipse: An open, extensible development
    platform (i.e. an IDE)
Automatic Building in Eclipse
‣   Eclipse: An open, extensible development
    platform (i.e. an IDE)
     ‣   External To...
Automatic Building in Eclipse
‣   Eclipse: An open, extensible development
    platform (i.e. an IDE)
     ‣   External To...
Automatic Building in Eclipse
‣   Eclipse: An open, extensible development
    platform (i.e. an IDE)
     ‣   External To...
Automatic Building in Eclipse
‣   Eclipse: An open, extensible development
    platform (i.e. an IDE)
     ‣   External To...
Custom Modules — Deployment Ready
Custom Modules — Deployment Ready

‣   Derivatives created
Custom Modules — Deployment Ready

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

‣   Derivatives created
     ‣ Debug:   has Y.log calls
     ‣ Min: compressed via YUI ...
Custom Modules — Deployment Ready

‣   Derivatives created
     ‣ Debug:   has Y.log calls
     ‣ Min: compressed via YUI ...
Generating YUI 3 Configuration
Generating YUI 3 Configuration
‣   YUI 3 configuration can be done on the server
Generating YUI 3 Configuration
‣   YUI 3 configuration can be done on the server
‣ Combine:
Generating YUI 3 Configuration
‣   YUI 3 configuration can be done on the server
‣ Combine:

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

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

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

     ‣ Where   YUI is Hosted
 ...
Generating YUI3 Configuration Cont.
Generating YUI3 Configuration Cont.




              YUI3Config
Generating YUI3 Configuration Cont.


YUI3Host (Yahoo CDN)




                       YUI3Config
Generating YUI3 Configuration Cont.

                                   YUI3Module (CM1)

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

                                   YUI3Module (CM1)

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

                                         YUI3Module (CM1)

YUI3Host (Yahoo CDN)       ...
Logismo in Debug-mode
YUI 3 w/ Auto Build & Gen. Config
YUI 3 w/ Auto Build & Gen. Config
‣   Depends on specifics
YUI 3 w/ Auto Build & Gen. Config
‣   Depends on specifics
‣   YUI 3 fits with larger dev & deploy process
YUI 3 w/ Auto Build & Gen. Config
‣   Depends on specifics
‣   YUI 3 fits with larger dev & deploy process
‣   Faster devel...
YUI 3 w/ Auto Build & Gen. Config
‣   Depends on specifics
‣   YUI 3 fits with larger dev & deploy process
‣   Faster devel...
YUI 3 w/ Auto Build & Gen. Config
‣   Depends on specifics
‣   YUI 3 fits with larger dev & deploy process
‣   Faster devel...
Thanks! Any Questions?
‣   Eric Ferraiuolo
     ‣   http://twitter.com/ericf
     ‣   http://925html.com
     ‣   http://e...
Upcoming SlideShare
Loading in...5
×

Web App Development With YUI 3

7,218

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
0 Comments
22 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
7,218
On Slideshare
0
From Embeds
0
Number of Embeds
5
Actions
Shares
0
Downloads
277
Comments
0
Likes
22
Embeds 0
No embeds

No notes for slide
  • Who are you?
    What are you talking about?
    You know about YUI 3?
  • - Developing rich UIs
    - Leveraging YUI 3
    - Logismo case-study, dissect
    - Integrate with your projects as a whole
  • - Developing rich UIs
    - Leveraging YUI 3
    - Logismo case-study, dissect
    - Integrate with your projects as a whole
  • - Developing rich UIs
    - Leveraging YUI 3
    - Logismo case-study, dissect
    - Integrate with your projects as a whole
  • - Developing rich UIs
    - Leveraging YUI 3
    - Logismo case-study, dissect
    - Integrate with your projects as a whole
  • - For all types of web apps?
  • - Implementation phase - how I see UIs
    ----------------
    - Organize: Disassemble into components
    - making dev easier (focus, file management)
    - Link: connect/wire/glue components together
    - Construct: re-assemble in Browser
    - State-of-the-world
  • - Implementation phase - how I see UIs
    ----------------
    - Organize: Disassemble into components
    - making dev easier (focus, file management)
    - Link: connect/wire/glue components together
    - Construct: re-assemble in Browser
    - State-of-the-world
  • - Implementation phase - how I see UIs
    ----------------
    - Organize: Disassemble into components
    - making dev easier (focus, file management)
    - Link: connect/wire/glue components together
    - Construct: re-assemble in Browser
    - State-of-the-world
  • - Make my life easier
    - For non-trivial apps/projects
    - Code organization
    - Benefits at each stage
    ------------
    - Tools for making Widgets
    - Stop worrying about what depends on what
    - Deploy-ready on file save
    - UI is told about the env.
  • - Make my life easier
    - For non-trivial apps/projects
    - Code organization
    - Benefits at each stage
    ------------
    - Tools for making Widgets
    - Stop worrying about what depends on what
    - Deploy-ready on file save
    - UI is told about the env.
  • - Make my life easier
    - For non-trivial apps/projects
    - Code organization
    - Benefits at each stage
    ------------
    - Tools for making Widgets
    - Stop worrying about what depends on what
    - Deploy-ready on file save
    - UI is told about the env.
  • - Make my life easier
    - For non-trivial apps/projects
    - Code organization
    - Benefits at each stage
    ------------
    - Tools for making Widgets
    - Stop worrying about what depends on what
    - Deploy-ready on file save
    - UI is told about the env.
  • - How to leverage the greatness of YUI 3
  • - Component Infra: Organizing code and features
    - Module System: Manages and loads dependencies
    - Core to YUI3
    - Custom Modules
    - Build System — Still need to make building automatic
    - Runtime Config — Used to assemble “the world”
    - Tell the YUI instance what’s going on
  • - Component Infra: Organizing code and features
    - Module System: Manages and loads dependencies
    - Core to YUI3
    - Custom Modules
    - Build System — Still need to make building automatic
    - Runtime Config — Used to assemble “the world”
    - Tell the YUI instance what’s going on
  • - Component Infra: Organizing code and features
    - Module System: Manages and loads dependencies
    - Core to YUI3
    - Custom Modules
    - Build System — Still need to make building automatic
    - Runtime Config — Used to assemble “the world”
    - Tell the YUI instance what’s going on
  • - Component Infra: Organizing code and features
    - Module System: Manages and loads dependencies
    - Core to YUI3
    - Custom Modules
    - Build System — Still need to make building automatic
    - Runtime Config — Used to assemble “the world”
    - Tell the YUI instance what’s going on
  • - Organize app’s UI into functional components
    - YUI 3 comes in big here
    - Still beta but… used by Yahoo Homepage
    - Something that was missing from YUI 2
    - e.g. Yahoo Search w/ Search Assist
  • - Organize app’s UI into functional components
    - YUI 3 comes in big here
    - Still beta but… used by Yahoo Homepage
    - Something that was missing from YUI 2
    - e.g. Yahoo Search w/ Search Assist
  • - Organize app’s UI into functional components
    - YUI 3 comes in big here
    - Still beta but… used by Yahoo Homepage
    - Something that was missing from YUI 2
    - e.g. Yahoo Search w/ Search Assist
  • - Organize app’s UI into functional components
    - YUI 3 comes in big here
    - Still beta but… used by Yahoo Homepage
    - Something that was missing from YUI 2
    - e.g. Yahoo Search w/ Search Assist
  • - Organize app’s UI into functional components
    - YUI 3 comes in big here
    - Still beta but… used by Yahoo Homepage
    - Something that was missing from YUI 2
    - e.g. Yahoo Search w/ Search Assist
  • - Organize app’s UI into functional components
    - YUI 3 comes in big here
    - Still beta but… used by Yahoo Homepage
    - Something that was missing from YUI 2
    - e.g. Yahoo Search w/ Search Assist
  • - A strategy I’ve been taking
    - Inter-component comm. via Top-Level Component
    - I use Y.Base for this component
    - Managed Attributes & Event Target
  • - A strategy I’ve been taking
    - Inter-component comm. via Top-Level Component
    - I use Y.Base for this component
    - Managed Attributes & Event Target
  • - A strategy I’ve been taking
    - Inter-component comm. via Top-Level Component
    - I use Y.Base for this component
    - Managed Attributes & Event Target
  • - Y.io polling example
    -------
    - Custom Events to describe app
    - Easy to go back to at later point
    - Top-Level component get’s requests, decides what to do
    - Tells other components
  • - Y.io polling example
    -------
    - Custom Events to describe app
    - Easy to go back to at later point
    - Top-Level component get’s requests, decides what to do
    - Tells other components
  • - Y.io polling example
    -------
    - Custom Events to describe app
    - Easy to go back to at later point
    - Top-Level component get’s requests, decides what to do
    - Tells other components
  • - Y.io polling example
    -------
    - Custom Events to describe app
    - Easy to go back to at later point
    - Top-Level component get’s requests, decides what to do
    - Tells other components
  • - Y.io polling example
    -------
    - Custom Events to describe app
    - Easy to go back to at later point
    - Top-Level component get’s requests, decides what to do
    - Tells other components
  • - Benefits of turning into custom modules?
    - Managed dependencies
    - Custom Modules, something new to YUI 3
    --------
    - usually 1:1 parity with components
  • - Benefits of turning into custom modules?
    - Managed dependencies
    - Custom Modules, something new to YUI 3
    --------
    - usually 1:1 parity with components
  • - Benefits of turning into custom modules?
    - Managed dependencies
    - Custom Modules, something new to YUI 3
    --------
    - usually 1:1 parity with components
  • What is Logismo?
  • What is Logismo?
  • What is Logismo?
  • What is Logismo?
  • - Can see what the app is doing, high-level
  • - Written to HTML via server
    - YUI Instance config is dynamic, generated by server
    - Logismo, the top-level component, configured with info only the server has
    - path to the log events, could change in productions; make it variable
    - YUI().use() reduced to this!
  • - Server-side code built along with UI
    - Don’t have to switch from IDE to build
    - Other developers don’t worry about building UI
    - UI dev is too complex for backend coders anyways :-)
  • - Server-side code built along with UI
    - Don’t have to switch from IDE to build
    - Other developers don’t worry about building UI
    - UI dev is too complex for backend coders anyways :-)
  • - Server-side code built along with UI
    - Don’t have to switch from IDE to build
    - Other developers don’t worry about building UI
    - UI dev is too complex for backend coders anyways :-)
  • - Eclipse is the tool we use
    - Want to have JS be build like our Java code is built, i.e. when it changes

    - YUI Builder works with YUI 3 Custom Modules

    - Make changes, see results, both server-side (Java) code and client code (JS).
  • - Eclipse is the tool we use
    - Want to have JS be build like our Java code is built, i.e. when it changes

    - YUI Builder works with YUI 3 Custom Modules

    - Make changes, see results, both server-side (Java) code and client code (JS).
  • - Eclipse is the tool we use
    - Want to have JS be build like our Java code is built, i.e. when it changes

    - YUI Builder works with YUI 3 Custom Modules

    - Make changes, see results, both server-side (Java) code and client code (JS).
  • - Eclipse is the tool we use
    - Want to have JS be build like our Java code is built, i.e. when it changes

    - YUI Builder works with YUI 3 Custom Modules

    - Make changes, see results, both server-side (Java) code and client code (JS).
  • - Eclipse is the tool we use
    - Want to have JS be build like our Java code is built, i.e. when it changes

    - YUI Builder works with YUI 3 Custom Modules

    - Make changes, see results, both server-side (Java) code and client code (JS).
  • - Provides debugging support during dev
    - Provides minified versions which will run in prod to test during dev
  • - Provides debugging support during dev
    - Provides minified versions which will run in prod to test during dev
  • - Provides debugging support during dev
    - Provides minified versions which will run in prod to test during dev
  • - Provides debugging support during dev
    - Provides minified versions which will run in prod to test during dev
  • - Already have config for server-side software
    - config YUI along-side other project config
    - Dynamic configuration, finalized at last minute
    - Respond to changes in the software environment
  • - Already have config for server-side software
    - config YUI along-side other project config
    - Dynamic configuration, finalized at last minute
    - Respond to changes in the software environment
  • - Already have config for server-side software
    - config YUI along-side other project config
    - Dynamic configuration, finalized at last minute
    - Respond to changes in the software environment
  • - Already have config for server-side software
    - config YUI along-side other project config
    - Dynamic configuration, finalized at last minute
    - Respond to changes in the software environment
  • - Already have config for server-side software
    - config YUI along-side other project config
    - Dynamic configuration, finalized at last minute
    - Respond to changes in the software environment
  • - Already have config for server-side software
    - config YUI along-side other project config
    - Dynamic configuration, finalized at last minute
    - Respond to changes in the software environment
  • - YUI3Config class writes the instance config as an object literal
  • - YUI3Config class writes the instance config as an object literal
  • - YUI3Config class writes the instance config as an object literal
  • - YUI3Config class writes the instance config as an object literal
  • - YUI3Config class writes the instance config as an object literal
  • - YUI3Config class writes the instance config as an object literal
  • - YUI3Config class writes the instance config as an object literal
  • - YUI3Config class writes the instance config as an object literal
  • - YUI3Config class writes the instance config as an object literal
  • - YUI3Config class writes the instance config as an object literal
  • - YUI3Config class writes the instance config as an object literal
  • - You’re environment will be different
    - You can tie your UI code w/ rest of project
    - Nice to not tear everything down for small changes, like server
  • - You’re environment will be different
    - You can tie your UI code w/ rest of project
    - Nice to not tear everything down for small changes, like server
  • - You’re environment will be different
    - You can tie your UI code w/ rest of project
    - Nice to not tear everything down for small changes, like server
  • - You’re environment will be different
    - You can tie your UI code w/ rest of project
    - Nice to not tear everything down for small changes, like server
  • - You’re environment will be different
    - You can tie your UI code w/ rest of project
    - Nice to not tear everything down for small changes, like server
  • Transcript of "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
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×