32
Amélie Cordier, January 2011 [email protected] This handout is strongly inspired by the MIF13 course of Lionel Medini http://www710.univ-lyon1.fr/~lmedini/MIF13/

Amélie Cordier, January 2011 amelie.cordier@univ-lyon1 · Workflows Storing and publication of different kinds of contents Page templates and WYSIWYG editors A lot of additional

  • Upload
    others

  • View
    0

  • Download
    0

Embed Size (px)

Citation preview

Page 1: Amélie Cordier, January 2011 amelie.cordier@univ-lyon1 · Workflows Storing and publication of different kinds of contents Page templates and WYSIWYG editors A lot of additional

Amélie Cordier, January 2011

[email protected]

This handout is strongly inspired by the MIF13 course of Lionel Medinihttp://www710.univ-lyon1.fr/~lmedini/MIF13/

Page 2: Amélie Cordier, January 2011 amelie.cordier@univ-lyon1 · Workflows Storing and publication of different kinds of contents Page templates and WYSIWYG editors A lot of additional

Discovering the existence of numerous tools to help us designing Web applications◦ No more developments from scratch◦ No more waist of time◦ Real-world application development conditions

Knowing of to organise the various tools◦ Languages / IDE◦ Type of functionalities◦ Compatibility (or not!)

Knowing of to choose a tool (a set of tool) according to the requirements the application

[email protected] - 4 - Libraries and Frameworks 2

Page 3: Amélie Cordier, January 2011 amelie.cordier@univ-lyon1 · Workflows Storing and publication of different kinds of contents Page templates and WYSIWYG editors A lot of additional

A Web applications uses external code to perform specific services◦ Security?

◦ Persistence?

◦ ...

Who controls the workflow?◦ In general: your code? Someone else code?

◦ In classical programming? Where is the main?

◦ In MVC? Who handles the controller?

[email protected] - 4 - Libraries and Frameworks 3

Page 4: Amélie Cordier, January 2011 amelie.cordier@univ-lyon1 · Workflows Storing and publication of different kinds of contents Page templates and WYSIWYG editors A lot of additional

[email protected] - 4 - Libraries and Frameworks 4

Page 5: Amélie Cordier, January 2011 amelie.cordier@univ-lyon1 · Workflows Storing and publication of different kinds of contents Page templates and WYSIWYG editors A lot of additional

Main idea: REUSE

Same idea than in classical design◦ Examples: AWT, Swing

Specificities of the Web tools:◦ Numerous

◦ Heterogeneous

◦ More frameworks

Question: what tool shall I choose? How?

[email protected] - 4 - Libraries and Frameworks 5

Page 6: Amélie Cordier, January 2011 amelie.cordier@univ-lyon1 · Workflows Storing and publication of different kinds of contents Page templates and WYSIWYG editors A lot of additional

A library is a set of components designed to perform specific functionalities

Libraries for the Web◦ Most of them are dedicated to interface components

◦ AJAX communications

◦ Server-side specific libraries (security)

How to choose a library?◦ Support of the community, liveliness

◦ Adapted to other tools deployed within the application

◦ Should be transparent for the end-user

[email protected] - 4 - Libraries and Frameworks 6

Page 7: Amélie Cordier, January 2011 amelie.cordier@univ-lyon1 · Workflows Storing and publication of different kinds of contents Page templates and WYSIWYG editors A lot of additional

Persistence◦ Java: ORMs, JPA

◦ PHP & MySQL: Flat-file SQL

Security◦ Java: WebCastellum

Authentication◦ Java: Jguard, JXplorer (LDAP support)

◦ PHP: PHP OpenID Library

[email protected] - 4 - Libraries and Frameworks 7

Page 8: Amélie Cordier, January 2011 amelie.cordier@univ-lyon1 · Workflows Storing and publication of different kinds of contents Page templates and WYSIWYG editors A lot of additional

Tag JSP: JSF

Templates for Web Sites◦ Basic design: often replaced by CSS

◦ Page components

Dynamically managed

Examples: datasets, forms, menus

JavaScript◦ Interface components

◦ Programming components

XSLT transformations

[email protected] - 4 - Libraries and Frameworks 8

Page 9: Amélie Cordier, January 2011 amelie.cordier@univ-lyon1 · Workflows Storing and publication of different kinds of contents Page templates and WYSIWYG editors A lot of additional

JavaScript libraries to help coding◦ Swallow structure◦ Only usable for small applications

Server-side tools to generate pages associated to libraries◦ Implies to have a good structure of the application

Examples:◦ Generic: Jquery, SAJAX, DHTMLX, JsHTTPRequest◦ Java: JSP Tags Library◦ PHP: XAJAX, PhpLiveX◦ .Net: ASP.Net AJAX, ...

[email protected] - 4 - Libraries and Frameworks 9

Page 10: Amélie Cordier, January 2011 amelie.cordier@univ-lyon1 · Workflows Storing and publication of different kinds of contents Page templates and WYSIWYG editors A lot of additional

Dedicated to a specific programming language

Use a complier to generate JavaScript code◦ Clearer and cleaner code

◦ Client-side code not mastered

Examples:◦ Java: DWR, GWT, IceFaces

◦ Python: Pyjamas

◦ .Net: ASP.Net AJAX

◦ ...

[email protected] - 4 - Libraries and Frameworks 10

Page 11: Amélie Cordier, January 2011 amelie.cordier@univ-lyon1 · Workflows Storing and publication of different kinds of contents Page templates and WYSIWYG editors A lot of additional

Description:◦ Components for Web application generation

◦ Components for Asynchronous HTTP communication

◦ Compiler Java to JavaScript

◦ Availability of an extensions library (GWTexT)

Website:◦ http://code.google.com/webtoolkit/

JavaDoc:◦ http://google-web-

toolkit.googlecode.com/svn/javadoc/1.6/index.html

[email protected] - 4 - Libraries and Frameworks 11

Page 12: Amélie Cordier, January 2011 amelie.cordier@univ-lyon1 · Workflows Storing and publication of different kinds of contents Page templates and WYSIWYG editors A lot of additional

Remark: a Web Server is a Framework!

A Web framework is an additional abstraction level with regard to the Web server◦ Pattern MVC

◦ AJAX-oriented

◦ Handle additional services: transactions, security, communications with distant objects, ...

◦ Dedicated to a specific purpose: business, communication between users, teaching, data sharing, ...

[email protected] - 4 - Libraries and Frameworks 12

Page 13: Amélie Cordier, January 2011 amelie.cordier@univ-lyon1 · Workflows Storing and publication of different kinds of contents Page templates and WYSIWYG editors A lot of additional

Security◦ Authentication, user-rights management, roles management,

access limitation

Connexion with databases◦ Standardized API, ORM, transactions, versions management

URL re-writing◦ Avoid CGI-URL◦ Example : /page.cgi?cat=science&topic=physics =>

/page/science/physics

Templates Web◦ For common page structures◦ Examples: data tables, charts, ...

[email protected] - 4 - Libraries and Frameworks 13

Page 14: Amélie Cordier, January 2011 amelie.cordier@univ-lyon1 · Workflows Storing and publication of different kinds of contents Page templates and WYSIWYG editors A lot of additional

AJAX

Automatic settings◦ Using introspection to generate page elements

◦ Example: using an ORM in order to handle automatically object persistence

Web services◦ Generate outputs as web services between the application

layer and the view layer

◦ Often linked to a template engine

[email protected] - 4 - Libraries and Frameworks 14

Page 15: Amélie Cordier, January 2011 amelie.cordier@univ-lyon1 · Workflows Storing and publication of different kinds of contents Page templates and WYSIWYG editors A lot of additional

Issues:◦ How to organise all the servlets and JSP of an application?

◦ How to manage the control-flow of the application?

An historical viewpoint:◦ 1. JSP everywhere

◦ 2. Servlets for control-flow, JSP for treatments

◦ 3. Model MVC push-based

◦ 4. Model MVC pull-based

Additional reading:◦ http://struts.apache.org/1.x/userGuide/introduction.html

[email protected] - 4 - Libraries and Frameworks 15

Page 16: Amélie Cordier, January 2011 amelie.cordier@univ-lyon1 · Workflows Storing and publication of different kinds of contents Page templates and WYSIWYG editors A lot of additional

Definition:◦ A controller uses actions in order to compute contents

◦ Contents are pushed to the view layer

Examples:◦ Java: Struts

◦ Python: Django

◦ Ruby: Ruby on rails

◦ PHP: Symfony, CakePHP

◦ .Net: ASP.Net MVC

[email protected] - 4 - Libraries and Frameworks 16

Page 17: Amélie Cordier, January 2011 amelie.cordier@univ-lyon1 · Workflows Storing and publication of different kinds of contents Page templates and WYSIWYG editors A lot of additional

Definition:◦ The view “pull” contents of several controllers, each one being

dedicated to a specific task

◦ Several controllers can contribute to the creation of a single view

◦ Example: use-case controllers

Examples:◦ Java: Struts2, Tapestry, JBoss Seam

◦ Python: Zope

◦ .Net: .NetNuke

[email protected] - 4 - Libraries and Frameworks 17

Page 18: Amélie Cordier, January 2011 amelie.cordier@univ-lyon1 · Workflows Storing and publication of different kinds of contents Page templates and WYSIWYG editors A lot of additional

Description:◦ MVC Framework◦ Created in May 2000 by Craig R. McClanahan◦ URL: http://struts.apache.org/◦ Javadoc: http://struts.apache.org/1.x/struts-core/apidocs/

Content:◦ One main controller, plus additional specific controllers◦ A library of specific JSP tags◦ A tool for forms management◦ A mapping between forms and Java objects◦ A validation tool for forms◦ A template engine (Tiles)◦ ...

[email protected] - 4 - Libraries and Frameworks 18

Page 19: Amélie Cordier, January 2011 amelie.cordier@univ-lyon1 · Workflows Storing and publication of different kinds of contents Page templates and WYSIWYG editors A lot of additional

Controller◦ ActionServlet (main controller): catch requests and dispatch them to

the actions, on the basis of the URLs (struts-config.xml)

◦ Actions (secondary controllers): manage the communication with the model and send results to the view

Model◦ Any class provided it is known by the actions

◦ JavaBeans: standardisation of the properties accessed by the view

View◦ Most of the time: JSP displaying the results of the treatments made

by the model

◦ Possibilities of extensions: JSF, AJAX, etc.

[email protected] - 4 - Libraries and Frameworks 19

Page 20: Amélie Cordier, January 2011 amelie.cordier@univ-lyon1 · Workflows Storing and publication of different kinds of contents Page templates and WYSIWYG editors A lot of additional

[email protected] - 4 - Libraries and Frameworks 20

Page 22: Amélie Cordier, January 2011 amelie.cordier@univ-lyon1 · Workflows Storing and publication of different kinds of contents Page templates and WYSIWYG editors A lot of additional

Collaborative tools (user management)

Document management tools◦ Workflows

◦ Storing and publication of different kinds of contents

◦ Page templates and WYSIWYG editors

◦ A lot of additional modules for specific purposes

Examples:◦ PHP: SPIP, PHP-Nuke, Joomla!

◦ Python: Plone

◦ Java: OpenCMS, AlFresco

[email protected] - 4 - Libraries and Frameworks 22

Page 23: Amélie Cordier, January 2011 amelie.cordier@univ-lyon1 · Workflows Storing and publication of different kinds of contents Page templates and WYSIWYG editors A lot of additional

Main idea: combining several contents from various applications in the same web interface.

Often associated to the notion of portal

Examples:◦ University portals (do you have one?)

◦ IGoogle

◦ NetVibes

Technologies:◦ Java: WSRP

◦ PHP: PhpPortlets

[email protected] - 4 - Libraries and Frameworks 23

Page 24: Amélie Cordier, January 2011 amelie.cordier@univ-lyon1 · Workflows Storing and publication of different kinds of contents Page templates and WYSIWYG editors A lot of additional

Idea: connecting an application to a well-know application

Examples:◦ Google, FaceBook, YouTube, Ebay

Advantages:◦ A quick way to improve applications

◦ Enable one to attract more users

Additional reading:◦ http://www.programmableweb.com/apis/directory

[email protected] - 4 - Libraries and Frameworks 24

Page 25: Amélie Cordier, January 2011 amelie.cordier@univ-lyon1 · Workflows Storing and publication of different kinds of contents Page templates and WYSIWYG editors A lot of additional

?

[email protected] - 4 - Libraries and Frameworks 25

Page 26: Amélie Cordier, January 2011 amelie.cordier@univ-lyon1 · Workflows Storing and publication of different kinds of contents Page templates and WYSIWYG editors A lot of additional

Reuse as a design principle◦ Objective: reduce the development to the business logic

Specificity of the Web tools◦ A lot of tools◦ Quick evolution of technologies and trends◦ Several technologies for a single application Hard to master

Hard to implement and to maintain

Libraries and / or framework? ◦ Importance of the analysis phase when designing a new

application◦ What are the needs and requirements?

[email protected] - 4 - Libraries and Frameworks 26

Page 27: Amélie Cordier, January 2011 amelie.cordier@univ-lyon1 · Workflows Storing and publication of different kinds of contents Page templates and WYSIWYG editors A lot of additional

Compatibility issues◦ Between tools

◦ With Web Browsers

◦ With the other systems with which you want to connect your application

Warning: try to estimate the integration time when reusing components!

[email protected] - 4 - Libraries and Frameworks 27

Page 28: Amélie Cordier, January 2011 amelie.cordier@univ-lyon1 · Workflows Storing and publication of different kinds of contents Page templates and WYSIWYG editors A lot of additional

What is the gain: services / complexity of the tool?

Is the framework designed for your purpose? ◦ Do not use a framework designed for document management

if you want to develop an application for communication between users!

Evolution issues◦ Scalability

◦ Integration of new services

◦ Integration of forthcoming technologies

[email protected] - 4 - Libraries and Frameworks 28

Page 29: Amélie Cordier, January 2011 amelie.cordier@univ-lyon1 · Workflows Storing and publication of different kinds of contents Page templates and WYSIWYG editors A lot of additional

Modularity issues◦ Think about the components of your application

◦ Work on a detailed analysis of the project before choosing the technical solutions

◦ Search for existing solution (in order to reuse them) instead of implementing everything

What if the interface of a library does not match your requirements?◦ Should you modify your specifications?

◦ Can you use an adapter pattern?

◦ Is it the good library?

[email protected] - 4 - Libraries and Frameworks 29

Page 30: Amélie Cordier, January 2011 amelie.cordier@univ-lyon1 · Workflows Storing and publication of different kinds of contents Page templates and WYSIWYG editors A lot of additional

Why should you use standard solutions?◦ If you want to integrate your application with existing

applications

◦ If you want other applications to connect with your application

◦ In order to foresee the possibility of changing the interface

RIA / RDA

New browsers / Mobile browsers

Web services

[email protected] - 4 - Libraries and Frameworks 30

Page 31: Amélie Cordier, January 2011 amelie.cordier@univ-lyon1 · Workflows Storing and publication of different kinds of contents Page templates and WYSIWYG editors A lot of additional

Web 2.0 and 3.0 ◦ Social◦ Collaborative◦ Semantic (including non-textual contents)

Dynamic Web◦ VOD◦ Synchronous communication (RSS, Twitter)◦ Web conferences

Mobility◦ Mobile platforms◦ Geo-localisation (FourSquare, GoogleSites)◦ Mobile phones features (GPS, barcode reading, Googles)◦ ...

[email protected] - 4 - Libraries and Frameworks 31

Page 32: Amélie Cordier, January 2011 amelie.cordier@univ-lyon1 · Workflows Storing and publication of different kinds of contents Page templates and WYSIWYG editors A lot of additional

HTML 5◦ Standards well-established◦ Advanced tools for presentation◦ Support for various (and numerous) types of content◦ Strong interactions with contents◦ Better interactions with users

Examples◦ http://www.youtube.com/watch?v=OxoFcyKYwr0◦ http://people.opera.com/howcome/2010/forms/◦ http://www.youtube.com/watch?v=EdDc7sWjCL4

[email protected] - 4 - Libraries and Frameworks 32