SlideShare a Scribd company logo
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 Browser
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 manual assembly required — Auto deploy
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 System baked-in
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
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();
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 Component Infrastructure
Functional UI Components
‣   UI as a collection of functional parts
‣   Encapsulation
‣   Think Widgets
‣   Use YUI 3ʼs Component Infrastructure
Functional UI Components
‣   UI as a collection of functional parts
‣   Encapsulation
‣   Think Widgets
‣   Use YUI 3ʼs Component Infrastructure
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 Attributes
     ‣   Event Target
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 control
Advantages of Top-Level Component
‣   Event wiring
‣   Document-ability
‣   Standardized code structure
‣   Centralized control
‣   Reduces the Functional Componentʼs
    dependencies
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 the YUI Builder
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   Modules   Components
YUI 3 Module “Categories”


General                                   Specific

     YUI 3    Add-on       App         Page
  Framework   Modules   Components   Components
YUI 3 Module “Categories”


General                                       Specific

     YUI 3    Add-on        App            Page
  Framework


                }
              Modules    Components



                        Custom Modules
                                         Components
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            Page
  Framework
                }
              Modules    Components



                        Custom Modules
                                         Components
Logismo’s YUI 3 Modules




General                                       Specific

     YUI 3    Add-on        App            Page
  Framework
                }
              Modules    Components



                        Custom Modules
                                         Components
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
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
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
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
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
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
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
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));
Logismo’s Dynamic YUI() Instance

YUI({

 /* config */

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

 new Y.Logismo.Window({
   eventsResourcePath : 'events/'
 });

});
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 non-UI developers
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 Tools Builders
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
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
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
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 Compressor, served
      in production
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)
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
     ‣ Custom   Module Metadata
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
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
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)               YUI3Module (CM2)

                                   YUI3Module (CM3)



                       YUI3Config
Generating YUI3 Configuration Cont.

                                   YUI3Module (CM1)

YUI3Host (Yahoo CDN)               YUI3Module (CM2)

                                   YUI3Module (CM3)



                       YUI3Config
Generating YUI3 Configuration Cont.

                                         YUI3Module (CM1)

YUI3Host (Yahoo CDN)                     YUI3Module (CM2)

                                         YUI3Module (CM3)



                         YUI3Config




                       YUI(    ).use()
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 development
YUI 3 w/ Auto Build & Gen. Config
‣   Depends on specifics
‣   YUI 3 fits with larger dev & deploy process
‣   Faster development
‣   Simplified deployment
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 = :-)
Thanks! Any Questions?
‣   Eric Ferraiuolo
     ‣   http://twitter.com/ericf
     ‣   http://925html.com
     ‣   http://ericf.name

More Related Content

Similar to Web App Development With YUI 3

7 Extensions to Install Before You Die - Sydney Joomla Day 2012
7 Extensions to Install Before You Die - Sydney Joomla Day 20127 Extensions to Install Before You Die - Sydney Joomla Day 2012
7 Extensions to Install Before You Die - Sydney Joomla Day 2012
daniib
 
Query-Driven Incremental Synchronization of View Models
Query-Driven Incremental Synchronization of View ModelsQuery-Driven Incremental Synchronization of View Models
Query-Driven Incremental Synchronization of View Models
Daniel Varro
 
Adding custom ui controls to your application (1)
Adding custom ui controls to your application (1)Adding custom ui controls to your application (1)
Adding custom ui controls to your application (1)Oro Inc.
 
Make JSF more type-safe with CDI and MyFaces CODI
Make JSF more type-safe with CDI and MyFaces CODIMake JSF more type-safe with CDI and MyFaces CODI
Make JSF more type-safe with CDI and MyFaces CODI
os890
 
From YUI3 to K2
From YUI3 to K2From YUI3 to K2
From YUI3 to K2
kaven yan
 
p2, modular provisioning for OSGi
p2, modular provisioning for OSGip2, modular provisioning for OSGi
p2, modular provisioning for OSGi
Pascal Rapicault
 
Yii framework
Yii frameworkYii framework
Yii framework
Mohammed Saqib
 
Architecture and Analytical Study of Magento
Architecture and Analytical Study of MagentoArchitecture and Analytical Study of Magento
Architecture and Analytical Study of Magento
IRJET Journal
 
Mageguru - magento custom module development
Mageguru -  magento custom module development Mageguru -  magento custom module development
Mageguru - magento custom module development
Mage Guru
 
Getting modular with OSGI
Getting modular with OSGIGetting modular with OSGI
Getting modular with OSGI
Andrii Krokhmalnyi
 
Common Security Services. Consolidation patterns for legacy components - Stef...
Common Security Services. Consolidation patterns for legacy components - Stef...Common Security Services. Consolidation patterns for legacy components - Stef...
Common Security Services. Consolidation patterns for legacy components - Stef...
mfrancis
 
Introducing Uml And Development Process
Introducing Uml And Development ProcessIntroducing Uml And Development Process
Introducing Uml And Development Process
Terry Cho
 
Rapid web application development using django - Part (1)
Rapid web application development using django - Part (1)Rapid web application development using django - Part (1)
Rapid web application development using django - Part (1)
Nishant Soni
 
How to build a custom stack with WSO2 carbon
How to build a custom stack with WSO2 carbon How to build a custom stack with WSO2 carbon
How to build a custom stack with WSO2 carbon WSO2
 
How to build a custom stack with wso2 carbon
How to build a custom stack with wso2 carbonHow to build a custom stack with wso2 carbon
How to build a custom stack with wso2 carbonShameera Rathnayaka
 
Simple stock market analysis
Simple stock market analysisSimple stock market analysis
Simple stock market analysis
lynneblue
 

Similar to Web App Development With YUI 3 (20)

7 Extensions to Install Before You Die - Sydney Joomla Day 2012
7 Extensions to Install Before You Die - Sydney Joomla Day 20127 Extensions to Install Before You Die - Sydney Joomla Day 2012
7 Extensions to Install Before You Die - Sydney Joomla Day 2012
 
Query-Driven Incremental Synchronization of View Models
Query-Driven Incremental Synchronization of View ModelsQuery-Driven Incremental Synchronization of View Models
Query-Driven Incremental Synchronization of View Models
 
Adding custom ui controls to your application (1)
Adding custom ui controls to your application (1)Adding custom ui controls to your application (1)
Adding custom ui controls to your application (1)
 
Make JSF more type-safe with CDI and MyFaces CODI
Make JSF more type-safe with CDI and MyFaces CODIMake JSF more type-safe with CDI and MyFaces CODI
Make JSF more type-safe with CDI and MyFaces CODI
 
From YUI3 to K2
From YUI3 to K2From YUI3 to K2
From YUI3 to K2
 
p2, modular provisioning for OSGi
p2, modular provisioning for OSGip2, modular provisioning for OSGi
p2, modular provisioning for OSGi
 
Yii framework
Yii frameworkYii framework
Yii framework
 
Architecture and Analytical Study of Magento
Architecture and Analytical Study of MagentoArchitecture and Analytical Study of Magento
Architecture and Analytical Study of Magento
 
Mageguru - magento custom module development
Mageguru -  magento custom module development Mageguru -  magento custom module development
Mageguru - magento custom module development
 
Getting modular with OSGI
Getting modular with OSGIGetting modular with OSGI
Getting modular with OSGI
 
Fwdtechseminars
FwdtechseminarsFwdtechseminars
Fwdtechseminars
 
Diagram
DiagramDiagram
Diagram
 
Common Security Services. Consolidation patterns for legacy components - Stef...
Common Security Services. Consolidation patterns for legacy components - Stef...Common Security Services. Consolidation patterns for legacy components - Stef...
Common Security Services. Consolidation patterns for legacy components - Stef...
 
Introducing Uml And Development Process
Introducing Uml And Development ProcessIntroducing Uml And Development Process
Introducing Uml And Development Process
 
Rapid web application development using django - Part (1)
Rapid web application development using django - Part (1)Rapid web application development using django - Part (1)
Rapid web application development using django - Part (1)
 
How to build a custom stack with WSO2 carbon
How to build a custom stack with WSO2 carbon How to build a custom stack with WSO2 carbon
How to build a custom stack with WSO2 carbon
 
How to build a custom stack with wso2 carbon
How to build a custom stack with wso2 carbonHow to build a custom stack with wso2 carbon
How to build a custom stack with wso2 carbon
 
Simple stock market analysis
Simple stock market analysisSimple stock market analysis
Simple stock market analysis
 
Struts
StrutsStruts
Struts
 
Uml2
Uml2Uml2
Uml2
 

Recently uploaded

Essentials of Automations: The Art of Triggers and Actions in FME
Essentials of Automations: The Art of Triggers and Actions in FMEEssentials of Automations: The Art of Triggers and Actions in FME
Essentials of Automations: The Art of Triggers and Actions in FME
Safe Software
 
Epistemic Interaction - tuning interfaces to provide information for AI support
Epistemic Interaction - tuning interfaces to provide information for AI supportEpistemic Interaction - tuning interfaces to provide information for AI support
Epistemic Interaction - tuning interfaces to provide information for AI support
Alan Dix
 
Encryption in Microsoft 365 - ExpertsLive Netherlands 2024
Encryption in Microsoft 365 - ExpertsLive Netherlands 2024Encryption in Microsoft 365 - ExpertsLive Netherlands 2024
Encryption in Microsoft 365 - ExpertsLive Netherlands 2024
Albert Hoitingh
 
GraphRAG is All You need? LLM & Knowledge Graph
GraphRAG is All You need? LLM & Knowledge GraphGraphRAG is All You need? LLM & Knowledge Graph
GraphRAG is All You need? LLM & Knowledge Graph
Guy Korland
 
DevOps and Testing slides at DASA Connect
DevOps and Testing slides at DASA ConnectDevOps and Testing slides at DASA Connect
DevOps and Testing slides at DASA Connect
Kari Kakkonen
 
Monitoring Java Application Security with JDK Tools and JFR Events
Monitoring Java Application Security with JDK Tools and JFR EventsMonitoring Java Application Security with JDK Tools and JFR Events
Monitoring Java Application Security with JDK Tools and JFR Events
Ana-Maria Mihalceanu
 
Secstrike : Reverse Engineering & Pwnable tools for CTF.pptx
Secstrike : Reverse Engineering & Pwnable tools for CTF.pptxSecstrike : Reverse Engineering & Pwnable tools for CTF.pptx
Secstrike : Reverse Engineering & Pwnable tools for CTF.pptx
nkrafacyberclub
 
FIDO Alliance Osaka Seminar: Passkeys at Amazon.pdf
FIDO Alliance Osaka Seminar: Passkeys at Amazon.pdfFIDO Alliance Osaka Seminar: Passkeys at Amazon.pdf
FIDO Alliance Osaka Seminar: Passkeys at Amazon.pdf
FIDO Alliance
 
FIDO Alliance Osaka Seminar: Overview.pdf
FIDO Alliance Osaka Seminar: Overview.pdfFIDO Alliance Osaka Seminar: Overview.pdf
FIDO Alliance Osaka Seminar: Overview.pdf
FIDO Alliance
 
Free Complete Python - A step towards Data Science
Free Complete Python - A step towards Data ScienceFree Complete Python - A step towards Data Science
Free Complete Python - A step towards Data Science
RinaMondal9
 
Pushing the limits of ePRTC: 100ns holdover for 100 days
Pushing the limits of ePRTC: 100ns holdover for 100 daysPushing the limits of ePRTC: 100ns holdover for 100 days
Pushing the limits of ePRTC: 100ns holdover for 100 days
Adtran
 
Communications Mining Series - Zero to Hero - Session 1
Communications Mining Series - Zero to Hero - Session 1Communications Mining Series - Zero to Hero - Session 1
Communications Mining Series - Zero to Hero - Session 1
DianaGray10
 
Introduction to CHERI technology - Cybersecurity
Introduction to CHERI technology - CybersecurityIntroduction to CHERI technology - Cybersecurity
Introduction to CHERI technology - Cybersecurity
mikeeftimakis1
 
Why You Should Replace Windows 11 with Nitrux Linux 3.5.0 for enhanced perfor...
Why You Should Replace Windows 11 with Nitrux Linux 3.5.0 for enhanced perfor...Why You Should Replace Windows 11 with Nitrux Linux 3.5.0 for enhanced perfor...
Why You Should Replace Windows 11 with Nitrux Linux 3.5.0 for enhanced perfor...
SOFTTECHHUB
 
Uni Systems Copilot event_05062024_C.Vlachos.pdf
Uni Systems Copilot event_05062024_C.Vlachos.pdfUni Systems Copilot event_05062024_C.Vlachos.pdf
Uni Systems Copilot event_05062024_C.Vlachos.pdf
Uni Systems S.M.S.A.
 
FIDO Alliance Osaka Seminar: Passkeys and the Road Ahead.pdf
FIDO Alliance Osaka Seminar: Passkeys and the Road Ahead.pdfFIDO Alliance Osaka Seminar: Passkeys and the Road Ahead.pdf
FIDO Alliance Osaka Seminar: Passkeys and the Road Ahead.pdf
FIDO Alliance
 
GraphSummit Singapore | The Art of the Possible with Graph - Q2 2024
GraphSummit Singapore | The Art of the  Possible with Graph - Q2 2024GraphSummit Singapore | The Art of the  Possible with Graph - Q2 2024
GraphSummit Singapore | The Art of the Possible with Graph - Q2 2024
Neo4j
 
Alt. GDG Cloud Southlake #33: Boule & Rebala: Effective AppSec in SDLC using ...
Alt. GDG Cloud Southlake #33: Boule & Rebala: Effective AppSec in SDLC using ...Alt. GDG Cloud Southlake #33: Boule & Rebala: Effective AppSec in SDLC using ...
Alt. GDG Cloud Southlake #33: Boule & Rebala: Effective AppSec in SDLC using ...
James Anderson
 
GridMate - End to end testing is a critical piece to ensure quality and avoid...
GridMate - End to end testing is a critical piece to ensure quality and avoid...GridMate - End to end testing is a critical piece to ensure quality and avoid...
GridMate - End to end testing is a critical piece to ensure quality and avoid...
ThomasParaiso2
 
UiPath Test Automation using UiPath Test Suite series, part 5
UiPath Test Automation using UiPath Test Suite series, part 5UiPath Test Automation using UiPath Test Suite series, part 5
UiPath Test Automation using UiPath Test Suite series, part 5
DianaGray10
 

Recently uploaded (20)

Essentials of Automations: The Art of Triggers and Actions in FME
Essentials of Automations: The Art of Triggers and Actions in FMEEssentials of Automations: The Art of Triggers and Actions in FME
Essentials of Automations: The Art of Triggers and Actions in FME
 
Epistemic Interaction - tuning interfaces to provide information for AI support
Epistemic Interaction - tuning interfaces to provide information for AI supportEpistemic Interaction - tuning interfaces to provide information for AI support
Epistemic Interaction - tuning interfaces to provide information for AI support
 
Encryption in Microsoft 365 - ExpertsLive Netherlands 2024
Encryption in Microsoft 365 - ExpertsLive Netherlands 2024Encryption in Microsoft 365 - ExpertsLive Netherlands 2024
Encryption in Microsoft 365 - ExpertsLive Netherlands 2024
 
GraphRAG is All You need? LLM & Knowledge Graph
GraphRAG is All You need? LLM & Knowledge GraphGraphRAG is All You need? LLM & Knowledge Graph
GraphRAG is All You need? LLM & Knowledge Graph
 
DevOps and Testing slides at DASA Connect
DevOps and Testing slides at DASA ConnectDevOps and Testing slides at DASA Connect
DevOps and Testing slides at DASA Connect
 
Monitoring Java Application Security with JDK Tools and JFR Events
Monitoring Java Application Security with JDK Tools and JFR EventsMonitoring Java Application Security with JDK Tools and JFR Events
Monitoring Java Application Security with JDK Tools and JFR Events
 
Secstrike : Reverse Engineering & Pwnable tools for CTF.pptx
Secstrike : Reverse Engineering & Pwnable tools for CTF.pptxSecstrike : Reverse Engineering & Pwnable tools for CTF.pptx
Secstrike : Reverse Engineering & Pwnable tools for CTF.pptx
 
FIDO Alliance Osaka Seminar: Passkeys at Amazon.pdf
FIDO Alliance Osaka Seminar: Passkeys at Amazon.pdfFIDO Alliance Osaka Seminar: Passkeys at Amazon.pdf
FIDO Alliance Osaka Seminar: Passkeys at Amazon.pdf
 
FIDO Alliance Osaka Seminar: Overview.pdf
FIDO Alliance Osaka Seminar: Overview.pdfFIDO Alliance Osaka Seminar: Overview.pdf
FIDO Alliance Osaka Seminar: Overview.pdf
 
Free Complete Python - A step towards Data Science
Free Complete Python - A step towards Data ScienceFree Complete Python - A step towards Data Science
Free Complete Python - A step towards Data Science
 
Pushing the limits of ePRTC: 100ns holdover for 100 days
Pushing the limits of ePRTC: 100ns holdover for 100 daysPushing the limits of ePRTC: 100ns holdover for 100 days
Pushing the limits of ePRTC: 100ns holdover for 100 days
 
Communications Mining Series - Zero to Hero - Session 1
Communications Mining Series - Zero to Hero - Session 1Communications Mining Series - Zero to Hero - Session 1
Communications Mining Series - Zero to Hero - Session 1
 
Introduction to CHERI technology - Cybersecurity
Introduction to CHERI technology - CybersecurityIntroduction to CHERI technology - Cybersecurity
Introduction to CHERI technology - Cybersecurity
 
Why You Should Replace Windows 11 with Nitrux Linux 3.5.0 for enhanced perfor...
Why You Should Replace Windows 11 with Nitrux Linux 3.5.0 for enhanced perfor...Why You Should Replace Windows 11 with Nitrux Linux 3.5.0 for enhanced perfor...
Why You Should Replace Windows 11 with Nitrux Linux 3.5.0 for enhanced perfor...
 
Uni Systems Copilot event_05062024_C.Vlachos.pdf
Uni Systems Copilot event_05062024_C.Vlachos.pdfUni Systems Copilot event_05062024_C.Vlachos.pdf
Uni Systems Copilot event_05062024_C.Vlachos.pdf
 
FIDO Alliance Osaka Seminar: Passkeys and the Road Ahead.pdf
FIDO Alliance Osaka Seminar: Passkeys and the Road Ahead.pdfFIDO Alliance Osaka Seminar: Passkeys and the Road Ahead.pdf
FIDO Alliance Osaka Seminar: Passkeys and the Road Ahead.pdf
 
GraphSummit Singapore | The Art of the Possible with Graph - Q2 2024
GraphSummit Singapore | The Art of the  Possible with Graph - Q2 2024GraphSummit Singapore | The Art of the  Possible with Graph - Q2 2024
GraphSummit Singapore | The Art of the Possible with Graph - Q2 2024
 
Alt. GDG Cloud Southlake #33: Boule & Rebala: Effective AppSec in SDLC using ...
Alt. GDG Cloud Southlake #33: Boule & Rebala: Effective AppSec in SDLC using ...Alt. GDG Cloud Southlake #33: Boule & Rebala: Effective AppSec in SDLC using ...
Alt. GDG Cloud Southlake #33: Boule & Rebala: Effective AppSec in SDLC using ...
 
GridMate - End to end testing is a critical piece to ensure quality and avoid...
GridMate - End to end testing is a critical piece to ensure quality and avoid...GridMate - End to end testing is a critical piece to ensure quality and avoid...
GridMate - End to end testing is a critical piece to ensure quality and avoid...
 
UiPath Test Automation using UiPath Test Suite series, part 5
UiPath Test Automation using UiPath Test Suite series, part 5UiPath Test Automation using UiPath Test Suite series, part 5
UiPath Test Automation using UiPath Test Suite series, part 5
 

Web App Development With YUI 3

  • 1. Web App Development with YUI 3 Eric Ferraiuolo Oddnut Software
  • 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
  • 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();
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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()
  • 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

Editor's Notes

  1. Who are you? What are you talking about? You know about YUI 3?
  2. - Developing rich UIs - Leveraging YUI 3 - Logismo case-study, dissect - Integrate with your projects as a whole
  3. - Developing rich UIs - Leveraging YUI 3 - Logismo case-study, dissect - Integrate with your projects as a whole
  4. - Developing rich UIs - Leveraging YUI 3 - Logismo case-study, dissect - Integrate with your projects as a whole
  5. - Developing rich UIs - Leveraging YUI 3 - Logismo case-study, dissect - Integrate with your projects as a whole
  6. - For all types of web apps?
  7. - 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
  8. - 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
  9. - 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
  10. - 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.
  11. - 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.
  12. - 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.
  13. - 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.
  14. - How to leverage the greatness of YUI 3
  15. - 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
  16. - 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
  17. - 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
  18. - 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
  19. - 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
  20. - 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
  21. - 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
  22. - 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
  23. - 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
  24. - 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
  25. - A strategy I’ve been taking - Inter-component comm. via Top-Level Component - I use Y.Base for this component - Managed Attributes & Event Target
  26. - A strategy I’ve been taking - Inter-component comm. via Top-Level Component - I use Y.Base for this component - Managed Attributes & Event Target
  27. - A strategy I’ve been taking - Inter-component comm. via Top-Level Component - I use Y.Base for this component - Managed Attributes & Event Target
  28. - 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
  29. - 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
  30. - 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
  31. - 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
  32. - 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
  33. - Benefits of turning into custom modules? - Managed dependencies - Custom Modules, something new to YUI 3 -------- - usually 1:1 parity with components
  34. - Benefits of turning into custom modules? - Managed dependencies - Custom Modules, something new to YUI 3 -------- - usually 1:1 parity with components
  35. - Benefits of turning into custom modules? - Managed dependencies - Custom Modules, something new to YUI 3 -------- - usually 1:1 parity with components
  36. What is Logismo?
  37. What is Logismo?
  38. What is Logismo?
  39. What is Logismo?
  40. - Can see what the app is doing, high-level
  41. - 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!
  42. - 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 :-)
  43. - 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 :-)
  44. - 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 :-)
  45. - 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).
  46. - 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).
  47. - 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).
  48. - 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).
  49. - 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).
  50. - Provides debugging support during dev - Provides minified versions which will run in prod to test during dev
  51. - Provides debugging support during dev - Provides minified versions which will run in prod to test during dev
  52. - Provides debugging support during dev - Provides minified versions which will run in prod to test during dev
  53. - Provides debugging support during dev - Provides minified versions which will run in prod to test during dev
  54. - 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
  55. - 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
  56. - 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
  57. - 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
  58. - 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
  59. - 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
  60. - YUI3Config class writes the instance config as an object literal
  61. - YUI3Config class writes the instance config as an object literal
  62. - YUI3Config class writes the instance config as an object literal
  63. - YUI3Config class writes the instance config as an object literal
  64. - YUI3Config class writes the instance config as an object literal
  65. - YUI3Config class writes the instance config as an object literal
  66. - YUI3Config class writes the instance config as an object literal
  67. - YUI3Config class writes the instance config as an object literal
  68. - YUI3Config class writes the instance config as an object literal
  69. - YUI3Config class writes the instance config as an object literal
  70. - YUI3Config class writes the instance config as an object literal
  71. - 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
  72. - 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
  73. - 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
  74. - 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
  75. - 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