Web 2.0 Käyttöliittymätekniikat ELKOM 07 Sami Ekblad Projektipäällikkö Oy IT Mill Ltd
What is Web 2.0? Social side: user generated contents: comments, opinions, images, users own the data The Long Tail: low-popularity collectively creates higher quantity Technical side: the web as a platform: operating system is replaced by web browser a rich, interactive, user-friendly interface Continuous development: the perpetual beta
Evolution of Web Applications 1. Static web pages are used to create simple forms Server generated web pages Search engines, feedback forms, 2. Some dynamic content based on user input User blogs and comments, interactive search, 3. Interactive web pages Google Maps, portals, wikis, 4. Web pages that operate like desktop applications Operative applications, ERP systems,
Web 2.0 Samples Users create their own videos and publish them online Simple blogging service Users create and share image galleries Users can sell their real estate using a web service
Web application development Building social web applications
Web 2.0 Development Software as a Service (or ASP) model Centralized applications used over the internet Applications are ready to be used immediately Server vs. browser-side programming No installations for users server is the only distribution channel Move as many functions as possible to browsers (Javascript) Continuous development Frequent version updates Feedback from users Large amount of data On-demand display of data New, intuitive ways of presenting data Sharing of data between users High usability requirements
Web 2.0 Technologies AJAX ( Asynchronous JavaScript and XML ) The most common technique for creating interactive web applications DOM ( Document Object Model ) object model for representing HTML and XML RIA ( Rich Internet Applications ) Web applications that have all the features and functionality of traditional desktop applications Mashups Combine data from more than one source into an integrated experience RSS 2.0 ( Really Simple Syndication ) XML based web feed formats used to publish frequently updated digital content SOA ( Service-Oriented Architecture ) An architecture of loosely coupled services to support the requirements of business processes and users Open Source Use of Open source software either completely or partially
Web application architecture 1. The application is accessed over the internet with a web browser Presentation of information Graphics, layouts, animations, 2. Web application server Combines the data into views 3. Loosely coupled services (SOA) Solve single business processes For example: Application login process
Development tools Browser-side tools Based on JavaScript Run in web browsers (sandbox) Visual effects, animations, data retrieval Server-side tools Run in centralized servers Programming language like PHP, Java, C#, Ruby, More traditional approach Hide the web from developers Rich Web Client- applications: Starting applications over the internet Usually require a browser plugin Prototype Dojo GWT ( Google Web Toolkit ) Echo2 (Java EE) IT Mill Toolkit (Java EE) Sajax (PHP) Symphony (PHP) Adobe Flex 2 Macromedia Flash ActiveX Components Java Applets / Swing
AJAX Technologies Αἴας (=Ajax) - Greek hero, the son of Telamon and Periboea and king of Salamis. (source: wikipedia)
AJAX (Asynchronous JavaScript and XML) Move the presentation logic to browser More functions to browsers No installations, but JavaScript must be enabled Abuse of old technologies: HTTP XMLHTTPRequest DOM ja HTML XSS (Cross-site scripting) Used by major vendors since 2005 Browser support: IE 6 ja Firefox Better network connections
Classic vs. AJAX processing Classic processing model 1. User clicks login 2. Valididate user name on server-side 3. Display login error message Browser Browser HTTP HTTP Server
Classic vs. AJAX processing AJAX processing model 1. User clicks login 2. Valididate user name on server-side 3. Display login error message Browser Page is not reloaded Browser Server A JavaScript call AJAX engine HTTP HTTP AJAX engine DOM Manipulation
AJAX Examples Dynamic content loading Infinite amount of rows in a table Dynamic filtering of a drop down list On-demand loading of graphical data
AJAX Benefits Communication is faster only the changed parts of displays are transferred Better scalability Part of the application is running on web browser Real-time data presented in a web browser Push data from server to client User-friendly interfaces It is possible to use more graphics Less waiting and screen flicker
AJAX Downsides Not designed for search engines No pages and therefore nothing to index Browser incompatibility Different level of support in different browsers More network connections Less data, but more HTTP requests Offline use is not possible Is not a real client-server application Security model must be carefully planned Are the web browsers secure enough?
Future of Web 2.0 New technologies still emerge JavaScript 2.0 Windows Vista ja WPF/e Adobe Flex Mobile-AJAX Open environment Open programming interfaces (API) Extendability ( mashup -applications) OpenAjax Alliance: Mix and match solutions from different Ajax technology providers More like evolution than revolution Wider adoption of techniques Internal applications and daily used applications Lots of smaller enhancements Users play an active role: Users are more demanding than ever Users as developers -model Ease-of-use, graphics, speed,
Thank You IT Mill in brief: Finnish specialist in internet-based applications Tools and services for the development of RIA applications IT Mill Toolkit Components for RIA applications The most comprehensive browser support Easy-to-learn and based on Java language