TỔNG ÔN TẬP THI VÀO LỚP 10 MÔN TIẾNG ANH NĂM HỌC 2023 - 2024 CÓ ĐÁP ÁN (NGỮ Â...
Web Application Frameworks - Web Technologies (1019888BNR)
1. 2 December 2005
Web Technologies
Web Application Frameworks
Prof. Beat Signer
Department of Computer Science
Vrije Universiteit Brussel
http://www.beatsigner.com
2. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 2October 21, 2016
Web Application Frameworks
There exist dozens of web application frameworks!
A web application framework is a software framework that
is designed to support the development of dynamic web-
sites, web applications, web services and web resources.
The framework aims to alleviate the overhead associated
with common activities performed in web development.
For example, many frameworks provide libraries for
database access, templating frameworks and session
management, and they often promote code reuse.
[http://en.wikipedia.org/wiki/Web_application_framework]
3. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 3October 21, 2016
Web Application Frameworks ...
A web application framework offers libraries and
tools to deal with web application issues
template libraries, session management, database access
libraries etc.
Some frameworks also offer an abstraction from the
underlying enabling technologies
e.g. automatic creation of Java Servlets
Many frameworks follow the Model-View-Controller (MVC)
design pattern
no mix of application logic and view (e.g. not like in JSP)
increases modularity and reusability
Lead to a faster and more robust development process
4. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 4October 21, 2016
Model-View-Controller (MVC)
Model
data (state) and business logic
multiple views can be defined for a single model
when the state of a model changes, its views are notified
View
renders the data of the model
notifies the controller about changes
Controller
processes interactions with the view
transforms view interactions into
operations on the model (state
modification)
Model
Controller
View
notifies
modifies
state
selects view
notifies
gets
state
6. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 6October 21, 2016
Apache Struts 2
Free open source framework for creating enterprise-
ready Java-based web applications
Action-based MVC Model 2 (Pull MVC) framework
combining Java Servlets and JSP technology
model
- action (basic building blocks) from which the view can pull information via the
ValueStack
- action represented by POJO (Plain Old Java Object) following the JavaBean
paradigm and optional helper classes
view
- template-based approach often based on JavaServer Pages (JSP) in
combination with tag libraries (collection of custom tags)
controller
- based on Java Servlet filter in combination with interceptors
7. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 7October 21, 2016
MVC Model 2 (MVC 2) in Struts 2
Model
POJOs
Database
Controller
Servlet
View
e.g. JSP
Browser
1
2
3
4
5
6
8. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 8October 21, 2016
Apache Struts 2 Architecture
Receive request
filter chain
- interception of requests and
responses, e.g. XSLT
transformation
Execute relevant Action
invoke interceptors
read/update data (model)
Build response (view)
often based on JSP template
interceptors in reverse order
Send response
again through filter chain
[http://struts.apache.org/2.1.6/docs/big-picture.html]
9. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 9October 21, 2016
DEMO: Struts 2 Form Validation
10. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 10October 21, 2016
Spring Framework
Java application framework
Various extensions for web applications
Modules
model-view-controller
data access
inversion of control container
convention-over-configuration
remote access framework
transaction management
authentication and authorisation
…
11. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 11October 21, 2016
Yii Framework
PHP framework for the development of Web 2.0
applications that offers a rich set of features
AJAX-enabled widgets
web service integration
authentication and authorisation
flexible presentation via skins and themes
Data Access Objects (DAO) interface to transparently access
different database management systems
integration with the jQuery JavaScript library
layered caching
...
12. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 12October 21, 2016
Zend
Open source PHP framework offering various features
MVC architectural pattern
loosely coupled components
object orientation
flexible caching
Simple Cloud API
features to deal with emails (POP3, IMAP4, …)
…
13. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 13October 21, 2016
CakePHP
Open source PHP web application framework
MVC architectural pattern
rapid prototyping via scaffolding
authentication
localisation
session management
caching
validation
…
14. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 14October 21, 2016
DEMO: CakePHP
15. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 15October 21, 2016
Ruby on Rails (RoR)
Open source web application framework
Combination of
dynamic, reflective, object-oriented programming language Ruby
- combination of Perl-inspired syntax with "Smalltalk features"
web application framework Rails
Based on MVC architectural pattern
structure of a webpage separated from its functionality via the
unobtrusive JavaScript technique
The scaffolding feature offered by Rails can
automatically generate some of the models and views
that are required for a website
developer has to run an external command to generate the code
16. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 16October 21, 2016
Ruby on Rails (RoR) ...
Ruby on Rails Philosophy
Don't Repeat Yourself (DRY)
- information should not be stored redundantly (e.g. do not store information in
configuration files if the data can be automatically derived by the system)
Convention over Configuration (CoC)
- programmer only has to specify unconventional application settings
- naming conventions to automatically map classes to database tables (e.g. by
default a 'Sale' model class is mapped to the 'sales' database table)
High modularity
plug-ins can be added for desired server-side functionality
use RubyGems package manager to easily add plug-ins (“gems”)
17. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 17October 21, 2016
DEMO: Ruby on Rails
18. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 18October 21, 2016
Django
Open source Python web application framework
MVC architectural pattern
don't repeat yourself (DRY)
object-relational mapper
- mapping between model (Python classes) and a relational database
integrated lightweight web server
localisation
caching
...
19. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 19October 21, 2016
Node.js
Server-side JavaScript
low-level, comparable to functionality offered by Servlets
handling post/get requests, database, sessions, …
Write your entire app in one language
however, server-side and client-side code still separated
Built-in web server (no need for Apache, Tomcat, etc.)
High modularity
packages can be added for additional functionality (via npm)
Other more powerful frameworks such as Express.js build
on top of Node.js
HTTP utility methods (routing, sessions, ...)
template engines (Jade or EJS)
20. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 20October 21, 2016
ASP.NET MVC
Web framework for .NET languages (C#, VB)
MVC architectural pattern
inversion of control container
extensible and pluggable framework
- can use any existing .NET libraries in the form of DLL files
- core components such as view engine or URL routing modules can be
replaced
can generate some of the client-side JavaScript for you
- form validation
- dynamic updates using Ajax
localisation
session management
caching
…
21. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 21October 21, 2016
Specialised Frameworks and Toolkits
Client-side web frameworks
Backbone.js
Ember.js
Angular.js
Creating browser-based RIAs
Microsoft Silverlight
Creating cross-platform RIAs
Apache Flex
Creating desktop applications
NW.js
Electron
22. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 22October 21, 2016
Backbone.js
Cleanly separate data (Model) and user interface (View)
you provide server-side interface to read/write models
Backbone.js does the rest on the client side
Model
load and save models from server
emit events when data changes
View
display models, capture user input and interactions
listens for changes and update view if needed
23. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 23October 21, 2016
Ember.js
Client-side MVC
Built for single-page web applications
information is refreshed dynamically on demand
no page refreshes required
Comes with Ember Data, a data persistence library
provides facilities for object-relational mapping (ORM)
maps client-side models to server-side data
usage is optional, you can also provide your own interface to the
server-side data
Users can create custom HTML tags ("components")
can also include logic relevant to the new tag’s function
- e.g. handle user input or deal with child elements placed in between the
custom tags
24. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 24October 21, 2016
Angular.js
Client-side "MVC"
Two-way data binding between models and views
Plain HTML as templates
HTML is extended (e.g. via attributes) to map models to the
template, remains valid HTML
Users can create custom HTML tags ("directives")
can also include logic relevant to the new tag’s function
<div ng-controller="AlbumCtrl">
<ul>
<li ng-repeat="image in images">
<img ng-src="{{image.thumbnail}}" alt="{{image.description}}">
</li>
</ul>
</div>
25. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 25October 21, 2016
Microsoft Silverlight
Microsoft's platform for Rich Internet Applications
competitor to Adobe Flash
Runtime requires a browser plug-in
Internet Explorer, Firefox, Safari and Google Chrome
Silverlight Core Common Language Runtime (CoreCLR)
A Silverlight application consists of
CreateSilverlight.js and Silverlight.js
- initialise the browser plug-in
user interface described in the Extensible Application Markup
Language (XAML)
- XAML files are not compiled indexable by search engines
code-behind file containing the program logic
26. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 26October 21, 2016
Microsoft Silverlight ...
Programming based on a subset of the .NET Framework
Silverlight introduces a set of features including
LocalConnection API
- asynchronous messaging between multiple applications on the same machine
out-of-browser experiences
- locally installed application that runs out-of-the-browser (OOB apps)
- cross-platform with Windows/Mac
microphone and Web cam support
27. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 27October 21, 2016
Apache Flex
Software development kit for cross-platform
Rich Internet Applications (RIAs) based on Adobe Flash
Main components
Adobe Flash Player runtime environment
Flex SDK (free)
- compiler and debugger, the Flex framework and user interface components
Adobe Flash Builder (commercial)
- Eclipse plug-in with MXML compiler and debugger
Separation of user interface and data
user interface described in MXML markup language in
combination with ActionScript
- compiled into flash executable (SWF flash movie)
28. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 28October 21, 2016
Apache Flex ...
Flex applications can also be deployed as mobile and
desktop applications via Adobe AIR (Adobe Integrated
Runtime)
<?xml version="1.0" encoding="UTF-8" ?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="horizontal">
<mx:Script>
<![CDATA[
import mx.controls.Alert;
private function sayHello():void {
Alert.show("Hello " + user.text);
}
]]>
</mx:Script>
<mx:Label fontSize="12" text="Name: " />
<mx:TextInput id="user" />
<mx:Button label="Go" click="sayHello()" />
</mx:Application>
HelloWorld.mxml
29. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 29October 21, 2016
NW.js
Formerly node-webkit project
Bundles your app for usage as desktop application
Webkit + Node.js + Application Files (HTML, JS, CSS, …)
Lets you call Node.js modules directly from DOM
e.g. use filesystem module to read and write files
Included API provides access to native UI features
right-click context menu
system tray icon
notifications
…
30. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 30October 21, 2016
DEMO: NW.js
31. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 31October 21, 2016
Electron
Similar to NW.js
Developed for GitHub's Atom editor, now widely used
32. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 32October 21, 2016
Web Content Management Systems
Content management systems that focus on web content
Main functionality
data storage and publishing, user management (including access
rights), versioning, workflows
Offline (create static webpages), online (create
webpages on the fly) and hybrid systems
Graphical interface for creating and managing content
Suited for non-technical users since the underlying
technology is normally completely hidden
Web CMS Examples
Joomla, Drupal, Wordpress, ...
33. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 33October 21, 2016
Exercise 4
Java Servlets and Modern Web Application
Frameworks