Web App Development With YUI 3
by Eric Ferraiuolo
- 8,538 views
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 ...
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.
Accessibility
Categories
Upload Details
Uploaded via SlideShare as Apple Keynote
Usage Rights
© All Rights Reserved
Statistics
- Likes
- 20
- Downloads
- 265
- Comments
- 0
- Embed Views
- Views on SlideShare
- 6,173
- Total Views
- 8,538
文杰 曹
What are you talking about?
You know about YUI 3?
- Leveraging YUI 3
- Logismo case-study, dissect
- Integrate with your projects as a whole
- Leveraging YUI 3
- Logismo case-study, dissect
- Integrate with your projects as a whole
- Leveraging YUI 3
- Logismo case-study, dissect
- Integrate with your projects as a whole
- Leveraging YUI 3
- Logismo case-study, dissect
- Integrate with your projects as a whole
----------------
- 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
----------------
- 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
----------------
- 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
- 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.
- 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.
- 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.
- 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.
- 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
- 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
- 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
- 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
- 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
- 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
- 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
- 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
- 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
- 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
- Inter-component comm. via Top-Level Component
- I use Y.Base for this component
- Managed Attributes & Event Target
- Inter-component comm. via Top-Level Component
- I use Y.Base for this component
- Managed Attributes & Event Target
- Inter-component comm. via Top-Level Component
- I use Y.Base for this component
- Managed Attributes & Event Target
-------
- 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
-------
- 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
-------
- 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
-------
- 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
-------
- 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
- Managed dependencies
- Custom Modules, something new to YUI 3
--------
- usually 1:1 parity with components
- Managed dependencies
- Custom Modules, something new to YUI 3
--------
- usually 1:1 parity with components
- Managed dependencies
- Custom Modules, something new to YUI 3
--------
- usually 1:1 parity with components
- 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!
- 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 :-)
- 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 :-)
- 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 :-)
- 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).
- 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).
- 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).
- 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).
- 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 minified versions which will run in prod to test during dev
- Provides minified versions which will run in prod to test during dev
- Provides minified versions which will run in prod to test during dev
- Provides minified versions which will run in prod to test during dev
- config YUI along-side other project config
- Dynamic configuration, finalized at last minute
- Respond to changes in the software environment
- config YUI along-side other project config
- Dynamic configuration, finalized at last minute
- Respond to changes in the software environment
- config YUI along-side other project config
- Dynamic configuration, finalized at last minute
- Respond to changes in the software environment
- config YUI along-side other project config
- Dynamic configuration, finalized at last minute
- Respond to changes in the software environment
- config YUI along-side other project config
- Dynamic configuration, finalized at last minute
- Respond to changes in the software environment
- config YUI along-side other project config
- Dynamic configuration, finalized at last minute
- Respond to changes in the software environment
- You can tie your UI code w/ rest of project
- Nice to not tear everything down for small changes, like server
- You can tie your UI code w/ rest of project
- Nice to not tear everything down for small changes, like server
- You can tie your UI code w/ rest of project
- Nice to not tear everything down for small changes, like server
- You can tie your UI code w/ rest of project
- Nice to not tear everything down for small changes, like server
- You can tie your UI code w/ rest of project
- Nice to not tear everything down for small changes, like server