Download - Best Practice Guidelines in Using Ajax With
-
8/14/2019 Best Practice Guidelines in Using Ajax With
1/36
Best PracticeBest PracticeGuidelinesGuidelinesin using Ajax with Javain using Ajax with JavaServer FacesServer Faces
Craig R. McClanahanCraig R. McClanahanSenior Staff EngineerSenior Staff Engineer
Sun Microsystems, IncSun Microsystems, Inc.
-
8/14/2019 Best Practice Guidelines in Using Ajax With
2/36
2
Agenda
Background
Best practice guidelines
Examples:> Auto Complete Text Component> DynaFaces AJAX Zones
Summary
Resources
-
8/14/2019 Best Practice Guidelines in Using Ajax With
3/36
BackgroundsBackgrounds
-
8/14/2019 Best Practice Guidelines in Using Ajax With
4/36
4
Background
Building AJAX based applications is easy...> If you are a JavaScript guru> If you have memorized the entire DOM API>
If you own and study books on DHTML, JavaScript, CSS,AJAX, and useful hacks for each technology
Building AJAX based applications is hard...> If you come from a mostly static HTML/CSS background> If you are comfortable with traditional web application
architectures built around an HTTP POST> If your primary use of JavaScript is cut-n-paste of cute
animations and other cool in-page behaviors
-
8/14/2019 Best Practice Guidelines in Using Ajax With
5/36
5
Background
Can we make this process easier formere mortals?
Classic computer science answer: encapsulation> Hide functionality behind simple building blocks
> Provide a framework for assembling complicated thingsout of simple things
> Embed the encapsulations inside development tools thatcan do some of the grunt work
JavaServer Faces components encapsulate AJAXtechnologies
-
8/14/2019 Best Practice Guidelines in Using Ajax With
6/36
Best Practice GuidelinesBest Practice Guidelines
-
8/14/2019 Best Practice Guidelines in Using Ajax With
7/367
Architectural Decisions
To AJAX or not to AJAX, that is the question ...
Render markup + code or just code?
Manage client side interactions
Access static resources
Asynchronous callbacks client side view
Asynchronous callbacks server side view
-
8/14/2019 Best Practice Guidelines in Using Ajax With
8/36
Architectural Decisions:Architectural Decisions:To Ajax or Not to Ajax?To Ajax or Not to Ajax?
-
8/14/2019 Best Practice Guidelines in Using Ajax With
9/369
To AJAX Or Not To AJAX ...
First inclination when talking about AJAX and JSF:> Create AJAX-aware versions of every component
When does this make sense?> Individual component needs remote access for state:
Assumption: visualization depends on server state changes
Example: Progress Bar (for server side process)
Example: RSS News Headlines (that dynamically change)
Example: Is this username already taken? validation> Individual component needs remote access for data:
Assumption: too much data to load with the initial page
Examples: Auto Complete Text Field, Table, Tree Control
-
8/14/2019 Best Practice Guidelines in Using Ajax With
10/3610
To AJAX Or Not To AJAX ...
When does this not make sense?> Primarily interested inpartial page submit:
Grab a subset of the input elements on this page, and ...
Submit them to update server side state ...
Without requiring a full page submit
> Primarily interested inpartial page refresh: Respond to a partial page submit by ...
Updatingpartof the current view ...
Without requiring a full page redisplay
Frameworks exist to provide these facilities for anyJavaServer Faces component>
We will see an example later
-
8/14/2019 Best Practice Guidelines in Using Ajax With
11/36
11
To AJAX Or Not To AJAX ...
Recommendations:> Design or use AJAX enabled components when
necessary>
Use frameworks to managepartial page submitandpartial page refresh scenarios
-
8/14/2019 Best Practice Guidelines in Using Ajax With
12/36
Architectural Decisions:Architectural Decisions:Render Markup+Code orRender Markup+Code orJust Code?Just Code?
-
8/14/2019 Best Practice Guidelines in Using Ajax With
13/36
13
Render Markup+Code Or Just Code
First inclination when talking about AJAX and JSF:> Render all the markup and related JavaScript code for
each component individually>
Note: Applies to non-AJAX components also When does this make sense?
> Markup is very simple and/or highly use case specific> Corresponding JavaScript code is very simple
> Note: Hybrid solution is also feasible: Generate custom markup per component
Reference JavaScript libraries for code common to alloccurrences of a particular component
-
8/14/2019 Best Practice Guidelines in Using Ajax With
14/36
14
Render Markup+Code Or Just Code?
When does that not make sense?> Markup is complex> Corresponding JavaScript code is complex>
Using a JavaScript widget library for rendering Recommendations:
> Use JavaScript widget libraries when feasible: JSF renders JS code to create and configure the widget
> Factor per-component JavaScript into static resources: Leverage client side caching
Ensure that required resources are loaded transparently
Ensure that required resources are loaded once per page
-
8/14/2019 Best Practice Guidelines in Using Ajax With
15/36
Architectural Decisions:Architectural Decisions:Manage Client sideManage Client sideInteractionsInteractions
-
8/14/2019 Best Practice Guidelines in Using Ajax With
16/36
16
Manage Client Side Interactions
First inclination when talking about AJAX and JSF:> Create custom JavaScript APIs to interact with other
client side components>
Note: Applies to non-AJAX components also When does this make sense?
> Providing functionality above and beyond standardJavaScript event handlers
Such as an asynchronous callback to update state> Encapsulating complex interactions
Such as coordinated updates of multiple client side elements
-
8/14/2019 Best Practice Guidelines in Using Ajax With
17/36
17
Manage Client Side Interactions
When does this not make sense?> When standard JavaScript event handlers are sufficient
Leverage developer familiarity
>
When you want to support unanticipated interactions Document enough about internal architecture to allow this
Recommendations:> Use standard client side interaction paradigms:
JavaScript object per widget Standard event handlers where feasible
> Consider event-driven or publish/subscribe paradigms> JSF Specific be aware of component id generation
algorithms
-
8/14/2019 Best Practice Guidelines in Using Ajax With
18/36
Architectural Decisions:Architectural Decisions:Access Static ResourcesAccess Static Resources
-
8/14/2019 Best Practice Guidelines in Using Ajax With
19/36
19
Access Static Resources
First inclination when talking about AJAX and JSF:> Embed all required JavaScript and stylesheets in the
generated markup of each component> Note: Applies to non-AJAX components also
When does this make sense?> When the required JavaScript is very simple and/or use
case specific
> When the required stylesheet information is very simpleand use case specific
-
8/14/2019 Best Practice Guidelines in Using Ajax With
20/36
20
Access Static Resources
When does this not make sense?> JavaScript for a particular component can be factored
into a common library> CSS styles can be factored into common stylesheets that
can be overridden by the developer
Recommendations:> Factor JavaScript and CSS into static resources
> Ensure that only one copy of each resource gets loadedinto a single page
> Trigger runtime loading of static resources transparently Developer should not need to care that your component needs
a particular script file or stylesheet
-
8/14/2019 Best Practice Guidelines in Using Ajax With
21/36
Architectural Decisions:Architectural Decisions:Asynchronous CallbacksAsynchronous Callbacks
-
8/14/2019 Best Practice Guidelines in Using Ajax With
22/36
22
Asynchronous Callbacks Client
First inclination when talking about AJAX and JSF:> Hand code the XMLHttpRequest handling individually for
each component
When does this make sense?> Basically never :-)
When does this not make sense?> Basically always :-)
-
8/14/2019 Best Practice Guidelines in Using Ajax With
23/36
23
Asynchronous Callbacks Client
Recommendations:> Encapsulate XMLHttpRequest handling into common
JavaScript functions Per component, or ideally, per library
> Leverage existing JavaScript frameworks: More elegant client side APIs
Hide browser dependencies
> Leverage facilities of the server side framework: See next section ...
-
8/14/2019 Best Practice Guidelines in Using Ajax With
24/36
24
Asynchronous Callbacks Server
First inclination when talking about AJAX and JSF:> Write a custom servlet for each component's
asynchronous callback handler
When does this make sense?> In simple use cases> When the client side is not your JSF component library
When does this not make sense?> Asynchronous callback needs to access and/or update
the JSF component tree for the current view> Need to manage data serialization and deserialization
Affects client side also
-
8/14/2019 Best Practice Guidelines in Using Ajax With
25/36
25
Asynchronous Callbacks Server
Recommendations:> Leverage JSF server side framework capabilities:
JSF component state for PPS/PPR use cases
Managed beans for simple IoC requirements Can integrate more complex frameworks for non-simple use cases
Method binding expresions to invoke server side logic
> Utilize libraries and frameworks for data transport: Common formats: XML and JSON
Minimize requirements imposed on the server side developeras well as the client side developer
> Support non-JSF-component clients: Not every UI will be created with JSF, or even Java
Not every callback will be from a browser
-
8/14/2019 Best Practice Guidelines in Using Ajax With
26/36
ExamplesExamples
-
8/14/2019 Best Practice Guidelines in Using Ajax With
27/36
27
Examples
Auto Complete Text Field Component
Dynamic Faces (DynaFaces) AJAX Zones
-
8/14/2019 Best Practice Guidelines in Using Ajax With
28/36
28
Auto Complete Text Field
-
8/14/2019 Best Practice Guidelines in Using Ajax With
29/36
29
Auto Complete Text Field
To AJAX Or Not To AJAX:> Provide embedded AJAX functionality
Render Markup+Code Or Just Markup:
> Hybrid: custom (simple) markup, shared JavaScript Client Side Interactions:
> Component creates well-known DOM element ids>
Standard JavaScript events plus two custom ones Access Static Resources
> Shale Remoting library
-
8/14/2019 Best Practice Guidelines in Using Ajax With
30/36
30
Auto Complete Text Field
Asynchronous Callbacks Client Side:> Standard JavaScript object per component instance> Utilize DOJO Toolkit for asynchronous IO>
Simple XML data format Asynchronous Callbacks Server Side:
> No need to access JSF component tree state> Component-provided managed bean for callback handler> Component invokes application-provided method (with
simple API) to provide dataApplication developer does not need to know the gory details
-
8/14/2019 Best Practice Guidelines in Using Ajax With
31/36
DemoDemo
-
8/14/2019 Best Practice Guidelines in Using Ajax With
32/36
32
Dynamic Faces (DynaFaces)
Extension framework for JavaServer Faces 1.1/1.2> Built on top of standard extension APIs
Delivers solutions for several of our focus areas:
> To AJAX Or Not To AJAX:AJAX Zones for partial page refresh scenarios
Works with non-AJAXified components
> Client Side Interactions:
Trigger asynchronous callbacks programmatically Deferred transactions for post-callback event handling
> Server Side Interactions: Fire server side event handlers
Manage client-server data formatting
-
8/14/2019 Best Practice Guidelines in Using Ajax With
33/36
Summary &Summary &ResourcesResources
-
8/14/2019 Best Practice Guidelines in Using Ajax With
34/36
34
Summary
JavaServer Faces was originally targeted as atraditional server-side-markup-generationcomponent framework
JavaServer Faces can be leveraged in many waysto build AJAX-based web applications
JavaServer Faces supports the use of AJAXtechniques on components not specifically designed
for AJAX interactions
-
8/14/2019 Best Practice Guidelines in Using Ajax With
35/36
-
8/14/2019 Best Practice Guidelines in Using Ajax With
36/36
Best PracticeBest PracticeGuidelinesGuidelines
in using Ajax with Javain using Ajax with JavaServer FacesServer Faces
Craig R. McClanahanCraig R. McClanahanSenior Staff EngineerSenior Staff Engineer
Sun Microsystems, IncSun Microsystems, Inc.