Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
2 December 2005
Web Technologies
Web Application Frameworks
Prof. Beat Signer
Department of Computer Science
Vrije Univers...
Beat Signer - Department of Computer Science - bsigner@vub.ac.be 2October 20, 2017
Web Application Frameworks
 There exis...
Beat Signer - Department of Computer Science - bsigner@vub.ac.be 3October 20, 2017
Web Application Frameworks ...
 A web ...
Beat Signer - Department of Computer Science - bsigner@vub.ac.be 4October 20, 2017
Model-View-Controller (MVC)
 Model
 d...
Beat Signer - Department of Computer Science - bsigner@vub.ac.be 5October 20, 2017
All-Inclusive MVC Frameworks
 Java
 A...
Beat Signer - Department of Computer Science - bsigner@vub.ac.be 6October 20, 2017
Apache Struts 2
 Free open source fram...
Beat Signer - Department of Computer Science - bsigner@vub.ac.be 7October 20, 2017
MVC Model 2 (MVC 2) in Struts 2
Model
P...
Beat Signer - Department of Computer Science - bsigner@vub.ac.be 8October 20, 2017
Apache Struts 2 Architecture
 Receive ...
Beat Signer - Department of Computer Science - bsigner@vub.ac.be 9October 20, 2017
DEMO: Struts 2 Form Validation
Beat Signer - Department of Computer Science - bsigner@vub.ac.be 10October 20, 2017
Spring Framework
 Java application fr...
Beat Signer - Department of Computer Science - bsigner@vub.ac.be 11October 20, 2017
Yii Framework
 PHP framework for the ...
Beat Signer - Department of Computer Science - bsigner@vub.ac.be 12October 20, 2017
Zend
 Open source PHP framework offer...
Beat Signer - Department of Computer Science - bsigner@vub.ac.be 13October 20, 2017
CakePHP
 Open source PHP web applicat...
Beat Signer - Department of Computer Science - bsigner@vub.ac.be 14October 20, 2017
DEMO: CakePHP
Beat Signer - Department of Computer Science - bsigner@vub.ac.be 15October 20, 2017
Ruby on Rails (RoR)
 Open source web ...
Beat Signer - Department of Computer Science - bsigner@vub.ac.be 16October 20, 2017
Ruby on Rails (RoR) ...
 Ruby on Rail...
Beat Signer - Department of Computer Science - bsigner@vub.ac.be 17October 20, 2017
DEMO: Ruby on Rails
Beat Signer - Department of Computer Science - bsigner@vub.ac.be 18October 20, 2017
Django
 Open source Python web applic...
Beat Signer - Department of Computer Science - bsigner@vub.ac.be 19October 20, 2017
Node.js
 Server-side JavaScript
 low...
Beat Signer - Department of Computer Science - bsigner@vub.ac.be 20October 20, 2017
ASP.NET MVC
 Web framework for .NET l...
Beat Signer - Department of Computer Science - bsigner@vub.ac.be 21October 20, 2017
Specialised Frameworks and Toolkits
 ...
Beat Signer - Department of Computer Science - bsigner@vub.ac.be 22October 20, 2017
Backbone.js
 Cleanly separate data (M...
Beat Signer - Department of Computer Science - bsigner@vub.ac.be 23October 20, 2017
Ember.js
 Client-side MVC
 Built for...
Beat Signer - Department of Computer Science - bsigner@vub.ac.be 24October 20, 2017
Angular
 Client-side "MVC"
 Two-way ...
Beat Signer - Department of Computer Science - bsigner@vub.ac.be 25October 20, 2017
Microsoft Silverlight
 Microsoft's pl...
Beat Signer - Department of Computer Science - bsigner@vub.ac.be 26October 20, 2017
Microsoft Silverlight ...
 Programmin...
Beat Signer - Department of Computer Science - bsigner@vub.ac.be 27October 20, 2017
Apache Flex
 Software development kit...
Beat Signer - Department of Computer Science - bsigner@vub.ac.be 28October 20, 2017
Apache Flex ...
 Flex applications ca...
Beat Signer - Department of Computer Science - bsigner@vub.ac.be 29October 20, 2017
NW.js
 Formerly node-webkit project
...
Beat Signer - Department of Computer Science - bsigner@vub.ac.be 30October 20, 2017
DEMO: NW.js
Beat Signer - Department of Computer Science - bsigner@vub.ac.be 31October 20, 2017
Electron
 Similar to NW.js
 Develope...
Beat Signer - Department of Computer Science - bsigner@vub.ac.be 32October 20, 2017
Web Content Management Systems
 Conte...
Beat Signer - Department of Computer Science - bsigner@vub.ac.be 33October 20, 2017
Exercise 4
 Java Servlets and Modern ...
Beat Signer - Department of Computer Science - bsigner@vub.ac.be 34October 20, 2017
References
 Struts 2 Quick Guide
 ht...
Beat Signer - Department of Computer Science - bsigner@vub.ac.be 35October 20, 2017
References ...
 Zend Framework
 http...
Beat Signer - Department of Computer Science - bsigner@vub.ac.be 36October 20, 2017
References ...
 ASP.NET MVC
 http://...
Beat Signer - Department of Computer Science - bsigner@vub.ac.be 37October 20, 2017
References ...
 Apache Flex
 http://...
2 December 2005
Next Lecture
CSS3 and Responsive Web Design
Upcoming SlideShare
Loading in …5
×

Web Application Frameworks - Web Technologies (1019888BNR)

404 views

Published on

This lecture is part of a Web Technologies course given at the Vrije Universiteit Brussel.

Published in: Education
  • Be the first to comment

Web Application Frameworks - Web Technologies (1019888BNR)

  1. 1. 2 December 2005 Web Technologies Web Application Frameworks Prof. Beat Signer Department of Computer Science Vrije Universiteit Brussel http://www.beatsigner.com
  2. 2. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 2October 20, 2017 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. 3. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 3October 20, 2017 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. 4. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 4October 20, 2017 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
  5. 5. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 5October 20, 2017 All-Inclusive MVC Frameworks  Java  Apache Struts 2  Spring  PHP  Yii  Zend  CakePHP  Ruby  Ruby on Rails  Python  Django  JavaScript  Node.js + Express.js  .NET (C#, Visual Basic)  ASP.NET MVC
  6. 6. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 6October 20, 2017 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. 7. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 7October 20, 2017 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. 8. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 8October 20, 2017 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. 9. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 9October 20, 2017 DEMO: Struts 2 Form Validation
  10. 10. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 10October 20, 2017 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. 11. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 11October 20, 2017 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. 12. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 12October 20, 2017 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. 13. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 13October 20, 2017 CakePHP  Open source PHP web application framework  MVC architectural pattern  rapid prototyping via scaffolding  authentication  localisation  session management  caching  validation  …
  14. 14. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 14October 20, 2017 DEMO: CakePHP
  15. 15. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 15October 20, 2017 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. 16. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 16October 20, 2017 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. 17. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 17October 20, 2017 DEMO: Ruby on Rails
  18. 18. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 18October 20, 2017 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. 19. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 19October 20, 2017 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. 20. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 20October 20, 2017 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. 21. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 21October 20, 2017 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. 22. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 22October 20, 2017 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. 23. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 23October 20, 2017 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. 24. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 24October 20, 2017 Angular  Client-side "MVC"  Two-way data binding between models and views  Users can define rich reusable UI components  small bundles of HTML, CSS and JS related to a UI component @Component({ selector: 'my-images', providers : [ImageService], styles: [ ` div { background-color: blue;} `] template: ` <div class='image_gallery'> <div *ngFor="#i of images"> <img src="{{i.path}}" alt="i.description"> </div> </div> ` })
  25. 25. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 25October 20, 2017 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. 26. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 26October 20, 2017 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. 27. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 27October 20, 2017 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. 28. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 28October 20, 2017 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. 29. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 29October 20, 2017 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. 30. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 30October 20, 2017 DEMO: NW.js
  31. 31. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 31October 20, 2017 Electron  Similar to NW.js  Developed for GitHub's Atom editor, now widely used
  32. 32. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 32October 20, 2017 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. 33. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 33October 20, 2017 Exercise 4  Java Servlets and Modern Web Application Frameworks
  34. 34. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 34October 20, 2017 References  Struts 2 Quick Guide  http://www.tutorialspoint.com/struts_2/struts_quick_guide.htm  Apache Struts 2  http://struts.apache.org  Ian Roughley, Struts 2  http://refcardz.dzone.com/refcardz/struts2  Spring Framework  http://www.springsource.org  Yii Framework  http://www.yiiframework.com
  35. 35. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 35October 20, 2017 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
  36. 36. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 36October 20, 2017 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/
  37. 37. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 37October 20, 2017 References ...  Apache Flex  http://flex.apache.org  NW.js  http://nwjs.io  Electron  http://electron.atom.io  Comparision of Web Application Frameworks  http://en.wikipedia.org/wiki/Comparison_of_web_ application_frameworks
  38. 38. 2 December 2005 Next Lecture CSS3 and Responsive Web Design

×