Professional Documents
Culture Documents
Web Based Frameworks PDF
Web Based Frameworks PDF
▪ 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
View
▪ notifies the controller about changes
selects view
4
ALL-INCLUSIVE MVC
FRAMEWORKS
▪ Java ▪ JavaScript
▪ Apache Struts 2 ▪ Node.js + Express.js
▪ Spring ▪ .NET (C#, Visual Basic)
▪ PHP ▪ ASP.NET MVC
▪ Yii
▪ Zend
▪ CakePHP
▪ Ruby
▪ Ruby on Rails
▪ Python
▪ Django
5
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
6
MVC MODEL 2 (MVC 2) IN
STRUTS 2
View
6 e.g. JSP
1 4
Browser Controller
Servlet 5
3
Model
2
POJOs
Database
7
APACHE STRUTS 2
ARCHITECTURE
▪ Receive request
▪ filter chain
- interception of requests
and responses, e.g. XSLT
transformation
9
YII
FRAMEWOR
K
▪ 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
▪ ...
10
ZEN
D
▪ 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, …)
▪ …
11
CAKEP
HP
▪ Open source PHP web application framework
▪ MVC architectural pattern
▪ rapid prototyping via scaffolding
▪ authentication
▪ localisation
▪ session management
▪ caching
▪ validation
▪ …
12
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
13
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”)
14
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
▪ ...
15
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)
16
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
▪ …
17
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
18
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
19
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
20
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
<div ng-controller="AlbumCtrl">
<ul>
<li ng-repeat="image in images">
<img ng-src="{{image.thumbnail}}" alt="{{image.description}}">
</li>
</ul>
</div>
22
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
23
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
24
APACHE FLEX ...
▪ Flex applications can also be deployed as mobile and
desktop applications via Adobe AIR (Adobe Integrated
Runtime)
25
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
▪ …
26
ELECTRON
▪ Similar to NW.js
▪ Developed for GitHub's Atom editor, now widely used
27
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, ...
28
REFERENCES
▪ Struts 2 Quick Guide
▪ http://www.tutorialspoint.com/struts_2/struts_quick_guide.htm
▪ Apache Struts 2
▪ http://struts.apache.org
▪ Spring Framework
▪ http://www.springsource.org
▪ Yii Framework
▪ http://www.yiiframework.com
29
REFERENCES ...
▪ Zend Framework
▪ http://framework.zend.com
▪ CakePHP
▪ http://cakephp.org
▪ Ruby on Rails
▪ http://rubyonrails.org
▪ Django
▪ https://www.djangoproject.com
▪ Node.js
▪ http://nodejs.org
▪ http://expressjs.com
30
REFERENCES ...
▪ ASP.NET MVC
▪ http://www.asp.net/mvc
▪ Backbone.js
▪ http://backbonejs.org
▪ Ember.js
▪ http://emberjs.com
▪ Angular.js
▪ https://angularjs.org
▪ Microsoft Silverlight
▪ http://www.microsoft.com/silverlight/
▪ http://silverlight.net/learn/videos/silverlight-videos/net-ria-services-intro/
31
REFERENCES ...
▪ Apache Flex
▪ http://flex.apache.org
▪ NW.js
▪ http://nwjs.io
▪ Electron
▪ http://electron.atom.io
32